@itwin/itwinui-css 0.45.0 → 0.48.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 (43) hide show
  1. package/css/all.css +699 -710
  2. package/css/badge.css +4 -2
  3. package/css/button.css +31 -96
  4. package/css/color-picker.css +26 -21
  5. package/css/expandable-block.css +12 -0
  6. package/css/inputs.css +498 -503
  7. package/css/popover.css +3 -3
  8. package/css/side-navigation.css +2 -4
  9. package/css/skip-to-content.css +51 -0
  10. package/css/table.css +10 -49
  11. package/css/tile.css +42 -15
  12. package/css/tree.css +21 -15
  13. package/package.json +2 -2
  14. package/scss/badge/badge.scss +5 -2
  15. package/scss/button/button-group.scss +19 -41
  16. package/scss/button/button.scss +19 -1
  17. package/scss/button/classes.scss +0 -1
  18. package/scss/button/default.scss +1 -0
  19. package/scss/classes.scss +1 -0
  20. package/scss/color-picker/color-picker.scss +57 -52
  21. package/scss/expandable-block/block.scss +23 -0
  22. package/scss/index.scss +1 -0
  23. package/scss/inputs/checkbox-radio.scss +17 -136
  24. package/scss/inputs/checkbox.scss +77 -43
  25. package/scss/inputs/classes.scss +15 -9
  26. package/scss/inputs/index.scss +1 -0
  27. package/scss/inputs/input-with-icon.scss +36 -0
  28. package/scss/inputs/input.scss +1 -0
  29. package/scss/inputs/labeled-inputs.scss +49 -14
  30. package/scss/inputs/radio.scss +9 -3
  31. package/scss/inputs/select.scss +44 -93
  32. package/scss/popover/popover.scss +7 -6
  33. package/scss/side-navigation/side-navigation.scss +3 -6
  34. package/scss/skip-to-content/classes.scss +7 -0
  35. package/scss/skip-to-content/index.scss +3 -0
  36. package/scss/skip-to-content/skip-to-content.scss +37 -0
  37. package/scss/style/mixins.scss +29 -4
  38. package/scss/style/variables.scss +1 -0
  39. package/scss/table/paginator.scss +5 -10
  40. package/scss/tile/classes.scss +4 -0
  41. package/scss/tile/tile.scss +17 -16
  42. package/scss/tree/classes.scss +4 -0
  43. package/scss/tree/tree.scss +17 -4
package/css/all.css CHANGED
@@ -483,6 +483,8 @@ html.iui-theme-dark{
483
483
  outline-color:var(--iui-color-foreground-primary); }
484
484
 
485
485
  .iui-badge{
486
+ --iui-badge-background-color:#C7CCD1;
487
+ --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
486
488
  margin:0;
487
489
  padding:0;
488
490
  border:none;
@@ -492,8 +494,8 @@ html.iui-theme-dark{
492
494
  padding:0 6px;
493
495
  margin:6px 0;
494
496
  border-radius:3px;
495
- background-color:var(--badge-color, #C7CCD1);
496
- color:var(--badge-text-color, rgba(0, 0, 0, 0.6));
497
+ background-color:var(--iui-badge-background-color);
498
+ color:var(--_iui-badge-text-color);
497
499
  text-transform:uppercase;
498
500
  -webkit-user-select:none;
499
501
  -moz-user-select:none;
@@ -643,6 +645,7 @@ html.iui-theme-dark{
643
645
  fill:var(--iui-icons-color-negative); }
644
646
 
645
647
  .iui-button{
648
+ --_iui-button-active-stripe-inset:initial;
646
649
  margin:0;
647
650
  padding:0;
648
651
  border:none;
@@ -656,7 +659,6 @@ html.iui-theme-dark{
656
659
  box-sizing:border-box;
657
660
  border-radius:3px;
658
661
  line-height:22px;
659
- outline:none;
660
662
  box-shadow:none;
661
663
  font-size:14px;
662
664
  font-weight:400;
@@ -698,6 +700,13 @@ html.iui-theme-dark{
698
700
  background:var(--iui-color-background-disabled);
699
701
  border-color:var(--iui-color-background-disabled);
700
702
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
703
+ .iui-button.iui-active::after{
704
+ content:'';
705
+ position:absolute;
706
+ inset:var(--_iui-button-active-stripe-inset);
707
+ background-color:var(--iui-color-foreground-primary); }
708
+ .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
709
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
701
710
  .iui-button.iui-default{
702
711
  background-color:#FFF;
703
712
  border-color:rgba(0, 0, 0, 0.4);
@@ -904,133 +913,61 @@ html.iui-theme-dark{
904
913
  isolation:isolate; }
905
914
  .iui-button-group > *{
906
915
  display:flex; }
907
- .iui-button-group > * input, .iui-button-group > * button{
916
+ .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
908
917
  position:relative;
909
- transition-duration:0ms; }
910
- .iui-button-group > * input:hover, .iui-button-group > * button:hover{
918
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
919
+ .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
911
920
  z-index:1; }
912
- .iui-button-group > * input:focus, .iui-button-group > * button:focus{
921
+ .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
913
922
  z-index:2; }
914
- .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
915
- z-index:revert; }
916
- .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
923
+ .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled="true"], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled="true"], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
917
924
  z-index:-1; }
918
- .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * button:hover, .iui-button-group > * button:focus{
925
+ .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
926
+ border-radius:0;
927
+ transition-duration:0ms; }
928
+ .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
919
929
  transition-duration:0.2s; }
920
- .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
921
- content:'';
922
- position:absolute;
923
- height:2px;
924
- opacity:1;
925
- top:2px;
926
- left:2px;
927
- width:calc(100% - 4px);
928
- background-color:#008BE1;
929
- background-color:var(--iui-color-foreground-primary); }
930
- .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
931
- background-color:rgba(0, 0, 0, 0.2);
932
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
933
- .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
934
- border-radius:0; }
935
- .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
930
+ .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
936
931
  border-top-left-radius:3px;
937
932
  border-bottom-left-radius:3px; }
938
- .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
933
+ .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
939
934
  border-top-right-radius:3px;
940
935
  border-bottom-right-radius:3px; }
941
936
  .iui-button-group > * + *{
942
937
  margin-left:-1px; }
943
- .iui-button-group > *:not(:first-child) .iui-default:disabled{
938
+ .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
944
939
  border-left-color:#DCE0E3;
945
940
  border-left-color:var(--iui-color-background-4); }
946
941
 
947
942
  .iui-button-split-menu{
948
- display:inline-flex;
949
- align-items:center;
950
- isolation:isolate;
951
943
  display:inline-flex;
952
944
  align-items:center;
953
945
  isolation:isolate; }
954
946
  .iui-button-split-menu > *{
955
947
  display:flex; }
956
- .iui-button-split-menu > * input, .iui-button-split-menu > * button{
948
+ .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
957
949
  position:relative;
958
- transition-duration:0ms; }
959
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
950
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
951
+ .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
960
952
  z-index:1; }
961
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
953
+ .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
962
954
  z-index:2; }
963
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
964
- z-index:revert; }
965
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
955
+ .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled="true"], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled="true"], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
966
956
  z-index:-1; }
967
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
968
- transition-duration:0.2s; }
969
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
970
- content:'';
971
- position:absolute;
972
- height:2px;
973
- opacity:1;
974
- top:2px;
975
- left:2px;
976
- width:calc(100% - 4px);
977
- background-color:#008BE1;
978
- background-color:var(--iui-color-foreground-primary); }
979
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
980
- background-color:rgba(0, 0, 0, 0.2);
981
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
982
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
983
- border-radius:0; }
984
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
985
- border-top-left-radius:3px;
986
- border-bottom-left-radius:3px; }
987
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
988
- border-top-right-radius:3px;
989
- border-bottom-right-radius:3px; }
990
- .iui-button-split-menu > * + *{
991
- margin-left:-1px; }
992
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
993
- border-left-color:#DCE0E3;
994
- border-left-color:var(--iui-color-background-4); }
995
- .iui-button-split-menu > *{
996
- display:flex; }
997
- .iui-button-split-menu > * input, .iui-button-split-menu > * button{
998
- position:relative;
957
+ .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
958
+ border-radius:0;
999
959
  transition-duration:0ms; }
1000
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
1001
- z-index:1; }
1002
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
1003
- z-index:2; }
1004
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
1005
- z-index:revert; }
1006
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
1007
- z-index:-1; }
1008
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
960
+ .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
1009
961
  transition-duration:0.2s; }
1010
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
1011
- content:'';
1012
- position:absolute;
1013
- height:2px;
1014
- opacity:1;
1015
- top:2px;
1016
- left:2px;
1017
- width:calc(100% - 4px);
1018
- background-color:#008BE1;
1019
- background-color:var(--iui-color-foreground-primary); }
1020
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1021
- background-color:rgba(0, 0, 0, 0.2);
1022
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1023
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1024
- border-radius:0; }
1025
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
962
+ .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
1026
963
  border-top-left-radius:3px;
1027
964
  border-bottom-left-radius:3px; }
1028
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
965
+ .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
1029
966
  border-top-right-radius:3px;
1030
967
  border-bottom-right-radius:3px; }
1031
968
  .iui-button-split-menu > * + *{
1032
969
  margin-left:-1px; }
1033
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
970
+ .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
1034
971
  border-left-color:#DCE0E3;
1035
972
  border-left-color:var(--iui-color-background-4); }
