@accelint/design-system 0.1.1 → 0.2.1

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.
package/dist/styles.css CHANGED
@@ -251,6 +251,32 @@
251
251
  }
252
252
  }
253
253
 
254
+ /* src/styles/surfaces.css.ts.vanilla.css -> assets/styles/surfaces.css */
255
+ @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8;
256
+ @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8 {
257
+ .surfaces_flush__15mw6jf0 {
258
+ background: var(--default-surface__ljimwq2k);
259
+ color: var(--default-color__ljimwq2m);
260
+ }
261
+ .surfaces_proud__15mw6jf1 {
262
+ box-shadow: var(--raised-shadow__ljimwq2o);
263
+ }
264
+ .surfaces_flush__15mw6jf2 {
265
+ background: var(--raised-surface__ljimwq2n);
266
+ color: var(--raised-color__ljimwq2p);
267
+ }
268
+ .surfaces_proud__15mw6jf3 {
269
+ box-shadow: var(--raised-shadow__ljimwq2o);
270
+ }
271
+ .surfaces_flush__15mw6jf4 {
272
+ background: var(--overlay-surface__ljimwq2q);
273
+ color: var(--overlay-color__ljimwq2s);
274
+ }
275
+ .surfaces_proud__15mw6jf5 {
276
+ box-shadow: var(--overlay-shadow__ljimwq2r);
277
+ }
278
+ }
279
+
254
280
  /* src/styles/reset.css.ts.vanilla.css -> assets/styles/reset.css */
255
281
  @layer layers_reset__qkbqqj0;
256
282
  @layer layers_reset__qkbqqj0 {
@@ -284,32 +310,6 @@
284
310
  }
285
311
  }
286
312
 
287
- /* src/styles/surfaces.css.ts.vanilla.css -> assets/styles/surfaces.css */
288
- @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8;
289
- @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8 {
290
- .surfaces_flush__15mw6jf0 {
291
- background: var(--default-surface__ljimwq2k);
292
- color: var(--default-color__ljimwq2m);
293
- }
294
- .surfaces_proud__15mw6jf1 {
295
- box-shadow: var(--raised-shadow__ljimwq2o);
296
- }
297
- .surfaces_flush__15mw6jf2 {
298
- background: var(--raised-surface__ljimwq2n);
299
- color: var(--raised-color__ljimwq2p);
300
- }
301
- .surfaces_proud__15mw6jf3 {
302
- box-shadow: var(--raised-shadow__ljimwq2o);
303
- }
304
- .surfaces_flush__15mw6jf4 {
305
- background: var(--overlay-surface__ljimwq2q);
306
- color: var(--overlay-color__ljimwq2s);
307
- }
308
- .surfaces_proud__15mw6jf5 {
309
- box-shadow: var(--overlay-shadow__ljimwq2r);
310
- }
311
- }
312
-
313
313
  /* src/styles/typography.css.ts.vanilla.css -> assets/styles/typography.css */
314
314
  @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8;
315
315
  .typography_families_mono__j8fgab0 {
@@ -483,14 +483,6 @@
483
483
  }
484
484
  }
485
485
 
486
- /* src/hooks/use-theme/use-theme.css.ts.vanilla.css -> assets/hooks/use-theme/use-theme.css */
487
- @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8;
488
- @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8 {
489
- .use-theme_root__5ipw7a0 {
490
- display: contents;
491
- }
492
- }
493
-
494
486
  /* src/components/popover/popover.css.ts.vanilla.css -> assets/components/popover/popover.css */
495
487
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
496
488
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
@@ -519,410 +511,374 @@
519
511
  }
520
512
  }
521
513
 