1036
973
  .iui-button-split-menu:hover{
@@ -1244,6 +1181,7 @@ html.iui-theme-dark{
1244
1181
  color:var(--iui-text-color-muted); }
1245
1182
 
1246
1183
  .iui-color-picker{
1184
+ --iui-color-picker-selected-color:initial;
1247
1185
  margin:0;
1248
1186
  padding:0;
1249
1187
  border:none;
@@ -1324,34 +1262,43 @@ html.iui-theme-dark{
1324
1262
  appearance:none; }
1325
1263
 
1326
1264
  .iui-color-swatch{
1265
+ --iui-color-swatch-background:initial;
1327
1266
  height:24px;
1328
1267
  width:24px;
1329
1268
  cursor:pointer;
1330
1269
  border-radius:5px;
1331
- background-color:var(--swatch-color);
1332
1270
  margin-bottom:4px;
1333
1271
  margin-right:4px;
1334
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1335
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1272
+ position:relative;
1273
+ background-color:var(--iui-color-swatch-background);
1274
+ background-position:0 0, 8px 8px;
1275
+ background-size:16px 16px;
1276
+ background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
1277
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
1336
1278
  @supports (gap: 8px){
1337
1279
  .iui-color-swatch{
1338
1280
  margin-bottom:0;
1339
1281
  margin-right:0; } }
1282
+ .iui-color-swatch::after{
1283
+ content:'';
1284
+ position:absolute;
1285
+ width:inherit;
1286
+ height:inherit;
1287
+ border-radius:inherit;
1288
+ background-color:inherit;
1289
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1340
1290
  .iui-color-swatch:hover{
1341
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1342
1291
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1343
1292
  .iui-color-swatch:focus-visible{
1344
1293
  outline:2px solid var(--iui-color-foreground-primary);
1345
- outline-offset:0; }
1294
+ outline-offset:1px; }
1346
1295
  @supports not selector(*:focus-visible){
1347
1296
  .iui-color-swatch:focus{
1348
1297
  outline:2px solid var(--iui-color-foreground-primary);
1349
- outline-offset:0; } }
1298
+ outline-offset:1px; } }
1350
1299
  .iui-color-swatch.iui-active{
1351
- box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1352
1300
  box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1353
1301
  .iui-color-swatch.iui-active:hover{
1354
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
1355
1302
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
1356
1303
 
1357
1304
  .iui-color-picker-section-label{
@@ -1367,12 +1314,12 @@ html.iui-theme-dark{
1367
1314
  min-width:280px; }
1368
1315
 
1369
1316
  .iui-color-field{
1317
+ --iui-color-field-hue:initial;
1370
1318
  position:relative;
1371
1319
  cursor:crosshair;
1372
1320
  width:100%;
1373
1321
  height:209px;
1374
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
1375
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
1322
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
1376
1323
  .iui-color-field:not(:last-child){
1377
1324
  margin-bottom:6px; }
1378
1325
 
@@ -1386,37 +1333,32 @@ html.iui-theme-dark{
1386
1333
 
1387
1334
  .iui-opacity-slider .iui-slider-rail{
1388
1335
  height:8px;
1389
- background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
1390
1336
  background-position:0 0, 4px 4px;
1391
1337
  background-size:8px 8px;
1392
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
1393
- background-position:0 0, 4px 4px;
1394
- background-size:8px 8px; }
1338
+ background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
1339
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
1395
1340
  .iui-opacity-slider .iui-slider-rail::before{
1396
1341
  display:block;
1397
1342
  content:'';
1398
1343
  width:100%;
1399
1344
  height:100%;
1400
- background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
1345
+ background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%); }
1401
1346
 
1402
1347
  .iui-opacity-slider .iui-slider-thumb{
1403
1348
  top:7px; }
1404
1349
 
1405
1350
  .iui-color-dot{
1351
+ --iui-color-dot-inset:initial;
1406
1352
  position:absolute;
1407
- top:var(--top, 0%);
1408
- left:var(--left, 0%);
1353
+ inset:var(--iui-color-dot-inset);
1409
1354
  width:16px;
1410
1355
  height:16px;
1411
1356
  border-radius:50%;
1412
1357
  transform:translate(-8px, -8px);
1413
1358
  cursor:crosshair;
1414
- box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
1415
- background-color:var(--selected-color);
1416
1359
  box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
1417
- background-color:var(--selected-color); }
1360
+ background-color:var(--iui-color-picker-selected-color); }
1418
1361
  .iui-color-dot:hover{
1419
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1420
1362
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1421
1363
  .iui-color-dot:focus-visible{
1422
1364
  outline:2px solid var(--iui-color-foreground-primary);
@@ -1699,6 +1641,18 @@ html.iui-theme-dark{
1699
1641
  margin-left:8px; }
1700
1642
  .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
1701
1643
  margin-left:8px; }
1644
+ .iui-expandable-block.iui-borderless,
1645
+ .iui-expandable-block.iui-borderless .iui-header,
1646
+ .iui-expandable-block.iui-borderless .iui-expandable-content{
1647
+ background-color:transparent;
1648
+ border:initial; }
1649
+ .iui-expandable-block.iui-borderless .iui-header{
1650
+ border-radius:3px; }
1651
+ .iui-expandable-block.iui-borderless .iui-header:hover{
1652
+ background-color:rgba(0, 0, 0, 0.1);
1653
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
1654
+ .iui-expandable-block.iui-borderless .iui-expandable-content > div{
1655
+ padding:0; }
1702
1656
 
1703
1657
  .iui-fieldset{
1704
1658
  margin:0;
@@ -2566,9 +2520,9 @@ html.iui-theme-dark{
2566
2520
  .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
2567
2521
  margin-top:3px; }
2568
2522
  .iui-input-container .iui-input,
2523
+ .iui-input-container .iui-input-with-icon,
2569
2524
  .iui-input-container .iui-textarea,
2570
- .iui-input-container .iui-input-group,
2571
- .iui-input-container .iui-select{
2525
+ .iui-input-container .iui-input-group{
2572
2526
  -ms-grid-row:2;
2573
2527
  -ms-grid-column:1;
2574
2528
  -ms-grid-column-span:2;
@@ -2582,8 +2536,8 @@ html.iui-theme-dark{
2582
2536
  cursor:not-allowed; }
2583
2537
  .iui-input-container.iui-disabled label{
2584
2538
  cursor:not-allowed; }
2585
- .iui-input-container .iui-checkbox,
2586
- .iui-input-container .iui-radio{
2539
+ .iui-input-container .iui-checkbox-wrapper,
2540
+ .iui-input-container .iui-radio-wrapper{
2587
2541
  min-height:22px; }
2588
2542
  .iui-input-container.iui-inline-label{
2589
2543
  -ms-grid-rows: auto;
@@ -2592,9 +2546,9 @@ html.iui-theme-dark{
2592
2546
  div.iui-input-container.iui-inline-label{
2593
2547
  -ms-grid-columns:auto min-content auto; }
2594
2548
  .iui-input-container.iui-inline-label .iui-input,
2549
+ .iui-input-container.iui-inline-label .iui-input-with-icon,
2595
2550
  .iui-input-container.iui-inline-label .iui-textarea,
2596
- .iui-input-container.iui-inline-label .iui-input-group,
2597
- .iui-input-container.iui-inline-label .iui-select{
2551
+ .iui-input-container.iui-inline-label .iui-input-group{
2598
2552
  -ms-grid-row:1;
2599
2553
  -ms-grid-column:2; }
2600
2554
  .iui-input-container.iui-inline-label .iui-input-icon{
@@ -2638,7 +2592,7 @@ html.iui-theme-dark{
2638
2592
  margin-left:4px;
2639
2593
  color:#D30A0A;
2640
2594
  color:var(--iui-color-foreground-negative); }
2641
- .iui-input-container > .iui-input-icon{
2595
+ .iui-input-container .iui-input-icon{
2642
2596
  -ms-grid-row:3;
2643
2597
  -ms-grid-column:1;
2644
2598
  display:flex;
@@ -2649,7 +2603,7 @@ html.iui-theme-dark{
2649
2603
  align-self:center;
2650
2604
  fill:rgba(0, 0, 0, 0.4);
2651
2605
  fill:var(--iui-icons-color); }
2652
- .iui-input-container > .iui-input-icon:not(:last-child){
2606
+ .iui-input-container .iui-input-icon:not(:last-child){
2653
2607
  margin-right:4px; }
2654
2608
  .iui-input-container .iui-message{
2655
2609
  -ms-grid-row:3;
@@ -2664,19 +2618,17 @@ html.iui-theme-dark{
2664
2618
  -moz-user-select:none;
2665
2619
  -ms-user-select:none;
2666
2620
  user-select:none; }
2667
- .iui-input-container.iui-inline-label > .iui-label{
2668
- margin:0 16px 0 0;
2669
- -ms-grid-column-span:1; }
2670
- .iui-input-container.iui-inline-label > .iui-label.iui-required{
2671
- margin-right:6px; }
2672
2621
  .iui-input-container.iui-inline-icon > .iui-input-icon{
2673
2622
  -ms-grid-row:1;
2674
2623
  -ms-grid-column:3;
2675
2624
  grid-area:inputs;
2676
2625
  -ms-grid-column-align:end;
2677
2626
  justify-self:end;
2678
- margin:0 12px 0 0;
2627
+ margin:0 14px 0 0;
2679
2628
  position:relative; }
2629
+ .iui-input-container.iui-inline-icon > .iui-input-icon svg{
2630
+ width:16px;
2631
+ height:16px; }
2680
2632
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
2681
2633
  height:100%;
2682
2634
  width:-webkit-fit-content;
@@ -2684,11 +2636,13 @@ html.iui-theme-dark{
2684
2636
  width:fit-content;
2685
2637
  margin-right:0;
2686
2638
  border-top-left-radius:0;
2687
- border-bottom-left-radius:0; }
2639
+ border-bottom-left-radius:0;
2640
+ border-top-right-radius:inherit;
2641
+ border-bottom-right-radius:inherit; }
2688
2642
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
2689
2643
  align-items:center;
2690
2644
  height:90%;
2691
- margin-right:1px;
2645
+ margin-right:2px;
2692
2646
  padding:0 12px;
2693
2647
  cursor:pointer;
2694
2648
  background-position:center;
@@ -2700,13 +2654,21 @@ html.iui-theme-dark{
2700
2654
  background-size:100%;
2701
2655
  transition:background 0s; }
2702
2656
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
2703
- width:16px;
2704
- height:16px;
2705
2657
  fill:rgba(0, 0, 0, 0.4);
2706
2658
  fill:var(--iui-icons-color);
2707
2659
  transition:transform 0.2s ease-out; }
2708
2660
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
2709
2661
  transform:rotate(180deg); }
2662
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
2663
+ cursor:not-allowed; }
2664
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
2665
+ fill:rgba(0, 0, 0, 0.2);
2666
+ fill:var(--iui-icons-color-actionable-disabled); }
2667
+ .iui-input-container.iui-inline-label > .iui-label{
2668
+ margin:0 16px 0 0;
2669
+ -ms-grid-column-span:1; }
2670
+ .iui-input-container.iui-inline-label > .iui-label.iui-required{
2671
+ margin-right:6px; }
2710
2672
  .iui-input-container.iui-positive *::-moz-selection{
2711
2673
  background-color:rgba(83, 162, 26, 0.4);
2712
2674
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
@@ -2727,29 +2689,39 @@ html.iui-theme-dark{
2727
2689
  text-decoration:none;
2728
2690
  color:#3c7613;
2729
2691
  color:var(--iui-color-foreground-positive-overlay); }
2730
- .iui-input-container.iui-positive > .iui-input,
2731
- .iui-input-container.iui-positive > .iui-textarea,
2732
- .iui-input-container.iui-positive > .iui-select > .iui-select-button{
2692
+ .iui-input-container.iui-positive .iui-input,
2693
+ .iui-input-container.iui-positive .iui-textarea{
2733
2694
  padding-bottom:6px;
2734
2695
  border-bottom:2px solid #53A21A;
2735
2696
  border-bottom:2px solid var(--iui-color-foreground-positive); }
2736
- .iui-input-container.iui-positive > .iui-input.iui-small,
2737
- .iui-input-container.iui-positive > .iui-textarea.iui-small,
2738
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-small{
2697
+ .iui-input-container.iui-positive .iui-input.iui-small,
2698
+ .iui-input-container.iui-positive .iui-textarea.iui-small{
2739
2699
  padding-bottom:0.5px; }
2740
- .iui-input-container.iui-positive > .iui-input.iui-large,
2741
- .iui-input-container.iui-positive > .iui-textarea.iui-large,
2742
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-large{
2700
+ .iui-input-container.iui-positive .iui-input.iui-large,
2701
+ .iui-input-container.iui-positive .iui-textarea.iui-large{
2743
2702
  padding-bottom:11.5px; }
2744
- .iui-input-container.iui-positive > .iui-input:focus,
2745
- .iui-input-container.iui-positive > .iui-textarea:focus,
2746
- .iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
2703
+ .iui-input-container.iui-positive .iui-input:focus,
2704
+ .iui-input-container.iui-positive .iui-textarea:focus{
2747
2705
  border-bottom:2px solid #53A21A;
2748
2706
  outline:2px solid #53A21A;
2749
2707
  outline-offset:-2px;
2750
2708
  border-bottom:2px solid var(--iui-color-foreground-positive);
2751
2709
  outline:2px solid var(--iui-color-foreground-positive);
2752
2710
  outline-offset:-2px; }
2711
+ .iui-input-container.iui-positive .iui-input-with-icon{
2712
+ --_hover-color:var(--iui-color-foreground-positive);
2713
+ --_focus-color:var(--iui-color-foreground-positive); }
2714
+ .iui-input-container.iui-positive .iui-select-button{
2715
+ border-bottom:transparent; }
2716
+ .iui-input-container.iui-positive .iui-select-button::after{
2717
+ content:'';
2718
+ width:100%;
2719
+ position:absolute;
2720
+ bottom:0;
2721
+ left:0;
2722
+ height:2px;
2723
+ background-color:#53A21A;
2724
+ background-color:var(--iui-color-foreground-positive); }
2753
2725
  .iui-input-container.iui-negative *::-moz-selection{
2754
2726
  background-color:rgba(211, 10, 10, 0.4);
2755
2727
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
@@ -2770,29 +2742,39 @@ html.iui-theme-dark{
2770
2742
  text-decoration:none;
2771
2743
  color:#a20808;
2772
2744
  color:var(--iui-color-foreground-negative-overlay); }
2773
- .iui-input-container.iui-negative > .iui-input,
2774
- .iui-input-container.iui-negative > .iui-textarea,
2775
- .iui-input-container.iui-negative > .iui-select > .iui-select-button{
2745
+ .iui-input-container.iui-negative .iui-input,
2746
+ .iui-input-container.iui-negative .iui-textarea{
2776
2747
  padding-bottom:6px;
2777
2748
  border-bottom:2px solid #D30A0A;
2778
2749
  border-bottom:2px solid var(--iui-color-foreground-negative); }
2779
- .iui-input-container.iui-negative > .iui-input.iui-small,
2780
- .iui-input-container.iui-negative > .iui-textarea.iui-small,
2781
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-small{
2750
+ .iui-input-container.iui-negative .iui-input.iui-small,
2751
+ .iui-input-container.iui-negative .iui-textarea.iui-small{
2782
2752
  padding-bottom:0.5px; }
2783
- .iui-input-container.iui-negative > .iui-input.iui-large,
2784
- .iui-input-container.iui-negative > .iui-textarea.iui-large,
2785
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-large{
2753
+ .iui-input-container.iui-negative .iui-input.iui-large,
2754
+ .iui-input-container.iui-negative .iui-textarea.iui-large{
2786
2755
  padding-bottom:11.5px; }
2787
- .iui-input-container.iui-negative > .iui-input:focus,
2788
- .iui-input-container.iui-negative > .iui-textarea:focus,
2789
- .iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
2756
+ .iui-input-container.iui-negative .iui-input:focus,
2757
+ .iui-input-container.iui-negative .iui-textarea:focus{
2790
2758
  border-bottom:2px solid #D30A0A;
2791
2759
  outline:2px solid #D30A0A;
2792
2760
  outline-offset:-2px;
2793
2761
  border-bottom:2px solid var(--iui-color-foreground-negative);
2794
2762
  outline:2px solid var(--iui-color-foreground-negative);
2795
2763
  outline-offset:-2px; }
2764
+ .iui-input-container.iui-negative .iui-input-with-icon{
2765
+ --_hover-color:var(--iui-color-foreground-negative);
2766
+ --_focus-color:var(--iui-color-foreground-negative); }
2767
+ .iui-input-container.iui-negative .iui-select-button{
2768
+ border-bottom:transparent; }
2769
+ .iui-input-container.iui-negative .iui-select-button::after{
2770
+ content:'';
2771
+ width:100%;
2772
+ position:absolute;
2773
+ bottom:0;
2774
+ left:0;
2775
+ height:2px;
2776
+ background-color:#D30A0A;
2777
+ background-color:var(--iui-color-foreground-negative); }
2796
2778
  .iui-input-container.iui-warning *::-moz-selection{
2797
2779
  background-color:rgba(241, 139, 18, 0.4);
2798
2780
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
@@ -2813,29 +2795,39 @@ html.iui-theme-dark{
2813
2795
  text-decoration:none;
2814
2796
  color:#c4700c;
2815
2797
  color:var(--iui-color-foreground-warning-overlay); }
2816
- .iui-input-container.iui-warning > .iui-input,
2817
- .iui-input-container.iui-warning > .iui-textarea,
2818
- .iui-input-container.iui-warning > .iui-select > .iui-select-button{
2798
+ .iui-input-container.iui-warning .iui-input,
2799
+ .iui-input-container.iui-warning .iui-textarea{
2819
2800
  padding-bottom:6px;
2820
2801
  border-bottom:2px solid #F18B12;
2821
2802
  border-bottom:2px solid var(--iui-color-foreground-warning); }
2822
- .iui-input-container.iui-warning > .iui-input.iui-small,
2823
- .iui-input-container.iui-warning > .iui-textarea.iui-small,
2824
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
2803
+ .iui-input-container.iui-warning .iui-input.iui-small,
2804
+ .iui-input-container.iui-warning .iui-textarea.iui-small{
2825
2805
  padding-bottom:0.5px; }
2826
- .iui-input-container.iui-warning > .iui-input.iui-large,
2827
- .iui-input-container.iui-warning > .iui-textarea.iui-large,
2828
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
2806
+ .iui-input-container.iui-warning .iui-input.iui-large,
2807
+ .iui-input-container.iui-warning .iui-textarea.iui-large{
2829
2808
  padding-bottom:11.5px; }
2830
- .iui-input-container.iui-warning > .iui-input:focus,
2831
- .iui-input-container.iui-warning > .iui-textarea:focus,
2832
- .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
2809
+ .iui-input-container.iui-warning .iui-input:focus,
2810
+ .iui-input-container.iui-warning .iui-textarea:focus{
2833
2811
  border-bottom:2px solid #F18B12;
2834
2812
  outline:2px solid #F18B12;
2835
2813
  outline-offset:-2px;
2836
2814
  border-bottom:2px solid var(--iui-color-foreground-warning);
2837
2815
  outline:2px solid var(--iui-color-foreground-warning);
2838
2816
  outline-offset:-2px; }
2817
+ .iui-input-container.iui-warning .iui-input-with-icon{
2818
+ --_hover-color:var(--iui-color-foreground-warning);
2819
+ --_focus-color:var(--iui-color-foreground-warning); }
2820
+ .iui-input-container.iui-warning .iui-select-button{
2821
+ border-bottom:transparent; }
2822
+ .iui-input-container.iui-warning .iui-select-button::after{
2823
+ content:'';
2824
+ width:100%;
2825
+ position:absolute;
2826
+ bottom:0;
2827
+ left:0;
2828
+ height:2px;
2829
+ background-color:#F18B12;
2830
+ background-color:var(--iui-color-foreground-warning); }
2839
2831
 
2840
2832
  .iui-input-label{
2841
2833
  font-weight:600;
@@ -2943,7 +2935,70 @@ html.iui-theme-dark{
2943
2935
  border-color:#EEF0F3;
2944
2936
  background-color:var(--iui-color-background-disabled);
2945
2937
  border-color:var(--iui-color-background-disabled);
2938
+ cursor:not-allowed;
2939
+ --_hover-color:var(--iui-color-background-disabled); }
2940
+
2941
+ .iui-select-button{
2942
+ width:100%;
2943
+ margin:0;
2944
+ border-radius:3px;
2945
+ box-sizing:border-box;
2946
+ padding:7px 12px;
2947
+ min-height:38px;
2948
+ transition:border-color 0.2s ease-out;
2949
+ display:flex;
2950
+ align-items:center;
2951
+ -webkit-user-select:none;
2952
+ -moz-user-select:none;
2953
+ -ms-user-select:none;
2954
+ user-select:none;
2955
+ position:relative;
2956
+ overflow:hidden;
2957
+ color:rgba(0, 0, 0, 0.8);
2958
+ background-color:#FFF;
2959
+ border:1px solid rgba(0, 0, 0, 0.4);
2960
+ color:var(--iui-text-color);
2961
+ background-color:var(--iui-color-background-1);
2962
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
2963
+ .iui-select-button:focus-visible{
2964
+ outline:2px solid var(--iui-color-foreground-primary);
2965
+ outline-offset:-2px; }
2966
+ @supports not selector(*:focus-visible){
2967
+ .iui-select-button:focus{
2968
+ outline:2px solid var(--iui-color-foreground-primary);
2969
+ outline-offset:-2px; } }
2970
+ .iui-select-button.iui-small{
2971
+ padding-top:1.5px;
2972
+ padding-bottom:1.5px;
2973
+ min-height:27px; }
2974
+ .iui-select-button.iui-large{
2975
+ padding-top:12.5px;
2976
+ padding-bottom:12.5px;
2977
+ min-height:49px;
2978
+ font-size:16px; }
2979
+ .iui-select-button.iui-disabled{
2980
+ background-color:#EEF0F3;
2981
+ border-color:#EEF0F3;
2982
+ background-color:var(--iui-color-background-disabled);
2983
+ border-color:var(--iui-color-background-disabled);
2984
+ --_hover-color:var(--iui-color-background-disabled);
2946
2985
  cursor:not-allowed; }
2986
+ .iui-select-button .iui-icon{
2987
+ width:16px;
2988
+ height:16px;
2989
+ flex:0 0 auto;
2990
+ fill:rgba(0, 0, 0, 0.8);
2991
+ fill:var(--iui-icons-color-actionable);
2992
+ fill:currentColor; }
2993
+ .iui-select-button .iui-icon + .iui-content{
2994
+ margin-left:8px; }
2995
+ .iui-select-button .iui-content{
2996
+ overflow:hidden;
2997
+ white-space:nowrap;
2998
+ text-overflow:ellipsis; }
2999
+ .iui-select-button.iui-placeholder{
3000
+ color:rgba(0, 0, 0, 0.2);
3001
+ color:var(--iui-text-color-placeholder); }
2947
3002
 
2948
3003
  .iui-textarea{
2949
3004
  margin:0;
@@ -3031,487 +3086,381 @@ html.iui-theme-dark{
3031
3086
  border-color:#EEF0F3;
3032
3087
  background-color:var(--iui-color-background-disabled);
3033
3088
  border-color:var(--iui-color-background-disabled);
3034
- cursor:not-allowed; }
3089
+ cursor:not-allowed;
3090
+ --_hover-color:var(--iui-color-background-disabled); }
3035
3091
  .iui-textarea[disabled], .iui-textarea[readonly]{
3036
3092
  resize:none; }
3037
3093
 
3038
- .iui-select{
3039
- margin:0;
3040
- padding:0;
3041
- border:none;
3042
- vertical-align:baseline;
3094
+ .iui-input-with-icon{
3095
+ display:-ms-grid;
3096
+ display:grid;
3097
+ align-items:center;
3098
+ cursor:pointer; }
3099
+ .iui-input-with-icon > :first-child{
3100
+ -ms-grid-row:1;
3101
+ grid-area:1 / -1;
3102
+ padding-right:40px; }
3103
+ .iui-input-with-icon:focus-within > :first-child{
3104
+ outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
3105
+ outline-offset:-2px; }
3106
+ .iui-input-with-icon:hover > :first-child{
3107
+ border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2))); }
3108
+
3109
+ .iui-end-icon{
3110
+ -ms-grid-row:1;
3111
+ -ms-grid-column:3;
3112
+ grid-area:inputs;
3113
+ -ms-grid-column-align:end;
3114
+ justify-self:end;
3115
+ margin:0 14px 0 0;
3116
+ position:relative;
3043
3117
  display:flex;
3044
- flex-direction:column;
3118
+ grid-area:1 / -1; }
3119
+ .iui-end-icon svg{
3120
+ width:16px;
3121
+ height:16px; }
3122
+ .iui-end-icon.iui-button{
3123
+ height:100%;
3124
+ width:-webkit-fit-content;
3125
+ width:-moz-fit-content;
3126
+ width:fit-content;
3127
+ margin-right:0;
3128
+ border-top-left-radius:0;
3129
+ border-bottom-left-radius:0;
3130
+ border-top-right-radius:inherit;
3131
+ border-bottom-right-radius:inherit; }
3132
+ .iui-end-icon.iui-actionable{
3133
+ align-items:center;
3134
+ height:90%;
3135
+ margin-right:2px;
3136
+ padding:0 12px;
3137
+ cursor:pointer;
3138
+ background-position:center;
3139
+ transition:background 0.4s ease-out; }
3140
+ .iui-end-icon.iui-actionable:hover{
3141
+ background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
3142
+ .iui-end-icon.iui-actionable:active{
3143
+ background-color:var(--iui-color-background-2);
3144
+ background-size:100%;
3145
+ transition:background 0s; }
3146
+ .iui-end-icon.iui-actionable svg{
3147
+ fill:rgba(0, 0, 0, 0.4);
3148
+ fill:var(--iui-icons-color);
3149
+ transition:transform 0.2s ease-out; }
3150
+ .iui-end-icon.iui-actionable.iui-open svg{
3151
+ transform:rotate(180deg); }
3152
+ .iui-end-icon.iui-disabled{
3153
+ cursor:not-allowed; }
3154
+ .iui-end-icon.iui-disabled svg{
3155
+ fill:rgba(0, 0, 0, 0.2);
3156
+ fill:var(--iui-icons-color-actionable-disabled); }
3157
+
3158
+ .iui-checkbox{
3159
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
3160
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
3161
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
3162
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
3163
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3164
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
3165
+ --_iui-checkbox-mask-image:initial;
3166
+ -webkit-appearance:none;
3167
+ -moz-appearance:none;
3168
+ appearance:none;
3169
+ margin:0;
3170
+ width:16px;
3171
+ height:16px;
3045
3172
  position:relative;
3046
- width:100%;
3047
- min-width:0; }
3048
- .iui-select > .iui-select-button{
3173
+ border-radius:3px;
3174
+ background-color:var(--_iui-checkbox-background-color);
3175
+ cursor:pointer; }
3176
+ .iui-checkbox-wrapper{
3049
3177
  margin:0;
3050
3178
  padding:0;
3051
3179
  border:none;
3052
3180
  vertical-align:baseline;
3053
- width:100%;
3054
- font-family:inherit;
3055
- font-size:14px;
3056
- font-weight:400;
3057
- line-height:22px;
3058
- border-radius:3px;
3059
- -webkit-appearance:none;
3060
- -moz-appearance:none;
3061
- appearance:none;
3062
- box-sizing:border-box;
3063
- padding:7px 12px;
3064
- min-height:38px;
3065
- color:rgba(0, 0, 0, 0.8);
3066
- background-color:#FFF;
3067
- border:1px solid rgba(0, 0, 0, 0.4);
3068
- color:var(--iui-text-color);
3069
- background-color:var(--iui-color-background-1);
3070
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3071
3181
  display:flex;
3072
3182
  align-items:center;
3073
- min-height:38px;
3074
- padding-right:32px;
3183
+ font-size:14px;
3184
+ width:-webkit-fit-content;
3185
+ width:-moz-fit-content;
3186
+ width:fit-content;
3075
3187
  -webkit-user-select:none;
3076
3188
  -moz-user-select:none;
3077
3189
  -ms-user-select:none;
3078
3190
  user-select:none;
3079
- position:relative; }
3080
- .iui-select > .iui-select-button:focus-visible{
3081
- outline:2px solid var(--iui-color-foreground-primary);
3082
- outline-offset:-2px; }
3083
- @supports not selector(*:focus-visible){
3084
- .iui-select > .iui-select-button:focus{
3085
- outline:2px solid var(--iui-color-foreground-primary);
3086
- outline-offset:-2px; } }
3087
- @media (prefers-reduced-motion: no-preference){
3088
- .iui-select > .iui-select-button{
3089
- transition:border-color 0.2s ease-out; } }
3090
- .iui-select > .iui-select-button.iui-small{
3091
- padding-top:1.5px;
3092
- padding-bottom:1.5px;
3093
- min-height:27px; }
3094
- .iui-select > .iui-select-button.iui-large{
3095
- padding-top:12.5px;
3096
- padding-bottom:12.5px;
3097
- min-height:49px;
3098
- font-size:16px; }
3099
- .iui-select > .iui-select-button::-moz-placeholder{
3100
- -moz-user-select:none;
3101
- user-select:none;
3102
- color:rgba(0, 0, 0, 0.2);
3103
- color:var(--iui-text-color-placeholder); }
3104
- .iui-select > .iui-select-button:-ms-input-placeholder{
3105
- -ms-user-select:none;
3106
- user-select:none;
3107
- color:rgba(0, 0, 0, 0.2);
3108
- color:var(--iui-text-color-placeholder); }
3109
- .iui-select > .iui-select-button::placeholder{
3110
- -webkit-user-select:none;
3111
- -moz-user-select:none;
3112
- -ms-user-select:none;
3113
- user-select:none;
3114
- color:rgba(0, 0, 0, 0.2);
3115
- color:var(--iui-text-color-placeholder); }
3116
- .iui-select > .iui-select-button:-webkit-autofill{
3117
- border-color:#008be1;
3118
- color:#008be1;
3119
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
3120
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3121
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3122
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
3123
- .iui-select > .iui-select-button:autofill{
3124
- border-color:#008be1;
3125
- color:#008be1;
3126
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
3127
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3128
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3129
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
3130
- .iui-select > .iui-select-button:hover{
3131
- border-color:rgba(0, 0, 0, 0.8);
3132
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3133
- @media (prefers-reduced-motion: no-preference){
3134
- .iui-select > .iui-select-button:hover{
3135
- transition:border-color 0.2s ease-out; } }
3136
- .iui-select > .iui-select-button[disabled]{
3137
- background-color:#EEF0F3;
3138
- border-color:#EEF0F3;
3139
- background-color:var(--iui-color-background-disabled);
3140
- border-color:var(--iui-color-background-disabled);
3141
- cursor:not-allowed; }
3142
- .iui-select > .iui-select-button:focus-visible{
3143
- outline:2px solid var(--iui-color-foreground-primary);
3144
- outline-offset:-2px; }
3145
- @supports not selector(*:focus-visible){
3146
- .iui-select > .iui-select-button:focus{
3147
- outline:2px solid var(--iui-color-foreground-primary);
3148
- outline-offset:-2px; } }
3149
- @media (prefers-reduced-motion: no-preference){
3150
- .iui-select > .iui-select-button{
3151
- transition:border-color 0.2s ease-out; } }
3152
- .iui-select > .iui-select-button > .iui-icon{
3153
- width:16px;
3154
- height:16px;
3155
- flex:0 0 auto;
3156
- fill:rgba(0, 0, 0, 0.8);
3157
- fill:var(--iui-icons-color-actionable); }
3158
- .iui-select > .iui-select-button > .iui-icon + .iui-content{
3159
- margin-left:8px; }
3160
- .iui-select > .iui-select-button > .iui-content{
3161
- overflow:hidden;
3162
- white-space:nowrap;
3163
- text-overflow:ellipsis; }
3164
- .iui-select > .iui-select-button.iui-placeholder{
3165
- color:rgba(0, 0, 0, 0.2);
3166
- color:var(--iui-text-color-placeholder); }
3167
- .iui-select > .iui-select-button::after{
3168
- content:'';
3169
- position:absolute;
3170
- top:50%;
3171
- right:16px;
3172
- transform:translateY(-50%);
3173
- width:0;
3174
- height:0;
3175
- border-left:5px solid transparent;
3176
- border-right:5px solid transparent;
3177
- border-top:5px solid rgba(0, 0, 0, 0.8);
3178
- border-top:5px solid var(--iui-icons-color-actionable); }
3179
- .iui-select > .iui-select-button:hover{
3180
- border-color:rgba(0, 0, 0, 0.8);
3181
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3182
- .iui-select > .iui-select-button:hover::after{
3183
- border-bottom:none;
3184
- border-top:5px solid black;
3185
- border-top:5px solid var(--iui-icons-color-actionable-hover); }
3186
- .iui-select > .iui-select-button.iui-active::after{
3187
- border-top:none;
3188
- border-bottom:5px solid rgba(0, 0, 0, 0.8);
3189
- border-bottom:5px solid var(--iui-icons-color-actionable); }
3190
- .iui-select > .iui-select-button.iui-active:hover::after{
3191
- border-bottom:5px solid black;
3192
- border-bottom:5px solid var(--iui-icons-color-actionable-hover); }
3193
- .iui-select > .iui-select-button.iui-disabled{
3194
- cursor:not-allowed;
3195
- background-color:#EEF0F3;
3196
- border-color:#EEF0F3;
3197
- background-color:var(--iui-color-background-disabled);
3198
- border-color:var(--iui-color-background-disabled); }
3199
- .iui-select > .iui-select-button.iui-disabled::after{
3200
- border-top:5px solid rgba(0, 0, 0, 0.2);
3201
- border-top:5px solid var(--iui-icons-color-actionable-disabled); }
3202
- .iui-select.iui-small .iui-select-button{
3203
- padding-top:1.5px;
3204
- padding-bottom:1.5px;
3205
- min-height:27px; }
3206
- .iui-select.iui-large .iui-select-button{
3207
- padding-top:12.5px;
3208
- padding-bottom:12.5px;
3209
- min-height:49px;
3210
- font-size:16px; }
3211
-
3212
- .iui-checkbox{
3213
- margin:0;
3214
- padding:0;
3215
- border:none;
3216
- vertical-align:baseline;
3217
- display:flex;
3218
- align-items:center;
3219
- font-size:14px;
3220
- width:-webkit-fit-content;
3221
- width:-moz-fit-content;
3222
- width:fit-content;
3223
- -webkit-user-select:none;
3224
- -moz-user-select:none;
3225
- -ms-user-select:none;
3226
- user-select:none;
3227
- position:relative;
3228
- cursor:pointer;
3229
- color:rgba(0, 0, 0, 0.8);
3230
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3231
- .iui-checkbox > input{
3232
- width:0;
3233
- height:0;
3234
- -webkit-appearance:none;
3235
- -moz-appearance:none;
3236
- appearance:none;
3237
- opacity:0;
3238
- position:absolute; }
3239
- .iui-checkbox.iui-disabled{
3240
- cursor:not-allowed; }
3241
- .iui-checkbox .iui-checkbox-checkmark,
3242
- .iui-checkbox .iui-radio-dot{
3243
- width:16px;
3244
- height:16px;
3245
- margin:0;
3246
- display:flex;
3247
- flex-shrink:0;
3248
- justify-content:center;
3249
- align-items:center;
3250
3191
  position:relative;
3251
- isolation:isolate;
3252
- border-color:rgba(0, 0, 0, 0.4);
3253
- background-color:#FFF;
3254
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3255
- background-color:var(--iui-color-background-1); }
3256
- .iui-checkbox .iui-checkbox-checkmark::after,
3257
- .iui-checkbox .iui-radio-dot::after{
3258
- content:'';
3259
- position:absolute;
3260
- inset:0;
3261
- z-index:-1;
3262
- transition:border-color 0.2s ease-out;
3263
- border-radius:inherit;
3264
- border-style:solid;
3265
- border-width:1px;
3266
- border-color:inherit; }
3267
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial),
3268
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
3269
- width:100%;
3270
- height:100%;
3271
- fill:#008BE1;
3272
- fill:var(--iui-icons-color-primary); }
3273
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3274
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
3275
- opacity:0; }
3276
- @media (prefers-reduced-motion: no-preference){
3277
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3278
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
3279
- transition:opacity 0.2s ease; } }
3280
- .iui-checkbox > .iui-label{
3281
- margin-right:8px;
3282
- display:flex;
3283
- align-items:center; }
3284
- .iui-checkbox > .iui-label svg{
3285
- width:16px;
3286
- height:16px;
3287
- vertical-align:middle;
3288
- fill:rgba(0, 0, 0, 0.8);
3289
- fill:var(--iui-icons-color-actionable); }
3290
- .iui-checkbox .iui-checkbox-checkmark ~ .iui-label,
3291
- .iui-checkbox .iui-radio-dot ~ .iui-label{
3292
- margin-left:8px;
3293
- margin-right:0; }
3294
- .iui-checkbox:hover > input:enabled ~ .iui-checkbox-checkmark,
3295
- .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
3296
- border-color:rgba(0, 0, 0, 0.8);
3297
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3298
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark,
3299
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark,
3300
- .iui-checkbox input:checked ~ .iui-radio-dot{
3301
- border-color:rgba(0, 0, 0, 0.6);
3302
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
3303
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
3304
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3305
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
3306
- opacity:1; }
3307
- @media (prefers-reduced-motion: no-preference){
3308
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
3309
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3310
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
3311
- transition:opacity 0.2s ease; } }
3312
- .iui-checkbox input:enabled:focus ~ .iui-checkbox-checkmark,
3313
- .iui-checkbox input:enabled:focus ~ .iui-radio-dot{
3314
- outline:2px solid #008BE1;
3315
- outline:2px solid var(--iui-color-foreground-primary);
3316
- outline-offset:-1px; }
3317
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
3318
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
3319
- outline:none; }
3320
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark,
3321
- .iui-checkbox input:disabled ~ .iui-radio-dot{
3322
- cursor:not-allowed;
3323
- background-color:#EEF0F3;
3324
- border-color:#EEF0F3;
3325
- background-color:var(--iui-color-background-disabled);
3326
- border-color:var(--iui-color-background-disabled); }
3327
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark svg,
3328
- .iui-checkbox input:disabled ~ .iui-radio-dot svg{
3329
- fill:rgba(0, 0, 0, 0.2);
3330
- fill:var(--iui-icons-color-actionable-disabled); }
3331
- .iui-checkbox input:disabled ~ .iui-label{
3332
- cursor:not-allowed;
3333
- color:rgba(0, 0, 0, 0.4);
3334
- color:var(--iui-text-color-muted); }
3335
- .iui-checkbox input:disabled ~ .iui-label svg{
3336
- fill:rgba(0, 0, 0, 0.2);
3337
- fill:var(--iui-icons-color-actionable-disabled); }
3338
- .iui-checkbox.iui-positive{
3339
- color:#53A21A;
3340
- color:var(--iui-color-foreground-positive); }
3341
- .iui-checkbox.iui-warning{
3342
- color:#F18B12;
3343
- color:var(--iui-color-foreground-warning); }
3344
- .iui-checkbox.iui-negative{
3345
- color:#D30A0A;
3346
- color:var(--iui-color-foreground-negative); }
3347
- .iui-checkbox .iui-checkbox-checkmark{
3348
- border-radius:3px; }
3192
+ cursor:pointer;
3193
+ color:rgba(0, 0, 0, 0.8);
3194
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
3195
+ gap:8px; }
3196
+ .iui-checkbox-wrapper > * + *{
3197
+ margin-left:8px; }
3198
+ @supports (gap: 8px){
3199
+ .iui-checkbox-wrapper > * + *{
3200
+ margin-left:0; } }
3201
+ .iui-checkbox-wrapper.iui-loading{
3202
+ cursor:wait;
3203
+ color:var(--iui-text-color-muted); }
3204
+ .iui-checkbox-wrapper > .iui-checkbox-label,
3205
+ .iui-checkbox-wrapper > .iui-radio-label{
3206
+ display:flex;
3207
+ align-items:center; }
3208
+ .iui-checkbox-wrapper > .iui-checkbox-label svg,
3209
+ .iui-checkbox-wrapper > .iui-radio-label svg{
3210
+ width:16px;
3211
+ height:16px;
3212
+ vertical-align:middle;
3213
+ fill:currentColor; }
3214
+ .iui-checkbox-wrapper.iui-disabled{
3215
+ cursor:not-allowed;
3216
+ color:var(--iui-text-color-muted); }
3217
+ .iui-checkbox-wrapper.iui-disabled svg{
3218
+ fill:var(--iui-icons-color-actionable-disabled); }
3219
+ .iui-checkbox-wrapper.iui-positive{
3220
+ color:#53A21A;
3221
+ color:var(--iui-color-foreground-positive); }
3222
+ .iui-checkbox-wrapper.iui-warning{
3223
+ color:#F18B12;
3224
+ color:var(--iui-color-foreground-warning); }
3225
+ .iui-checkbox-wrapper.iui-negative{
3226
+ color:#D30A0A;
3227
+ color:var(--iui-color-foreground-negative); }
3228
+ .iui-checkbox::before{
3229
+ content:'';
3230
+ position:absolute;
3231
+ inset:0;
3232
+ transition:border-color 0.2s ease-out;
3233
+ border-radius:inherit;
3234
+ border-style:solid;
3235
+ border-width:1px;
3236
+ border-color:var(--_iui-checkbox-border-color); }
3237
+ .iui-checkbox::after{
3238
+ content:'';
3239
+ position:absolute;
3240
+ inset:0;
3241
+ background-color:var(--_iui-checkbox-svg-color);
3242
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
3243
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
3244
+ .iui-checkbox:not(:checked){
3245
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
3246
+ .iui-checkbox:checked{
3247
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3248
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
3249
+ .iui-checkbox:indeterminate{
3250
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3251
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
3252
+ .iui-checkbox:hover{
3253
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3254
+ .iui-checkbox:focus-visible{
3255
+ outline:2px solid var(--iui-color-foreground-primary);
3256
+ outline-offset:-1px; }
3257
+ @supports not selector(*:focus-visible){
3258
+ .iui-checkbox:focus{
3259
+ outline:2px solid var(--iui-color-foreground-primary);
3260
+ outline-offset:-1px; } }
3261
+ .iui-checkbox.iui-checkbox-visibility{
3262
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
3263
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
3264
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
3265
+ --_iui-checkbox-border-color:transparent;
3266
+ --_iui-checkbox-background-color:transparent; }
3267
+ .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
3268
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
3269
+ .iui-checkbox.iui-checkbox-visibility:where(:hover){
3270
+ --_iui-checkbox-border-color:transparent;
3271
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
3272
+ .iui-checkbox:disabled{
3273
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
3274
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
3275
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
3276
+ cursor:not-allowed; }
3349
3277
  .iui-checkbox.iui-loading{
3278
+ --_iui-checkbox-border-color:transparent;
3279
+ --_iui-checkbox-background-color:transparent;
3280
+ opacity:0;
3281
+ position:absolute;
3350
3282
  cursor:wait; }
3351
- .iui-checkbox.iui-loading input ~ .iui-checkbox-checkmark{
3352
- border-color:transparent;
3353
- background-color:transparent; }
3354
- .iui-checkbox.iui-loading input:disabled ~ .iui-checkbox-checkmark{
3355
- cursor:wait; }
3356
- .iui-checkbox.iui-loading input:disabled ~ .iui-label{
3357
- cursor:wait; }
3358
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
3359
- background-color:rgba(0, 0, 0, 0.1);
3360
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
3361
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark::after,
3362
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark::after{
3363
- border:none; }
3364
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark{
3365
- background-color:transparent; }
3366
- .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
3367
- .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
3368
- opacity:0; }
3369
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
3370
- opacity:1;
3371
- transition:opacity 0.2s ease;
3372
- fill:rgba(0, 0, 0, 0.8);
3373
- fill:var(--iui-icons-color-actionable); }
3374
- .iui-checkbox-visibility input:disabled ~ .iui-checkbox-checkmark .iui-uncheck{
3375
- fill:rgba(0, 0, 0, 0.2);
3376
- fill:var(--iui-icons-color-actionable-disabled); }
3377
3283
 
3378
3284
  .iui-radio{
3285
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
3286
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
3287
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
3288
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
3289
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3290
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
3291
+ --_iui-checkbox-mask-image:initial;
3292
+ -webkit-appearance:none;
3293
+ -moz-appearance:none;
3294
+ appearance:none;
3379
3295
  margin:0;
3380
- padding:0;
3381
- border:none;
3382
- vertical-align:baseline;
3383
- display:flex;
3384
- align-items:center;
3385
- font-size:14px;
3386
- width:-webkit-fit-content;
3387
- width:-moz-fit-content;
3388
- width:fit-content;
3389
- -webkit-user-select:none;
3390
- -moz-user-select:none;
3391
- -ms-user-select:none;
3392
- user-select:none;
3296
+ width:16px;
3297
+ height:16px;
3393
3298
  position:relative;
3299
+ border-radius:3px;
3300
+ background-color:var(--_iui-checkbox-background-color);
3394
3301
  cursor:pointer;
3395
- color:rgba(0, 0, 0, 0.8);
3396
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3397
- .iui-radio > input{
3398
- width:0;
3399
- height:0;
3400
- -webkit-appearance:none;
3401
- -moz-appearance:none;
3402
- appearance:none;
3403
- opacity:0;
3404
- position:absolute; }
3405
- .iui-radio.iui-disabled{
3406
- cursor:not-allowed; }
3407
- .iui-radio .iui-checkbox-checkmark,
3408
- .iui-radio .iui-radio-dot{
3409
- width:16px;
3410
- height:16px;
3302
+ border-radius:50%; }
3303
+ .iui-radio-wrapper{
3411
3304
  margin:0;
3305
+ padding:0;
3306
+ border:none;
3307
+ vertical-align:baseline;
3412
3308
  display:flex;
3413
- flex-shrink:0;
3414
- justify-content:center;
3415
3309
  align-items:center;
3310
+ font-size:14px;
3311
+ width:-webkit-fit-content;
3312
+ width:-moz-fit-content;
3313
+ width:fit-content;
3314
+ -webkit-user-select:none;
3315
+ -moz-user-select:none;
3316
+ -ms-user-select:none;
3317
+ user-select:none;
3416
3318
  position:relative;
3417
- isolation:isolate;
3418
- border-color:rgba(0, 0, 0, 0.4);
3419
- background-color:#FFF;
3420
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3421
- background-color:var(--iui-color-background-1); }
3422
- .iui-radio .iui-checkbox-checkmark::after,
3423
- .iui-radio .iui-radio-dot::after{
3424
- content:'';
3425
- position:absolute;
3426
- inset:0;
3427
- z-index:-1;
3428
- transition:border-color 0.2s ease-out;
3429
- border-radius:inherit;
3430
- border-style:solid;
3431
- border-width:1px;
3432
- border-color:inherit; }
3433
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial),
3434
- .iui-radio .iui-radio-dot svg:not(.iui-radial){
3435
- width:100%;
3436
- height:100%;
3437
- fill:#008BE1;
3438
- fill:var(--iui-icons-color-primary); }
3439
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3440
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
3441
- opacity:0; }
3442
- @media (prefers-reduced-motion: no-preference){
3443
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3444
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
3445
- transition:opacity 0.2s ease; } }
3446
- .iui-radio > .iui-label{
3447
- margin-right:8px;
3319
+ cursor:pointer;
3320
+ color:rgba(0, 0, 0, 0.8);
3321
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
3322
+ gap:8px; }
3323
+ .iui-radio-wrapper > * + *{
3324
+ margin-left:8px; }
3325
+ @supports (gap: 8px){
3326
+ .iui-radio-wrapper > * + *{
3327
+ margin-left:0; } }
3328
+ .iui-radio-wrapper.iui-loading{
3329
+ cursor:wait;
3330
+ color:var(--iui-text-color-muted); }
3331
+ .iui-radio-wrapper > .iui-checkbox-label,
3332
+ .iui-radio-wrapper > .iui-radio-label{
3333
+ display:flex;
3334
+ align-items:center; }
3335
+ .iui-radio-wrapper > .iui-checkbox-label svg,
3336
+ .iui-radio-wrapper > .iui-radio-label svg{
3337
+ width:16px;
3338
+ height:16px;
3339
+ vertical-align:middle;
3340
+ fill:currentColor; }
3341
+ .iui-radio-wrapper.iui-disabled{
3342
+ cursor:not-allowed;
3343
+ color:var(--iui-text-color-muted); }
3344
+ .iui-radio-wrapper.iui-disabled svg{
3345
+ fill:var(--iui-icons-color-actionable-disabled); }
3346
+ .iui-radio-wrapper.iui-positive{
3347
+ color:#53A21A;
3348
+ color:var(--iui-color-foreground-positive); }
3349
+ .iui-radio-wrapper.iui-warning{
3350
+ color:#F18B12;
3351
+ color:var(--iui-color-foreground-warning); }
3352
+ .iui-radio-wrapper.iui-negative{
3353
+ color:#D30A0A;
3354
+ color:var(--iui-color-foreground-negative); }
3355
+ .iui-radio-wrapper{
3356
+ margin:0;
3357
+ padding:0;
3358
+ border:none;
3359
+ vertical-align:baseline;
3448
3360
  display:flex;
3449
- align-items:center; }
3450
- .iui-radio > .iui-label svg{
3451
- width:16px;
3452
- height:16px;
3453
- vertical-align:middle;
3454
- fill:rgba(0, 0, 0, 0.8);
3455
- fill:var(--iui-icons-color-actionable); }
3456
- .iui-radio .iui-checkbox-checkmark ~ .iui-label,
3457
- .iui-radio .iui-radio-dot ~ .iui-label{
3458
- margin-left:8px;
3459
- margin-right:0; }
3460
- .iui-radio:hover > input:enabled ~ .iui-checkbox-checkmark,
3461
- .iui-radio:hover > input:enabled ~ .iui-radio-dot{
3462
- border-color:rgba(0, 0, 0, 0.8);
3463
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3464
- .iui-radio input:checked ~ .iui-checkbox-checkmark,
3465
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark,
3466
- .iui-radio input:checked ~ .iui-radio-dot{
3467
- border-color:rgba(0, 0, 0, 0.6);
3468
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
3469
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
3470
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3471
- .iui-radio input:checked ~ .iui-radio-dot circle{
3472
- opacity:1; }
3473
- @media (prefers-reduced-motion: no-preference){
3474
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
3475
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3476
- .iui-radio input:checked ~ .iui-radio-dot circle{
3477
- transition:opacity 0.2s ease; } }
3478
- .iui-radio input:enabled:focus ~ .iui-checkbox-checkmark,
3479
- .iui-radio input:enabled:focus ~ .iui-radio-dot{
3480
- outline:2px solid #008BE1;
3361
+ align-items:center;
3362
+ font-size:14px;
3363
+ width:-webkit-fit-content;
3364
+ width:-moz-fit-content;
3365
+ width:fit-content;
3366
+ -webkit-user-select:none;
3367
+ -moz-user-select:none;
3368
+ -ms-user-select:none;
3369
+ user-select:none;
3370
+ position:relative;
3371
+ cursor:pointer;
3372
+ color:rgba(0, 0, 0, 0.8);
3373
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
3374
+ gap:8px; }
3375
+ .iui-radio-wrapper > * + *{
3376
+ margin-left:8px; }
3377
+ @supports (gap: 8px){
3378
+ .iui-radio-wrapper > * + *{
3379
+ margin-left:0; } }
3380
+ .iui-radio-wrapper.iui-loading{
3381
+ cursor:wait;
3382
+ color:var(--iui-text-color-muted); }
3383
+ .iui-radio-wrapper > .iui-checkbox-label,
3384
+ .iui-radio-wrapper > .iui-radio-label{
3385
+ display:flex;
3386
+ align-items:center; }
3387
+ .iui-radio-wrapper > .iui-checkbox-label svg,
3388
+ .iui-radio-wrapper > .iui-radio-label svg{
3389
+ width:16px;
3390
+ height:16px;
3391
+ vertical-align:middle;
3392
+ fill:currentColor; }
3393
+ .iui-radio-wrapper.iui-disabled{
3394
+ cursor:not-allowed;
3395
+ color:var(--iui-text-color-muted); }
3396
+ .iui-radio-wrapper.iui-disabled svg{
3397
+ fill:var(--iui-icons-color-actionable-disabled); }
3398
+ .iui-radio-wrapper.iui-positive{
3399
+ color:#53A21A;
3400
+ color:var(--iui-color-foreground-positive); }
3401
+ .iui-radio-wrapper.iui-warning{
3402
+ color:#F18B12;
3403
+ color:var(--iui-color-foreground-warning); }
3404
+ .iui-radio-wrapper.iui-negative{
3405
+ color:#D30A0A;
3406
+ color:var(--iui-color-foreground-negative); }
3407
+ .iui-radio::before{
3408
+ content:'';
3409
+ position:absolute;
3410
+ inset:0;
3411
+ transition:border-color 0.2s ease-out;
3412
+ border-radius:inherit;
3413
+ border-style:solid;
3414
+ border-width:1px;
3415
+ border-color:var(--_iui-checkbox-border-color); }
3416
+ .iui-radio::after{
3417
+ content:'';
3418
+ position:absolute;
3419
+ inset:0;
3420
+ background-color:var(--_iui-checkbox-svg-color);
3421
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
3422
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
3423
+ .iui-radio:not(:checked){
3424
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
3425
+ .iui-radio:checked{
3426
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3427
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
3428
+ .iui-radio:indeterminate{
3429
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3430
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
3431
+ .iui-radio:hover{
3432
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3433
+ .iui-radio:focus-visible{
3481
3434
  outline:2px solid var(--iui-color-foreground-primary);
3482
3435
  outline-offset:-1px; }
3483
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
3484
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
3485
- outline:none; }
3486
- .iui-radio input:disabled ~ .iui-checkbox-checkmark,
3487
- .iui-radio input:disabled ~ .iui-radio-dot{
3488
- cursor:not-allowed;
3489
- background-color:#EEF0F3;
3490
- border-color:#EEF0F3;
3491
- background-color:var(--iui-color-background-disabled);
3492
- border-color:var(--iui-color-background-disabled); }
3493
- .iui-radio input:disabled ~ .iui-checkbox-checkmark svg,
3494
- .iui-radio input:disabled ~ .iui-radio-dot svg{
3495
- fill:rgba(0, 0, 0, 0.2);
3496
- fill:var(--iui-icons-color-actionable-disabled); }
3497
- .iui-radio input:disabled ~ .iui-label{
3498
- cursor:not-allowed;
3499
- color:rgba(0, 0, 0, 0.4);
3500
- color:var(--iui-text-color-muted); }
3501
- .iui-radio input:disabled ~ .iui-label svg{
3502
- fill:rgba(0, 0, 0, 0.2);
3503
- fill:var(--iui-icons-color-actionable-disabled); }
3504
- .iui-radio.iui-positive{
3505
- color:#53A21A;
3506
- color:var(--iui-color-foreground-positive); }
3507
- .iui-radio.iui-warning{
3508
- color:#F18B12;
3509
- color:var(--iui-color-foreground-warning); }
3510
- .iui-radio.iui-negative{
3511
- color:#D30A0A;
3512
- color:var(--iui-color-foreground-negative); }
3513
- .iui-radio .iui-radio-dot{
3514
- border-radius:50%; }
3436
+ @supports not selector(*:focus-visible){
3437
+ .iui-radio:focus{
3438
+ outline:2px solid var(--iui-color-foreground-primary);
3439
+ outline-offset:-1px; } }
3440
+ .iui-radio.iui-checkbox-visibility{
3441
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
3442
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
3443
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
3444
+ --_iui-checkbox-border-color:transparent;
3445
+ --_iui-checkbox-background-color:transparent; }
3446
+ .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
3447
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
3448
+ .iui-radio.iui-checkbox-visibility:where(:hover){
3449
+ --_iui-checkbox-border-color:transparent;
3450
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
3451
+ .iui-radio:disabled{
3452
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
3453
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
3454
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
3455
+ cursor:not-allowed; }
3456
+ .iui-radio.iui-loading{
3457
+ --_iui-checkbox-border-color:transparent;
3458
+ --_iui-checkbox-background-color:transparent;
3459
+ opacity:0;
3460
+ position:absolute;
3461
+ cursor:wait; }
3462
+ .iui-radio:checked{
3463
+ --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>'); }
3515
3464
 
3516
3465
  .iui-radio-tile-container{
3517
3466
  display:inline-flex;
@@ -4218,11 +4167,11 @@ html.iui-theme-dark{
4218
4167
  box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } } }
4219
4168
 
4220
4169
  .iui-popover{ }
4221
- .iui-popover[data-reference-hidden]{
4222
- visibility:hidden;
4223
- pointer-events:none; }
4224
4170
  .iui-popover.tippy-box{
4225
4171
  all:revert; }
4172
+ .iui-popover.tippy-box[data-reference-hidden]{
4173
+ visibility:visible;
4174
+ pointer-events:auto; }
4226
4175
  .iui-popover .tippy-content{
4227
4176
  all:revert; }
4228
4177
 
@@ -4591,7 +4540,8 @@ html.iui-theme-dark{
4591
4540
  border-left:none;
4592
4541
  border-right:none;
4593
4542
  overflow:hidden;
4594
- justify-content:flex-start; }
4543
+ justify-content:flex-start;
4544
+ --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0; }
4595
4545
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
4596
4546
  height:55px; }
4597
4547
  @supports (padding: max(0px)){
@@ -4611,9 +4561,6 @@ html.iui-theme-dark{
4611
4561
  .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
4612
4562
  fill:#008BE1;
4613
4563
  fill:var(--iui-color-foreground-primary); }
4614
- .iui-side-navigation .iui-sidenav-button.iui-active{
4615
- box-shadow:inset 2px 0 0 0 #008BE1;
4616
- box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
4617
4564
  .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
4618
4565
  background-color:#F8F9FB;
4619
4566
  background-color:var(--iui-color-background-2); }
@@ -5239,56 +5186,10 @@ html.iui-theme-dark{
5239
5186
  .iui-paginator-pages-group{
5240
5187
  display:inline-flex;
5241
5188
  align-items:center;
5242
- isolation:isolate;
5243
5189
  margin:0 8px; }
5244
- .iui-paginator-pages-group > *{
5245
- display:flex; }
5246
- .iui-paginator-pages-group > * input, .iui-paginator-pages-group > * button{
5247
- position:relative;
5248
- transition-duration:0ms; }
5249
- .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * button:hover{
5250
- z-index:1; }
5251
- .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:focus{
5252
- z-index:2; }
5253
- .iui-paginator-pages-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-paginator-pages-group > * button:focus:where(:not(:focus-visible):not(:hover)){
5254
- z-index:revert; }
5255
- .iui-paginator-pages-group > * input:disabled, .iui-paginator-pages-group > * button:disabled{
5256
- z-index:-1; }
5257
- .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:hover, .iui-paginator-pages-group > * button:focus{
5258
- transition-duration:0.2s; }
5259
- .iui-paginator-pages-group > * input.iui-active::after, .iui-paginator-pages-group > * button.iui-active::after{
5260
- content:'';
5261
- position:absolute;
5262
- height:2px;
5263
- opacity:1;
5264
- top:2px;
5265
- left:2px;
5266
- width:calc(100% - 4px);
5267
- background-color:#008BE1;
5268
- background-color:var(--iui-color-foreground-primary); }
5269
- .iui-paginator-pages-group > * input.iui-active:disabled::after, .iui-paginator-pages-group > * button.iui-active:disabled::after{
5270
- background-color:rgba(0, 0, 0, 0.2);
5271
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
5272
- .iui-paginator-pages-group > * input:not(.iui-borderless), .iui-paginator-pages-group > * button:not(.iui-borderless){
5273
- border-radius:0; }
5274
- .iui-paginator-pages-group > *:first-child input, .iui-paginator-pages-group > *:first-child button:not(.iui-borderless){
5275
- border-top-left-radius:3px;
5276
- border-bottom-left-radius:3px; }
5277
- .iui-paginator-pages-group > *:last-child input, .iui-paginator-pages-group > *:last-child button:not(.iui-borderless){
5278
- border-top-right-radius:3px;
5279
- border-bottom-right-radius:3px; }
5280
- .iui-paginator-pages-group > * + *{
5281
- margin-left:-1px; }
5282
- .iui-paginator-pages-group > *:not(:first-child) .iui-default:disabled{
5283
- border-left-color:#DCE0E3;
5284
- border-left-color:var(--iui-color-background-4); }
5285
- .iui-paginator-pages-group > * + *{
5286
- margin-left:0; }
5287
- .iui-paginator-pages-group button.iui-active::after{
5288
- top:auto;
5289
- bottom:2px; }
5290
5190
 
5291
5191
  .iui-paginator-page-button{
5192
+ --_iui-button-active-stripe-inset:initial;
5292
5193
  margin:0;
5293
5194
  padding:0;
5294
5195
  border:none;
@@ -5302,7 +5203,6 @@ html.iui-theme-dark{
5302
5203
  box-sizing:border-box;
5303
5204
  border-radius:3px;
5304
5205
  line-height:22px;
5305
- outline:none;
5306
5206
  box-shadow:none;
5307
5207
  font-size:14px;
5308
5208
  font-weight:400;
@@ -5321,7 +5221,8 @@ html.iui-theme-dark{
5321
5221
  padding:0 8px;
5322
5222
  height:38px;
5323
5223
  gap:8px;
5324
- width:38px; }
5224
+ width:38px;
5225
+ --_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px; }
5325
5226
  @media (prefers-reduced-motion: no-preference){
5326
5227
  .iui-paginator-page-button{
5327
5228
  transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
@@ -5344,6 +5245,13 @@ html.iui-theme-dark{
5344
5245
  background:var(--iui-color-background-disabled);
5345
5246
  border-color:var(--iui-color-background-disabled);
5346
5247
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
5248
+ .iui-paginator-page-button.iui-active::after{
5249
+ content:'';
5250
+ position:absolute;
5251
+ inset:var(--_iui-button-active-stripe-inset);
5252
+ background-color:var(--iui-color-foreground-primary); }
5253
+ .iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
5254
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
5347
5255
  .iui-paginator-page-button > .iui-button-icon:only-child{
5348
5256
  margin-left:3px;
5349
5257
  margin-right:3px; }
@@ -5879,10 +5787,26 @@ a.iui-tag{
5879
5787
  color:rgba(0, 0, 0, 0.8);
5880
5788
  background-color:var(--iui-color-background-1);
5881
5789
  color:var(--iui-text-color); }
5790
+ .iui-tile:focus-visible{
5791
+ outline:2px solid var(--iui-color-foreground-primary);
5792
+ outline-offset:2px; }
5793
+ @supports not selector(*:focus-visible){
5794
+ .iui-tile:focus{
5795
+ outline:2px solid var(--iui-color-foreground-primary);
5796
+ outline-offset:2px; } }
5797
+ .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
5798
+ -webkit-clip-path:revert;
5799
+ clip-path:revert;
5800
+ overflow:visible;
5801
+ position:static;
5802
+ white-space:normal;
5803
+ height:auto;
5804
+ width:auto;
5805
+ padding:0;
5806
+ margin:0;
5807
+ position:absolute; }
5882
5808
  .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
5883
5809
  width:calc(100% - 32px); }
5884
- .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
5885
- visibility:visible; }
5886
5810
  .iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
5887
5811
  transform:translateZ(0) scale(1.1); }
5888
5812
  .iui-tile.iui-new .iui-tile-name,
@@ -5893,6 +5817,13 @@ a.iui-tag{
5893
5817
  background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
5894
5818
  outline:solid 2px var(--iui-color-foreground-primary);
5895
5819
  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
5820
+ .iui-tile.iui-selected:focus-visible{
5821
+ outline:4px solid var(--iui-color-foreground-primary);
5822
+ outline-offset:0; }
5823
+ @supports not selector(*:focus-visible){
5824
+ .iui-tile.iui-selected:focus{
5825
+ outline:4px solid var(--iui-color-foreground-primary);
5826
+ outline-offset:0; } }
5896
5827
  .iui-tile.iui-selected .iui-tile-thumbnail-picture{
5897
5828
  transform:translateZ(0) scale(1.1); }
5898
5829
  .iui-tile.iui-folder{
@@ -6104,11 +6035,9 @@ a.iui-tag{
6104
6035
  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
6105
6036
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
6106
6037
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
6107
- background-color:rgba(0, 0, 0, 0.2);
6108
- -webkit-backdrop-filter:blur(5px);
6109
- backdrop-filter:blur(5px);
6110
6038
  background-color:rgba(0, 0, 0, var(--iui-opacity-5));
6111
- backdrop-filter:blur(5px); } }
6039
+ -webkit-backdrop-filter:blur(5px);
6040
+ backdrop-filter:blur(5px); } }
6112
6041
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
6113
6042
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
6114
6043
  fill:#FFF;
@@ -6229,16 +6158,22 @@ a.iui-tag{
6229
6158
  white-space:nowrap;
6230
6159
  overflow:hidden;
6231
6160
  text-overflow:ellipsis; }
6232
- .iui-tile-content .iui-tile-more-options{
6233
- padding:0 2px;
6234
- height:27px;
6235
- gap:4px;
6161
+
6162
+ .iui-tile-more-options{
6163
+ position:absolute;
6164
+ bottom:5.5px;
6165
+ right:8px; }
6166
+ .iui-tile-more-options:not(.iui-visible){
6167
+ -webkit-clip-path:inset(50%);
6168
+ clip-path:inset(50%);
6169
+ overflow:hidden;
6236
6170
  position:absolute;
6237
- bottom:5.5px;
6238
- right:8px;
6239
- visibility:hidden; }
6240
- .iui-tile-content .iui-tile-more-options.iui-visible{
6241
- visibility:visible; }
6171
+ white-space:nowrap;
6172
+ height:1px;
6173
+ width:1px;
6174
+ padding:0;
6175
+ margin:-1px;
6176
+ border-width:0; }
6242
6177
 
6243
6178
  .iui-time-picker{
6244
6179
  margin:0;
@@ -6744,10 +6679,30 @@ a.iui-tag{
6744
6679
  vertical-align:baseline;
6745
6680
  list-style:none; }
6746
6681
 
6682
+ .iui-tree-item:focus-visible{
6683
+ outline:none; }
6684
+ .iui-tree-item:focus-visible > .iui-tree-node{
6685
+ outline:1px solid var(--iui-color-foreground-primary);
6686
+ outline-offset:-1px; }
6687
+ .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
6688
+ outline:2px solid var(--iui-color-foreground-primary);
6689
+ outline-offset:-2px; }
6690
+
6691
+ @supports not selector(*:focus-visible){
6692
+ .iui-tree-item:focus{
6693
+ outline:none; }
6694
+ .iui-tree-item:focus > .iui-tree-node{
6695
+ outline:1px solid var(--iui-color-foreground-primary);
6696
+ outline-offset:-1px; }
6697
+ .iui-tree-item:focus > .iui-tree-node.iui-active{
6698
+ outline:2px solid var(--iui-color-foreground-primary);
6699
+ outline-offset:-2px; } }
6700
+
6747
6701
  .iui-tree-node{
6748
6702
  display:flex;
6749
6703
  cursor:pointer;
6750
- padding:0 8px; }
6704
+ padding:0 8px;
6705
+ align-items:center; }
6751
6706
  .iui-tree-node-checkbox{
6752
6707
  margin-right:8px; }
6753
6708
  .iui-tree-node-content{
@@ -6800,13 +6755,6 @@ a.iui-tag{
6800
6755
  font-size:12px;
6801
6756
  color:rgba(0, 0, 0, 0.4);
6802
6757
  color:var(--iui-text-color-muted); }
6803
- .iui-tree-node:focus-visible{
6804
- outline:1px solid var(--iui-color-foreground-primary);
6805
- outline-offset:-1px; }
6806
- @supports not selector(*:focus-visible){
6807
- .iui-tree-node:focus{
6808
- outline:1px solid var(--iui-color-foreground-primary);
6809
- outline-offset:-1px; } }
6810
6758
  .iui-tree-node:hover{
6811
6759
  background-color:rgba(0, 139, 225, 0.1);
6812
6760
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
@@ -6821,13 +6769,6 @@ a.iui-tag{
6821
6769
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
6822
6770
  outline:thin solid var(--iui-color-foreground-primary);
6823
6771
  outline-offset:-1px; }
6824
- .iui-tree-node.iui-active:focus-visible{
6825
- outline:2px solid var(--iui-color-foreground-primary);
6826
- outline-offset:-2px; }
6827
- @supports not selector(*:focus-visible){
6828
- .iui-tree-node.iui-active:focus{
6829
- outline:2px solid var(--iui-color-foreground-primary);
6830
- outline-offset:-2px; } }
6831
6772
  .iui-tree-node.iui-disabled{
6832
6773
  cursor:not-allowed;
6833
6774
  outline:none;
@@ -7178,3 +7119,51 @@ a.iui-tag{
7178
7119
  user-select:all;
7179
7120
  color:#53A21A;
7180
7121
  color:var(--iui-color-foreground-positive); }
7122
+
7123
+ .iui-skip-to-content-link{
7124
+ background-color:rgba(0, 0, 0, 0.8);
7125
+ background-color:rgba(0, 0, 0, var(--iui-opacity-2));
7126
+ color:#FFF;
7127
+ color:var(--iui-color-foreground-accessory);
7128
+ border-radius:9999px;
7129
+ text-decoration:none;
7130
+ -webkit-user-select:none;
7131
+ -moz-user-select:none;
7132
+ -ms-user-select:none;
7133
+ user-select:none;
7134
+ padding:8.25px 16px;
7135
+ position:fixed;
7136
+ text-align:center;
7137
+ left:50%;
7138
+ top:22px;
7139
+ transform:translateX(-50%) translateY(-170%);
7140
+ transition:background-color 0.2s ease-in-out; }
7141
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
7142
+ .iui-skip-to-content-link{
7143
+ background-color:rgba(0, 0, 0, var(--iui-opacity-3));
7144
+ -webkit-backdrop-filter:blur(5px);
7145
+ backdrop-filter:blur(5px); } }
7146
+ .iui-skip-to-content-link:focus-visible{
7147
+ outline:2px solid var(--iui-color-foreground-primary);
7148
+ outline-offset:2px; }
7149
+ @supports not selector(*:focus-visible){
7150
+ .iui-skip-to-content-link:focus{
7151
+ outline:2px solid var(--iui-color-foreground-primary);
7152
+ outline-offset:2px; } }
7153
+ @media (prefers-reduced-motion: no-preference){
7154
+ .iui-skip-to-content-link{
7155
+ transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out; } }
7156
+ .iui-skip-to-content-link:hover{
7157
+ background-color:black;
7158
+ background-color:rgba(0, 0, 0, var(--iui-opacity-1)); }
7159
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
7160
+ .iui-skip-to-content-link:hover{
7161
+ background-color:rgba(0, 0, 0, var(--iui-opacity-2));
7162
+ -webkit-backdrop-filter:blur(5px);
7163
+ backdrop-filter:blur(5px); } }
7164
+ .iui-skip-to-content-link:focus{
7165
+ transform:translateX(-50%) translateY(0);
7166
+ box-shadow:0 6px 30px rgba(0, 0, 0, 0.25); }
7167
+ @media (prefers-reduced-motion: no-preference){
7168
+ .iui-skip-to-content-link:focus{
7169
+ transition:transform 0.2s ease-in-out; } }