522
- /* src/components/drawer/drawer.css.ts.vanilla.css -> assets/components/drawer/drawer.css */
514
+ /* src/hooks/use-theme/use-theme.css.ts.vanilla.css -> assets/hooks/use-theme/use-theme.css */
515
+ @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8;
516
+ @layer layers_framework__qkbqqj1.layers_styles__qkbqqj8 {
517
+ .use-theme_root__5ipw7a0 {
518
+ display: contents;
519
+ }
520
+ }
521
+
522
+ /* src/components/options/options.css.ts.vanilla.css -> assets/components/options/options.css */
523
523
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
524
524
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
525
525
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
526
- .drawer_drawerClassNames_container__3hvldbh {
527
- container-name: drawer_drawerContainer__3hvldb0;
528
- display: contents;
529
- }
530
- .drawer_drawerClassNames_dialog_container__3hvldbk {
531
- height: 100%;
532
- }
533
- .drawer_drawerClassNames_dialog_dialog__3hvldbl {
534
- width: var(--drawer-width__3hvldb6);
535
- height: 100%;
536
- display: flex;
537
- flex-direction: column;
538
- gap: var(--drawer-gap__3hvldb7);
539
- padding: var(--drawer-y__3hvldb9, 0) var(--drawer-x__3hvldb8, 0);
540
- }
541
- .drawer_drawerClassNames_header_header__3hvldbm {
542
- display: grid;
543
- grid-template-areas: "back title close";
544
- grid-template-columns: auto 1fr auto;
545
- gap: var(--drawer-gap__3hvldb7);
546
- align-items: center;
526
+ .options_optionsClassNames_options_container__140gzb51b {
527
+ container-name: options_optionsContainers_options__140gzb50;
528
+ display: block;
547
529
  }
548
- .drawer_drawerClassNames_header_title__3hvldbo {
549
- margin-bottom: 0;
530
+ .options_optionsClassNames_options_options__140gzb51c {
531
+ min-width: var(--options-minWidth__140gzb5x, var(--trigger-width));
532
+ padding: var(--options-y__140gzb5z, 0) var(--options-x__140gzb5y, 0);
533
+ border-radius: var(--sm__ljimwq3d);
550
534
  }
551
- .drawer_drawerClassNames_content__3hvldbq {
552
- flex: 1;
535
+ .options_optionsClassNames_list_container__140gzb51d {
536
+ container-name: options_optionsContainers_list__140gzb51;
537
+ display: contents;
553
538
  }
554
- .drawer_drawerClassNames_footer__3hvldbr {
555
- display: flex;
556
- justify-content: flex-end;
539
+ .options_optionsClassNames_list_section__140gzb51f {
540
+ padding: var(--section-y__140gzb513, 0) var(--section-x__140gzb512, 0);
557
541
  }
558
- @container style(--layoutShift__3hvldbd: false) {
559
- .drawer_drawerClassNames_dialog_container__3hvldbk {
560
- width: var(--drawer-width__3hvldb6);
561
- position: absolute;
562
- transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
563
- overflow: hidden;
564
- pointer-events: none;
565
- }
566
- .drawer_drawerClassNames_dialog_dialog__3hvldbl {
567
- transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
568
- pointer-events: auto;
569
- }
542
+ .options_optionsClassNames_list_header__140gzb51g {
543
+ padding: var(--header-y__140gzb515, var(--item-y__140gzb519, 0)) var(--header-x__140gzb514, var(--item-x__140gzb518, 0));
544
+ border: 1px solid transparent;
545
+ background: var(--header-background__140gzb5o);
546
+ color: var(--header-color__140gzb5q);
570
547
  }
571
- @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) {
572
- .drawer_drawerClassNames_dialog_container__3hvldbk {
573
- left: 0;
574
- }
548
+ .options_optionsClassNames_list_separator__140gzb51h {
549
+ height: 1px;
550
+ margin: var(--separator-y__140gzb517, 0) var(--separator-x__140gzb516, 0);
551
+ background: var(--separator__140gzb5r);
575
552
  }
576
- @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) {
577
- .drawer_drawerClassNames_dialog_container__3hvldbk {
578
- right: 0;
579
- }
553
+ .options_optionsClassNames_item_container__140gzb51i {
554
+ container-name: options_optionsContainers_item__140gzb52;
580
555
  }
581
- @container style(--layoutShift__3hvldbd: true) {
582
- .drawer_drawerClassNames_dialog_container__3hvldbk {
583
- width: 0;
584
- overflow: hidden;
585
- transition: width var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
586
- }
556
+ .options_optionsClassNames_item_item__140gzb51j {
557
+ display: grid;
558
+ grid-template-areas: "icon label space action" "icon description space action";
559
+ grid-template-columns: auto auto 1fr auto;
560
+ grid-template-rows: auto auto;
561
+ align-items: center;
562
+ gap: var(--item-gap__140gzb51a);
563
+ padding: var(--item-y__140gzb519, 0) var(--item-x__140gzb518, 0);
564
+ border: 1px solid var(--item-border__140gzb5t, transparent);
565
+ background: var(--item-background__140gzb5s);
566
+ color: var(--item-color__140gzb5u);
567
+ cursor: pointer;
587
568
  }
588
- @container style(--layoutShift__3hvldbd: true) and style(--isOpen__3hvldbf: true) {
589
- .drawer_drawerClassNames_dialog_container__3hvldbk {
590
- width: var(--drawer-width__3hvldb6);
591
- }
569
+ .options_optionsClassNames_item_label__140gzb51l {
570
+ grid-area: label;
571
+ color: var(--label__140gzb5v);
592
572
  }
593
- @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: false) {
594
- .drawer_drawerClassNames_dialog_dialog__3hvldbl {
595
- transform: translateX(-100%);
596
- }
573
+ .options_optionsClassNames_item_description__140gzb51m {
574
+ grid-area: description;
575
+ color: var(--description__140gzb5w, var(--label__140gzb5v));
597
576
  }
598
- @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: false) {
599
- .drawer_drawerClassNames_dialog_dialog__3hvldbl {
600
- transform: translateX(100%);
601
- }
577
+ .options_optionsClassNames_item_shortcut__140gzb51n {
578
+ grid-area: action;
602
579
  }
603
- @container style(--isChild__3hvldbg: false) {
604
- .drawer_drawerClassNames_header_title__3hvldbo {
605
- grid-area: back title;
580
+ @container style(--isDisabled__140gzb5f: true) {
581
+ .options_optionsClassNames_item_item__140gzb51j {
582
+ cursor: not-allowed;
606
583
  }
607
584
  }
608
- @container style(--isChild__3hvldbg: true) {
609
- .drawer_drawerClassNames_header_title__3hvldbo {
610
- grid-area: title;
611
- text-align: center;
585
+ @container style(--hasDescription__140gzb5e: false) {
586
+ .options_optionsClassNames_item_label__140gzb51l {
587
+ grid-row-start: label;
588
+ grid-row-end: description;
612
589
  }
613
590
  }
614
591
  }
615
592
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
616
- .drawer_drawerClassNames_tabs_tabs__3hvldbi {
617
- height: 100%;
618
- display: block;
619
- position: relative;
593
+ .options_optionsClassNames_list_list__140gzb51e {
594
+ display: flex;
595
+ flex-direction: column;
596
+ background: var(--list-background__140gzb5l);
597
+ padding: var(--list-y__140gzb511, var(--v03__ljimwq2x)) var(--list-x__140gzb510, 0);
598
+ border: 1px solid var(--list-border__140gzb5m, transparent);
599
+ border-radius: var(--sm__ljimwq3d);
620
600
  }
621
- .drawer_drawerClassNames_tabs_list_list__3hvldbj {
622
- position: absolute;
623
- top: var(--list-top__3hvldba);
624
- transform: translateY(var(--list-translateY__3hvldbb, 0));
601
+ .options_optionsClassNames_item_icon_icon__140gzb51k {
602
+ grid-area: icon;
625
603
  }
626
- .drawer_drawerClassNames_header_back_container__3hvldbn {
627
- grid-area: back;
604
+ }
605
+
606
+ /* src/components/button/button.css.ts.vanilla.css -> assets/components/button/button.css */
607
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
608
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
609
+ .button_buttonClassNames_container__17k72zwp {
610
+ container-name: button_buttonContainer__17k72zw0;
611
+ width: var(--width__17k72zwb, fit-content);
612
+ display: block;
613
+ background: none;
614
+ padding: 0;
615
+ border: 0;
616
+ text-decoration: none;
617
+ color: currentcolor;
628
618
  }
629
- .drawer_drawerClassNames_header_close_container__3hvldbp {
630
- grid-area: close;
619
+ .button_buttonClassNames_button__17k72zwq {
620
+ display: flex;
621
+ justify-content: center;
622
+ align-items: center;
623
+ gap: var(--gap__17k72zw9);
624
+ min-width: var(--minWidth__17k72zwa, auto);
625
+ width: var(--width__17k72zwb, fit-content);
626
+ padding: var(--y__17k72zwd, 0) var(--x__17k72zwc, 0);
627
+ border: 1px solid var(--border__17k72zw7, transparent);
628
+ border-radius: var(--md__ljimwq3e);
629
+ background: var(--background__17k72zw6, var(--bareBackground__17k72zw2, none));
630
+ font-weight: 700;
631
+ color: var(--color__17k72zw8, var(--nonSolidColor__17k72zw1));
632
+ cursor: pointer;
631
633
  }
632
- @container style(--anchor__3hvldbc: left) {
633
- .drawer_drawerClassNames_tabs_list_list__3hvldbj {
634
- left: 100%;
634
+ @container (style(--variant__17k72zwg: icon) or style(--variant__17k72zwg: floating)) {
635
+ .button_buttonClassNames_button__17k72zwq {
636
+ min-width: auto;
635
637
  }
636
638
  }
637
- @container style(--anchor__3hvldbc: right) {
638
- .drawer_drawerClassNames_tabs_list_list__3hvldbj {
639
- right: 100%;
639
+ @container style(--variant__17k72zwg: floating) {
640
+ .button_buttonClassNames_button__17k72zwq {
641
+ border-radius: var(--round__ljimwq3g);
640
642
  }
641
643
  }
642
- @container style(--layoutShift__3hvldbd: false) {
643
- .drawer_drawerClassNames_tabs_list_list__3hvldbj {
644
- transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
644
+ @container (style(--variant__17k72zwg: floating) or style(--variant__17k72zwg: hollow)) {
645
+ .button_buttonClassNames_button__17k72zwq {
646
+ border-color: var(--border__17k72zw7, var(--hollowBorder__17k72zw3));
647
+ background: var(--background__17k72zw6, transparent);
645
648
  }
646
649
  }
647
- @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: true) {
648
- .drawer_drawerClassNames_tabs_list_list__3hvldbj {
649
- transform: translateX(var(--drawer-width__3hvldb6)) translateY(var(--list-translateY__3hvldbb, 0));
650
+ @container style(--variant__17k72zwg: solid) {
651
+ .button_buttonClassNames_button__17k72zwq {
652
+ background: var(--background__17k72zw6, var(--solidBackground__17k72zw4));
653
+ color: var(--color__17k72zw8, var(--solidColor__17k72zw5));
650
654
  }
651
655
  }
652
- @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: true) {
653
- .drawer_drawerClassNames_tabs_list_list__3hvldbj {
654
- transform: translateX(calc(var(--drawer-width__3hvldb6) * -1)) translateY(var(--list-translateY__3hvldbb, 0));
656
+ @container style(--isDisabled__17k72zwi: true) {
657
+ .button_buttonClassNames_button__17k72zwq {
658
+ cursor: not-allowed;
655
659
  }
656
660
  }
657
661
  }
658
662
 
659
- /* src/components/checkbox/checkbox.css.ts.vanilla.css -> assets/components/checkbox/checkbox.css */
663
+ /* src/components/textarea/textarea.css.ts.vanilla.css -> assets/components/textarea/textarea.css */
660
664
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
661
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
662
665
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
663
- .checkbox_checkboxClassNames_checkbox_container__1rajo3pp {
664
- container-name: checkbox_checkboxContainer__1rajo3p0;
665
- display: block;
666
- width: fit-content;
667
- }
668
- .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
669
- display: flex;
670
- align-items: center;
671
- gap: var(--gap__1rajo3p7);
672
- color: var(--color__1rajo3p4);
673
- }
674
- .checkbox_checkboxClassNames_checkbox_label__1rajo3ps {
675
- color: var(--color__1rajo3p4);
676
- }
677
- .checkbox_checkboxClassNames_group_container__1rajo3pt {
678
- container-name: checkbox_checkboxGroupContainer__1rajo3p1;
666
+ .textarea_textAreaClassNames_container__13oc1ofn {
667
+ container-name: textarea_textAreaContainer__13oc1of0;
679
668
  display: contents;
680
669
  }
681
- .checkbox_checkboxClassNames_group_group__1rajo3pu {
682
- display: flex;
683
- flex-direction: column;
684
- gap: var(--elementGap__1rajo3p8, var(--gap__1rajo3p7));
685
- }
686
- .checkbox_checkboxClassNames_group_label__1rajo3pv {
687
- color: var(--color__1rajo3p4);
688
- }
689
- @container style(--alignInput__1rajo3p9: start) {
690
- .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
691
- flex-direction: row-reverse;
692
- }
693
- }
694
- @container style(--alignInput__1rajo3p9: end) {
695
- .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
696
- flex-direction: row;
697
- }
670
+ .textarea_textAreaClassNames_textarea__13oc1ofo {
671
+ min-width: var(--minWidth__13oc1of4, auto);
672
+ width: var(--width__13oc1of5, 100%);
673
+ max-width: var(--maxWidth__13oc1of6, 100%);
674
+ min-height: var(--minHeight__13oc1of7, auto);
675
+ height: var(--height__13oc1of8, auto);
676
+ max-height: var(--maxHeight__13oc1of9, none);
677
+ display: block;
678
+ padding: var(--y__13oc1ofb, 0) var(--x__13oc1ofa, 0);
679
+ border: 1px solid var(--border__13oc1of2, transparent);
680
+ border-radius: var(--md__ljimwq3e);
681
+ background: var(--background__13oc1of1);
682
+ font-family: var(--mono__ljimwq3i);
683
+ color: var(--color__13oc1of3);
684
+ overflow: auto;
685
+ resize: var(--resize__13oc1ofc);
698
686
  }
699
- @container style(--isReadOnly__1rajo3ph: false) {
700
- .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
701
- cursor: pointer;
702
- }
687
+ .textarea_textAreaClassNames_textarea__13oc1ofo[contenteditable]:empty::before {
688
+ content: attr(data-placeholder);
703
689
  }
704
- @container style(--isDisabled__1rajo3pa: true) {
705
- .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
690
+ @container style(--isDisabled__13oc1ofe: true) {
691
+ .textarea_textAreaClassNames_textarea__13oc1ofo {
706
692
  cursor: not-allowed;
707
693
  }
708
694
  }
709
- @container style(--orientation__1rajo3pk: horizontal) {
710
- .checkbox_checkboxClassNames_group_group__1rajo3pu {
711
- flex-direction: row;
712
- }
713
- }
714
- @container style(--orientation__1rajo3pk: vertical) {
715
- .checkbox_checkboxClassNames_group_group__1rajo3pu {
716
- flex-direction: column;
717
- }
718
- }
719
- }
720
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
721
- .checkbox_checkboxClassNames_checkbox_icon_container__1rajo3pr {
722
- display: flex;
723
- align-items: center;
724
- justify-content: center;
725
- width: var(--dimension__1rajo3p6);
726
- height: var(--dimension__1rajo3p6);
727
- color: var(--indicator__1rajo3p5, currentcolor);
728
- border: 1px solid var(--border__1rajo3p2, transparent);
729
- border-radius: var(--sm__ljimwq3d);
730
- background: var(--background__1rajo3p3, none);
731
- }
732
695
  }
733
696
 
734
- /* src/components/switch/switch.css.ts.vanilla.css -> assets/components/switch/switch.css */
697
+ /* src/components/radio/radio.css.ts.vanilla.css -> assets/components/radio/radio.css */
735
698
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
736
699
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
737
- .switch_switchClassNames_container__1j8i4wgh {
738
- container-name: switch_switchContainer__1j8i4wg0;
700
+ .radio_radioClassNames_radio_container__hweo8bo {
701
+ container-name: radio_radioContainer__hweo8b0;
739
702
  width: fit-content;
740
703
  display: block;
741
704
  }
742
- .switch_switchClassNames_switch__1j8i4wgi {
743
- display: flex;
744
- align-items: center;
745
- justify-content: space-between;
746
- gap: var(--gap__1j8i4wg7);
747
- color: var(--color__1j8i4wg3);
748
- }
749
- .switch_switchClassNames_indicator__1j8i4wgk {
705
+ .radio_radioClassNames_radio_radio__hweo8bp {
750
706
  display: flex;
751
707
  align-items: center;
752
- padding: var(--gutter__1j8i4wg6);
753
- border: 1px solid var(--border__1j8i4wg1, transparent);
754
- border-radius: var(--round__ljimwq3g);
755
- background: var(--background__1j8i4wg2);
708
+ color: var(--color__hweo8b4);
709
+ gap: var(--gap__hweo8b6);
756
710
  }
757
- .switch_switchClassNames_indicator__1j8i4wgk::before {
711
+ .radio_radioClassNames_radio_radio__hweo8bp::before {
758
712
  content: "";
759
713
  display: block;
760
- width: var(--diameter__1j8i4wg5);
761
- height: var(--diameter__1j8i4wg5);
714
+ border: 1px solid var(--border__hweo8b2);
715
+ width: var(--diameter__hweo8b5);
716
+ height: var(--diameter__hweo8b5);
762
717
  border-radius: var(--round__ljimwq3g);
763
- margin: 0 var(--travel__1j8i4wg8);
764
- background: var(--indicator__1j8i4wg4);
718
+ background-image: radial-gradient(
719
+ circle,
720
+ var(--background__hweo8b3) 0,
721
+ var(--background__hweo8b3) 40%,
722
+ transparent 50%,
723
+ transparent 100%
724
+ );
765
725
  }
766
- @container style(--alignInput__1j8i4wg9: start) {
767
- .switch_switchClassNames_switch__1j8i4wgi {
726
+ .radio_radioClassNames_group_container__hweo8bq {
727
+ container-name: radio_radioGroupContainer__hweo8b1;
728
+ display: contents;
729
+ }
730
+ .radio_radioClassNames_group_group__hweo8br {
731
+ display: flex;
732
+ gap: var(--elementGap__hweo8b7, var(--gap__hweo8b6));
733
+ }
734
+ @container style(--alignInput__hweo8b8: start) {
735
+ .radio_radioClassNames_radio_radio__hweo8bp {
768
736
  flex-direction: row-reverse;
769
737
  }
770
738
  }
771
- @container style(--alignInput__1j8i4wg9: end) {
772
- .switch_switchClassNames_switch__1j8i4wgi {
739
+ @container style(--alignInput__hweo8b8: end) {
740
+ .radio_radioClassNames_radio_radio__hweo8bp {
773
741
  flex-direction: row;
774
742
  }
775
743
  }
776
- @container style(--isReadOnly__1j8i4wgf: false) {
777
- .switch_switchClassNames_switch__1j8i4wgi {
744
+ @container style(--isReadOnly__hweo8be: false) {
745
+ .radio_radioClassNames_radio_radio__hweo8bp {
778
746
  cursor: pointer;
779
747
  }
780
748
  }
781
- @container style(--isDisabled__1j8i4wga: true) {
782
- .switch_switchClassNames_switch__1j8i4wgi {
749
+ @container style(--isDisabled__hweo8b9: true) {
750
+ .radio_radioClassNames_radio_radio__hweo8bp {
783
751
  cursor: not-allowed;
784
752
  }
785
753
  }
786
- @container style(--isSelected__1j8i4wgg: false) {
787
- .switch_switchClassNames_indicator__1j8i4wgk::before {
788
- transform: translateX(calc(var(--travel__1j8i4wg8) * -1));
754
+ @container style(--orientation__hweo8bj: horizontal) {
755
+ .radio_radioClassNames_group_group__hweo8br {
756
+ flex-direction: row;
789
757
  }
790
758
  }
791
- @container style(--isSelected__1j8i4wgg: true) {
792
- .switch_switchClassNames_indicator__1j8i4wgk::before {
793
- transform: translateX(var(--travel__1j8i4wg8));
759
+ @container style(--orientation__hweo8bj: vertical) {
760
+ .radio_radioClassNames_group_group__hweo8br {
761
+ flex-direction: column;
794
762
  }
795
763
  }
796
764
  }
797
765
 
798
- /* src/components/query-builder/query-builder.css.ts.vanilla.css -> assets/components/query-builder/query-builder.css */
766
+ /* src/components/input/input.css.ts.vanilla.css -> assets/components/input/input.css */
799
767
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
800
768
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
801
- .query-builder_queryBuilderClassNames_queryBuilder_container__xkizz1d {
802
- container-name: query-builder_queryBuilderContainers_queryBuilder__xkizz0;
769
+ .input_inputClassNames_container__6yc0ril {
770
+ container-name: input_inputContainer__6yc0ri0;
803
771
  display: contents;
804
772
  }
805
- .query-builder_queryBuilderClassNames_queryBuilder_queryBuilder__xkizz1e {
806
- border: 1px solid var(--queryBuilder-border__xkizz5, transparent);
807
- background: var(--queryBuilder-background__xkizz4);
808
- color: var(--queryBuilder-color__xkizz6);
809
- padding: var(--queryBuilder-y__xkizzf, 0) var(--queryBuilder-x__xkizze, 0);
773
+ .input_inputClassNames_sizer__6yc0rim {
774
+ min-width: var(--minWidth__6yc0ri4, auto);
775
+ width: var(--width__6yc0ri5, 100%);
776
+ max-width: var(--maxWidth__6yc0ri6, 100%);
810
777
  }
811
- .query-builder_queryBuilderClassNames_group_group__xkizz1f {
812
- border: 1px solid var(--group-border__xkizz8, transparent);
778
+ .input_inputClassNames_input__6yc0rin {
779
+ width: 100%;
780
+ padding: var(--y__6yc0ri8, 0) var(--x__6yc0ri7, 0);
781
+ border: 1px solid var(--border__6yc0ri2, transparent);
813
782
  border-radius: var(--md__ljimwq3e);
814
- background: var(--group-background__xkizz7);
815
- color: var(--group-color__xkizz9);
816
- display: flex;
817
- flex-direction: column;
818
- gap: var(--group-gap__xkizzg);
819
- padding: var(--group-y__xkizzi, 0) var(--group-x__xkizzh, 0);
820
- width: fit-content;
821
- }
822
- .query-builder_queryBuilderClassNames_group_header__xkizz1g {
823
- display: flex;
824
- padding: var(--header-y__xkizzk, 0) var(--header-x__xkizzj, 0);
783
+ background: var(--background__6yc0ri1);
784
+ font-family: var(--mono__ljimwq3i);
785
+ color: var(--color__6yc0ri3);
825
786
  }
826
- .query-builder_queryBuilderClassNames_group_body__xkizz1h {
827
- display: grid;
828
- align-items: start;
829
- gap: var(--body-gap__xkizzl);
830
- grid-template-columns: max-content min-content min-content max-content min-content;
831
- padding: var(--body-y__xkizzn, 0) var(--body-x__xkizzm, 0);
787
+ .input_inputClassNames_input__6yc0rin::-webkit-inner-spin-button {
788
+ display: none;
832
789
  }
833
- .query-builder_queryBuilderClassNames_group_footer__xkizz1i {
834
- display: flex;
835
- justify-content: flex-end;
836
- padding: var(--footer-y__xkizz14, 0) var(--footer-x__xkizz13, 0);
790
+ @container style(--isDisabled__6yc0ric: true) {
791
+ .input_inputClassNames_input__6yc0rin {
792
+ cursor: not-allowed;
793
+ }
837
794
  }
838
- .query-builder_queryBuilderClassNames_rule_container__xkizz1j {
839
- container-name: query-builder_queryBuilderContainers_rule__xkizz2;
795
+ }
796
+
797
+ /* src/components/select/select.css.ts.vanilla.css -> assets/components/select/select.css */
798
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
799
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
800
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
801
+ .select_selectClassNames_container__1j26mgud {
802
+ container-name: select_selectContainer__1j26mgu0;
840
803
  display: contents;
841
804
  }
842
- .query-builder_queryBuilderClassNames_rule_rule__xkizz1k {
843
- display: grid;
844
- grid-template-columns: subgrid;
845
- grid-column-start: 1;
846
- grid-column-end: -1;
847
- padding: var(--rule-y__xkizzp, 0) var(--rule-x__xkizzo, 0);
848
- border: 1px solid var(--rule-border__xkizzb, transparent);
849
- border-radius: var(--sm__ljimwq3d);
850
- background: var(--rule-background__xkizza);
851
- color: var(--rule-color__xkizzc);
852
- }
853
- .query-builder_queryBuilderClassNames_rule_field__xkizz1l {
854
- width: var(--field-width__xkizzq, 100%);
855
- min-width: var(--field-minWidth__xkizzs, var(--field-width__xkizzq));
856
- max-width: var(--field-maxWidth__xkizzr, var(--field-width__xkizzq));
857
- }
858
- .query-builder_queryBuilderClassNames_rule_operator__xkizz1m {
859
- width: var(--operator-width__xkizzt, 100%);
860
- min-width: var(--operator-minWidth__xkizzv, var(--operator-width__xkizzt));
861
- max-width: var(--operator-maxWidth__xkizzu, var(--operator-width__xkizzt));
862
- }
863
- .query-builder_queryBuilderClassNames_rule_values__xkizz1n {
805
+ .select_selectClassNames_select__1j26mgue {
806
+ width: var(--width__1j26mgu3, fit-content);
864
807
  display: flex;
865
808
  flex-direction: column;
866
- gap: var(--values-gap__xkizzw, var(--body-gap__xkizzl, 0));
867
- width: var(--values-width__xkizzx, 100%);
868
- min-width: var(--values-minWidth__xkizzz, var(--values-width__xkizzx));
869
- max-width: var(--values-maxWidth__xkizzy, var(--values-width__xkizzx));
809
+ align-items: flex-start;
870
810
  }
871
- .query-builder_queryBuilderClassNames_rule_source__xkizz1o {
872
- width: var(--source-width__xkizz10, 100%);
873
- min-width: var(--source-minWidth__xkizz12, var(--source-width__xkizz10));
874
- max-width: var(--source-maxWidth__xkizz11, var(--source-width__xkizz10));
811
+ .select_selectClassNames_label__1j26mguf {
812
+ color: var(--color__6yc0ri3);
875
813
  }
876
- .query-builder_queryBuilderClassNames_rule_value__xkizz1p {
877
- width: 100%;
814
+ .select_selectClassNames_description__1j26mguh {
815
+ color: var(--description-color__1j26mgu1);
878
816
  }
879
- .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
880
- color: var(--error-color__xkizzd);
817
+ .select_selectClassNames_error__1j26mgui {
818
+ color: var(--error-color__1j26mgu2);
881
819
  }
882
- @container (style(--before__xkizz17: 1) or style(--before__xkizz17: 2)) and style(--after__xkizz16: 0) {
883
- .query-builder_queryBuilderClassNames_group_body__xkizz1h {
884
- grid-template-columns: repeat(var(--before__xkizz17), min-content) max-content min-content min-content max-content min-content;
885
- }
820
+ .select_selectClassNames_value__1j26mguj {
821
+ overflow: hidden;
822
+ text-overflow: ellipsis;
886
823
  }
887
- @container style(--before__xkizz17: 0) and (style(--after__xkizz16: 1) or style(--after__xkizz16: 2)) {
888
- .query-builder_queryBuilderClassNames_group_body__xkizz1h {
889
- grid-template-columns: max-content min-content min-content max-content repeat(var(--after__xkizz16), min-content) min-content;
890
- }
824
+ }
825
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
826
+ .select_selectClassNames_toggle_button__1j26mgug {
827
+ font-family: var(--mono__ljimwq3i);
828
+ justify-content: space-between;
891
829
  }
892
- @container (style(--before__xkizz17: 1) or style(--before__xkizz17: 2)) and (style(--after__xkizz16: 1) or style(--after__xkizz16: 2)) {
893
- .query-builder_queryBuilderClassNames_group_body__xkizz1h {
894
- grid-template-columns: repeat(var(--before__xkizz17), min-content) max-content min-content min-content max-content repeat(var(--after__xkizz16), min-content) min-content;
895
- }
830
+ }
831
+
832
+ /* src/components/dialog/dialog.css.ts.vanilla.css -> assets/components/dialog/dialog.css */
833
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
834
+ .dialog_dialogClassNames_modal__8ms59zk {
835
+ position: fixed;
836
+ top: 50%;
837
+ left: 50%;
838
+ z-index: var(--dialog__ljimwq5a);
839
+ transform: translate(-50%, -50%);
840
+ }
841
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
842
+ .dialog_header__8ms59zg {
843
+ margin-bottom: calc(var(--gap-header-after__8ms59z7) - var(--gap-default__8ms59z6));
896
844
  }
897
- @container style(--before__xkizz17: 2) {
898
- .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
899
- grid-column-start: 3;
900
- }
845
+ .dialog_content__8ms59zh {
846
+ color: var(--content-color__8ms59z2);
901
847
  }
902
- @container style(--before__xkizz17: 1) {
903
- .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
904
- grid-column-start: 2;
905
- }
848
+ .dialog_dialogClassNames_portal__8ms59zi {
849
+ display: contents;
906
850
  }
907
- @container style(--before__xkizz17: 0) {
908
- .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
909
- grid-column-start: 1;
910
- }
851
+ .dialog_dialogClassNames_container__8ms59zj {
852
+ container-name: dialog_dialogContainer__8ms59z0;
853
+ display: contents;
911
854
  }
912
- @container style(--after__xkizz16: 2) {
913
- .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
914
- grid-column-end: -4;
915
- }
855
+ .dialog_dialogClassNames_container__8ms59zj::before {
856
+ content: "";
857
+ width: 100%;
858
+ height: var(--visual-viewport-height);
859
+ position: fixed;
860
+ top: 0;
861
+ left: 0;
862
+ z-index: var(--dialog__ljimwq5a);
863
+ background: var(--overlay__8ms59z1);
916
864
  }
917
- @container style(--after__xkizz16: 1) {
918
- .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
919
- grid-column-end: -3;
920
- }
865
+ .dialog_dialogClassNames_dialog__8ms59zl {
866
+ width: var(--width__8ms59z3, 300px);
867
+ display: flex;
868
+ flex-direction: column;
869
+ gap: var(--gap-default__8ms59z6);
870
+ padding: var(--y__8ms59z5, 0) var(--x__8ms59z4, 0);
871
+ border-radius: var(--md__ljimwq3e);
921
872
  }
922
- @container style(--after__xkizz16: 0) {
923
- .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
924
- grid-column-end: -2;
925
- }
873
+ .dialog_dialogClassNames_footer__8ms59zm {
874
+ display: flex;
875
+ justify-content: flex-end;
876
+ margin-top: calc(var(--gap-footer-before__8ms59z9) - var(--gap-default__8ms59z6));
877
+ }
878
+ }
879
+ @container style(--isGlobal__8ms59ze: false) {
880
+ .dialog_dialogClassNames_modal__8ms59zk {
881
+ position: absolute;
926
882
  }
927
883
  }
928
884
 
@@ -1025,219 +981,197 @@
1025
981
  }
1026
982
  }
1027
983
 
1028
- /* src/components/options/options.css.ts.vanilla.css -> assets/components/options/options.css */
984
+ /* src/components/switch/switch.css.ts.vanilla.css -> assets/components/switch/switch.css */
1029
985
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1030
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
1031
986
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1032
- .options_optionsClassNames_options_container__140gzb519 {
1033
- container-name: options_optionsContainers_options__140gzb50;
987
+ .switch_switchClassNames_container__1j8i4wgh {
988
+ container-name: switch_switchContainer__1j8i4wg0;
989
+ width: fit-content;
1034
990
  display: block;
1035
991
  }
1036
- .options_optionsClassNames_options_options__140gzb51a {
1037
- min-width: var(--options-minWidth__140gzb5x, var(--trigger-width));
1038
- padding: var(--options-y__140gzb5z, 0) var(--options-x__140gzb5y, 0);
1039
- }
1040
- .options_optionsClassNames_list_container__140gzb51b {
1041
- container-name: options_optionsContainers_list__140gzb51;
1042
- display: contents;
1043
- }
1044
- .options_optionsClassNames_list_list__140gzb51c {
992
+ .switch_switchClassNames_switch__1j8i4wgi {
1045
993
  display: flex;
1046
- flex-direction: column;
1047
- background: var(--list-background__140gzb5l);
1048
- border: 1px solid var(--list-border__140gzb5m, transparent);
1049
- border-radius: var(--sm__ljimwq3d);
1050
- }
1051
- .options_optionsClassNames_list_section__140gzb51d {
1052
- padding: var(--section-y__140gzb511, 0) var(--section-x__140gzb510, 0);
1053
- }
1054
- .options_optionsClassNames_list_header__140gzb51e {
1055
- padding: var(--header-y__140gzb513, var(--item-y__140gzb517, 0)) var(--header-x__140gzb512, var(--item-x__140gzb516, 0));
1056
- border: 1px solid transparent;
1057
- background: var(--header-background__140gzb5o);
1058
- color: var(--header-color__140gzb5q);
1059
- }
1060
- .options_optionsClassNames_list_separator__140gzb51f {
1061
- height: 1px;
1062
- margin: var(--separator-y__140gzb515, 0) var(--separator-x__140gzb514, 0);
1063
- background: var(--separator__140gzb5r);
1064
- }
1065
- .options_optionsClassNames_item_container__140gzb51g {
1066
- container-name: options_optionsContainers_item__140gzb52;
1067
- }
1068
- .options_optionsClassNames_item_item__140gzb51h {
1069
- display: grid;
1070
- grid-template-areas: "icon label space action" "icon description space action";
1071
- grid-template-columns: auto auto 1fr auto;
1072
- grid-template-rows: auto auto;
1073
994
  align-items: center;
1074
- gap: var(--item-gap__140gzb518);
1075
- padding: var(--item-y__140gzb517, 0) var(--item-x__140gzb516, 0);
1076
- border: 1px solid var(--item-border__140gzb5t, transparent);
1077
- background: var(--item-background__140gzb5s);
1078
- color: var(--item-color__140gzb5u);
1079
- cursor: pointer;
1080
- }
1081
- .options_optionsClassNames_item_label__140gzb51j {
1082
- grid-area: label;
1083
- color: var(--label__140gzb5v);
995
+ justify-content: space-between;
996
+ gap: var(--gap__1j8i4wg7);
997
+ color: var(--color__1j8i4wg3);
1084
998
  }
1085
- .options_optionsClassNames_item_description__140gzb51k {
1086
- grid-area: description;
1087
- color: var(--description__140gzb5w, var(--label__140gzb5v));
999
+ .switch_switchClassNames_indicator__1j8i4wgk {
1000
+ display: flex;
1001
+ align-items: center;
1002
+ padding: var(--gutter__1j8i4wg6);
1003
+ border: 1px solid var(--border__1j8i4wg1, transparent);
1004
+ border-radius: var(--round__ljimwq3g);
1005
+ background: var(--background__1j8i4wg2);
1088
1006
  }
1089
- .options_optionsClassNames_item_shortcut__140gzb51l {
1090
- grid-area: action;
1007
+ .switch_switchClassNames_indicator__1j8i4wgk::before {
1008
+ content: "";
1009
+ display: block;
1010
+ width: var(--diameter__1j8i4wg5);
1011
+ height: var(--diameter__1j8i4wg5);
1012
+ border-radius: var(--round__ljimwq3g);
1013
+ margin: 0 var(--travel__1j8i4wg8);
1014
+ background: var(--indicator__1j8i4wg4);
1091
1015
  }
1092
- @container style(--isDisabled__140gzb5f: true) {
1093
- .options_optionsClassNames_item_item__140gzb51h {
1094
- cursor: not-allowed;
1016
+ @container style(--alignInput__1j8i4wg9: start) {
1017
+ .switch_switchClassNames_switch__1j8i4wgi {
1018
+ flex-direction: row-reverse;
1095
1019
  }
1096
1020
  }
1097
- @container style(--hasDescription__140gzb5e: false) {
1098
- .options_optionsClassNames_item_label__140gzb51j {
1099
- grid-row-start: label;
1100
- grid-row-end: description;
1021
+ @container style(--alignInput__1j8i4wg9: end) {
1022
+ .switch_switchClassNames_switch__1j8i4wgi {
1023
+ flex-direction: row;
1101
1024
  }
1102
1025
  }
1103
- }
1104
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1105
- .options_optionsClassNames_item_icon_icon__140gzb51i {
1106
- grid-area: icon;
1107
- }
1108
- }
1109
-
1110
- /* src/components/input/input.css.ts.vanilla.css -> assets/components/input/input.css */
1111
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1112
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1113
- .input_inputClassNames_container__6yc0ril {
1114
- container-name: input_inputContainer__6yc0ri0;
1115
- display: contents;
1116
- }
1117
- .input_inputClassNames_sizer__6yc0rim {
1118
- min-width: var(--minWidth__6yc0ri4, auto);
1119
- width: var(--width__6yc0ri5, 100%);
1120
- max-width: var(--maxWidth__6yc0ri6, 100%);
1121
- }
1122
- .input_inputClassNames_input__6yc0rin {
1123
- width: 100%;
1124
- padding: var(--y__6yc0ri8, 0) var(--x__6yc0ri7, 0);
1125
- border: 1px solid var(--border__6yc0ri2, transparent);
1126
- border-radius: var(--md__ljimwq3e);
1127
- background: var(--background__6yc0ri1);
1128
- font-family: var(--mono__ljimwq3i);
1129
- color: var(--color__6yc0ri3);
1130
- }
1131
- .input_inputClassNames_input__6yc0rin::-webkit-inner-spin-button {
1132
- display: none;
1026
+ @container style(--isReadOnly__1j8i4wgf: false) {
1027
+ .switch_switchClassNames_switch__1j8i4wgi {
1028
+ cursor: pointer;
1029
+ }
1133
1030
  }
1134
- @container style(--isDisabled__6yc0ric: true) {
1135
- .input_inputClassNames_input__6yc0rin {
1031
+ @container style(--isDisabled__1j8i4wga: true) {
1032
+ .switch_switchClassNames_switch__1j8i4wgi {
1136
1033
  cursor: not-allowed;
1137
1034
  }
1138
1035
  }
1036
+ @container style(--isSelected__1j8i4wgg: false) {
1037
+ .switch_switchClassNames_indicator__1j8i4wgk::before {
1038
+ transform: translateX(calc(var(--travel__1j8i4wg8) * -1));
1039
+ }
1040
+ }
1041
+ @container style(--isSelected__1j8i4wgg: true) {
1042
+ .switch_switchClassNames_indicator__1j8i4wgk::before {
1043
+ transform: translateX(var(--travel__1j8i4wg8));
1044
+ }
1045
+ }
1139
1046
  }
1140
1047
 
1141
- /* src/components/select/select.css.ts.vanilla.css -> assets/components/select/select.css */
1048
+ /* src/components/query-builder/query-builder.css.ts.vanilla.css -> assets/components/query-builder/query-builder.css */
1142
1049
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1143
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
1144
1050
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1145
- .select_selectClassNames_container__1j26mgud {
1146
- container-name: select_selectContainer__1j26mgu0;
1051
+ .query-builder_queryBuilderClassNames_queryBuilder_container__xkizz1d {
1052
+ container-name: query-builder_queryBuilderContainers_queryBuilder__xkizz0;
1147
1053
  display: contents;
1148
1054
  }
1149
- .select_selectClassNames_select__1j26mgue {
1150
- width: var(--width__1j26mgu3, fit-content);
1055
+ .query-builder_queryBuilderClassNames_queryBuilder_queryBuilder__xkizz1e {
1056
+ border: 1px solid var(--queryBuilder-border__xkizz5, transparent);
1057
+ background: var(--queryBuilder-background__xkizz4);
1058
+ color: var(--queryBuilder-color__xkizz6);
1059
+ padding: var(--queryBuilder-y__xkizzf, 0) var(--queryBuilder-x__xkizze, 0);
1060
+ }
1061
+ .query-builder_queryBuilderClassNames_group_group__xkizz1f {
1062
+ border: 1px solid var(--group-border__xkizz8, transparent);
1063
+ border-radius: var(--md__ljimwq3e);
1064
+ background: var(--group-background__xkizz7);
1065
+ color: var(--group-color__xkizz9);
1151
1066
  display: flex;
1152
1067
  flex-direction: column;
1153
- align-items: flex-start;
1068
+ gap: var(--group-gap__xkizzg);
1069
+ padding: var(--group-y__xkizzi, 0) var(--group-x__xkizzh, 0);
1070
+ width: fit-content;
1154
1071
  }
1155
- .select_selectClassNames_label__1j26mguf {
1156
- color: var(--color__6yc0ri3);
1072
+ .query-builder_queryBuilderClassNames_group_header__xkizz1g {
1073
+ display: flex;
1074
+ padding: var(--header-y__xkizzk, 0) var(--header-x__xkizzj, 0);
1157
1075
  }
1158
- .select_selectClassNames_description__1j26mguh {
1159
- color: var(--description-color__1j26mgu1);
1076
+ .query-builder_queryBuilderClassNames_group_body__xkizz1h {
1077
+ display: grid;
1078
+ align-items: start;
1079
+ gap: var(--body-gap__xkizzl);
1080
+ grid-template-columns: max-content min-content min-content max-content min-content;
1081
+ padding: var(--body-y__xkizzn, 0) var(--body-x__xkizzm, 0);
1160
1082
  }
1161
- .select_selectClassNames_error__1j26mgui {
1162
- color: var(--error-color__1j26mgu2);
1083
+ .query-builder_queryBuilderClassNames_group_footer__xkizz1i {
1084
+ display: flex;
1085
+ justify-content: flex-end;
1086
+ padding: var(--footer-y__xkizz14, 0) var(--footer-x__xkizz13, 0);
1163
1087
  }
1164
- .select_selectClassNames_value__1j26mguj {
1165
- overflow: hidden;
1166
- text-overflow: ellipsis;
1088
+ .query-builder_queryBuilderClassNames_rule_container__xkizz1j {
1089
+ container-name: query-builder_queryBuilderContainers_rule__xkizz2;
1090
+ display: contents;
1167
1091
  }
1168
- }
1169
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1170
- .select_selectClassNames_toggle_button__1j26mgug {
1171
- font-family: var(--mono__ljimwq3i);
1172
- justify-content: space-between;
1092
+ .query-builder_queryBuilderClassNames_rule_rule__xkizz1k {
1093
+ display: grid;
1094
+ grid-template-columns: subgrid;
1095
+ grid-column-start: 1;
1096
+ grid-column-end: -1;
1097
+ padding: var(--rule-y__xkizzp, 0) var(--rule-x__xkizzo, 0);
1098
+ border: 1px solid var(--rule-border__xkizzb, transparent);
1099
+ border-radius: var(--sm__ljimwq3d);
1100
+ background: var(--rule-background__xkizza);
1101
+ color: var(--rule-color__xkizzc);
1173
1102
  }
1174
- }
1175
-
1176
- /* src/components/radio/radio.css.ts.vanilla.css -> assets/components/radio/radio.css */
1177
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1178
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1179
- .radio_radioClassNames_radio_container__hweo8bo {
1180
- container-name: radio_radioContainer__hweo8b0;
1181
- width: fit-content;
1182
- display: block;
1103
+ .query-builder_queryBuilderClassNames_rule_field__xkizz1l {
1104
+ width: var(--field-width__xkizzq, 100%);
1105
+ min-width: var(--field-minWidth__xkizzs, var(--field-width__xkizzq));
1106
+ max-width: var(--field-maxWidth__xkizzr, var(--field-width__xkizzq));
1183
1107
  }
1184
- .radio_radioClassNames_radio_radio__hweo8bp {
1108
+ .query-builder_queryBuilderClassNames_rule_operator__xkizz1m {
1109
+ width: var(--operator-width__xkizzt, 100%);
1110
+ min-width: var(--operator-minWidth__xkizzv, var(--operator-width__xkizzt));
1111
+ max-width: var(--operator-maxWidth__xkizzu, var(--operator-width__xkizzt));
1112
+ }
1113
+ .query-builder_queryBuilderClassNames_rule_values__xkizz1n {
1185
1114
  display: flex;
1186
- align-items: center;
1187
- color: var(--color__hweo8b4);
1188
- gap: var(--gap__hweo8b6);
1115
+ flex-direction: column;
1116
+ gap: var(--values-gap__xkizzw, var(--body-gap__xkizzl, 0));
1117
+ width: var(--values-width__xkizzx, 100%);
1118
+ min-width: var(--values-minWidth__xkizzz, var(--values-width__xkizzx));
1119
+ max-width: var(--values-maxWidth__xkizzy, var(--values-width__xkizzx));
1189
1120
  }
1190
- .radio_radioClassNames_radio_radio__hweo8bp::before {
1191
- content: "";
1192
- display: block;
1193
- border: 1px solid var(--border__hweo8b2);
1194
- width: var(--diameter__hweo8b5);
1195
- height: var(--diameter__hweo8b5);
1196
- border-radius: var(--round__ljimwq3g);
1197
- background-image: radial-gradient(
1198
- circle,
1199
- var(--background__hweo8b3) 0,
1200
- var(--background__hweo8b3) 40%,
1201
- transparent 50%,
1202
- transparent 100%
1203
- );
1121
+ .query-builder_queryBuilderClassNames_rule_source__xkizz1o {
1122
+ width: var(--source-width__xkizz10, 100%);
1123
+ min-width: var(--source-minWidth__xkizz12, var(--source-width__xkizz10));
1124
+ max-width: var(--source-maxWidth__xkizz11, var(--source-width__xkizz10));
1204
1125
  }
1205
- .radio_radioClassNames_group_container__hweo8bq {
1206
- container-name: radio_radioGroupContainer__hweo8b1;
1207
- display: contents;
1126
+ .query-builder_queryBuilderClassNames_rule_value__xkizz1p {
1127
+ width: 100%;
1208
1128
  }
1209
- .radio_radioClassNames_group_group__hweo8br {
1210
- display: flex;
1211
- gap: var(--elementGap__hweo8b7, var(--gap__hweo8b6));
1129
+ .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
1130
+ color: var(--error-color__xkizzd);
1212
1131
  }
1213
- @container style(--alignInput__hweo8b8: start) {
1214
- .radio_radioClassNames_radio_radio__hweo8bp {
1215
- flex-direction: row-reverse;
1132
+ @container (style(--before__xkizz17: 1) or style(--before__xkizz17: 2)) and style(--after__xkizz16: 0) {
1133
+ .query-builder_queryBuilderClassNames_group_body__xkizz1h {
1134
+ grid-template-columns: repeat(var(--before__xkizz17), min-content) max-content min-content min-content max-content min-content;
1216
1135
  }
1217
1136
  }
1218
- @container style(--alignInput__hweo8b8: end) {
1219
- .radio_radioClassNames_radio_radio__hweo8bp {
1220
- flex-direction: row;
1137
+ @container style(--before__xkizz17: 0) and (style(--after__xkizz16: 1) or style(--after__xkizz16: 2)) {
1138
+ .query-builder_queryBuilderClassNames_group_body__xkizz1h {
1139
+ grid-template-columns: max-content min-content min-content max-content repeat(var(--after__xkizz16), min-content) min-content;
1221
1140
  }
1222
1141
  }
1223
- @container style(--isReadOnly__hweo8be: false) {
1224
- .radio_radioClassNames_radio_radio__hweo8bp {
1225
- cursor: pointer;
1142
+ @container (style(--before__xkizz17: 1) or style(--before__xkizz17: 2)) and (style(--after__xkizz16: 1) or style(--after__xkizz16: 2)) {
1143
+ .query-builder_queryBuilderClassNames_group_body__xkizz1h {
1144
+ grid-template-columns: repeat(var(--before__xkizz17), min-content) max-content min-content min-content max-content repeat(var(--after__xkizz16), min-content) min-content;
1226
1145
  }
1227
1146
  }
1228
- @container style(--isDisabled__hweo8b9: true) {
1229
- .radio_radioClassNames_radio_radio__hweo8bp {
1230
- cursor: not-allowed;
1147
+ @container style(--before__xkizz17: 2) {
1148
+ .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
1149
+ grid-column-start: 3;
1231
1150
  }
1232
1151
  }
1233
- @container style(--orientation__hweo8bj: horizontal) {
1234
- .radio_radioClassNames_group_group__hweo8br {
1235
- flex-direction: row;
1152
+ @container style(--before__xkizz17: 1) {
1153
+ .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
1154
+ grid-column-start: 2;
1236
1155
  }
1237
1156
  }
1238
- @container style(--orientation__hweo8bj: vertical) {
1239
- .radio_radioClassNames_group_group__hweo8br {
1240
- flex-direction: column;
1157
+ @container style(--before__xkizz17: 0) {
1158
+ .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
1159
+ grid-column-start: 1;
1160
+ }
1161
+ }
1162
+ @container style(--after__xkizz16: 2) {
1163
+ .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
1164
+ grid-column-end: -4;
1165
+ }
1166
+ }
1167
+ @container style(--after__xkizz16: 1) {
1168
+ .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
1169
+ grid-column-end: -3;
1170
+ }
1171
+ }
1172
+ @container style(--after__xkizz16: 0) {
1173
+ .query-builder_queryBuilderClassNames_rule_error__xkizz1q {
1174
+ grid-column-end: -2;
1241
1175
  }
1242
1176
  }
1243
1177
  }
@@ -1395,187 +1329,145 @@
1395
1329
  }
1396
1330
  }
1397
1331
  @container style(--allowsDragging__kbtjn3f: false) {
1398
- .tree_treeClassNames_item_drag_container__kbtjn31p {
1399
- display: none;
1400
- }
1401
- }
1402
- }
1403
-
1404
- /* src/components/combo-box/combo-box.css.ts.vanilla.css -> assets/components/combo-box/combo-box.css */
1405
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1406
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
1407
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1408
- .combo-box_comboBoxClassNames_container__12tc9p8a {
1409
- container-name: combo-box_comboBoxContainer__12tc9p80;
1410
- display: contents;
1411
- }
1412
- .combo-box_comboBoxClassNames_comboBox__12tc9p8b {
1413
- width: fit-content;
1414
- display: flex;
1415
- flex-direction: column;
1416
- align-items: flex-start;
1417
- }
1418
- .combo-box_comboBoxClassNames_label__12tc9p8c {
1419
- color: var(--color__6yc0ri3);
1420
- }
1421
- .combo-box_comboBoxClassNames_group__12tc9p8d {
1422
- position: relative;
1423
- display: flex;
1424
- align-items: center;
1425
- padding: var(--y__12tc9p84, 0) var(--x__12tc9p83, 0);
1426
- }
1427
- .combo-box_comboBoxClassNames_description__12tc9p8h {
1428
- color: var(--description-color__12tc9p81);
1429
- }
1430
- .combo-box_comboBoxClassNames_error__12tc9p8i {
1431
- color: var(--error-color__12tc9p82);
1432
- }
1433
- }
1434
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1435
- .combo-box_comboBoxClassNames_input_sizer__12tc9p8e::before {
1436
- content: "";
1437
- position: absolute;
1438
- top: 0;
1439
- right: 0;
1440
- bottom: 0;
1441
- left: 0;
1442
- display: block;
1443
- border: 1px solid var(--border__6yc0ri2, transparent);
1444
- border-radius: var(--md__ljimwq3e);
1445
- background: var(--background__6yc0ri1);
1446
- color: var(--color__6yc0ri3);
1447
- }
1448
- .combo-box_comboBoxClassNames_input_sizer__12tc9p8e:has(:focus-visible)::before {
1449
- outline: var(--width__ljimwq5f) var(--style__ljimwq5g) var(--color__ljimwq5h, Highlight);
1450
- outline: var(--width__ljimwq5f) var(--style__ljimwq5g) var(--color__ljimwq5h, -webkit-focus-ring-color);
1451
- outline-offset: var(--offset__ljimwq5e);
1452
- }
1453
- .combo-box_comboBoxClassNames_input_input__12tc9p8f {
1454
- position: relative;
1455
- padding: 0;
1456
- border: none;
1457
- background: none;
1458
- }
1459
- .combo-box_comboBoxClassNames_input_input__12tc9p8f::-webkit-search-cancel-button, .combo-box_comboBoxClassNames_input_input__12tc9p8f::-webkit-search-decoration {
1460
- -webkit-appearance: none;
1461
- }
1462
- .combo-box_comboBoxClassNames_input_input__12tc9p8f:focus-visible {
1463
- outline: none;
1464
- }
1465
- .combo-box_comboBoxClassNames_toggle_button__12tc9p8g {
1466
- position: relative;
1467
- padding: 0;
1468
- background: none;
1332
+ .tree_treeClassNames_item_drag_container__kbtjn31p {
1333
+ display: none;
1334
+ }
1469
1335
  }
1470
1336
  }
1471
1337
 
1472
- /* src/components/button/button.css.ts.vanilla.css -> assets/components/button/button.css */
1338
+ /* src/components/picker/picker.css.ts.vanilla.css -> assets/components/picker/picker.css */
1473
1339
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1474
1340
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1475
- .button_buttonClassNames_container__17k72zwp {
1476
- container-name: button_buttonContainer__17k72zw0;
1477
- width: var(--width__17k72zwb, fit-content);
1478
- display: block;
1479
- background: none;
1480
- padding: 0;
1481
- border: 0;
1482
- text-decoration: none;
1483
- color: currentcolor;
1341
+ .picker_pickerClassNames_list_container__k0t389k {
1342
+ container-name: picker_pickerContainers_list__k0t3890;
1343
+ display: contents;
1484
1344
  }
1485
- .button_buttonClassNames_button__17k72zwq {
1486
- display: flex;
1487
- justify-content: center;
1488
- align-items: center;
1489
- gap: var(--gap__17k72zw9);
1490
- min-width: var(--minWidth__17k72zwa, auto);
1491
- width: var(--width__17k72zwb, fit-content);
1492
- padding: var(--y__17k72zwd, 0) var(--x__17k72zwc, 0);
1493
- border: 1px solid var(--border__17k72zw7, transparent);
1494
- border-radius: var(--md__ljimwq3e);
1495
- background: var(--background__17k72zw6, var(--bareBackground__17k72zw2, none));
1496
- font-weight: 700;
1497
- color: var(--color__17k72zw8, var(--nonSolidColor__17k72zw1));
1498
- cursor: pointer;
1345
+ .picker_pickerClassNames_list_list__k0t389l {
1346
+ gap: var(--gap__k0t3892);
1499
1347
  }
1500
- @container (style(--variant__17k72zwg: icon) or style(--variant__17k72zwg: floating)) {
1501
- .button_buttonClassNames_button__17k72zwq {
1502
- min-width: auto;
1348
+ .picker_pickerClassNames_item_container__k0t389m {
1349
+ container-name: picker_pickerContainers_item__k0t3891;
1350
+ display: contents;
1351
+ }
1352
+ .picker_pickerClassNames_item_item__k0t389n {
1353
+ border: 1px solid var(--border__k0t389a, transparent);
1354
+ background: var(--background__k0t3899);
1355
+ color: var(--color__k0t389b);
1356
+ }
1357
+ @container style(--layout__k0t3894: grid) {
1358
+ .picker_pickerClassNames_list_list__k0t389l {
1359
+ display: grid;
1360
+ grid-template-columns: repeat(var(--columns__k0t3893, 1), min-content);
1503
1361
  }
1504
1362
  }
1505
- @container style(--variant__17k72zwg: floating) {
1506
- .button_buttonClassNames_button__17k72zwq {
1507
- border-radius: var(--round__ljimwq3g);
1363
+ @container style(--layout__k0t3894: stack) and style(--orientation__k0t3895: horizontal) {
1364
+ .picker_pickerClassNames_list_list__k0t389l {
1365
+ display: flex;
1366
+ flex-direction: row;
1508
1367
  }
1509
1368
  }
1510
- @container (style(--variant__17k72zwg: floating) or style(--variant__17k72zwg: hollow)) {
1511
- .button_buttonClassNames_button__17k72zwq {
1512
- border-color: var(--border__17k72zw7, var(--hollowBorder__17k72zw3));
1513
- background: var(--background__17k72zw6, transparent);
1369
+ @container style(--layout__k0t3894: stack) and style(--orientation__k0t3895: vertical) {
1370
+ .picker_pickerClassNames_list_list__k0t389l {
1371
+ display: flex;
1372
+ flex-direction: column;
1514
1373
  }
1515
1374
  }
1516
- @container style(--variant__17k72zwg: solid) {
1517
- .button_buttonClassNames_button__17k72zwq {
1518
- background: var(--background__17k72zw6, var(--solidBackground__17k72zw4));
1519
- color: var(--color__17k72zw8, var(--solidColor__17k72zw5));
1375
+ @container (style(--selectionMode__k0t389c: single) or style(--selectionMode__k0t389c: multiple)) {
1376
+ .picker_pickerClassNames_item_item__k0t389n {
1377
+ cursor: pointer;
1520
1378
  }
1521
1379
  }
1522
- @container style(--isDisabled__17k72zwi: true) {
1523
- .button_buttonClassNames_button__17k72zwq {
1380
+ @container style(--isDisabled__k0t389e: true) {
1381
+ .picker_pickerClassNames_item_item__k0t389n {
1524
1382
  cursor: not-allowed;
1525
1383
  }
1526
1384
  }
1527
1385
  }
1528
1386
 
1529
- /* src/components/dialog/dialog.css.ts.vanilla.css -> assets/components/dialog/dialog.css */
1387
+ /* src/components/menu/menu.css.ts.vanilla.css -> assets/components/menu/menu.css */
1530
1388
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1531
- .dialog_dialogClassNames_modal__8ms59zk {
1532
- position: fixed;
1533
- top: 50%;
1534
- left: 50%;
1535
- z-index: var(--dialog__ljimwq5a);
1536
- transform: translate(-50%, -50%);
1537
- }
1389
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
1538
1390
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1539
- .dialog_header__8ms59zg {
1540
- margin-bottom: calc(var(--gap-header-after__8ms59z7) - var(--gap-default__8ms59z6));
1391
+ .menu_menuClassNames_menu_container__dpszds19 {
1392
+ container-name: menu_menuContainers_menu__dpszds0;
1393
+ display: block;
1541
1394
  }
1542
- .dialog_content__8ms59zh {
1543
- color: var(--content-color__8ms59z2);
1395
+ .menu_menuClassNames_menu_menu__dpszds1a {
1396
+ min-width: var(--menu-minWidth__dpszdsv, var(--trigger-width));
1397
+ padding: var(--menu-y__dpszdsx, 0) var(--menu-x__dpszdsw, 0);
1398
+ border-radius: var(--sm__ljimwq3d);
1544
1399
  }
1545
- .dialog_dialogClassNames_portal__8ms59zi {
1400
+ .menu_menuClassNames_list_container__dpszds1b {
1401
+ container-name: menu_menuContainers_list__dpszds1;
1546
1402
  display: contents;
1547
1403
  }
1548
- .dialog_dialogClassNames_container__8ms59zj {
1549
- container-name: dialog_dialogContainer__8ms59z0;
1550
- display: contents;
1404
+ .menu_menuClassNames_list_section__dpszds1d {
1405
+ padding: var(--section-y__dpszds11, 0) var(--section-x__dpszds10, 0);
1551
1406
  }
1552
- .dialog_dialogClassNames_container__8ms59zj::before {
1553
- content: "";
1554
- width: 100%;
1555
- height: var(--visual-viewport-height);
1556
- position: fixed;
1557
- top: 0;
1558
- left: 0;
1559
- z-index: var(--dialog__ljimwq5a);
1560
- background: var(--overlay__8ms59z1);
1407
+ .menu_menuClassNames_list_header__dpszds1e {
1408
+ padding: var(--header-y__dpszds13, var(--item-y__dpszds17, 0)) var(--header-x__dpszds12, var(--item-x__dpszds16, 0));
1409
+ border: 1px solid transparent;
1410
+ background: var(--header-background__dpszdsm);
1411
+ color: var(--header-color__dpszdso);
1561
1412
  }
1562
- .dialog_dialogClassNames_dialog__8ms59zl {
1563
- width: var(--width__8ms59z3, 300px);
1413
+ .menu_menuClassNames_list_separator__dpszds1f {
1414
+ height: 1px;
1415
+ margin: var(--separator-y__dpszds15, 0) var(--separator-x__dpszds14, 0);
1416
+ background: var(--separator__dpszdsp);
1417
+ }
1418
+ .menu_menuClassNames_item_container__dpszds1g {
1419
+ container-name: menu_menuContainers_item__dpszds2;
1420
+ }
1421
+ .menu_menuClassNames_item_item__dpszds1h {
1422
+ display: grid;
1423
+ grid-template-areas: "icon label space action" "icon description space action";
1424
+ grid-template-columns: auto auto 1fr auto;
1425
+ grid-template-rows: auto auto;
1426
+ align-items: center;
1427
+ gap: var(--item-gap__dpszds18);
1428
+ padding: var(--item-y__dpszds17, 0) var(--item-x__dpszds16, 0);
1429
+ border: 1px solid var(--item-border__dpszdsr, transparent);
1430
+ background: var(--item-background__dpszdsq);
1431
+ color: var(--item-color__dpszdss);
1432
+ cursor: pointer;
1433
+ }
1434
+ .menu_menuClassNames_item_label__dpszds1j {
1435
+ grid-area: label;
1436
+ color: var(--label__dpszdst);
1437
+ }
1438
+ .menu_menuClassNames_item_description__dpszds1k {
1439
+ grid-area: description;
1440
+ color: var(--description__dpszdsu, var(--label__dpszdst));
1441
+ }
1442
+ .menu_menuClassNames_item_shortcut__dpszds1m {
1443
+ grid-area: action;
1444
+ }
1445
+ @container style(--isDisabled__dpszdsd: true) {
1446
+ .menu_menuClassNames_item_item__dpszds1h {
1447
+ cursor: not-allowed;
1448
+ }
1449
+ }
1450
+ @container style(--hasDescription__dpszdsa: false) {
1451
+ .menu_menuClassNames_item_label__dpszds1j {
1452
+ grid-row-start: label;
1453
+ grid-row-end: description;
1454
+ }
1455
+ }
1456
+ }
1457
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1458
+ .menu_menuClassNames_list_list__dpszds1c {
1564
1459
  display: flex;
1565
1460
  flex-direction: column;
1566
- gap: var(--gap-default__8ms59z6);
1567
- padding: var(--y__8ms59z5, 0) var(--x__8ms59z4, 0);
1568
- border-radius: var(--md__ljimwq3e);
1461
+ background: var(--list-background__dpszdsj);
1462
+ padding: var(--list-y__dpszdsz, var(--v03__ljimwq2x)) var(--list-x__dpszdsy, 0);
1463
+ border: 1px solid var(--list-border__dpszdsk, transparent);
1464
+ border-radius: var(--sm__ljimwq3d);
1569
1465
  }
1570
- .dialog_dialogClassNames_footer__8ms59zm {
1571
- display: flex;
1572
- justify-content: flex-end;
1573
- margin-top: calc(var(--gap-footer-before__8ms59z9) - var(--gap-default__8ms59z6));
1466
+ .menu_menuClassNames_item_icon_icon__dpszds1i {
1467
+ grid-area: icon;
1574
1468
  }
1575
- }
1576
- @container style(--isGlobal__8ms59ze: false) {
1577
- .dialog_dialogClassNames_modal__8ms59zk {
1578
- position: absolute;
1469
+ .menu_menuClassNames_item_more_icon__dpszds1l {
1470
+ grid-area: action;
1579
1471
  }
1580
1472
  }
1581
1473
 
@@ -1635,170 +1527,139 @@
1635
1527
  }
1636
1528
  }
1637
1529
 
1638
- /* src/components/textarea/textarea.css.ts.vanilla.css -> assets/components/textarea/textarea.css */
1639
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1640
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1641
- .textarea_textAreaClassNames_container__13oc1ofn {
1642
- container-name: textarea_textAreaContainer__13oc1of0;
1643
- display: contents;
1644
- }
1645
- .textarea_textAreaClassNames_textarea__13oc1ofo {
1646
- min-width: var(--minWidth__13oc1of4, auto);
1647
- width: var(--width__13oc1of5, 100%);
1648
- max-width: var(--maxWidth__13oc1of6, 100%);
1649
- min-height: var(--minHeight__13oc1of7, auto);
1650
- height: var(--height__13oc1of8, auto);
1651
- max-height: var(--maxHeight__13oc1of9, none);
1652
- display: block;
1653
- padding: var(--y__13oc1ofb, 0) var(--x__13oc1ofa, 0);
1654
- border: 1px solid var(--border__13oc1of2, transparent);
1655
- border-radius: var(--md__ljimwq3e);
1656
- background: var(--background__13oc1of1);
1657
- font-family: var(--mono__ljimwq3i);
1658
- color: var(--color__13oc1of3);
1659
- overflow: auto;
1660
- resize: var(--resize__13oc1ofc);
1661
- }
1662
- .textarea_textAreaClassNames_textarea__13oc1ofo[contenteditable]:empty::before {
1663
- content: attr(data-placeholder);
1664
- }
1665
- @container style(--isDisabled__13oc1ofe: true) {
1666
- .textarea_textAreaClassNames_textarea__13oc1ofo {
1667
- cursor: not-allowed;
1668
- }
1669
- }
1670
- }
1671
-
1672
- /* src/components/menu/menu.css.ts.vanilla.css -> assets/components/menu/menu.css */
1530
+ /* src/components/drawer/drawer.css.ts.vanilla.css -> assets/components/drawer/drawer.css */
1673
1531
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1674
1532
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
1675
1533
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1676
- .menu_menuClassNames_menu_container__dpszds17 {
1677
- container-name: menu_menuContainers_menu__dpszds0;
1678
- display: block;
1679
- }
1680
- .menu_menuClassNames_menu_menu__dpszds18 {
1681
- min-width: var(--menu-minWidth__dpszdsv, var(--trigger-width));
1682
- padding: var(--menu-y__dpszdsx, 0) var(--menu-x__dpszdsw, 0);
1683
- }
1684
- .menu_menuClassNames_list_container__dpszds19 {
1685
- container-name: menu_menuContainers_list__dpszds1;
1534
+ .drawer_drawerClassNames_container__3hvldbh {
1535
+ container-name: drawer_drawerContainer__3hvldb0;
1686
1536
  display: contents;
1687
1537
  }
1688
- .menu_menuClassNames_list_list__dpszds1a {
1538
+ .drawer_drawerClassNames_dialog_container__3hvldbk {
1539
+ height: 100%;
1540
+ }
1541
+ .drawer_drawerClassNames_dialog_dialog__3hvldbl {
1542
+ width: var(--drawer-width__3hvldb6);
1543
+ height: 100%;
1689
1544
  display: flex;
1690
1545
  flex-direction: column;
1691
- background: var(--list-background__dpszdsj);
1692
- border: 1px solid var(--list-border__dpszdsk, transparent);
1693
- border-radius: var(--sm__ljimwq3d);
1546
+ gap: var(--drawer-gap__3hvldb7);
1547
+ padding: var(--drawer-y__3hvldb9, 0) var(--drawer-x__3hvldb8, 0);
1694
1548
  }
1695
- .menu_menuClassNames_list_section__dpszds1b {
1696
- padding: var(--section-y__dpszdsz, 0) var(--section-x__dpszdsy, 0);
1549
+ .drawer_drawerClassNames_header_header__3hvldbm {
1550
+ display: grid;
1551
+ grid-template-areas: "back title close";
1552
+ grid-template-columns: auto 1fr auto;
1553
+ gap: var(--drawer-gap__3hvldb7);
1554
+ align-items: center;
1697
1555
  }
1698
- .menu_menuClassNames_list_header__dpszds1c {
1699
- padding: var(--header-y__dpszds11, var(--item-y__dpszds15, 0)) var(--header-x__dpszds10, var(--item-x__dpszds14, 0));
1700
- border: 1px solid transparent;
1701
- background: var(--header-background__dpszdsm);
1702
- color: var(--header-color__dpszdso);
1556
+ .drawer_drawerClassNames_header_title__3hvldbo {
1557
+ margin-bottom: 0;
1703
1558
  }
1704
- .menu_menuClassNames_list_separator__dpszds1d {
1705
- height: 1px;
1706
- margin: var(--separator-y__dpszds13, 0) var(--separator-x__dpszds12, 0);
1707
- background: var(--separator__dpszdsp);
1559
+ .drawer_drawerClassNames_content__3hvldbq {
1560
+ flex: 1;
1708
1561
  }
1709
- .menu_menuClassNames_item_container__dpszds1e {
1710
- container-name: menu_menuContainers_item__dpszds2;
1562
+ .drawer_drawerClassNames_footer__3hvldbr {
1563
+ display: flex;
1564
+ justify-content: flex-end;
1711
1565
  }
1712
- .menu_menuClassNames_item_item__dpszds1f {
1713
- display: grid;
1714
- grid-template-areas: "icon label space action" "icon description space action";
1715
- grid-template-columns: auto auto 1fr auto;
1716
- grid-template-rows: auto auto;
1717
- align-items: center;
1718
- gap: var(--item-gap__dpszds16);
1719
- padding: var(--item-y__dpszds15, 0) var(--item-x__dpszds14, 0);
1720
- border: 1px solid var(--item-border__dpszdsr, transparent);
1721
- background: var(--item-background__dpszdsq);
1722
- color: var(--item-color__dpszdss);
1723
- cursor: pointer;
1566
+ @container style(--layoutShift__3hvldbd: false) {
1567
+ .drawer_drawerClassNames_dialog_container__3hvldbk {
1568
+ width: var(--drawer-width__3hvldb6);
1569
+ position: absolute;
1570
+ transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
1571
+ overflow: hidden;
1572
+ pointer-events: none;
1573
+ }
1574
+ .drawer_drawerClassNames_dialog_dialog__3hvldbl {
1575
+ transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
1576
+ pointer-events: auto;
1577
+ }
1724
1578
  }
1725
- .menu_menuClassNames_item_label__dpszds1h {
1726
- grid-area: label;
1727
- color: var(--label__dpszdst);
1579
+ @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) {
1580
+ .drawer_drawerClassNames_dialog_container__3hvldbk {
1581
+ left: 0;
1582
+ }
1728
1583
  }
1729
- .menu_menuClassNames_item_description__dpszds1i {
1730
- grid-area: description;
1731
- color: var(--description__dpszdsu, var(--label__dpszdst));
1584
+ @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) {
1585
+ .drawer_drawerClassNames_dialog_container__3hvldbk {
1586
+ right: 0;
1587
+ }
1732
1588
  }
1733
- .menu_menuClassNames_item_shortcut__dpszds1k {
1734
- grid-area: action;
1589
+ @container style(--layoutShift__3hvldbd: true) {
1590
+ .drawer_drawerClassNames_dialog_container__3hvldbk {
1591
+ width: 0;
1592
+ overflow: hidden;
1593
+ transition: width var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
1594
+ }
1735
1595
  }
1736
- @container style(--isDisabled__dpszdsd: true) {
1737
- .menu_menuClassNames_item_item__dpszds1f {
1738
- cursor: not-allowed;
1596
+ @container style(--layoutShift__3hvldbd: true) and style(--isOpen__3hvldbf: true) {
1597
+ .drawer_drawerClassNames_dialog_container__3hvldbk {
1598
+ width: var(--drawer-width__3hvldb6);
1739
1599
  }
1740
1600
  }
1741
- @container style(--hasDescription__dpszdsa: false) {
1742
- .menu_menuClassNames_item_label__dpszds1h {
1743
- grid-row-start: label;
1744
- grid-row-end: description;
1601
+ @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: false) {
1602
+ .drawer_drawerClassNames_dialog_dialog__3hvldbl {
1603
+ transform: translateX(-100%);
1745
1604
  }
1746
1605
  }
1747
- }
1748
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1749
- .menu_menuClassNames_item_icon_icon__dpszds1g {
1750
- grid-area: icon;
1606
+ @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: false) {
1607
+ .drawer_drawerClassNames_dialog_dialog__3hvldbl {
1608
+ transform: translateX(100%);
1609
+ }
1751
1610
  }
1752
- .menu_menuClassNames_item_more_icon__dpszds1j {
1753
- grid-area: action;
1611
+ @container style(--isChild__3hvldbg: false) {
1612
+ .drawer_drawerClassNames_header_title__3hvldbo {
1613
+ grid-area: back title;
1614
+ }
1615
+ }
1616
+ @container style(--isChild__3hvldbg: true) {
1617
+ .drawer_drawerClassNames_header_title__3hvldbo {
1618
+ grid-area: title;
1619
+ text-align: center;
1620
+ }
1754
1621
  }
1755
1622
  }
1756
-
1757
- /* src/components/picker/picker.css.ts.vanilla.css -> assets/components/picker/picker.css */
1758
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1759
- @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1760
- .picker_pickerClassNames_list_container__k0t389k {
1761
- container-name: picker_pickerContainers_list__k0t3890;
1762
- display: contents;
1623
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1624
+ .drawer_drawerClassNames_tabs_tabs__3hvldbi {
1625
+ height: 100%;
1626
+ display: block;
1627
+ position: relative;
1763
1628
  }
1764
- .picker_pickerClassNames_list_list__k0t389l {
1765
- gap: var(--gap__k0t3892);
1629
+ .drawer_drawerClassNames_tabs_list_list__3hvldbj {
1630
+ position: absolute;
1631
+ top: var(--list-top__3hvldba);
1632
+ transform: translateY(var(--list-translateY__3hvldbb, 0));
1766
1633
  }
1767
- .picker_pickerClassNames_item_container__k0t389m {
1768
- container-name: picker_pickerContainers_item__k0t3891;
1769
- display: contents;
1634
+ .drawer_drawerClassNames_header_back_container__3hvldbn {
1635
+ grid-area: back;
1770
1636
  }
1771
- .picker_pickerClassNames_item_item__k0t389n {
1772
- border: 1px solid var(--border__k0t389a, transparent);
1773
- background: var(--background__k0t3899);
1774
- color: var(--color__k0t389b);
1637
+ .drawer_drawerClassNames_header_close_container__3hvldbp {
1638
+ grid-area: close;
1775
1639
  }
1776
- @container style(--layout__k0t3894: grid) {
1777
- .picker_pickerClassNames_list_list__k0t389l {
1778
- display: grid;
1779
- grid-template-columns: repeat(var(--columns__k0t3893, 1), min-content);
1640
+ @container style(--anchor__3hvldbc: left) {
1641
+ .drawer_drawerClassNames_tabs_list_list__3hvldbj {
1642
+ left: 100%;
1780
1643
  }
1781
1644
  }
1782
- @container style(--layout__k0t3894: stack) and style(--orientation__k0t3895: horizontal) {
1783
- .picker_pickerClassNames_list_list__k0t389l {
1784
- display: flex;
1785
- flex-direction: row;
1645
+ @container style(--anchor__3hvldbc: right) {
1646
+ .drawer_drawerClassNames_tabs_list_list__3hvldbj {
1647
+ right: 100%;
1786
1648
  }
1787
1649
  }
1788
- @container style(--layout__k0t3894: stack) and style(--orientation__k0t3895: vertical) {
1789
- .picker_pickerClassNames_list_list__k0t389l {
1790
- display: flex;
1791
- flex-direction: column;
1650
+ @container style(--layoutShift__3hvldbd: false) {
1651
+ .drawer_drawerClassNames_tabs_list_list__3hvldbj {
1652
+ transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
1792
1653
  }
1793
1654
  }
1794
- @container (style(--selectionMode__k0t389c: single) or style(--selectionMode__k0t389c: multiple)) {
1795
- .picker_pickerClassNames_item_item__k0t389n {
1796
- cursor: pointer;
1655
+ @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: true) {
1656
+ .drawer_drawerClassNames_tabs_list_list__3hvldbj {
1657
+ transform: translateX(var(--drawer-width__3hvldb6)) translateY(var(--list-translateY__3hvldbb, 0));
1797
1658
  }
1798
1659
  }
1799
- @container style(--isDisabled__k0t389e: true) {
1800
- .picker_pickerClassNames_item_item__k0t389n {
1801
- cursor: not-allowed;
1660
+ @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: true) {
1661
+ .drawer_drawerClassNames_tabs_list_list__3hvldbj {
1662
+ transform: translateX(calc(var(--drawer-width__3hvldb6) * -1)) translateY(var(--list-translateY__3hvldbb, 0));
1802
1663
  }
1803
1664
  }
1804
1665
  }
@@ -1867,6 +1728,81 @@
1867
1728
  }
1868
1729
  }
1869
1730
 
1731
+ /* src/components/checkbox/checkbox.css.ts.vanilla.css -> assets/components/checkbox/checkbox.css */
1732
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1733
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
1734
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1735
+ .checkbox_checkboxClassNames_checkbox_container__1rajo3pp {
1736
+ container-name: checkbox_checkboxContainer__1rajo3p0;
1737
+ display: block;
1738
+ width: fit-content;
1739
+ }
1740
+ .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
1741
+ display: flex;
1742
+ align-items: center;
1743
+ gap: var(--gap__1rajo3p7);
1744
+ color: var(--color__1rajo3p4);
1745
+ }
1746
+ .checkbox_checkboxClassNames_checkbox_label__1rajo3ps {
1747
+ color: var(--color__1rajo3p4);
1748
+ }
1749
+ .checkbox_checkboxClassNames_group_container__1rajo3pt {
1750
+ container-name: checkbox_checkboxGroupContainer__1rajo3p1;
1751
+ display: contents;
1752
+ }
1753
+ .checkbox_checkboxClassNames_group_group__1rajo3pu {
1754
+ display: flex;
1755
+ flex-direction: column;
1756
+ gap: var(--elementGap__1rajo3p8, var(--gap__1rajo3p7));
1757
+ }
1758
+ .checkbox_checkboxClassNames_group_label__1rajo3pv {
1759
+ color: var(--color__1rajo3p4);
1760
+ }
1761
+ @container style(--alignInput__1rajo3p9: start) {
1762
+ .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
1763
+ flex-direction: row-reverse;
1764
+ }
1765
+ }
1766
+ @container style(--alignInput__1rajo3p9: end) {
1767
+ .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
1768
+ flex-direction: row;
1769
+ }
1770
+ }
1771
+ @container style(--isReadOnly__1rajo3ph: false) {
1772
+ .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
1773
+ cursor: pointer;
1774
+ }
1775
+ }
1776
+ @container style(--isDisabled__1rajo3pa: true) {
1777
+ .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
1778
+ cursor: not-allowed;
1779
+ }
1780
+ }
1781
+ @container style(--orientation__1rajo3pk: horizontal) {
1782
+ .checkbox_checkboxClassNames_group_group__1rajo3pu {
1783
+ flex-direction: row;
1784
+ }
1785
+ }
1786
+ @container style(--orientation__1rajo3pk: vertical) {
1787
+ .checkbox_checkboxClassNames_group_group__1rajo3pu {
1788
+ flex-direction: column;
1789
+ }
1790
+ }
1791
+ }
1792
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1793
+ .checkbox_checkboxClassNames_checkbox_icon_container__1rajo3pr {
1794
+ display: flex;
1795
+ align-items: center;
1796
+ justify-content: center;
1797
+ width: var(--dimension__1rajo3p6);
1798
+ height: var(--dimension__1rajo3p6);
1799
+ color: var(--indicator__1rajo3p5, currentcolor);
1800
+ border: 1px solid var(--border__1rajo3p2, transparent);
1801
+ border-radius: var(--sm__ljimwq3d);
1802
+ background: var(--background__1rajo3p3, none);
1803
+ }
1804
+ }
1805
+
1870
1806
  /* src/components/tabs/tabs.css.ts.vanilla.css -> assets/components/tabs/tabs.css */
1871
1807
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1872
1808
  @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
@@ -2011,4 +1947,72 @@
2011
1947
  visibility: hidden;
2012
1948
  }
2013
1949
  }
1950
+ }
1951
+
1952
+ /* src/components/combo-box/combo-box.css.ts.vanilla.css -> assets/components/combo-box/combo-box.css */
1953
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
1954
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
1955
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
1956
+ .combo-box_comboBoxClassNames_container__12tc9p8a {
1957
+ container-name: combo-box_comboBoxContainer__12tc9p80;
1958
+ display: contents;
1959
+ }
1960
+ .combo-box_comboBoxClassNames_comboBox__12tc9p8b {
1961
+ width: fit-content;
1962
+ display: flex;
1963
+ flex-direction: column;
1964
+ align-items: flex-start;
1965
+ }
1966
+ .combo-box_comboBoxClassNames_label__12tc9p8c {
1967
+ color: var(--color__6yc0ri3);
1968
+ }
1969
+ .combo-box_comboBoxClassNames_group__12tc9p8d {
1970
+ position: relative;
1971
+ display: flex;
1972
+ align-items: center;
1973
+ padding: var(--y__12tc9p84, 0) var(--x__12tc9p83, 0);
1974
+ }
1975
+ .combo-box_comboBoxClassNames_description__12tc9p8h {
1976
+ color: var(--description-color__12tc9p81);
1977
+ }
1978
+ .combo-box_comboBoxClassNames_error__12tc9p8i {
1979
+ color: var(--error-color__12tc9p82);
1980
+ }
1981
+ }
1982
+ @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
1983
+ .combo-box_comboBoxClassNames_input_sizer__12tc9p8e::before {
1984
+ content: "";
1985
+ position: absolute;
1986
+ top: 0;
1987
+ right: 0;
1988
+ bottom: 0;
1989
+ left: 0;
1990
+ display: block;
1991
+ border: 1px solid var(--border__6yc0ri2, transparent);
1992
+ border-radius: var(--md__ljimwq3e);
1993
+ background: var(--background__6yc0ri1);
1994
+ color: var(--color__6yc0ri3);
1995
+ }
1996
+ .combo-box_comboBoxClassNames_input_sizer__12tc9p8e:has(:focus-visible)::before {
1997
+ outline: var(--width__ljimwq5f) var(--style__ljimwq5g) var(--color__ljimwq5h, Highlight);
1998
+ outline: var(--width__ljimwq5f) var(--style__ljimwq5g) var(--color__ljimwq5h, -webkit-focus-ring-color);
1999
+ outline-offset: var(--offset__ljimwq5e);
2000
+ }
2001
+ .combo-box_comboBoxClassNames_input_input__12tc9p8f {
2002
+ position: relative;
2003
+ padding: 0;
2004
+ border: none;
2005
+ background: none;
2006
+ }
2007
+ .combo-box_comboBoxClassNames_input_input__12tc9p8f::-webkit-search-cancel-button, .combo-box_comboBoxClassNames_input_input__12tc9p8f::-webkit-search-decoration {
2008
+ -webkit-appearance: none;
2009
+ }
2010
+ .combo-box_comboBoxClassNames_input_input__12tc9p8f:focus-visible {
2011
+ outline: none;
2012
+ }
2013
+ .combo-box_comboBoxClassNames_toggle_button__12tc9p8g {
2014
+ position: relative;
2015
+ padding: 0;
2016
+ background: none;
2017
+ }
2014
2018
  }