@layerfi/components 0.1.114-alpha.2 → 0.1.114-alpha.3

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/index.css CHANGED
@@ -3143,12 +3143,6 @@ tbody .Layer__table__empty-row:first-child {
3143
3143
  .Layer__bank-transactions__header--with-date-picker.Layer__bank-transactions__header--mobile .Layer__MonthPicker__InputGroup {
3144
3144
  margin-right: 4px;
3145
3145
  }
3146
- .Layer__bank-transactions__header-menu__icon {
3147
- padding: var(--spacing-3xs);
3148
- border-radius: var(--spacing-3xs);
3149
- background: var(--color-base-200);
3150
- color: var(--color-base-500);
3151
- }
3152
3146
  .Layer__bank-transaction-row {
3153
3147
  transition: all var(--transition-speed) ease-in-out;
3154
3148
  opacity: 0.3;
@@ -3565,10 +3559,9 @@ tbody .Layer__table__empty-row:first-child {
3565
3559
  .Layer__bank-transaction-list-item__processing-info {
3566
3560
  box-sizing: border-box;
3567
3561
  display: flex;
3568
- gap: 4px;
3569
- justify-content: flex-end;
3562
+ gap: var(--spacing-3xs);
3570
3563
  width: 100%;
3571
- padding: var(--spacing-sm) var(--spacing-md);
3564
+ padding: var(--spacing-xs) var(--spacing-md);
3572
3565
  color: var(--text-color-primary);
3573
3566
  }
3574
3567
  .Layer__bank-transaction-list-item__processing-info .Layer__tooltip-trigger {
@@ -6450,821 +6443,1019 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6450
6443
  .Layer__onboarding .Layer__actionable_row {
6451
6444
  width: 640px;
6452
6445
  max-width: 90%;
6453
- }.Layer__hover-menu {
6454
- position: relative;
6455
- display: flex;
6456
- width: 100%;
6457
- }
6458
- .Layer__hover-menu.Layer__hover-menu--open .Layer__hover-menu__list-wrapper {
6459
- top: 100%;
6460
- right: 0;
6461
- opacity: 1;
6462
- touch-action: auto;
6463
- pointer-events: auto;
6464
- }
6465
- .Layer__hover-menu .Layer__hover-menu__children {
6466
- display: flex;
6467
- align-items: center;
6468
- justify-content: center;
6469
- width: 100%;
6470
- cursor: pointer;
6471
- }
6472
- .Layer__hover-menu .Layer__hover-menu__list-wrapper {
6473
- position: absolute;
6474
- z-index: 99;
6475
- top: 80%;
6476
- right: -8px;
6446
+ }.Layer__Stack {
6477
6447
  display: flex;
6478
- justify-content: stretch;
6479
- min-width: 160px;
6480
- padding-top: var(--spacing-xs);
6481
- touch-action: none;
6482
- pointer-events: none;
6483
- opacity: 0;
6484
- transition: all 0.15s ease-out;
6485
6448
  }
6486
- .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list {
6487
- box-sizing: border-box;
6488
- display: flex;
6449
+ .Layer__Stack[data-fluid] {
6489
6450
  flex: 1;
6490
- flex-direction: column;
6491
- gap: var(--spacing-3xs);
6492
- padding: var(--spacing-3xs);
6493
- border-radius: var(--spacing-xs);
6494
- box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.06), 0 4px 12px 0 var(--base-transparent-1, rgba(16, 24, 40, 0.01)), 0 2px 4px 0 rgba(25, 25, 25, 0.06);
6495
- margin: 0;
6496
- background: var(--color-base-0);
6497
- list-style: none;
6498
- }
6499
- .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item {
6500
- display: flex;
6501
- align-items: center;
6502
- padding: var(--spacing-3xs);
6503
- padding-left: var(--spacing-xs);
6504
- border-radius: var(--spacing-2xs);
6505
- color: var(--color-base-500);
6506
- transition: all 0.2s ease-in-out;
6507
- }
6508
- .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item .Layer__hover-menu__list-item-button {
6509
- width: 100%;
6510
- border: none;
6511
- outline: none;
6512
- background: none;
6513
- cursor: pointer;
6514
- font-size: var(--text-sm);
6515
- line-height: normal;
6516
- font-family: inherit;
6517
- font-weight: 500;
6518
- text-align: start;
6519
- color: inherit;
6520
- font-feature-settings: inherit;
6521
- letter-spacing: -0.06px;
6522
6451
  }
6523
- .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item:hover {
6524
- background: var(--color-base-50);
6525
- font-weight: 540;
6526
- color: var(--color-base-800);
6527
- }.Layer__Pill {
6528
- display: inline-flex;
6452
+ .Layer__Stack[data-direction=row] {
6529
6453
  flex-direction: row;
6530
- align-items: center;
6531
- padding: var(--spacing-2xs) var(--spacing-sm);
6532
- border-radius: var(--badge-border-radius);
6533
- border: none;
6534
- outline: none;
6535
- background-color: var(--badge-bg-color);
6536
- cursor: pointer;
6537
- user-select: none;
6538
- font-size: var(--text-sm);
6539
- color: var(--badge-color);
6540
- white-space: nowrap;
6541
6454
  }
6542
- .Layer__Pill svg {
6543
- margin-right: 0.25rem;
6544
- }
6545
- .Layer__Pill[data-status=error] {
6546
- background-color: var(--color-info-error-bg);
6547
- color: var(--color-info-error-fg);
6548
- }
6549
- .Layer__Pill[data-status=error][data-focus-visible] {
6550
- outline: 1px solid var(--color-info-error-bg);
6551
- outline-offset: 1px;
6552
- }.Layer__Menu {
6553
- display: flex;
6455
+ .Layer__Stack[data-direction=column] {
6554
6456
  flex-direction: column;
6555
- gap: var(--spacing-3xs);
6556
- overflow: auto;
6557
- max-block-size: inherit;
6558
- min-inline-size: 9rem;
6559
- padding: var(--spacing-3xs);
6560
- border-radius: var(--spacing-xs);
6561
- border: 1px solid var(--border-color);
6562
- outline: none;
6563
- background: white;
6564
6457
  }
6565
-
6566
- .Layer__MenuItem {
6567
- display: flex;
6458
+ .Layer__Stack[data-align=start] {
6459
+ align-items: start;
6460
+ }
6461
+ .Layer__Stack[data-align=center] {
6568
6462
  align-items: center;
6569
- padding-block: var(--spacing-3xs);
6570
- padding-inline: var(--spacing-xs);
6571
- border-radius: var(--spacing-2xs);
6572
- outline: none;
6573
- cursor: pointer;
6574
6463
  }
6575
- .Layer__MenuItem[data-focused] {
6576
- background: var(--color-base-50);
6577
- color: var(--color-base-800);
6464
+ .Layer__Stack[data-align=end] {
6465
+ align-items: end;
6578
6466
  }
6579
- .Layer__MenuItem[data-focus-visible] {
6580
- outline: 1px solid var(--color-base-100);
6581
- outline-offset: 1px;
6582
- }.Layer__Header,
6583
- .Layer__Label,
6584
- .Layer__P,
6585
- .Layer__Span {
6586
- max-inline-size: min(80ch, 60rem);
6587
- margin: 0;
6588
- font-size: var(--text-md);
6589
- line-height: 140%;
6590
- font-family: var(--font-family);
6591
- color: var(--color-base-900);
6592
- text-wrap: pretty;
6467
+ .Layer__Stack[data-align=baseline] {
6468
+ align-items: baseline;
6593
6469
  }
6594
- .Layer__Header[data-variant=placeholder],
6595
- .Layer__Label[data-variant=placeholder],
6596
- .Layer__P[data-variant=placeholder],
6597
- .Layer__Span[data-variant=placeholder] {
6598
- color: var(--color-base-700);
6470
+ .Layer__Stack[data-justify=start] {
6471
+ justify-content: start;
6599
6472
  }
6600
- .Layer__Header[data-variant=subtle],
6601
- .Layer__Label[data-variant=subtle],
6602
- .Layer__P[data-variant=subtle],
6603
- .Layer__Span[data-variant=subtle] {
6604
- color: var(--fg-subtle);
6473
+ .Layer__Stack[data-justify=center] {
6474
+ justify-content: center;
6605
6475
  }
6606
- .Layer__Header[data-variant=inherit],
6607
- .Layer__Label[data-variant=inherit],
6608
- .Layer__P[data-variant=inherit],
6609
- .Layer__Span[data-variant=inherit] {
6610
- color: inherit;
6476
+ .Layer__Stack[data-justify=end] {
6477
+ justify-content: end;
6611
6478
  }
6612
- .Layer__Header[data-status=error],
6613
- .Layer__Label[data-status=error],
6614
- .Layer__P[data-status=error],
6615
- .Layer__Span[data-status=error] {
6616
- color: var(--color-info-error);
6479
+ .Layer__Stack[data-justify=space-between] {
6480
+ justify-content: space-between;
6617
6481
  }
6618
- .Layer__Header[data-no-wrap],
6619
- .Layer__Label[data-no-wrap],
6620
- .Layer__P[data-no-wrap],
6621
- .Layer__Span[data-no-wrap] {
6622
- white-space: nowrap;
6482
+ .Layer__Stack[data-overflow=scroll] {
6483
+ overflow: scroll;
6623
6484
  }
6624
- .Layer__Header[data-ellipsis], .Layer__Header[data-with-tooltip],
6625
- .Layer__Label[data-ellipsis],
6626
- .Layer__Label[data-with-tooltip],
6627
- .Layer__P[data-ellipsis],
6628
- .Layer__P[data-with-tooltip],
6629
- .Layer__Span[data-ellipsis],
6630
- .Layer__Span[data-with-tooltip] {
6631
- white-space: nowrap;
6485
+ .Layer__Stack[data-overflow=hidden] {
6632
6486
  overflow: hidden;
6633
- text-overflow: ellipsis;
6634
- }
6635
- .Layer__Header[data-size="2xs"],
6636
- .Layer__Label[data-size="2xs"],
6637
- .Layer__P[data-size="2xs"],
6638
- .Layer__Span[data-size="2xs"] {
6639
- font-size: var(--text-2xs);
6640
- }
6641
- .Layer__Header[data-size=xs],
6642
- .Layer__Label[data-size=xs],
6643
- .Layer__P[data-size=xs],
6644
- .Layer__Span[data-size=xs] {
6645
- font-size: var(--text-xs);
6646
6487
  }
6647
- .Layer__Header[data-size=sm],
6648
- .Layer__Label[data-size=sm],
6649
- .Layer__P[data-size=sm],
6650
- .Layer__Span[data-size=sm] {
6651
- font-size: var(--text-sm);
6488
+ .Layer__Stack[data-overflow=auto] {
6489
+ overflow: auto;
6652
6490
  }
6653
- .Layer__Header[data-size=md],
6654
- .Layer__Label[data-size=md],
6655
- .Layer__P[data-size=md],
6656
- .Layer__Span[data-size=md] {
6657
- font-size: var(--text-md);
6491
+ .Layer__Stack[data-overflow=clip] {
6492
+ overflow: clip;
6658
6493
  }
6659
- .Layer__Header[data-size=lg],
6660
- .Layer__Label[data-size=lg],
6661
- .Layer__P[data-size=lg],
6662
- .Layer__Span[data-size=lg] {
6663
- font-size: var(--text-lg);
6494
+ .Layer__Stack[data-overflow=visible] {
6495
+ overflow: visible;
6664
6496
  }
6665
- .Layer__Header[data-size=xl],
6666
- .Layer__Label[data-size=xl],
6667
- .Layer__P[data-size=xl],
6668
- .Layer__Span[data-size=xl] {
6669
- font-size: var(--text-xl);
6497
+ .Layer__Stack[data-gap="3xs"] {
6498
+ gap: var(--spacing-3xs);
6670
6499
  }
6671
- .Layer__Header[data-pb="3xs"],
6672
- .Layer__Label[data-pb="3xs"],
6673
- .Layer__P[data-pb="3xs"],
6674
- .Layer__Span[data-pb="3xs"] {
6500
+ .Layer__Stack[data-pb="3xs"] {
6675
6501
  padding-block: var(--spacing-3xs);
6676
6502
  }
6677
- .Layer__Header[data-pbe="3xs"],
6678
- .Layer__Label[data-pbe="3xs"],
6679
- .Layer__P[data-pbe="3xs"],
6680
- .Layer__Span[data-pbe="3xs"] {
6503
+ .Layer__Stack[data-pbe="3xs"] {
6681
6504
  padding-block-end: var(--spacing-3xs);
6682
6505
  }
6683
- .Layer__Header[data-pbs="3xs"],
6684
- .Layer__Label[data-pbs="3xs"],
6685
- .Layer__P[data-pbs="3xs"],
6686
- .Layer__Span[data-pbs="3xs"] {
6506
+ .Layer__Stack[data-pbs="3xs"] {
6687
6507
  padding-block-start: var(--spacing-3xs);
6688
6508
  }
6689
- .Layer__Header[data-pb="2xs"],
6690
- .Layer__Label[data-pb="2xs"],
6691
- .Layer__P[data-pb="2xs"],
6692
- .Layer__Span[data-pb="2xs"] {
6693
- padding-block: var(--spacing-2xs);
6509
+ .Layer__Stack[data-pi="3xs"] {
6510
+ padding-inline: var(--spacing-3xs);
6694
6511
  }
6695
- .Layer__Header[data-pbe="2xs"],
6696
- .Layer__Label[data-pbe="2xs"],
6697
- .Layer__P[data-pbe="2xs"],
6698
- .Layer__Span[data-pbe="2xs"] {
6512
+ .Layer__Stack[data-pie="3xs"] {
6513
+ padding-inline-end: var(--spacing-3xs);
6514
+ }
6515
+ .Layer__Stack[data-pis="3xs"] {
6516
+ padding-inline-start: var(--spacing-3xs);
6517
+ }
6518
+ .Layer__Stack[data-gap="2xs"] {
6519
+ gap: var(--spacing-2xs);
6520
+ }
6521
+ .Layer__Stack[data-pb="2xs"] {
6522
+ padding-block: var(--spacing-2xs);
6523
+ }
6524
+ .Layer__Stack[data-pbe="2xs"] {
6699
6525
  padding-block-end: var(--spacing-2xs);
6700
6526
  }
6701
- .Layer__Header[data-pbs="2xs"],
6702
- .Layer__Label[data-pbs="2xs"],
6703
- .Layer__P[data-pbs="2xs"],
6704
- .Layer__Span[data-pbs="2xs"] {
6527
+ .Layer__Stack[data-pbs="2xs"] {
6705
6528
  padding-block-start: var(--spacing-2xs);
6706
6529
  }
6707
- .Layer__Header[data-pb=xs],
6708
- .Layer__Label[data-pb=xs],
6709
- .Layer__P[data-pb=xs],
6710
- .Layer__Span[data-pb=xs] {
6530
+ .Layer__Stack[data-pi="2xs"] {
6531
+ padding-inline: var(--spacing-2xs);
6532
+ }
6533
+ .Layer__Stack[data-pie="2xs"] {
6534
+ padding-inline-end: var(--spacing-2xs);
6535
+ }
6536
+ .Layer__Stack[data-pis="2xs"] {
6537
+ padding-inline-start: var(--spacing-2xs);
6538
+ }
6539
+ .Layer__Stack[data-gap=xs] {
6540
+ gap: var(--spacing-xs);
6541
+ }
6542
+ .Layer__Stack[data-pb=xs] {
6711
6543
  padding-block: var(--spacing-xs);
6712
6544
  }
6713
- .Layer__Header[data-pbe=xs],
6714
- .Layer__Label[data-pbe=xs],
6715
- .Layer__P[data-pbe=xs],
6716
- .Layer__Span[data-pbe=xs] {
6545
+ .Layer__Stack[data-pbe=xs] {
6717
6546
  padding-block-end: var(--spacing-xs);
6718
6547
  }
6719
- .Layer__Header[data-pbs=xs],
6720
- .Layer__Label[data-pbs=xs],
6721
- .Layer__P[data-pbs=xs],
6722
- .Layer__Span[data-pbs=xs] {
6548
+ .Layer__Stack[data-pbs=xs] {
6723
6549
  padding-block-start: var(--spacing-xs);
6724
6550
  }
6725
- .Layer__Header[data-pb=sm],
6726
- .Layer__Label[data-pb=sm],
6727
- .Layer__P[data-pb=sm],
6728
- .Layer__Span[data-pb=sm] {
6551
+ .Layer__Stack[data-pi=xs] {
6552
+ padding-inline: var(--spacing-xs);
6553
+ }
6554
+ .Layer__Stack[data-pie=xs] {
6555
+ padding-inline-end: var(--spacing-xs);
6556
+ }
6557
+ .Layer__Stack[data-pis=xs] {
6558
+ padding-inline-start: var(--spacing-xs);
6559
+ }
6560
+ .Layer__Stack[data-gap=sm] {
6561
+ gap: var(--spacing-sm);
6562
+ }
6563
+ .Layer__Stack[data-pb=sm] {
6729
6564
  padding-block: var(--spacing-sm);
6730
6565
  }
6731
- .Layer__Header[data-pbe=sm],
6732
- .Layer__Label[data-pbe=sm],
6733
- .Layer__P[data-pbe=sm],
6734
- .Layer__Span[data-pbe=sm] {
6566
+ .Layer__Stack[data-pbe=sm] {
6735
6567
  padding-block-end: var(--spacing-sm);
6736
6568
  }
6737
- .Layer__Header[data-pbs=sm],
6738
- .Layer__Label[data-pbs=sm],
6739
- .Layer__P[data-pbs=sm],
6740
- .Layer__Span[data-pbs=sm] {
6569
+ .Layer__Stack[data-pbs=sm] {
6741
6570
  padding-block-start: var(--spacing-sm);
6742
6571
  }
6743
- .Layer__Header[data-pb=md],
6744
- .Layer__Label[data-pb=md],
6745
- .Layer__P[data-pb=md],
6746
- .Layer__Span[data-pb=md] {
6572
+ .Layer__Stack[data-pi=sm] {
6573
+ padding-inline: var(--spacing-sm);
6574
+ }
6575
+ .Layer__Stack[data-pie=sm] {
6576
+ padding-inline-end: var(--spacing-sm);
6577
+ }
6578
+ .Layer__Stack[data-pis=sm] {
6579
+ padding-inline-start: var(--spacing-sm);
6580
+ }
6581
+ .Layer__Stack[data-gap=md] {
6582
+ gap: var(--spacing-md);
6583
+ }
6584
+ .Layer__Stack[data-pb=md] {
6747
6585
  padding-block: var(--spacing-md);
6748
6586
  }
6749
- .Layer__Header[data-pbe=md],
6750
- .Layer__Label[data-pbe=md],
6751
- .Layer__P[data-pbe=md],
6752
- .Layer__Span[data-pbe=md] {
6587
+ .Layer__Stack[data-pbe=md] {
6753
6588
  padding-block-end: var(--spacing-md);
6754
6589
  }
6755
- .Layer__Header[data-pbs=md],
6756
- .Layer__Label[data-pbs=md],
6757
- .Layer__P[data-pbs=md],
6758
- .Layer__Span[data-pbs=md] {
6590
+ .Layer__Stack[data-pbs=md] {
6759
6591
  padding-block-start: var(--spacing-md);
6760
6592
  }
6761
- .Layer__Header[data-pb=lg],
6762
- .Layer__Label[data-pb=lg],
6763
- .Layer__P[data-pb=lg],
6764
- .Layer__Span[data-pb=lg] {
6593
+ .Layer__Stack[data-pi=md] {
6594
+ padding-inline: var(--spacing-md);
6595
+ }
6596
+ .Layer__Stack[data-pie=md] {
6597
+ padding-inline-end: var(--spacing-md);
6598
+ }
6599
+ .Layer__Stack[data-pis=md] {
6600
+ padding-inline-start: var(--spacing-md);
6601
+ }
6602
+ .Layer__Stack[data-gap=lg] {
6603
+ gap: var(--spacing-lg);
6604
+ }
6605
+ .Layer__Stack[data-pb=lg] {
6765
6606
  padding-block: var(--spacing-lg);
6766
6607
  }
6767
- .Layer__Header[data-pbe=lg],
6768
- .Layer__Label[data-pbe=lg],
6769
- .Layer__P[data-pbe=lg],
6770
- .Layer__Span[data-pbe=lg] {
6608
+ .Layer__Stack[data-pbe=lg] {
6771
6609
  padding-block-end: var(--spacing-lg);
6772
6610
  }
6773
- .Layer__Header[data-pbs=lg],
6774
- .Layer__Label[data-pbs=lg],
6775
- .Layer__P[data-pbs=lg],
6776
- .Layer__Span[data-pbs=lg] {
6611
+ .Layer__Stack[data-pbs=lg] {
6777
6612
  padding-block-start: var(--spacing-lg);
6778
6613
  }
6779
- .Layer__Header[data-pb=xl],
6780
- .Layer__Label[data-pb=xl],
6781
- .Layer__P[data-pb=xl],
6782
- .Layer__Span[data-pb=xl] {
6614
+ .Layer__Stack[data-pi=lg] {
6615
+ padding-inline: var(--spacing-lg);
6616
+ }
6617
+ .Layer__Stack[data-pie=lg] {
6618
+ padding-inline-end: var(--spacing-lg);
6619
+ }
6620
+ .Layer__Stack[data-pis=lg] {
6621
+ padding-inline-start: var(--spacing-lg);
6622
+ }
6623
+ .Layer__Stack[data-gap=xl] {
6624
+ gap: var(--spacing-xl);
6625
+ }
6626
+ .Layer__Stack[data-pb=xl] {
6783
6627
  padding-block: var(--spacing-xl);
6784
6628
  }
6785
- .Layer__Header[data-pbe=xl],
6786
- .Layer__Label[data-pbe=xl],
6787
- .Layer__P[data-pbe=xl],
6788
- .Layer__Span[data-pbe=xl] {
6629
+ .Layer__Stack[data-pbe=xl] {
6789
6630
  padding-block-end: var(--spacing-xl);
6790
6631
  }
6791
- .Layer__Header[data-pbs=xl],
6792
- .Layer__Label[data-pbs=xl],
6793
- .Layer__P[data-pbs=xl],
6794
- .Layer__Span[data-pbs=xl] {
6632
+ .Layer__Stack[data-pbs=xl] {
6795
6633
  padding-block-start: var(--spacing-xl);
6796
6634
  }
6797
- .Layer__Header[data-pb="2xl"],
6798
- .Layer__Label[data-pb="2xl"],
6799
- .Layer__P[data-pb="2xl"],
6800
- .Layer__Span[data-pb="2xl"] {
6635
+ .Layer__Stack[data-pi=xl] {
6636
+ padding-inline: var(--spacing-xl);
6637
+ }
6638
+ .Layer__Stack[data-pie=xl] {
6639
+ padding-inline-end: var(--spacing-xl);
6640
+ }
6641
+ .Layer__Stack[data-pis=xl] {
6642
+ padding-inline-start: var(--spacing-xl);
6643
+ }
6644
+ .Layer__Stack[data-gap="2xl"] {
6645
+ gap: var(--spacing-2xl);
6646
+ }
6647
+ .Layer__Stack[data-pb="2xl"] {
6801
6648
  padding-block: var(--spacing-2xl);
6802
6649
  }
6803
- .Layer__Header[data-pbe="2xl"],
6804
- .Layer__Label[data-pbe="2xl"],
6805
- .Layer__P[data-pbe="2xl"],
6806
- .Layer__Span[data-pbe="2xl"] {
6650
+ .Layer__Stack[data-pbe="2xl"] {
6807
6651
  padding-block-end: var(--spacing-2xl);
6808
6652
  }
6809
- .Layer__Header[data-pbs="2xl"],
6810
- .Layer__Label[data-pbs="2xl"],
6811
- .Layer__P[data-pbs="2xl"],
6812
- .Layer__Span[data-pbs="2xl"] {
6653
+ .Layer__Stack[data-pbs="2xl"] {
6813
6654
  padding-block-start: var(--spacing-2xl);
6814
6655
  }
6815
- .Layer__Header[data-pb="3xl"],
6816
- .Layer__Label[data-pb="3xl"],
6817
- .Layer__P[data-pb="3xl"],
6818
- .Layer__Span[data-pb="3xl"] {
6656
+ .Layer__Stack[data-pi="2xl"] {
6657
+ padding-inline: var(--spacing-2xl);
6658
+ }
6659
+ .Layer__Stack[data-pie="2xl"] {
6660
+ padding-inline-end: var(--spacing-2xl);
6661
+ }
6662
+ .Layer__Stack[data-pis="2xl"] {
6663
+ padding-inline-start: var(--spacing-2xl);
6664
+ }
6665
+ .Layer__Stack[data-gap="3xl"] {
6666
+ gap: var(--spacing-3xl);
6667
+ }
6668
+ .Layer__Stack[data-pb="3xl"] {
6819
6669
  padding-block: var(--spacing-3xl);
6820
6670
  }
6821
- .Layer__Header[data-pbe="3xl"],
6822
- .Layer__Label[data-pbe="3xl"],
6823
- .Layer__P[data-pbe="3xl"],
6824
- .Layer__Span[data-pbe="3xl"] {
6671
+ .Layer__Stack[data-pbe="3xl"] {
6825
6672
  padding-block-end: var(--spacing-3xl);
6826
6673
  }
6827
- .Layer__Header[data-pbs="3xl"],
6828
- .Layer__Label[data-pbs="3xl"],
6829
- .Layer__P[data-pbs="3xl"],
6830
- .Layer__Span[data-pbs="3xl"] {
6674
+ .Layer__Stack[data-pbs="3xl"] {
6831
6675
  padding-block-start: var(--spacing-3xl);
6832
6676
  }
6833
- .Layer__Header[data-pb="5xl"],
6834
- .Layer__Label[data-pb="5xl"],
6835
- .Layer__P[data-pb="5xl"],
6836
- .Layer__Span[data-pb="5xl"] {
6677
+ .Layer__Stack[data-pi="3xl"] {
6678
+ padding-inline: var(--spacing-3xl);
6679
+ }
6680
+ .Layer__Stack[data-pie="3xl"] {
6681
+ padding-inline-end: var(--spacing-3xl);
6682
+ }
6683
+ .Layer__Stack[data-pis="3xl"] {
6684
+ padding-inline-start: var(--spacing-3xl);
6685
+ }
6686
+ .Layer__Stack[data-gap="5xl"] {
6687
+ gap: var(--spacing-5xl);
6688
+ }
6689
+ .Layer__Stack[data-pb="5xl"] {
6837
6690
  padding-block: var(--spacing-5xl);
6838
6691
  }
6839
- .Layer__Header[data-pbe="5xl"],
6840
- .Layer__Label[data-pbe="5xl"],
6841
- .Layer__P[data-pbe="5xl"],
6842
- .Layer__Span[data-pbe="5xl"] {
6692
+ .Layer__Stack[data-pbe="5xl"] {
6843
6693
  padding-block-end: var(--spacing-5xl);
6844
6694
  }
6845
- .Layer__Header[data-pbs="5xl"],
6846
- .Layer__Label[data-pbs="5xl"],
6847
- .Layer__P[data-pbs="5xl"],
6848
- .Layer__Span[data-pbs="5xl"] {
6695
+ .Layer__Stack[data-pbs="5xl"] {
6849
6696
  padding-block-start: var(--spacing-5xl);
6850
6697
  }
6851
- .Layer__Header[data-align=left],
6852
- .Layer__Label[data-align=left],
6853
- .Layer__P[data-align=left],
6854
- .Layer__Span[data-align=left] {
6855
- text-align: left;
6698
+ .Layer__Stack[data-pi="5xl"] {
6699
+ padding-inline: var(--spacing-5xl);
6856
6700
  }
6857
- .Layer__Header[data-align=center],
6858
- .Layer__Label[data-align=center],
6859
- .Layer__P[data-align=center],
6860
- .Layer__Span[data-align=center] {
6861
- text-align: center;
6701
+ .Layer__Stack[data-pie="5xl"] {
6702
+ padding-inline-end: var(--spacing-5xl);
6862
6703
  }
6863
- .Layer__Header[data-align=right],
6864
- .Layer__Label[data-align=right],
6865
- .Layer__P[data-align=right],
6866
- .Layer__Span[data-align=right] {
6867
- text-align: right;
6868
- }
6869
- .Layer__Header[data-align=justify],
6870
- .Layer__Label[data-align=justify],
6871
- .Layer__P[data-align=justify],
6872
- .Layer__Span[data-align=justify] {
6873
- text-align: justify;
6704
+ .Layer__Stack[data-pis="5xl"] {
6705
+ padding-inline-start: var(--spacing-5xl);
6874
6706
  }
6875
- .Layer__Header[data-weight=normal],
6876
- .Layer__Label[data-weight=normal],
6877
- .Layer__P[data-weight=normal],
6878
- .Layer__Span[data-weight=normal] {
6707
+
6708
+ .Layer__Spacer {
6709
+ flex: 1 1 0%;
6710
+ }.Layer__LoadingSpinner {
6711
+ animation-name: Layer__rotate;
6712
+ animation-duration: 2s;
6713
+ animation-timing-function: linear;
6714
+ animation-iteration-count: infinite;
6715
+ }.Layer__UI__Button {
6716
+ all: unset;
6717
+ box-sizing: border-box;
6718
+ display: inline-grid;
6719
+ grid-template-rows: minmax(0, 1fr);
6720
+ grid-auto-columns: auto;
6721
+ grid-auto-flow: column;
6722
+ gap: 0.5rem;
6723
+ align-items: center;
6724
+ justify-content: center;
6725
+ block-size: var(--size);
6726
+ min-inline-size: 0;
6727
+ padding-inline: var(--spacing-md);
6728
+ border-radius: var(--btn-border-radius);
6729
+ outline: none;
6730
+ cursor: pointer;
6731
+ user-select: none;
6732
+ font-size: var(--text-md);
6733
+ font-family: var(--font-family);
6879
6734
  font-weight: var(--font-weight-normal);
6735
+ appearance: none;
6736
+ white-space: nowrap;
6737
+ vertical-align: middle;
6738
+ --size: 2.25rem;
6880
6739
  }
6881
- .Layer__Header[data-weight=bold],
6882
- .Layer__Label[data-weight=bold],
6883
- .Layer__P[data-weight=bold],
6884
- .Layer__Span[data-weight=bold] {
6885
- font-weight: var(--font-weight-bold);
6740
+ .Layer__UI__Button[data-inset] {
6741
+ --size: 2rem;
6886
6742
  }
6887
-
6888
- .Layer__Label {
6889
- /*
6890
- * A `label` is an inline element by default. This change allows us to apply padding.
6891
- */
6743
+ .Layer__UI__Button[data-icon] {
6744
+ min-inline-size: var(--size);
6745
+ padding-inline: 0;
6746
+ }
6747
+ .Layer__UI__Button[data-ellipsis], .Layer__UI__Button[data-with-tooltip] {
6892
6748
  display: inline-block;
6893
- }.Layer__Stack {
6894
- display: flex;
6749
+ overflow: hidden;
6750
+ white-space: nowrap;
6751
+ text-overflow: ellipsis;
6895
6752
  }
6896
- .Layer__Stack[data-fluid] {
6897
- flex: 1;
6753
+ .Layer__UI__Button[data-focus-visible] {
6754
+ outline: 1px auto -webkit-focus-ring-color;
6898
6755
  }
6899
- .Layer__Stack[data-direction=row] {
6900
- flex-direction: row;
6756
+ .Layer__UI__Button[data-disabled] {
6757
+ cursor: not-allowed;
6901
6758
  }
6902
- .Layer__Stack[data-direction=column] {
6903
- flex-direction: column;
6759
+ .Layer__UI__Button[data-variant=ghost] {
6760
+ border: none;
6761
+ background-color: transparent;
6762
+ color: var(--button-fg-ghost);
6904
6763
  }
6905
- .Layer__Stack[data-align=start] {
6906
- align-items: start;
6764
+ .Layer__UI__Button[data-variant=ghost][data-pending], .Layer__UI__Button[data-variant=ghost][data-disabled] {
6765
+ background-color: transparent;
6766
+ color: var(--button-fg-disabled);
6907
6767
  }
6908
- .Layer__Stack[data-align=center] {
6909
- align-items: center;
6768
+ .Layer__UI__Button[data-variant=ghost][data-hovered]:not([data-disabled], [data-pressed]) {
6769
+ background-color: var(--button-bg-ghost-hovered);
6910
6770
  }
6911
- .Layer__Stack[data-align=end] {
6912
- align-items: end;
6771
+ .Layer__UI__Button[data-variant=ghost][data-pressed]:not([data-focus-visible]) {
6772
+ background-color: var(--button-bg-ghost-pressed);
6913
6773
  }
6914
- .Layer__Stack[data-align=baseline] {
6915
- align-items: baseline;
6774
+ .Layer__UI__Button[data-variant=outlined] {
6775
+ border: 1px solid var(--button-border-color-ghost);
6776
+ background-color: transparent;
6777
+ color: var(--button-fg-ghost);
6916
6778
  }
6917
- .Layer__Stack[data-justify=start] {
6918
- justify-content: start;
6779
+ .Layer__UI__Button[data-variant=outlined][data-pending], .Layer__UI__Button[data-variant=outlined][data-disabled] {
6780
+ background-color: transparent;
6781
+ color: var(--button-fg-disabled);
6919
6782
  }
6920
- .Layer__Stack[data-justify=center] {
6921
- justify-content: center;
6783
+ .Layer__UI__Button[data-variant=outlined][data-hovered]:not([data-pressed], [data-focus-visible]) {
6784
+ outline: 1px solid var(--outline-default);
6922
6785
  }
6923
- .Layer__Stack[data-justify=end] {
6924
- justify-content: end;
6786
+ .Layer__UI__Button[data-variant=outlined][data-pressed]:not([data-focus-visible]) {
6787
+ border-color: var(--button-border-color-ghost-active);
6788
+ outline: 2px solid var(--outline-default);
6925
6789
  }
6926
- .Layer__Stack[data-justify=space-between] {
6927
- justify-content: space-between;
6790
+ .Layer__UI__Button[data-variant=solid] {
6791
+ background-color: var(--button-bg-default);
6792
+ color: var(--button-fg-default);
6928
6793
  }
6929
- .Layer__Stack[data-overflow=scroll] {
6930
- overflow: scroll;
6794
+ .Layer__UI__Button[data-variant=solid][data-disabled], .Layer__UI__Button[data-variant=solid][data-pending] {
6795
+ background-color: var(--button-bg-disabled);
6796
+ color: var(--button-fg-disabled);
6931
6797
  }
6932
- .Layer__Stack[data-overflow=hidden] {
6933
- overflow: hidden;
6798
+ .Layer__UI__Button[data-variant=solid][data-hovered]:not([data-disabled], [data-pressed]) {
6799
+ outline: 1px solid var(--outline-default);
6800
+ background-color: var(--button-bg-active);
6934
6801
  }
6935
- .Layer__Stack[data-overflow=auto] {
6936
- overflow: auto;
6802
+ .Layer__UI__Button[data-variant=solid][data-pressed]:not([data-focus-visible]) {
6803
+ outline: 2px solid var(--outline-default);
6804
+ background-color: var(--button-bg-active);
6937
6805
  }
6938
- .Layer__Stack[data-overflow=clip] {
6939
- overflow: clip;
6806
+ .Layer__UI__Button[data-variant=text] {
6807
+ --size: inherit;
6808
+ display: inline-flex;
6809
+ overflow: hidden;
6810
+ text-overflow: ellipsis;
6811
+ padding-inline: 0;
6812
+ border: none;
6813
+ background-color: transparent;
6940
6814
  }
6941
- .Layer__Stack[data-overflow=visible] {
6942
- overflow: visible;
6815
+ .Layer__UI__Button[data-variant=text][data-hovered]:not([data-disabled], [data-pressed]) {
6816
+ text-decoration: underline;
6943
6817
  }
6944
- .Layer__Stack[data-gap="3xs"] {
6945
- gap: var(--spacing-3xs);
6818
+ .Layer__UI__Button[data-variant=text][data-pressed]:not([data-focus-visible]) {
6819
+ text-decoration: none;
6946
6820
  }
6947
- .Layer__Stack[data-pb="3xs"] {
6948
- padding-block: var(--spacing-3xs);
6821
+ .Layer__UI__Button[data-variant=branded] {
6822
+ background-color: var(--bg-brand-accent, var(--color-accent));
6823
+ color: var(--fg-brand-accent, var(--color-primary));
6949
6824
  }
6950
- .Layer__Stack[data-pbe="3xs"] {
6951
- padding-block-end: var(--spacing-3xs);
6825
+ .Layer__UI__Button[data-full-width] {
6826
+ inline-size: 100%;
6952
6827
  }
6953
- .Layer__Stack[data-pbs="3xs"] {
6954
- padding-block-start: var(--spacing-3xs);
6828
+ .Layer__UI__Button[data-flex] {
6829
+ display: flex;
6955
6830
  }
6956
- .Layer__Stack[data-pi="3xs"] {
6957
- padding-inline: var(--spacing-3xs);
6831
+
6832
+ .Layer__ButtonTransparentContent {
6833
+ opacity: 0;
6834
+ grid-row: 1/-1;
6835
+ grid-column: 1/-1;
6958
6836
  }
6959
- .Layer__Stack[data-pie="3xs"] {
6960
- padding-inline-end: var(--spacing-3xs);
6837
+
6838
+ .Layer__ButtonSpinnerContainer {
6839
+ grid-row: 1/-1;
6840
+ grid-column: 1/-1;
6841
+ height: 1rem;
6842
+ place-self: center;
6843
+ }.Layer__UI__tooltip {
6844
+ z-index: 50;
6961
6845
  }
6962
- .Layer__Stack[data-pis="3xs"] {
6963
- padding-inline-start: var(--spacing-3xs);
6846
+
6847
+ .Layer__UI__tooltip-content {
6848
+ box-sizing: border-box;
6849
+ display: block;
6850
+ max-width: 20rem;
6851
+ padding: var(--spacing-2xs) var(--spacing-sm);
6852
+ border-radius: var(--border-radius-2xs);
6853
+ background: var(--color-base-1000);
6964
6854
  }
6965
- .Layer__Stack[data-gap="2xs"] {
6966
- gap: var(--spacing-2xs);
6855
+
6856
+ .Layer__UI__tooltip-content--text {
6857
+ display: block;
6858
+ font-size: var(--text-sm);
6859
+ text-align: justify;
6860
+ color: var(--color-base-300);
6861
+ word-break: break-all;
6862
+ white-space: normal;
6967
6863
  }
6968
- .Layer__Stack[data-pb="2xs"] {
6969
- padding-block: var(--spacing-2xs);
6864
+
6865
+ .Layer__UI__tooltip-trigger {
6866
+ overflow: hidden;
6867
+ text-overflow: ellipsis;
6868
+ }.Layer__Header,
6869
+ .Layer__Label,
6870
+ .Layer__P,
6871
+ .Layer__Span {
6872
+ max-inline-size: min(80ch, 60rem);
6873
+ margin: 0;
6874
+ font-size: var(--text-md);
6875
+ line-height: 140%;
6876
+ font-family: var(--font-family);
6877
+ color: var(--color-base-900);
6878
+ text-wrap: pretty;
6970
6879
  }
6971
- .Layer__Stack[data-pbe="2xs"] {
6972
- padding-block-end: var(--spacing-2xs);
6880
+ .Layer__Header[data-variant=placeholder],
6881
+ .Layer__Label[data-variant=placeholder],
6882
+ .Layer__P[data-variant=placeholder],
6883
+ .Layer__Span[data-variant=placeholder] {
6884
+ color: var(--color-base-700);
6973
6885
  }
6974
- .Layer__Stack[data-pbs="2xs"] {
6975
- padding-block-start: var(--spacing-2xs);
6886
+ .Layer__Header[data-variant=subtle],
6887
+ .Layer__Label[data-variant=subtle],
6888
+ .Layer__P[data-variant=subtle],
6889
+ .Layer__Span[data-variant=subtle] {
6890
+ color: var(--fg-subtle);
6976
6891
  }
6977
- .Layer__Stack[data-pi="2xs"] {
6978
- padding-inline: var(--spacing-2xs);
6892
+ .Layer__Header[data-variant=inherit],
6893
+ .Layer__Label[data-variant=inherit],
6894
+ .Layer__P[data-variant=inherit],
6895
+ .Layer__Span[data-variant=inherit] {
6896
+ color: inherit;
6979
6897
  }
6980
- .Layer__Stack[data-pie="2xs"] {
6981
- padding-inline-end: var(--spacing-2xs);
6898
+ .Layer__Header[data-status=error],
6899
+ .Layer__Label[data-status=error],
6900
+ .Layer__P[data-status=error],
6901
+ .Layer__Span[data-status=error] {
6902
+ color: var(--color-info-error);
6982
6903
  }
6983
- .Layer__Stack[data-pis="2xs"] {
6984
- padding-inline-start: var(--spacing-2xs);
6904
+ .Layer__Header[data-no-wrap],
6905
+ .Layer__Label[data-no-wrap],
6906
+ .Layer__P[data-no-wrap],
6907
+ .Layer__Span[data-no-wrap] {
6908
+ white-space: nowrap;
6985
6909
  }
6986
- .Layer__Stack[data-gap=xs] {
6987
- gap: var(--spacing-xs);
6910
+ .Layer__Header[data-ellipsis], .Layer__Header[data-with-tooltip],
6911
+ .Layer__Label[data-ellipsis],
6912
+ .Layer__Label[data-with-tooltip],
6913
+ .Layer__P[data-ellipsis],
6914
+ .Layer__P[data-with-tooltip],
6915
+ .Layer__Span[data-ellipsis],
6916
+ .Layer__Span[data-with-tooltip] {
6917
+ white-space: nowrap;
6918
+ overflow: hidden;
6919
+ text-overflow: ellipsis;
6988
6920
  }
6989
- .Layer__Stack[data-pb=xs] {
6990
- padding-block: var(--spacing-xs);
6921
+ .Layer__Header[data-size="2xs"],
6922
+ .Layer__Label[data-size="2xs"],
6923
+ .Layer__P[data-size="2xs"],
6924
+ .Layer__Span[data-size="2xs"] {
6925
+ font-size: var(--text-2xs);
6991
6926
  }
6992
- .Layer__Stack[data-pbe=xs] {
6993
- padding-block-end: var(--spacing-xs);
6927
+ .Layer__Header[data-size=xs],
6928
+ .Layer__Label[data-size=xs],
6929
+ .Layer__P[data-size=xs],
6930
+ .Layer__Span[data-size=xs] {
6931
+ font-size: var(--text-xs);
6994
6932
  }
6995
- .Layer__Stack[data-pbs=xs] {
6996
- padding-block-start: var(--spacing-xs);
6933
+ .Layer__Header[data-size=sm],
6934
+ .Layer__Label[data-size=sm],
6935
+ .Layer__P[data-size=sm],
6936
+ .Layer__Span[data-size=sm] {
6937
+ font-size: var(--text-sm);
6997
6938
  }
6998
- .Layer__Stack[data-pi=xs] {
6999
- padding-inline: var(--spacing-xs);
6939
+ .Layer__Header[data-size=md],
6940
+ .Layer__Label[data-size=md],
6941
+ .Layer__P[data-size=md],
6942
+ .Layer__Span[data-size=md] {
6943
+ font-size: var(--text-md);
7000
6944
  }
7001
- .Layer__Stack[data-pie=xs] {
7002
- padding-inline-end: var(--spacing-xs);
6945
+ .Layer__Header[data-size=lg],
6946
+ .Layer__Label[data-size=lg],
6947
+ .Layer__P[data-size=lg],
6948
+ .Layer__Span[data-size=lg] {
6949
+ font-size: var(--text-lg);
7003
6950
  }
7004
- .Layer__Stack[data-pis=xs] {
7005
- padding-inline-start: var(--spacing-xs);
6951
+ .Layer__Header[data-size=xl],
6952
+ .Layer__Label[data-size=xl],
6953
+ .Layer__P[data-size=xl],
6954
+ .Layer__Span[data-size=xl] {
6955
+ font-size: var(--text-xl);
7006
6956
  }
7007
- .Layer__Stack[data-gap=sm] {
7008
- gap: var(--spacing-sm);
6957
+ .Layer__Header[data-pb="3xs"],
6958
+ .Layer__Label[data-pb="3xs"],
6959
+ .Layer__P[data-pb="3xs"],
6960
+ .Layer__Span[data-pb="3xs"] {
6961
+ padding-block: var(--spacing-3xs);
7009
6962
  }
7010
- .Layer__Stack[data-pb=sm] {
7011
- padding-block: var(--spacing-sm);
6963
+ .Layer__Header[data-pbe="3xs"],
6964
+ .Layer__Label[data-pbe="3xs"],
6965
+ .Layer__P[data-pbe="3xs"],
6966
+ .Layer__Span[data-pbe="3xs"] {
6967
+ padding-block-end: var(--spacing-3xs);
7012
6968
  }
7013
- .Layer__Stack[data-pbe=sm] {
7014
- padding-block-end: var(--spacing-sm);
6969
+ .Layer__Header[data-pbs="3xs"],
6970
+ .Layer__Label[data-pbs="3xs"],
6971
+ .Layer__P[data-pbs="3xs"],
6972
+ .Layer__Span[data-pbs="3xs"] {
6973
+ padding-block-start: var(--spacing-3xs);
7015
6974
  }
7016
- .Layer__Stack[data-pbs=sm] {
7017
- padding-block-start: var(--spacing-sm);
6975
+ .Layer__Header[data-pb="2xs"],
6976
+ .Layer__Label[data-pb="2xs"],
6977
+ .Layer__P[data-pb="2xs"],
6978
+ .Layer__Span[data-pb="2xs"] {
6979
+ padding-block: var(--spacing-2xs);
7018
6980
  }
7019
- .Layer__Stack[data-pi=sm] {
7020
- padding-inline: var(--spacing-sm);
6981
+ .Layer__Header[data-pbe="2xs"],
6982
+ .Layer__Label[data-pbe="2xs"],
6983
+ .Layer__P[data-pbe="2xs"],
6984
+ .Layer__Span[data-pbe="2xs"] {
6985
+ padding-block-end: var(--spacing-2xs);
7021
6986
  }
7022
- .Layer__Stack[data-pie=sm] {
7023
- padding-inline-end: var(--spacing-sm);
6987
+ .Layer__Header[data-pbs="2xs"],
6988
+ .Layer__Label[data-pbs="2xs"],
6989
+ .Layer__P[data-pbs="2xs"],
6990
+ .Layer__Span[data-pbs="2xs"] {
6991
+ padding-block-start: var(--spacing-2xs);
7024
6992
  }
7025
- .Layer__Stack[data-pis=sm] {
7026
- padding-inline-start: var(--spacing-sm);
6993
+ .Layer__Header[data-pb=xs],
6994
+ .Layer__Label[data-pb=xs],
6995
+ .Layer__P[data-pb=xs],
6996
+ .Layer__Span[data-pb=xs] {
6997
+ padding-block: var(--spacing-xs);
7027
6998
  }
7028
- .Layer__Stack[data-gap=md] {
7029
- gap: var(--spacing-md);
6999
+ .Layer__Header[data-pbe=xs],
7000
+ .Layer__Label[data-pbe=xs],
7001
+ .Layer__P[data-pbe=xs],
7002
+ .Layer__Span[data-pbe=xs] {
7003
+ padding-block-end: var(--spacing-xs);
7030
7004
  }
7031
- .Layer__Stack[data-pb=md] {
7032
- padding-block: var(--spacing-md);
7005
+ .Layer__Header[data-pbs=xs],
7006
+ .Layer__Label[data-pbs=xs],
7007
+ .Layer__P[data-pbs=xs],
7008
+ .Layer__Span[data-pbs=xs] {
7009
+ padding-block-start: var(--spacing-xs);
7033
7010
  }
7034
- .Layer__Stack[data-pbe=md] {
7035
- padding-block-end: var(--spacing-md);
7011
+ .Layer__Header[data-pb=sm],
7012
+ .Layer__Label[data-pb=sm],
7013
+ .Layer__P[data-pb=sm],
7014
+ .Layer__Span[data-pb=sm] {
7015
+ padding-block: var(--spacing-sm);
7036
7016
  }
7037
- .Layer__Stack[data-pbs=md] {
7038
- padding-block-start: var(--spacing-md);
7017
+ .Layer__Header[data-pbe=sm],
7018
+ .Layer__Label[data-pbe=sm],
7019
+ .Layer__P[data-pbe=sm],
7020
+ .Layer__Span[data-pbe=sm] {
7021
+ padding-block-end: var(--spacing-sm);
7039
7022
  }
7040
- .Layer__Stack[data-pi=md] {
7041
- padding-inline: var(--spacing-md);
7023
+ .Layer__Header[data-pbs=sm],
7024
+ .Layer__Label[data-pbs=sm],
7025
+ .Layer__P[data-pbs=sm],
7026
+ .Layer__Span[data-pbs=sm] {
7027
+ padding-block-start: var(--spacing-sm);
7042
7028
  }
7043
- .Layer__Stack[data-pie=md] {
7044
- padding-inline-end: var(--spacing-md);
7029
+ .Layer__Header[data-pb=md],
7030
+ .Layer__Label[data-pb=md],
7031
+ .Layer__P[data-pb=md],
7032
+ .Layer__Span[data-pb=md] {
7033
+ padding-block: var(--spacing-md);
7045
7034
  }
7046
- .Layer__Stack[data-pis=md] {
7047
- padding-inline-start: var(--spacing-md);
7035
+ .Layer__Header[data-pbe=md],
7036
+ .Layer__Label[data-pbe=md],
7037
+ .Layer__P[data-pbe=md],
7038
+ .Layer__Span[data-pbe=md] {
7039
+ padding-block-end: var(--spacing-md);
7048
7040
  }
7049
- .Layer__Stack[data-gap=lg] {
7050
- gap: var(--spacing-lg);
7041
+ .Layer__Header[data-pbs=md],
7042
+ .Layer__Label[data-pbs=md],
7043
+ .Layer__P[data-pbs=md],
7044
+ .Layer__Span[data-pbs=md] {
7045
+ padding-block-start: var(--spacing-md);
7051
7046
  }
7052
- .Layer__Stack[data-pb=lg] {
7047
+ .Layer__Header[data-pb=lg],
7048
+ .Layer__Label[data-pb=lg],
7049
+ .Layer__P[data-pb=lg],
7050
+ .Layer__Span[data-pb=lg] {
7053
7051
  padding-block: var(--spacing-lg);
7054
7052
  }
7055
- .Layer__Stack[data-pbe=lg] {
7053
+ .Layer__Header[data-pbe=lg],
7054
+ .Layer__Label[data-pbe=lg],
7055
+ .Layer__P[data-pbe=lg],
7056
+ .Layer__Span[data-pbe=lg] {
7056
7057
  padding-block-end: var(--spacing-lg);
7057
7058
  }
7058
- .Layer__Stack[data-pbs=lg] {
7059
+ .Layer__Header[data-pbs=lg],
7060
+ .Layer__Label[data-pbs=lg],
7061
+ .Layer__P[data-pbs=lg],
7062
+ .Layer__Span[data-pbs=lg] {
7059
7063
  padding-block-start: var(--spacing-lg);
7060
7064
  }
7061
- .Layer__Stack[data-pi=lg] {
7062
- padding-inline: var(--spacing-lg);
7063
- }
7064
- .Layer__Stack[data-pie=lg] {
7065
- padding-inline-end: var(--spacing-lg);
7066
- }
7067
- .Layer__Stack[data-pis=lg] {
7068
- padding-inline-start: var(--spacing-lg);
7069
- }
7070
- .Layer__Stack[data-gap=xl] {
7071
- gap: var(--spacing-xl);
7072
- }
7073
- .Layer__Stack[data-pb=xl] {
7065
+ .Layer__Header[data-pb=xl],
7066
+ .Layer__Label[data-pb=xl],
7067
+ .Layer__P[data-pb=xl],
7068
+ .Layer__Span[data-pb=xl] {
7074
7069
  padding-block: var(--spacing-xl);
7075
7070
  }
7076
- .Layer__Stack[data-pbe=xl] {
7071
+ .Layer__Header[data-pbe=xl],
7072
+ .Layer__Label[data-pbe=xl],
7073
+ .Layer__P[data-pbe=xl],
7074
+ .Layer__Span[data-pbe=xl] {
7077
7075
  padding-block-end: var(--spacing-xl);
7078
7076
  }
7079
- .Layer__Stack[data-pbs=xl] {
7077
+ .Layer__Header[data-pbs=xl],
7078
+ .Layer__Label[data-pbs=xl],
7079
+ .Layer__P[data-pbs=xl],
7080
+ .Layer__Span[data-pbs=xl] {
7080
7081
  padding-block-start: var(--spacing-xl);
7081
7082
  }
7082
- .Layer__Stack[data-pi=xl] {
7083
- padding-inline: var(--spacing-xl);
7084
- }
7085
- .Layer__Stack[data-pie=xl] {
7086
- padding-inline-end: var(--spacing-xl);
7087
- }
7088
- .Layer__Stack[data-pis=xl] {
7089
- padding-inline-start: var(--spacing-xl);
7090
- }
7091
- .Layer__Stack[data-gap="2xl"] {
7092
- gap: var(--spacing-2xl);
7093
- }
7094
- .Layer__Stack[data-pb="2xl"] {
7083
+ .Layer__Header[data-pb="2xl"],
7084
+ .Layer__Label[data-pb="2xl"],
7085
+ .Layer__P[data-pb="2xl"],
7086
+ .Layer__Span[data-pb="2xl"] {
7095
7087
  padding-block: var(--spacing-2xl);
7096
7088
  }
7097
- .Layer__Stack[data-pbe="2xl"] {
7089
+ .Layer__Header[data-pbe="2xl"],
7090
+ .Layer__Label[data-pbe="2xl"],
7091
+ .Layer__P[data-pbe="2xl"],
7092
+ .Layer__Span[data-pbe="2xl"] {
7098
7093
  padding-block-end: var(--spacing-2xl);
7099
7094
  }
7100
- .Layer__Stack[data-pbs="2xl"] {
7095
+ .Layer__Header[data-pbs="2xl"],
7096
+ .Layer__Label[data-pbs="2xl"],
7097
+ .Layer__P[data-pbs="2xl"],
7098
+ .Layer__Span[data-pbs="2xl"] {
7101
7099
  padding-block-start: var(--spacing-2xl);
7102
7100
  }
7103
- .Layer__Stack[data-pi="2xl"] {
7104
- padding-inline: var(--spacing-2xl);
7105
- }
7106
- .Layer__Stack[data-pie="2xl"] {
7107
- padding-inline-end: var(--spacing-2xl);
7108
- }
7109
- .Layer__Stack[data-pis="2xl"] {
7110
- padding-inline-start: var(--spacing-2xl);
7111
- }
7112
- .Layer__Stack[data-gap="3xl"] {
7113
- gap: var(--spacing-3xl);
7114
- }
7115
- .Layer__Stack[data-pb="3xl"] {
7101
+ .Layer__Header[data-pb="3xl"],
7102
+ .Layer__Label[data-pb="3xl"],
7103
+ .Layer__P[data-pb="3xl"],
7104
+ .Layer__Span[data-pb="3xl"] {
7116
7105
  padding-block: var(--spacing-3xl);
7117
7106
  }
7118
- .Layer__Stack[data-pbe="3xl"] {
7107
+ .Layer__Header[data-pbe="3xl"],
7108
+ .Layer__Label[data-pbe="3xl"],
7109
+ .Layer__P[data-pbe="3xl"],
7110
+ .Layer__Span[data-pbe="3xl"] {
7119
7111
  padding-block-end: var(--spacing-3xl);
7120
7112
  }
7121
- .Layer__Stack[data-pbs="3xl"] {
7113
+ .Layer__Header[data-pbs="3xl"],
7114
+ .Layer__Label[data-pbs="3xl"],
7115
+ .Layer__P[data-pbs="3xl"],
7116
+ .Layer__Span[data-pbs="3xl"] {
7122
7117
  padding-block-start: var(--spacing-3xl);
7123
7118
  }
7124
- .Layer__Stack[data-pi="3xl"] {
7125
- padding-inline: var(--spacing-3xl);
7126
- }
7127
- .Layer__Stack[data-pie="3xl"] {
7128
- padding-inline-end: var(--spacing-3xl);
7129
- }
7130
- .Layer__Stack[data-pis="3xl"] {
7131
- padding-inline-start: var(--spacing-3xl);
7132
- }
7133
- .Layer__Stack[data-gap="5xl"] {
7134
- gap: var(--spacing-5xl);
7135
- }
7136
- .Layer__Stack[data-pb="5xl"] {
7119
+ .Layer__Header[data-pb="5xl"],
7120
+ .Layer__Label[data-pb="5xl"],
7121
+ .Layer__P[data-pb="5xl"],
7122
+ .Layer__Span[data-pb="5xl"] {
7137
7123
  padding-block: var(--spacing-5xl);
7138
7124
  }
7139
- .Layer__Stack[data-pbe="5xl"] {
7125
+ .Layer__Header[data-pbe="5xl"],
7126
+ .Layer__Label[data-pbe="5xl"],
7127
+ .Layer__P[data-pbe="5xl"],
7128
+ .Layer__Span[data-pbe="5xl"] {
7140
7129
  padding-block-end: var(--spacing-5xl);
7141
7130
  }
7142
- .Layer__Stack[data-pbs="5xl"] {
7131
+ .Layer__Header[data-pbs="5xl"],
7132
+ .Layer__Label[data-pbs="5xl"],
7133
+ .Layer__P[data-pbs="5xl"],
7134
+ .Layer__Span[data-pbs="5xl"] {
7143
7135
  padding-block-start: var(--spacing-5xl);
7144
7136
  }
7145
- .Layer__Stack[data-pi="5xl"] {
7146
- padding-inline: var(--spacing-5xl);
7137
+ .Layer__Header[data-align=left],
7138
+ .Layer__Label[data-align=left],
7139
+ .Layer__P[data-align=left],
7140
+ .Layer__Span[data-align=left] {
7141
+ text-align: left;
7147
7142
  }
7148
- .Layer__Stack[data-pie="5xl"] {
7149
- padding-inline-end: var(--spacing-5xl);
7143
+ .Layer__Header[data-align=center],
7144
+ .Layer__Label[data-align=center],
7145
+ .Layer__P[data-align=center],
7146
+ .Layer__Span[data-align=center] {
7147
+ text-align: center;
7150
7148
  }
7151
- .Layer__Stack[data-pis="5xl"] {
7152
- padding-inline-start: var(--spacing-5xl);
7149
+ .Layer__Header[data-align=right],
7150
+ .Layer__Label[data-align=right],
7151
+ .Layer__P[data-align=right],
7152
+ .Layer__Span[data-align=right] {
7153
+ text-align: right;
7153
7154
  }
7154
-
7155
- .Layer__Spacer {
7156
- flex: 1 1 0%;
7157
- }.Layer__UI__tooltip {
7158
- z-index: 50;
7155
+ .Layer__Header[data-align=justify],
7156
+ .Layer__Label[data-align=justify],
7157
+ .Layer__P[data-align=justify],
7158
+ .Layer__Span[data-align=justify] {
7159
+ text-align: justify;
7159
7160
  }
7160
-
7161
- .Layer__UI__tooltip-content {
7162
- box-sizing: border-box;
7163
- display: block;
7164
- max-width: 20rem;
7165
- padding: var(--spacing-2xs) var(--spacing-sm);
7166
- border-radius: var(--border-radius-2xs);
7167
- background: var(--color-base-1000);
7161
+ .Layer__Header[data-weight=normal],
7162
+ .Layer__Label[data-weight=normal],
7163
+ .Layer__P[data-weight=normal],
7164
+ .Layer__Span[data-weight=normal] {
7165
+ font-weight: var(--font-weight-normal);
7168
7166
  }
7169
-
7170
- .Layer__UI__tooltip-content--text {
7171
- display: block;
7172
- font-size: var(--text-sm);
7173
- text-align: justify;
7174
- color: var(--color-base-300);
7175
- word-break: break-all;
7176
- white-space: normal;
7167
+ .Layer__Header[data-weight=bold],
7168
+ .Layer__Label[data-weight=bold],
7169
+ .Layer__P[data-weight=bold],
7170
+ .Layer__Span[data-weight=bold] {
7171
+ font-weight: var(--font-weight-bold);
7177
7172
  }
7178
7173
 
7179
- .Layer__UI__tooltip-trigger {
7180
- overflow: hidden;
7181
- text-overflow: ellipsis;
7182
- }.Layer__ModalOverlay {
7183
- position: fixed;
7184
- z-index: 1001;
7185
- inset: 0;
7174
+ .Layer__Label {
7175
+ /*
7176
+ * A `label` is an inline element by default. This change allows us to apply padding.
7177
+ */
7178
+ display: inline-block;
7179
+ }.Layer__ComboBoxContainer {
7186
7180
  display: grid;
7187
- height: var(--visual-viewport-height);
7188
- background: rgba(0, 0, 0, 0.5);
7189
- place-items: center;
7190
7181
  }
7191
- .Layer__ModalOverlay[data-variant=drawer] {
7192
- place-items: end;
7182
+
7183
+ .Layer__ComboBoxControl {
7184
+ display: grid;
7185
+ grid-template-columns: minmax(0, 1fr) auto;
7186
+ --block-size: 2.25rem;
7187
+ block-size: var(--block-size);
7188
+ border-radius: var(--input-border-radius);
7189
+ border: 1px solid var(--color-base-300);
7190
+ background-color: var(--color-base-0);
7193
7191
  }
7194
- .Layer__ModalOverlay[data-variant=mobile-drawer] {
7195
- place-items: end center;
7192
+ .Layer__ComboBoxControl--focused {
7193
+ border-color: var(--outline-active);
7196
7194
  }
7197
-
7198
- .Layer__Modal {
7199
- block-size: min(42rem, 90%);
7200
- inline-size: min(36rem, 90%);
7195
+ .Layer__ComboBoxControl--disabled {
7196
+ cursor: not-allowed;
7201
7197
  }
7202
- .Layer__Modal[data-size=lg] {
7203
- inline-size: min(42rem, 90%);
7198
+ .Layer__ComboBoxControl--readonly {
7199
+ background-color: var(--bg-muted);
7204
7200
  }
7205
- .Layer__Modal[data-size=xl] {
7206
- inline-size: min(70rem, 100%);
7201
+
7202
+ .Layer__ComboBoxContainer > .Layer__ComboBoxControl {
7203
+ /*
7204
+ * This is intentional.
7205
+ *
7206
+ * The "unstyled" variant of react-select still forces a min-height on the control of 38 px.
7207
+ */
7208
+ block-size: var(--block-size);
7209
+ min-block-size: var(--block-size);
7207
7210
  }
7208
- .Layer__Modal[data-variant=drawer] {
7209
- block-size: 100%;
7211
+ .Layer__ComboBoxContainer > .Layer__ComboBoxControl--focused {
7212
+ /*
7213
+ * This seems like the only workaround when the "unstyled" variant
7214
+ * includes a (malicious) `outline: 0 !important`.
7215
+ *
7216
+ * @see {https://github.com/JedWatson/react-select/blob/2a913698ad3d7759fb8e6bc5dd8a7d839227da2f/packages/react-select/src/components/Control.tsx#L49}
7217
+ */
7218
+ outline: 2px solid var(--outline-default) !important;
7210
7219
  }
7211
- .Layer__Modal[data-variant=drawer][data-entering] {
7212
- animation: drawer-slide 300ms;
7220
+
7221
+ .Layer__ComboBoxValueContainer {
7222
+ padding-inline-start: var(--spacing-xs);
7223
+ cursor: text;
7224
+ font-size: var(--input-font-size);
7213
7225
  }
7214
- .Layer__Modal[data-variant=drawer][data-exiting] {
7215
- animation: drawer-slide 300ms reverse ease-in;
7226
+
7227
+ .Layer__ComboBoxIndicatorsContainer {
7228
+ padding-inline-end: var(--spacing-3xs);
7216
7229
  }
7217
- .Layer__Modal[data-variant=mobile-drawer] {
7218
- position: fixed;
7219
- bottom: 0;
7220
- overflow: hidden;
7221
- block-size: 80%;
7222
- inline-size: 100%;
7223
- border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
7230
+ .Layer__ComboBoxIndicatorsContainer--readonly {
7231
+ visibility: hidden;
7224
7232
  }
7225
- .Layer__Modal[data-flex-block] {
7226
- block-size: auto;
7233
+
7234
+ .Layer__ComboBoxClearIndicator {
7235
+ display: flex;
7236
+ align-items: center;
7237
+ justify-content: center;
7238
+ --size: 1.25rem;
7239
+ block-size: var(--size);
7240
+ inline-size: var(--size);
7241
+ cursor: pointer;
7227
7242
  }
7228
- .Layer__Modal[data-flex-inline] {
7229
- inline-size: auto;
7243
+
7244
+ .Layer__ComboBoxLoadingIndicator {
7245
+ display: flex;
7246
+ align-items: center;
7247
+ justify-content: center;
7248
+ --size: 1.25rem;
7249
+ block-size: var(--size);
7250
+ inline-size: var(--size);
7251
+ cursor: default;
7230
7252
  }
7231
7253
 
7232
- .Layer__Dialog {
7254
+ .Layer__ComboBoxDropdownIndicator {
7233
7255
  display: flex;
7234
- flex-direction: column;
7235
- block-size: 100%;
7236
- padding: var(--spacing-lg);
7237
- border-radius: var(--border-radius-2xs);
7238
- outline: none;
7239
- background-color: white;
7256
+ align-items: center;
7257
+ justify-content: center;
7258
+ block-size: var(--size);
7259
+ inline-size: var(--size);
7260
+ cursor: pointer;
7261
+ color: var(--color-base-600);
7262
+ --size: 1.25rem;
7240
7263
  }
7241
- .Layer__Dialog [slot=content] {
7242
- flex: 1;
7264
+
7265
+ .Layer__ComboBoxMenu {
7266
+ overflow: hidden;
7267
+ border-radius: var(--border-radius-xs);
7268
+ border: 1px solid var(--border-color);
7269
+ margin-block-start: var(--spacing-2xs);
7270
+ background-color: var(--color-base-0);
7243
7271
  }
7244
- .Layer__Dialog[data-variant=drawer] {
7245
- padding: 0;
7246
- border-radius: 0;
7272
+
7273
+ .Layer__ComboBoxMenuList {
7274
+ overflow-y: auto;
7247
7275
  }
7248
- .Layer__Dialog[data-variant=mobile-drawer] {
7249
- padding: 0;
7250
- border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
7276
+ .Layer__ComboBoxMenuList .Layer__ComboBoxOption {
7277
+ /*
7278
+ * This is intentionally done indirectly to increase specificity.
7279
+ *
7280
+ * `react-select` explicitly sets 'block'
7281
+ */
7282
+ display: grid;
7283
+ /*
7284
+ * This is intentionally done indirectly to increase specificity.
7285
+ *
7286
+ * `react-select` explicitly sets 'default'
7287
+ */
7288
+ cursor: pointer;
7251
7289
  }
7252
- .Layer__Dialog[data-variant=mobile-popover] {
7253
- padding: 0;
7290
+ .Layer__ComboBoxMenuList .Layer__ComboBoxOption--disabled {
7291
+ cursor: not-allowed;
7292
+ }
7293
+ .Layer__ComboBoxMenuList .Layer__ComboBoxOption--hidden {
7294
+ display: none;
7254
7295
  }
7255
7296
 
7256
- @keyframes drawer-slide {
7257
- from {
7258
- transform: translateX(100%);
7259
- }
7260
- to {
7261
- transform: translateX(0);
7262
- }
7297
+ .Layer__ComboBoxGroup {
7298
+ padding-block: var(--spacing-xs);
7263
7299
  }
7264
- .Layer__ModalContentFadeMotionContent {
7265
- display: contents;
7266
- height: 100%;
7267
- width: 100%;
7300
+ .Layer__ComboBoxGroup > .Layer__ComboBoxGroupHeading {
7301
+ padding-block-start: var(--spacing-3xs);
7302
+ padding-block-end: var(--spacing-xs);
7303
+ padding-inline: var(--spacing-sm);
7304
+ }
7305
+ .Layer__ComboBoxGroup > div > .Layer__ComboBoxOption {
7306
+ padding-inline: var(--spacing-sm);
7307
+ }
7308
+
7309
+ .Layer__ComboBoxOption {
7310
+ padding-block: var(--spacing-xs);
7311
+ padding-inline: var(--spacing-3xs);
7312
+ border: 2px solid transparent;
7313
+ }
7314
+ .Layer__ComboBoxOption--focused {
7315
+ background-color: var(--color-base-100);
7316
+ }
7317
+ .Layer__ComboBoxOption .Layer__ComboBoxOptionCheckIcon {
7318
+ visibility: hidden;
7319
+ }
7320
+ .Layer__ComboBoxOption--selected {
7321
+ background-color: var(--color-base-100);
7322
+ }
7323
+ .Layer__ComboBoxOption--selected .Layer__ComboBoxOptionCheckIcon {
7324
+ visibility: visible;
7325
+ }
7326
+ .Layer__ComboBoxOption--disabled {
7327
+ color: var(--color-base-500);
7328
+ }
7329
+
7330
+ .Layer__ComboBoxNoOptionsMessage {
7331
+ padding-block: var(--spacing-sm);
7332
+ }.Layer__MoneyText {
7333
+ color: var(--color-base-800);
7334
+ }
7335
+ .Layer__MoneyText[data-bold] {
7336
+ font-weight: var(--font-weight-bold);
7337
+ font-variation-settings: "wght" var(--font-weight-bold);
7338
+ }
7339
+ .Layer__MoneyText[data-size=xs] {
7340
+ font-size: var(--text-xs);
7341
+ }
7342
+ .Layer__MoneyText[data-size=sm] {
7343
+ font-size: var(--text-sm);
7344
+ }
7345
+ .Layer__MoneyText[data-size=md] {
7346
+ font-size: var(--text-md);
7347
+ }
7348
+ .Layer__MoneyText[data-size=lg] {
7349
+ font-size: var(--text-lg);
7350
+ }
7351
+ .Layer__MoneyText[data-positive]::before {
7352
+ content: "$";
7353
+ }
7354
+ .Layer__MoneyText[data-negative]::before {
7355
+ content: "-$";
7356
+ }
7357
+ .Layer__MoneyText[data-display-plus-sign]::before {
7358
+ content: "+$";
7359
+ }.Layer__datetime {
7360
+ display: inline-flex;
7361
+ gap: var(--spacing-md);
7362
+ align-items: center;
7363
+ }.Layer__BankTransactionCategoryComboBox__LoadingSuggestionsOption {
7364
+ color: var(--color-base-900);
7365
+ }
7366
+
7367
+ .Layer__BankTransactionCategoryComboBox__CustomGroupHeading {
7368
+ /* style the parent .Layer__ComboBoxGroupHeading of this element */
7369
+ }
7370
+ :is(.Layer__ComboBoxGroupHeading:has(.Layer__BankTransactionCategoryComboBox__CustomGroupHeading)) {
7371
+ border-bottom: 1px solid var(--border-color);
7372
+ margin-block-end: var(--spacing-3xs);
7373
+ }.Layer__ModalOverlay {
7374
+ position: fixed;
7375
+ z-index: 100;
7376
+ inset: 0;
7377
+ display: grid;
7378
+ height: var(--visual-viewport-height);
7379
+ background: rgba(0, 0, 0, 0.5);
7380
+ place-items: center;
7381
+ }
7382
+ .Layer__ModalOverlay[data-variant=drawer] {
7383
+ place-items: end;
7384
+ }
7385
+ .Layer__ModalOverlay[data-variant=mobile-drawer] {
7386
+ place-items: end center;
7387
+ }
7388
+
7389
+ .Layer__Modal {
7390
+ block-size: min(42rem, 90%);
7391
+ inline-size: min(36rem, 90%);
7392
+ }
7393
+ .Layer__Modal[data-size=lg] {
7394
+ inline-size: min(42rem, 90%);
7395
+ }
7396
+ .Layer__Modal[data-size=xl] {
7397
+ inline-size: min(70rem, 100%);
7398
+ }
7399
+ .Layer__Modal[data-variant=drawer] {
7400
+ block-size: 100%;
7401
+ }
7402
+ .Layer__Modal[data-variant=drawer][data-entering] {
7403
+ animation: drawer-slide 300ms;
7404
+ }
7405
+ .Layer__Modal[data-variant=drawer][data-exiting] {
7406
+ animation: drawer-slide 300ms reverse ease-in;
7407
+ }
7408
+ .Layer__Modal[data-variant=mobile-drawer] {
7409
+ position: fixed;
7410
+ bottom: 0;
7411
+ overflow: hidden;
7412
+ block-size: 80%;
7413
+ inline-size: 100%;
7414
+ border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
7415
+ }
7416
+ .Layer__Modal[data-flex-block] {
7417
+ block-size: auto;
7418
+ }
7419
+ .Layer__Modal[data-flex-inline] {
7420
+ inline-size: auto;
7421
+ }
7422
+
7423
+ .Layer__Dialog {
7424
+ display: flex;
7425
+ flex-direction: column;
7426
+ block-size: 100%;
7427
+ padding: var(--spacing-lg);
7428
+ border-radius: var(--border-radius-2xs);
7429
+ outline: none;
7430
+ background-color: white;
7431
+ }
7432
+ .Layer__Dialog [slot=content] {
7433
+ flex: 1;
7434
+ }
7435
+ .Layer__Dialog[data-variant=drawer] {
7436
+ padding: 0;
7437
+ border-radius: 0;
7438
+ }
7439
+ .Layer__Dialog[data-variant=mobile-drawer] {
7440
+ padding: 0;
7441
+ border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
7442
+ }
7443
+ .Layer__Dialog[data-variant=mobile-popover] {
7444
+ padding: 0;
7445
+ }
7446
+
7447
+ @keyframes drawer-slide {
7448
+ from {
7449
+ transform: translateX(100%);
7450
+ }
7451
+ to {
7452
+ transform: translateX(0);
7453
+ }
7454
+ }
7455
+ .Layer__ModalContentFadeMotionContent {
7456
+ display: contents;
7457
+ height: 100%;
7458
+ width: 100%;
7268
7459
  }
7269
7460
 
7270
7461
  .Layer__ModalContentSlideUpMotionContent {
@@ -7389,139 +7580,70 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
7389
7580
  }
7390
7581
  .Layer__UI__Heading[data-weight=bold] {
7391
7582
  font-weight: var(--font-weight-bold);
7392
- }.Layer__LoadingSpinner {
7393
- animation-name: Layer__rotate;
7394
- animation-duration: 2s;
7395
- animation-timing-function: linear;
7396
- animation-iteration-count: infinite;
7397
- }.Layer__UI__Button {
7398
- all: unset;
7399
- box-sizing: border-box;
7400
- display: inline-grid;
7401
- grid-template-rows: minmax(0, 1fr);
7402
- grid-auto-columns: auto;
7403
- grid-auto-flow: column;
7404
- gap: 0.5rem;
7405
- align-items: center;
7406
- justify-content: center;
7407
- block-size: var(--size);
7408
- min-inline-size: 0;
7409
- padding-inline: var(--spacing-md);
7410
- border-radius: var(--btn-border-radius);
7411
- outline: none;
7412
- cursor: pointer;
7413
- user-select: none;
7414
- font-size: var(--text-md);
7415
- font-family: var(--font-family);
7416
- font-weight: var(--font-weight-normal);
7417
- appearance: none;
7418
- white-space: nowrap;
7419
- vertical-align: middle;
7420
- --size: 2.25rem;
7583
+ }.Layer__separator {
7584
+ height: 1px;
7585
+ width: 100%;
7586
+ background-color: var(--color-base-300);
7421
7587
  }
7422
- .Layer__UI__Button[data-inset] {
7423
- --size: 2rem;
7588
+ .Layer__separator[data-mbe="3xs"] {
7589
+ margin-block-end: var(--spacing-3xs);
7424
7590
  }
7425
- .Layer__UI__Button[data-icon] {
7426
- min-inline-size: var(--size);
7427
- padding-inline: 0;
7591
+ .Layer__separator[data-mbs="3xs"] {
7592
+ margin-block-start: var(--spacing-3xs);
7428
7593
  }
7429
- .Layer__UI__Button[data-ellipsis], .Layer__UI__Button[data-with-tooltip] {
7430
- display: inline-block;
7431
- overflow: hidden;
7432
- white-space: nowrap;
7433
- text-overflow: ellipsis;
7594
+ .Layer__separator[data-mbe="2xs"] {
7595
+ margin-block-end: var(--spacing-2xs);
7434
7596
  }
7435
- .Layer__UI__Button[data-focus-visible] {
7436
- outline: 1px auto -webkit-focus-ring-color;
7597
+ .Layer__separator[data-mbs="2xs"] {
7598
+ margin-block-start: var(--spacing-2xs);
7437
7599
  }
7438
- .Layer__UI__Button[data-disabled] {
7439
- cursor: not-allowed;
7600
+ .Layer__separator[data-mbe=xs] {
7601
+ margin-block-end: var(--spacing-xs);
7440
7602
  }
7441
- .Layer__UI__Button[data-variant=ghost] {
7442
- border: none;
7443
- background-color: transparent;
7444
- color: var(--button-fg-ghost);
7603
+ .Layer__separator[data-mbs=xs] {
7604
+ margin-block-start: var(--spacing-xs);
7445
7605
  }
7446
- .Layer__UI__Button[data-variant=ghost][data-pending], .Layer__UI__Button[data-variant=ghost][data-disabled] {
7447
- background-color: transparent;
7448
- color: var(--button-fg-disabled);
7606
+ .Layer__separator[data-mbe=sm] {
7607
+ margin-block-end: var(--spacing-sm);
7449
7608
  }
7450
- .Layer__UI__Button[data-variant=ghost][data-hovered]:not([data-disabled], [data-pressed]) {
7451
- background-color: var(--button-bg-ghost-hovered);
7609
+ .Layer__separator[data-mbs=sm] {
7610
+ margin-block-start: var(--spacing-sm);
7452
7611
  }
7453
- .Layer__UI__Button[data-variant=ghost][data-pressed]:not([data-focus-visible]) {
7454
- background-color: var(--button-bg-ghost-pressed);
7612
+ .Layer__separator[data-mbe=md] {
7613
+ margin-block-end: var(--spacing-md);
7455
7614
  }
7456
- .Layer__UI__Button[data-variant=outlined] {
7457
- border: 1px solid var(--button-border-color-ghost);
7458
- background-color: transparent;
7459
- color: var(--button-fg-ghost);
7615
+ .Layer__separator[data-mbs=md] {
7616
+ margin-block-start: var(--spacing-md);
7460
7617
  }
7461
- .Layer__UI__Button[data-variant=outlined][data-pending], .Layer__UI__Button[data-variant=outlined][data-disabled] {
7462
- background-color: transparent;
7463
- color: var(--button-fg-disabled);
7618
+ .Layer__separator[data-mbe=lg] {
7619
+ margin-block-end: var(--spacing-lg);
7464
7620
  }
7465
- .Layer__UI__Button[data-variant=outlined][data-hovered]:not([data-pressed], [data-focus-visible]) {
7466
- outline: 1px solid var(--outline-default);
7621
+ .Layer__separator[data-mbs=lg] {
7622
+ margin-block-start: var(--spacing-lg);
7467
7623
  }
7468
- .Layer__UI__Button[data-variant=outlined][data-pressed]:not([data-focus-visible]) {
7469
- border-color: var(--button-border-color-ghost-active);
7470
- outline: 2px solid var(--outline-default);
7624
+ .Layer__separator[data-mbe=xl] {
7625
+ margin-block-end: var(--spacing-xl);
7471
7626
  }
7472
- .Layer__UI__Button[data-variant=solid] {
7473
- background-color: var(--button-bg-default);
7474
- color: var(--button-fg-default);
7627
+ .Layer__separator[data-mbs=xl] {
7628
+ margin-block-start: var(--spacing-xl);
7475
7629
  }
7476
- .Layer__UI__Button[data-variant=solid][data-disabled], .Layer__UI__Button[data-variant=solid][data-pending] {
7477
- background-color: var(--button-bg-disabled);
7478
- color: var(--button-fg-disabled);
7479
- }
7480
- .Layer__UI__Button[data-variant=solid][data-hovered]:not([data-disabled], [data-pressed]) {
7481
- outline: 1px solid var(--outline-default);
7482
- background-color: var(--button-bg-active);
7483
- }
7484
- .Layer__UI__Button[data-variant=solid][data-pressed]:not([data-focus-visible]) {
7485
- outline: 2px solid var(--outline-default);
7486
- background-color: var(--button-bg-active);
7487
- }
7488
- .Layer__UI__Button[data-variant=text] {
7489
- --size: inherit;
7490
- display: inline-flex;
7491
- overflow: hidden;
7492
- text-overflow: ellipsis;
7493
- padding-inline: 0;
7494
- border: none;
7495
- background-color: transparent;
7496
- }
7497
- .Layer__UI__Button[data-variant=text][data-hovered]:not([data-disabled], [data-pressed]) {
7498
- text-decoration: underline;
7499
- }
7500
- .Layer__UI__Button[data-variant=text][data-pressed]:not([data-focus-visible]) {
7501
- text-decoration: none;
7630
+ .Layer__separator[data-mbe="2xl"] {
7631
+ margin-block-end: var(--spacing-2xl);
7502
7632
  }
7503
- .Layer__UI__Button[data-variant=branded] {
7504
- background-color: var(--bg-brand-accent, var(--color-accent));
7505
- color: var(--fg-brand-accent, var(--color-primary));
7633
+ .Layer__separator[data-mbs="2xl"] {
7634
+ margin-block-start: var(--spacing-2xl);
7506
7635
  }
7507
- .Layer__UI__Button[data-full-width] {
7508
- inline-size: 100%;
7636
+ .Layer__separator[data-mbe="3xl"] {
7637
+ margin-block-end: var(--spacing-3xl);
7509
7638
  }
7510
- .Layer__UI__Button[data-flex] {
7511
- display: flex;
7639
+ .Layer__separator[data-mbs="3xl"] {
7640
+ margin-block-start: var(--spacing-3xl);
7512
7641
  }
7513
-
7514
- .Layer__ButtonTransparentContent {
7515
- opacity: 0;
7516
- grid-row: 1/-1;
7517
- grid-column: 1/-1;
7642
+ .Layer__separator[data-mbe="5xl"] {
7643
+ margin-block-end: var(--spacing-5xl);
7518
7644
  }
7519
-
7520
- .Layer__ButtonSpinnerContainer {
7521
- grid-row: 1/-1;
7522
- grid-column: 1/-1;
7523
- height: 1rem;
7524
- place-self: center;
7645
+ .Layer__separator[data-mbs="5xl"] {
7646
+ margin-block-start: var(--spacing-5xl);
7525
7647
  }.Layer__ModalCloseButton--position-absolute {
7526
7648
  position: absolute;
7527
7649
  align-self: end;
@@ -7558,115 +7680,261 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
7558
7680
 
7559
7681
  .Layer__ModalActions {
7560
7682
  margin-block-start: var(--spacing-3xl);
7561
- }.Layer__separator {
7562
- height: 1px;
7563
- width: 100%;
7564
- background-color: var(--color-base-300);
7565
- }
7566
- .Layer__separator[data-mbe="3xs"] {
7567
- margin-block-end: var(--spacing-3xs);
7683
+ }.Layer__csv-upload {
7684
+ position: relative;
7685
+ height: 6rem;
7686
+ padding: var(--spacing-xs);
7687
+ border-radius: var(--spacing-3xs);
7688
+ border: 1px dashed var(--color-base-300);
7689
+ background: var(--color-base-100);
7690
+ transition: border-color 0.5s, background-color 0.5s;
7568
7691
  }
7569
- .Layer__separator[data-mbs="3xs"] {
7570
- margin-block-start: var(--spacing-3xs);
7692
+ .Layer__csv-upload--drag-active {
7693
+ background: var(--color-base-200);
7694
+ border-color: var(--color-base-500);
7571
7695
  }
7572
- .Layer__separator[data-mbe="2xs"] {
7573
- margin-block-end: var(--spacing-2xs);
7696
+
7697
+ .Layer__csv-upload__browse-link {
7698
+ all: unset;
7699
+ cursor: pointer;
7700
+ text-decoration: underline;
7574
7701
  }
7575
- .Layer__separator[data-mbs="2xs"] {
7576
- margin-block-start: var(--spacing-2xs);
7702
+ .Layer__csv-upload__browse-link:focus, .Layer__csv-upload__browse-link:active, .Layer__csv-upload__browse-link:focus-visible {
7703
+ border-radius: 2px;
7704
+ box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08), 0 0 0 1px var(--color-base-700);
7705
+ outline: none;
7577
7706
  }
7578
- .Layer__separator[data-mbe=xs] {
7579
- margin-block-end: var(--spacing-xs);
7707
+
7708
+ .Layer__csv-upload__error-message {
7709
+ position: absolute;
7710
+ bottom: var(--spacing-sm);
7711
+ left: var(--spacing-sm);
7580
7712
  }
7581
- .Layer__separator[data-mbs=xs] {
7582
- margin-block-start: var(--spacing-xs);
7713
+ .Layer__csv-upload__error-message .Layer__data-state__icon {
7714
+ background: var(--color-base-0);
7583
7715
  }
7584
- .Layer__separator[data-mbe=sm] {
7585
- margin-block-end: var(--spacing-sm);
7716
+
7717
+ .Layer__csv-upload__file-row {
7718
+ height: 2rem;
7719
+ padding: var(--spacing-xs) var(--spacing-sm);
7720
+ border-radius: var(--border-radius-3xs);
7721
+ border: 1px solid var(--color-base-300);
7722
+ background: var(--color-base-100);
7586
7723
  }
7587
- .Layer__separator[data-mbs=sm] {
7588
- margin-block-start: var(--spacing-sm);
7724
+
7725
+ .Layer__csv-upload__file-row--drop-target {
7726
+ height: 6rem;
7589
7727
  }
7590
- .Layer__separator[data-mbe=md] {
7591
- margin-block-end: var(--spacing-md);
7728
+
7729
+ .Layer__csv-upload__copy-template-headers-button-group {
7730
+ box-sizing: border-box;
7731
+ padding: var(--spacing-3xs);
7732
+ border-radius: var(--border-radius-3xs);
7733
+ background-color: var(--color-base-200);
7592
7734
  }
7593
- .Layer__separator[data-mbs=md] {
7594
- margin-block-start: var(--spacing-md);
7735
+ .Layer__csv-upload__copy-template-headers-button-group .Layer__btn {
7736
+ flex: 1 1 auto;
7595
7737
  }
7596
- .Layer__separator[data-mbe=lg] {
7597
- margin-block-end: var(--spacing-lg);
7738
+
7739
+ .Layer__csv-upload__validate-csv-table__container {
7740
+ position: relative;
7741
+ overflow: auto;
7742
+ border-radius: var(--border-radius-3xs);
7743
+ border: 1px solid var(--border-color);
7744
+ outline-offset: 1px;
7598
7745
  }
7599
- .Layer__separator[data-mbs=lg] {
7600
- margin-block-start: var(--spacing-lg);
7746
+
7747
+ .Layer__csv-upload__validate-csv-table__header {
7748
+ position: sticky;
7749
+ z-index: 1;
7750
+ top: 0;
7751
+ background-color: var(--bg-subtle);
7601
7752
  }
7602
- .Layer__separator[data-mbe=xl] {
7603
- margin-block-end: var(--spacing-xl);
7753
+
7754
+ .Layer__csv-upload__validate-csv-table__header-row {
7755
+ display: flex;
7756
+ width: 100%;
7604
7757
  }
7605
- .Layer__separator[data-mbs=xl] {
7606
- margin-block-start: var(--spacing-xl);
7758
+
7759
+ .Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell {
7760
+ box-sizing: border-box;
7761
+ display: flex;
7762
+ flex: 1 1 0;
7763
+ padding: 0;
7764
+ border-bottom: 1px solid var(--border-color);
7765
+ border-left: 1px solid var(--border-color);
7607
7766
  }
7608
- .Layer__separator[data-mbe="2xl"] {
7609
- margin-block-end: var(--spacing-2xl);
7767
+ .Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell--row {
7768
+ flex: 0 0 68px;
7769
+ border-left: none;
7610
7770
  }
7611
- .Layer__separator[data-mbs="2xl"] {
7612
- margin-block-start: var(--spacing-2xl);
7771
+
7772
+ .Layer__csv-upload__validate-csv-table__header-cell-content {
7773
+ padding: var(--spacing-sm) var(--spacing-md);
7613
7774
  }
7614
- .Layer__separator[data-mbe="3xl"] {
7615
- margin-block-end: var(--spacing-3xl);
7775
+ .Layer__csv-upload__validate-csv-table__header-cell-content--row {
7776
+ margin-left: auto;
7616
7777
  }
7617
- .Layer__separator[data-mbs="3xl"] {
7618
- margin-block-start: var(--spacing-3xl);
7778
+
7779
+ .Layer__table-row.Layer__csv-upload__validate-csv-table__row {
7780
+ position: absolute;
7781
+ display: flex;
7782
+ width: 100%;
7619
7783
  }
7620
- .Layer__separator[data-mbe="5xl"] {
7621
- margin-block-end: var(--spacing-5xl);
7784
+ .Layer__table-row.Layer__csv-upload__validate-csv-table__row--error {
7785
+ background-color: var(--color-info-error-bg);
7622
7786
  }
7623
- .Layer__separator[data-mbs="5xl"] {
7624
- margin-block-start: var(--spacing-5xl);
7625
- }.Layer__Checkbox {
7626
- position: relative;
7627
- display: inline-flex;
7628
- align-items: center;
7629
- cursor: pointer;
7787
+ .Layer__table-row.Layer__csv-upload__validate-csv-table__row--bottom-border {
7788
+ border-bottom: 1px solid var(--border-color);
7630
7789
  }
7631
- .Layer__Checkbox [slot=checkbox] {
7790
+
7791
+ .Layer__table-cell.Layer__csv-upload__validate-csv-table__cell {
7632
7792
  box-sizing: border-box;
7633
- display: grid;
7634
- height: var(--size);
7635
- width: var(--size);
7636
- border-radius: var(--checkbox-radius);
7637
- border: 2px solid var(--outline-default);
7638
- background-color: var(--color-base-50);
7639
- color: transparent;
7640
- place-items: center;
7641
- transition: all 100ms ease-out;
7642
- --size: 1rem;
7643
- --checkbox-radius: var(--border-radius-3xs);
7793
+ flex: 1 1 0%;
7794
+ min-width: 0;
7795
+ border-left: 1px solid var(--border-color);
7644
7796
  }
7645
- .Layer__Checkbox [slot=checkbox][data-pressed] {
7646
- border-color: var(--outline-active);
7797
+ .Layer__table-cell.Layer__csv-upload__validate-csv-table__cell--row {
7798
+ flex: 0 0 68px;
7799
+ border-left: none;
7647
7800
  }
7648
- .Layer__Checkbox[data-size=md] [slot=checkbox] {
7649
- --size: 1.25rem;
7650
- --checkbox-radius: 5px;
7801
+
7802
+ .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content {
7803
+ display: block;
7804
+ align-content: center;
7805
+ overflow: hidden;
7806
+ width: 100%;
7807
+ white-space: nowrap;
7808
+ text-overflow: ellipsis;
7651
7809
  }
7652
- .Layer__Checkbox[data-size=lg] [slot=checkbox] {
7653
- --size: 1.5rem;
7654
- --checkbox-radius: var(--border-radius-2xs);
7810
+ .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content--error {
7811
+ color: var(--color-info-error-fg);
7655
7812
  }
7656
- .Layer__Checkbox svg {
7657
- transition: all 100ms ease-out;
7813
+ .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content--row {
7814
+ text-align: end;
7815
+ }.Layer__UI__FieldError {
7816
+ padding-block-start: var(--spacing-3xs);
7817
+ font-size: var(--text-xs);
7818
+ color: var(--color-danger);
7658
7819
  }
7659
- .Layer__Checkbox[data-readonly] [slot=checkbox] {
7660
- background-color: var(--bg-muted);
7820
+
7821
+ .Layer__UI__TextField,
7822
+ .Layer__UI__DateField,
7823
+ .Layer__UI__NumberField {
7824
+ display: grid;
7825
+ grid-template-areas: "label" "input" "errorMessage";
7661
7826
  }
7662
- .Layer__Checkbox[data-hovered] [slot=checkbox], .Layer__Checkbox[data-pressed] [slot=checkbox] {
7663
- border-color: var(--outline-active);
7827
+ .Layer__UI__TextField[data-inline],
7828
+ .Layer__UI__DateField[data-inline],
7829
+ .Layer__UI__NumberField[data-inline] {
7830
+ grid-template-areas: "label input" ". errorMessage";
7831
+ align-items: center;
7664
7832
  }
7665
- .Layer__Checkbox[data-focus-visible] [slot=checkbox] {
7666
- outline: 1px solid var(--outline-active);
7667
- outline-offset: 2px;
7833
+ .Layer__UI__TextField[data-inline][data-textarea],
7834
+ .Layer__UI__DateField[data-inline][data-textarea],
7835
+ .Layer__UI__NumberField[data-inline][data-textarea] {
7836
+ align-items: flex-start;
7668
7837
  }
7669
- .Layer__Checkbox[data-selected] [slot=checkbox], .Layer__Checkbox[data-indeterminate] [slot=checkbox] {
7838
+ .Layer__UI__TextField[data-readonly] [slot=input],
7839
+ .Layer__UI__DateField[data-readonly] [slot=input],
7840
+ .Layer__UI__NumberField[data-readonly] [slot=input] {
7841
+ background-color: var(--bg-muted);
7842
+ }
7843
+ .Layer__UI__TextField > [slot=errorMessage],
7844
+ .Layer__UI__DateField > [slot=errorMessage],
7845
+ .Layer__UI__NumberField > [slot=errorMessage] {
7846
+ grid-area: errorMessage;
7847
+ }.Layer__UI__Input,
7848
+ .Layer__UI__DateInput {
7849
+ min-inline-size: 0;
7850
+ padding-inline: var(--spacing-xs);
7851
+ outline: none;
7852
+ background-color: transparent;
7853
+ font-size: var(--input-font-size);
7854
+ line-height: 140%;
7855
+ font-family: var(--font-family);
7856
+ vertical-align: middle;
7857
+ }
7858
+ .Layer__UI__Input[data-inset],
7859
+ .Layer__UI__DateInput[data-inset] {
7860
+ padding-inline: 0;
7861
+ border: none;
7862
+ }
7863
+ .Layer__UI__Input[data-placement=first],
7864
+ .Layer__UI__DateInput[data-placement=first] {
7865
+ border-start-start-radius: inherit;
7866
+ border-end-start-radius: inherit;
7867
+ }.Layer__InputGroup {
7868
+ box-sizing: border-box;
7869
+ display: grid;
7870
+ grid-template-columns: minmax(0, 1fr) auto;
7871
+ gap: var(--spacing-3xs);
7872
+ align-items: center;
7873
+ min-block-size: 2.25rem;
7874
+ padding-inline-start: var(--spacing-xs);
7875
+ padding-inline-end: var(--spacing-3xs);
7876
+ border-radius: var(--input-border-radius);
7877
+ border: 1px solid var(--border-color);
7878
+ background-color: var(--color-base-0);
7879
+ }
7880
+ .Layer__InputGroup[data-focus-within], .Layer__InputGroup[data-focus-visible] {
7881
+ border-color: var(--color-base-800);
7882
+ outline: 2px solid var(--outline-default);
7883
+ }
7884
+ .Layer__InputGroup[data-invalid] {
7885
+ border-color: var(--color-danger);
7886
+ outline: none;
7887
+ }
7888
+ .Layer__InputGroup[data-action-count="2"] {
7889
+ grid-template-columns: minmax(0, 1fr) auto auto;
7890
+ }
7891
+ .Layer__InputGroup[data-disabled] {
7892
+ cursor: not-allowed;
7893
+ }.Layer__Checkbox {
7894
+ position: relative;
7895
+ display: inline-flex;
7896
+ align-items: center;
7897
+ cursor: pointer;
7898
+ }
7899
+ .Layer__Checkbox [slot=checkbox] {
7900
+ box-sizing: border-box;
7901
+ display: grid;
7902
+ height: var(--size);
7903
+ width: var(--size);
7904
+ border-radius: var(--checkbox-radius);
7905
+ border: 2px solid var(--outline-default);
7906
+ background-color: var(--color-base-50);
7907
+ color: transparent;
7908
+ place-items: center;
7909
+ transition: all 100ms ease-out;
7910
+ --size: 1rem;
7911
+ --checkbox-radius: var(--border-radius-3xs);
7912
+ }
7913
+ .Layer__Checkbox [slot=checkbox][data-pressed] {
7914
+ border-color: var(--outline-active);
7915
+ }
7916
+ .Layer__Checkbox[data-size=md] [slot=checkbox] {
7917
+ --size: 1.25rem;
7918
+ --checkbox-radius: 5px;
7919
+ }
7920
+ .Layer__Checkbox[data-size=lg] [slot=checkbox] {
7921
+ --size: 1.5rem;
7922
+ --checkbox-radius: var(--border-radius-2xs);
7923
+ }
7924
+ .Layer__Checkbox svg {
7925
+ transition: all 100ms ease-out;
7926
+ }
7927
+ .Layer__Checkbox[data-readonly] [slot=checkbox] {
7928
+ background-color: var(--bg-muted);
7929
+ }
7930
+ .Layer__Checkbox[data-hovered] [slot=checkbox], .Layer__Checkbox[data-pressed] [slot=checkbox] {
7931
+ border-color: var(--outline-active);
7932
+ }
7933
+ .Layer__Checkbox[data-focus-visible] [slot=checkbox] {
7934
+ outline: 1px solid var(--outline-active);
7935
+ outline-offset: 2px;
7936
+ }
7937
+ .Layer__Checkbox[data-selected] [slot=checkbox], .Layer__Checkbox[data-indeterminate] [slot=checkbox] {
7670
7938
  background-color: var(--fg-default);
7671
7939
  color: var(--bg-default);
7672
7940
  border-color: var(--fg-default);
@@ -7707,580 +7975,513 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
7707
7975
  }
7708
7976
  .Layer__Checkbox[data-labeled] {
7709
7977
  gap: var(--spacing-xs);
7710
- }.Layer__BasicLinkedAccountContainer {
7978
+ }.Layer__FormCheckboxField {
7711
7979
  display: grid;
7712
- grid-template-columns: minmax(0, 1fr) auto;
7713
- padding-block: var(--spacing-xs);
7714
- padding-inline: var(--spacing-xs) var(--spacing-md);
7715
- border-radius: var(--border-radius-xs);
7716
- border: 1px solid var(--outline-subtle);
7980
+ grid-template-areas: "label" "checkbox";
7981
+ justify-content: center;
7717
7982
  }
7718
- .Layer__BasicLinkedAccountContainer[data-selected] {
7719
- background-color: var(--bg-subtle);
7983
+ .Layer__FormCheckboxField > [slot=checkbox] {
7984
+ grid-area: checkbox;
7985
+ justify-self: center;
7986
+ margin-block: var(--spacing-2xs);
7720
7987
  }
7721
-
7722
- .Layer__BasicLinkedAccountLogo {
7723
- display: flex;
7988
+ .Layer__FormCheckboxField > [slot=label] {
7989
+ grid-area: label;
7990
+ padding-block-end: var(--spacing-3xs);
7991
+ }
7992
+ .Layer__FormCheckboxField--inline {
7993
+ grid-template-areas: "checkbox label";
7994
+ gap: var(--spacing-3xs);
7724
7995
  align-items: center;
7725
- justify-content: center;
7726
- height: 28px;
7727
- width: 52px;
7728
- padding: var(--spacing-3xs) 0;
7729
- border-radius: var(--border-radius-3xs);
7730
- background: var(--color-base-0);
7731
- color: var(--color-base-200);
7732
- }.Layer__caobfb {
7733
- position: relative;
7734
- display: flex;
7735
- gap: var(--spacing-sm);
7736
- max-height: 280px;
7737
- padding-block: var(--spacing-sm);
7738
- padding-inline: var(--spacing-md);
7739
- border-radius: var(--border-radius-xs);
7740
- border: 1px solid var(--color-base-100);
7741
- container-type: inline-size;
7742
- transition: all 0.25s ease-in-out;
7743
- transition-delay: 0.8s;
7744
7996
  }
7745
- .Layer__caobfb[data-confirmed=true] {
7746
- background-color: var(--color-base-50);
7997
+ .Layer__FormCheckboxField--inline > [slot=label] {
7998
+ padding-block-end: 0;
7999
+ }.Layer__UI__DateSegment {
8000
+ padding: 1px;
8001
+ border-radius: var(--border-radius-4xs);
7747
8002
  }
7748
-
7749
- .Layer__caobfb__icon-col {
7750
- display: flex;
7751
- align-items: flex-start;
7752
- justify-content: center;
8003
+ .Layer__UI__DateSegment[data-focused] {
8004
+ outline: none;
8005
+ background-color: var(--color-base-400);
7753
8006
  }
7754
-
7755
- .Layer__caobfb__details-col {
7756
- display: flex;
7757
- flex: 1;
7758
- flex-direction: column;
7759
- gap: var(--spacing-2xs);
7760
- color: var(--color-base-700);
8007
+ .Layer__UI__DateSegment[data-hovered] {
8008
+ background-color: var(--color-base-400);
7761
8009
  }
7762
-
7763
- .Layer__caobfb__details-col__details {
7764
- padding-bottom: var(--spacing-sm);
8010
+ .Layer__UI__DateSegment:not([data-interactive]) {
8011
+ background-color: transparent;
7765
8012
  }
7766
8013
 
7767
- .Layer__caobfb__details-col__name {
7768
- display: flex;
7769
- gap: var(--spacing-3xs);
7770
- width: 100%;
7771
- max-width: 500px;
8014
+ .Layer__UI__DateInput[data-pointer-events=none] {
8015
+ pointer-events: none;
7772
8016
  }
7773
8017
 
7774
- .Layer__caobfb__details-col__name__institution-name {
7775
- overflow: hidden;
7776
- max-width: 50%;
8018
+ .Layer__UI__DatePicker .Layer__UI__FieldError {
8019
+ padding-block-start: 0;
8020
+ }
8021
+ .Layer__UI__DatePicker[data-disabled] {
7777
8022
  color: var(--color-base-500);
7778
- text-overflow: ellipsis;
7779
- white-space: nowrap;
8023
+ }.Layer__UI__TextArea {
8024
+ box-sizing: content-box;
8025
+ min-block-size: 5lh;
8026
+ padding-block: var(--spacing-xs);
8027
+ padding-inline-start: var(--spacing-xs);
8028
+ padding-inline-end: var(--spacing-3xs);
8029
+ border-radius: var(--input-border-radius);
8030
+ border: 1px solid var(--color-base-300);
8031
+ background-color: var(--color-base-0);
8032
+ font-size: var(--input-font-size);
8033
+ line-height: 140%;
8034
+ font-family: var(--font-family);
7780
8035
  }
7781
-
7782
- .Layer__caobfb__details-col__name__account-name {
7783
- overflow: hidden;
7784
- max-width: 50%;
7785
- color: var(--color-base-1000);
7786
- text-overflow: ellipsis;
7787
- white-space: nowrap;
8036
+ .Layer__UI__TextArea::-webkit-scrollbar-track {
8037
+ margin-block: 2px;
7788
8038
  }
7789
-
7790
- .Layer__caobfb__details-col__inputs {
7791
- display: flex;
7792
- gap: var(--spacing-sm);
7793
- align-items: center;
7794
- padding: var(--spacing-sm) 0;
7795
- border-top: 1px solid var(--color-base-200);
8039
+ .Layer__UI__TextArea[data-resize=both] {
8040
+ resize: both;
7796
8041
  }
7797
- .Layer__caobfb__details-col__inputs .Layer__input-group {
7798
- width: 100%;
8042
+ .Layer__UI__TextArea[data-resize=horizontal] {
8043
+ resize: horizontal;
7799
8044
  }
7800
- .Layer__caobfb__details-col__inputs .Layer__input-group .Layer__input {
7801
- width: 100%;
8045
+ .Layer__UI__TextArea[data-resize=vertical] {
8046
+ resize: vertical;
7802
8047
  }
7803
- @container (max-width: 440px) {
7804
- .Layer__caobfb__details-col__inputs {
7805
- flex-direction: column;
7806
- }
8048
+ .Layer__UI__TextArea[data-resize=none] {
8049
+ resize: none;
7807
8050
  }
7808
-
7809
- .Layer__caobfb__confirm-col {
7810
- display: flex;
7811
- align-items: flex-start;
7812
- justify-content: flex-end;
8051
+ .Layer__UI__TextArea[data-focused] {
8052
+ border-color: var(--color-base-800);
8053
+ outline: 2px solid var(--outline-default);
7813
8054
  }
7814
-
7815
- .Layer__caobfb__success-banner {
7816
- position: absolute;
7817
- z-index: -1;
7818
- inset: 0;
8055
+ .Layer__UI__TextArea[data-disabled] {
8056
+ cursor: not-allowed;
8057
+ }.Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip {
7819
8058
  display: flex;
7820
- flex-direction: column;
7821
- align-items: center;
7822
- justify-content: center;
7823
- padding: var(--spacing-sm);
7824
- background-color: var(--color-base-50);
7825
- color: var(--color-info-success-fg);
7826
- opacity: 0;
7827
- transition: opacity 0.12s ease-in-out;
8059
+ flex: 1 1;
7828
8060
  }
7829
-
7830
- .Layer__caobfb[data-saved] {
7831
- overflow: hidden;
7832
- max-height: 0;
7833
- padding: 0;
7834
- border-width: 0;
8061
+ .Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip > .Layer__custom-account-form__input {
8062
+ flex: 1 1;
8063
+ }.Layer__upload-transactions {
8064
+ container-type: inline-size;
7835
8065
  }
7836
- .Layer__caobfb[data-saved] .Layer__caobfb__success-banner {
7837
- opacity: 1;
7838
- z-index: 101;
7839
- }.Layer__UI__Calendar {
7840
- width: min-content;
8066
+ .Layer__upload-transactions .Layer__upload-transactions__select-account-name-field > .Layer__input-tooltip {
8067
+ flex: auto;
7841
8068
  }
7842
-
7843
- .Layer__UI__CalendarGrid {
7844
- border-collapse: collapse;
8069
+ .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input .Layer__select__control {
8070
+ max-width: 24rem;
7845
8071
  }
7846
-
7847
- .Layer__UI__CalendarCell,
7848
- .Layer__UI__CalendarHeaderCell {
7849
- height: 2rem;
7850
- width: 2rem;
8072
+ .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input--error .Layer__select__control {
8073
+ box-shadow: 0 0 0 1px var(--color-base-300), 0 0 0 2px var(--color-danger);
8074
+ }
8075
+ .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input--error .Layer__select__placeholder {
8076
+ color: var(--color-danger);
8077
+ }
8078
+ .Layer__upload-transactions .Layer__upload-transactions__create-account-form {
8079
+ padding: var(--spacing-md);
7851
8080
  border-radius: var(--border-radius-3xs);
7852
- font-size: var(--text-sm);
7853
- line-height: 2rem;
7854
- text-align: center;
8081
+ background: var(--color-base-100);
7855
8082
  }
7856
- .Layer__UI__CalendarCell[data-size=md],
7857
- .Layer__UI__CalendarHeaderCell[data-size=md] {
7858
- height: 2.75rem;
7859
- width: 2.75rem;
7860
- font-size: var(--text-md);
7861
- line-height: 2.75rem;
8083
+ .Layer__upload-transactions .Layer__upload-transactions__parse-csv-error-message {
8084
+ max-width: 29rem;
7862
8085
  }
7863
-
7864
- .Layer__UI__CalendarCell {
7865
- transition: background-color 0.2s ease, color 0.2s ease;
8086
+ .Layer__upload-transactions .Layer__upload-transactions__template-section {
8087
+ padding: var(--spacing-md);
8088
+ border-radius: var(--border-radius-3xs);
8089
+ border: 1px solid var(--color-base-300);
7866
8090
  }
7867
- .Layer__UI__CalendarCell[data-hovered] {
7868
- background-color: var(--color-base-400);
8091
+ .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row {
8092
+ display: flex;
8093
+ justify-content: space-between;
7869
8094
  }
7870
- .Layer__UI__CalendarCell[data-selected] {
7871
- background-color: var(--color-base-900);
7872
- color: var(--color-base-0);
8095
+ @container (max-width: 36rem) {
8096
+ .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row {
8097
+ flex-direction: column;
8098
+ }
8099
+ .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row > .Layer__upload-transactions__template-section__button-row-item {
8100
+ width: 100%;
8101
+ }
7873
8102
  }
7874
- .Layer__UI__CalendarCell[data-disabled] {
7875
- color: var(--color-base-400);
8103
+ @container (max-width: 30rem) {
8104
+ .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row {
8105
+ flex-direction: column;
8106
+ }
8107
+ .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row > .Layer__upload-transactions__confirmation-step__button-row-item {
8108
+ width: 100%;
8109
+ }
7876
8110
  }
7877
- .Layer__UI__CalendarCell[data-outside-month] {
7878
- color: var(--color-base-0);
7879
- transition: none;
7880
- }.Layer__DateCalendar__Header {
7881
- border-bottom: 1px solid var(--border-color);
7882
- }.Layer__UI__DateSegment {
7883
- padding: 1px;
7884
- border-radius: var(--border-radius-4xs);
8111
+ .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__data-state .Layer__data-state__description {
8112
+ margin-bottom: 0;
7885
8113
  }
7886
- .Layer__UI__DateSegment[data-focused] {
7887
- outline: none;
7888
- background-color: var(--color-base-400);
8114
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--date,
8115
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--date {
8116
+ min-width: 7.5rem;
7889
8117
  }
7890
- .Layer__UI__DateSegment[data-hovered] {
7891
- background-color: var(--color-base-400);
8118
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount,
8119
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount {
8120
+ min-width: 7.5rem;
7892
8121
  }
7893
- .Layer__UI__DateSegment:not([data-interactive]) {
7894
- background-color: transparent;
8122
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content,
8123
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content {
8124
+ margin-left: auto;
7895
8125
  }
7896
-
7897
- .Layer__UI__DateInput[data-pointer-events=none] {
7898
- pointer-events: none;
8126
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__cell-content,
8127
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__cell-content {
8128
+ text-align: right;
8129
+ }
8130
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--description,
8131
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--description {
8132
+ flex: 3 1 0;
8133
+ min-width: 12rem;
8134
+ }
8135
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--external_id,
8136
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--external_id {
8137
+ min-width: 7.5rem;
8138
+ }
8139
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--reference_number,
8140
+ .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--reference_number {
8141
+ min-width: 7.5rem;
8142
+ }.Layer__UI__DropdownMenu__Popover[data-entering] {
8143
+ animation: popover-slide 120ms;
8144
+ }
8145
+ .Layer__UI__DropdownMenu__Popover[data-exiting] {
8146
+ animation: popover-slide reverse 120ms;
7899
8147
  }
7900
8148
 
7901
- .Layer__UI__DatePicker .Layer__UI__FieldError {
7902
- padding-block-start: 0;
8149
+ @keyframes popover-slide {
8150
+ from {
8151
+ transform: translateY(-20px);
8152
+ opacity: 0;
8153
+ }
8154
+ to {
8155
+ transform: translateY(0);
8156
+ opacity: 1;
8157
+ }
7903
8158
  }
7904
- .Layer__UI__DatePicker[data-disabled] {
7905
- color: var(--color-base-500);
7906
- }.Layer__Popover {
8159
+ .Layer__UI__DropdownMenu__Dialog {
7907
8160
  display: grid;
7908
- inline-size: min(90svi, 60ch);
8161
+ gap: var(--spacing-xs);
8162
+ overflow: hidden;
8163
+ padding: var(--spacing-sm);
7909
8164
  border-radius: var(--border-radius-xs);
7910
- border: 1px solid var(--outline-default);
8165
+ border: 1px solid var(--border-color);
7911
8166
  background: var(--color-base-0);
7912
8167
  }
7913
- .Layer__Popover[data-flex-inline] {
7914
- inline-size: auto;
7915
- }.Layer__InputGroup {
7916
- box-sizing: border-box;
7917
- display: grid;
7918
- grid-template-columns: minmax(0, 1fr) auto;
7919
- gap: var(--spacing-3xs);
8168
+ .Layer__UI__DropdownMenu__Dialog[data-variant=compact] {
8169
+ padding: 0;
8170
+ }
8171
+
8172
+ .Layer__UI__DropdownMenu__MenuItem {
8173
+ display: flex;
8174
+ gap: var(--spacing-xs);
7920
8175
  align-items: center;
7921
- min-block-size: 2.25rem;
7922
- padding-inline-start: var(--spacing-xs);
7923
- padding-inline-end: var(--spacing-3xs);
7924
- border-radius: var(--input-border-radius);
8176
+ padding: var(--spacing-xs);
8177
+ border-radius: var(--border-radius-3xs);
7925
8178
  border: 1px solid var(--border-color);
7926
- background-color: var(--color-base-0);
7927
- }
7928
- .Layer__InputGroup[data-focus-within], .Layer__InputGroup[data-focus-visible] {
7929
- border-color: var(--color-base-800);
7930
- outline: 2px solid var(--outline-default);
8179
+ cursor: pointer;
8180
+ transition: background-color 0.1s ease-in-out;
7931
8181
  }
7932
- .Layer__InputGroup[data-invalid] {
7933
- border-color: var(--color-danger);
7934
- outline: none;
8182
+ .Layer__UI__DropdownMenu__MenuItem:hover, .Layer__UI__DropdownMenu__MenuItem:focus-visible {
8183
+ background-color: var(--color-base-50);
7935
8184
  }
7936
- .Layer__InputGroup[data-action-count="2"] {
7937
- grid-template-columns: minmax(0, 1fr) auto auto;
8185
+ .Layer__UI__DropdownMenu__MenuItem[data-variant=compact] {
8186
+ gap: 0;
8187
+ border-radius: 0;
8188
+ border: none;
7938
8189
  }
7939
- .Layer__InputGroup[data-disabled] {
7940
- cursor: not-allowed;
7941
- }.Layer__UI__FieldError {
7942
- padding-block-start: var(--spacing-3xs);
7943
- font-size: var(--text-xs);
7944
- color: var(--color-danger);
8190
+ .Layer__UI__DropdownMenu__MenuItem[data-variant=compact]:not(:last-child) {
8191
+ border-bottom: 1px solid var(--border-color);
7945
8192
  }
7946
8193
 
7947
- .Layer__UI__TextField,
7948
- .Layer__UI__DateField {
8194
+ .Layer__UI__DropdownMenu__Menu {
7949
8195
  display: grid;
7950
- grid-template-areas: "label" "input" "errorMessage";
8196
+ gap: var(--spacing-3xs);
7951
8197
  }
7952
- .Layer__UI__TextField[data-inline],
7953
- .Layer__UI__DateField[data-inline] {
7954
- grid-template-areas: "label input" ". errorMessage";
8198
+ .Layer__UI__DropdownMenu__Menu[data-variant=compact] {
8199
+ gap: 0;
8200
+ }.Layer__DataTableHeaderMenu__Icon {
8201
+ padding: var(--spacing-3xs);
8202
+ border-radius: var(--spacing-3xs);
8203
+ background: var(--color-base-200);
8204
+ color: var(--color-base-500);
8205
+ }.Layer__BankTransactionsActions {
8206
+ display: grid;
8207
+ grid-template-areas: "toggle . download-upload" "search search search";
8208
+ grid-template-columns: auto minmax(0, 1fr) auto;
8209
+ gap: var(--spacing-xs);
7955
8210
  align-items: center;
7956
8211
  }
7957
- .Layer__UI__TextField[data-inline][data-textarea],
7958
- .Layer__UI__DateField[data-inline][data-textarea] {
7959
- align-items: flex-start;
8212
+ @container (min-width: 840px) {
8213
+ .Layer__BankTransactionsActions {
8214
+ grid-template-areas: "toggle . search download-upload";
8215
+ grid-template-columns: auto minmax(0, 2fr) 15rem auto;
8216
+ }
7960
8217
  }
7961
- .Layer__UI__TextField[data-readonly] [slot=input],
7962
- .Layer__UI__DateField[data-readonly] [slot=input] {
7963
- background-color: var(--bg-muted);
8218
+ .Layer__BankTransactionsActions > [slot=toggle] {
8219
+ grid-area: toggle;
7964
8220
  }
7965
- .Layer__UI__TextField > [slot=errorMessage],
7966
- .Layer__UI__DateField > [slot=errorMessage] {
7967
- grid-area: errorMessage;
7968
- }.Layer__file-thumb {
7969
- box-sizing: border-box;
7970
- position: relative;
7971
- display: flex;
7972
- gap: var(--spacing-2xs);
7973
- align-items: flex-start;
7974
- justify-content: space-between;
7975
- min-height: 38px;
7976
- container-type: normal;
8221
+ .Layer__BankTransactionsActions > [slot=search] {
8222
+ grid-area: search;
7977
8223
  }
7978
- .Layer__file-thumb:not(.Layer__file-thumb--floating) {
7979
- width: 100%;
7980
- max-width: 680px;
7981
- }
7982
- @container (max-width: 300px) {
7983
- .Layer__file-thumb:not(.Layer__file-thumb--floating) {
7984
- flex-direction: column;
7985
- border-bottom: 1px solid var(--color-base-300);
7986
- }
7987
- .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) {
7988
- padding-right: 0;
7989
- padding-left: 0;
7990
- margin-left: -6px;
7991
- }
7992
- .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn {
7993
- height: 26px;
7994
- width: 26px;
7995
- }
7996
- .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn svg {
7997
- height: 14px;
7998
- width: 14px;
7999
- }
8224
+ .Layer__BankTransactionsActions > [slot=download-upload] {
8225
+ grid-area: download-upload;
8226
+ }.Layer__BulkActionsModule__SelectedItemsContainer {
8227
+ height: 2.25rem;
8228
+ border-radius: var(--border-radius-2xs);
8229
+ border: 1px solid var(--color-base-300);
8230
+ background-color: var(--color-base-100);
8231
+ }.Layer__MonthCalendar__Header {
8232
+ border-bottom: 1px solid var(--border-color);
8000
8233
  }
8001
8234
 
8002
- .Layer__file-thumb__main {
8235
+ .Layer__MonthCalendar__MonthGrid {
8003
8236
  display: grid;
8004
- grid-template-columns: auto minmax(0, 1fr);
8005
- gap: var(--spacing-2xs);
8237
+ grid-template-columns: repeat(3, 4.5rem);
8238
+ gap: var(--spacing-3xs);
8239
+ padding: var(--spacing-xs);
8240
+ }
8241
+ .Layer__MonthCalendar__MonthGrid--mobile {
8242
+ grid-template-columns: repeat(3, 6.5rem);
8006
8243
  }
8007
8244
 
8008
- .Layer__file-thumb__actions {
8009
- display: flex;
8010
- gap: var(--spacing-4xs);
8011
- padding: var(--spacing-4xs);
8245
+ .Layer__MonthCalendar__MonthGridItem {
8246
+ display: grid;
8247
+ justify-self: center;
8248
+ block-size: 2rem;
8249
+ inline-size: 4.5rem;
8250
+ border-radius: var(--border-radius-2xs);
8251
+ font-size: var(--text-sm);
8252
+ text-align: center;
8253
+ color: var(--button-fg-ghost);
8254
+ place-items: center;
8255
+ transition: background-color 0.2s ease, color 0.2s ease;
8012
8256
  }
8013
- .Layer__file-thumb__actions .Layer__icon-btn.Layer__icon-btn--active {
8014
- background-color: var(--color-base-50);
8257
+ .Layer__MonthCalendar__MonthGridItem[data-focus-visible] {
8258
+ outline: 1px auto -webkit-focus-ring-color;
8015
8259
  }
8016
- .Layer__file-thumb__actions .Layer__icon-btn.Layer__icon-btn--active:hover {
8017
- background-color: var(--color-base-100);
8260
+ .Layer__MonthCalendar__MonthGridItem[data-disabled] {
8261
+ cursor: not-allowed;
8262
+ color: var(--button-fg-disabled);
8018
8263
  }
8019
- .Layer__file-thumb__actions .Layer__file-thumb__actions__remove {
8020
- color: var(--color-danger);
8264
+ .Layer__MonthCalendar__MonthGridItem[data-selected] {
8265
+ background-color: var(--color-base-900);
8266
+ color: var(--color-base-0);
8021
8267
  }
8022
- .Layer__file-thumb__actions.Layer__file-thumb__actions--floating {
8023
- position: absolute;
8024
- top: -20px;
8025
- right: -10px;
8026
- display: none;
8027
- border-radius: var(--border-radius-3xs);
8028
- box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
8029
- background-color: var(--color-base-0);
8030
- transform: scale(0.8);
8268
+ .Layer__MonthCalendar__MonthGridItem[data-hovered]:not([data-disabled], [data-selected]) {
8269
+ background-color: var(--button-bg-ghost-hovered);
8031
8270
  }
8032
-
8033
- .Layer__file-thumb:hover .Layer__file-thumb__actions--floating {
8034
- display: flex;
8271
+ .Layer__MonthCalendar__MonthGridItem--mobile {
8272
+ block-size: 2.75rem;
8273
+ inline-size: 6.5rem;
8274
+ font-size: var(--text-md);
8275
+ }.Layer__Popover {
8276
+ display: grid;
8277
+ inline-size: min(90svi, 60ch);
8278
+ border-radius: var(--border-radius-xs);
8279
+ border: 1px solid var(--outline-default);
8280
+ background: var(--color-base-0);
8281
+ }
8282
+ .Layer__Popover[data-flex-inline] {
8283
+ inline-size: auto;
8284
+ }.Layer__MonthPicker__Popover {
8285
+ inline-size: auto;
8035
8286
  }
8036
8287
 
8037
- .Layer__file-thumb__img {
8038
- height: 100%;
8039
- height: 38px;
8040
- width: 100%;
8041
- width: 38px;
8042
- border-radius: var(--border-radius-3xs, 4px);
8043
- box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
8044
- background: var(--color-base-300);
8288
+ .Layer__MonthPicker__InputGroup {
8289
+ inline-size: 12rem;
8290
+ }.Layer__MinimalSearchField {
8291
+ display: grid;
8292
+ grid-template-areas: "input clear-button";
8293
+ grid-template-columns: minmax(0, 1fr) auto;
8294
+ align-items: center;
8295
+ border: none;
8045
8296
  }
8046
- .Layer__file-thumb__img img {
8047
- height: 100%;
8048
- width: 100%;
8049
- object-fit: cover;
8297
+ .Layer__MinimalSearchField > [slot=input] {
8298
+ grid-area: input;
8299
+ padding-inline: var(--spacing-3xs);
8300
+ border: none;
8301
+ outline: none;
8302
+ /*
8303
+ * The background on mobile is grey by default.
8304
+ */
8305
+ background: none;
8306
+ font-family: var(--font-family);
8050
8307
  }
8051
-
8052
- .Layer__file-thumb__details {
8053
- display: flex;
8054
- flex-direction: column;
8055
- gap: var(--spacing-4xs);
8056
- align-items: flex-start;
8057
- justify-content: flex-start;
8058
- padding: var(--spacing-4xs) var(--spacing-2xs);
8059
- font-size: var(--text-sm);
8308
+ .Layer__MinimalSearchField > [slot=input]::-webkit-search-cancel-button, .Layer__MinimalSearchField > [slot=input]::-webkit-search-decoration {
8309
+ appearance: none;
8060
8310
  }
8061
-
8062
- .Layer__file-thumb__details__date {
8063
- color: var(--color-base-600);
8311
+ .Layer__MinimalSearchField[data-empty] > [slot=input] {
8312
+ grid-column: 1/-1;
8064
8313
  }
8065
-
8066
- .Layer__file-thumb__details__uploading {
8067
- display: flex;
8068
- gap: var(--spacing-3xs);
8069
- align-items: center;
8070
- color: var(--color-info-fg);
8314
+ .Layer__MinimalSearchField > [slot=clear-button] {
8315
+ grid-area: clear-button;
8071
8316
  }
8072
-
8073
- .Layer__file-thumb__details__error {
8074
- color: var(--color-danger);
8317
+ .Layer__MinimalSearchField[data-empty] > [slot=clear-button] {
8318
+ display: none;
8075
8319
  }
8076
-
8077
- .Layer__file-thumb__details__name {
8078
- overflow-wrap: break-word;
8079
- }.Layer__ComboBoxContainer {
8080
- display: grid;
8320
+ .Layer__MinimalSearchField[data-disabled] {
8321
+ cursor: not-allowed;
8081
8322
  }
8082
-
8083
- .Layer__ComboBoxControl {
8323
+ .Layer__MinimalSearchField[data-disabled] > [slot=input] {
8324
+ cursor: not-allowed;
8325
+ }.Layer__SearchField.Layer__InputGroup {
8084
8326
  display: grid;
8085
- grid-template-columns: minmax(0, 1fr) auto;
8086
- --block-size: 2.25rem;
8087
- block-size: var(--block-size);
8088
- border-radius: var(--input-border-radius);
8089
- border: 1px solid var(--color-base-300);
8090
- background-color: var(--color-base-0);
8327
+ grid-template-areas: "icon search";
8328
+ grid-template-columns: auto minmax(0, 1fr);
8329
+ gap: 0;
8330
+ padding-inline-start: 0;
8331
+ padding-inline-end: var(--spacing-3xs);
8091
8332
  }
8092
- .Layer__ComboBoxControl--focused {
8093
- border-color: var(--outline-active);
8333
+ .Layer__SearchField.Layer__InputGroup > [slot=icon] {
8334
+ grid-area: icon;
8335
+ block-size: 2rem;
8336
+ inline-size: 2rem;
8094
8337
  }
8095
- .Layer__ComboBoxControl--disabled {
8096
- cursor: not-allowed;
8338
+ .Layer__SearchField.Layer__InputGroup > [slot=search] {
8339
+ grid-area: search;
8097
8340
  }
8098
- .Layer__ComboBoxControl--readonly {
8099
- background-color: var(--bg-muted);
8341
+ .Layer__SearchField.Layer__InputGroup .Layer__SearchField__Icon[data-disabled] {
8342
+ cursor: not-allowed;
8343
+ color: var(--color-base-500);
8344
+ }.Layer__InvisibleDownload {
8345
+ display: none;
8346
+ }.Layer__UI__Table-Table {
8347
+ border-collapse: collapse;
8100
8348
  }
8101
8349
 
8102
- .Layer__ComboBoxContainer > .Layer__ComboBoxControl {
8103
- /*
8104
- * This is intentional.
8105
- *
8106
- * The "unstyled" variant of react-select still forces a min-height on the control of 38 px.
8107
- */
8108
- block-size: var(--block-size);
8109
- min-block-size: var(--block-size);
8350
+ .Layer__UI__Table-TableHeader {
8351
+ height: 3.25rem;
8110
8352
  }
8111
- .Layer__ComboBoxContainer > .Layer__ComboBoxControl--focused {
8112
- /*
8113
- * This seems like the only workaround when the "unstyled" variant
8114
- * includes a (malicious) `outline: 0 !important`.
8115
- *
8116
- * @see {https://github.com/JedWatson/react-select/blob/2a913698ad3d7759fb8e6bc5dd8a7d839227da2f/packages/react-select/src/components/Control.tsx#L49}
8117
- */
8118
- outline: 2px solid var(--outline-default) !important;
8353
+ .Layer__UI__Table-TableHeader:not(:last-child) .Layer__UI__Table-Column {
8354
+ border-bottom: 1px solid var(--color-base-300);
8119
8355
  }
8120
-
8121
- .Layer__ComboBoxValueContainer {
8122
- padding-inline-start: var(--spacing-xs);
8123
- cursor: text;
8124
- font-size: var(--input-font-size);
8356
+ .Layer__UI__Table-TableHeader > tr {
8357
+ height: inherit;
8358
+ }
8359
+ .Layer__UI__Table-TableHeader--hidden {
8360
+ display: none;
8125
8361
  }
8126
8362
 
8127
- .Layer__ComboBoxIndicatorsContainer {
8128
- padding-inline-end: var(--spacing-3xs);
8363
+ .Layer__UI__Table-Row {
8364
+ height: 3.25rem;
8365
+ background-color: var(--color-base-200);
8129
8366
  }
8130
- .Layer__ComboBoxIndicatorsContainer--readonly {
8131
- visibility: hidden;
8367
+ .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
8368
+ border-bottom: 1px solid var(--color-base-300);
8132
8369
  }
8133
-
8134
- .Layer__ComboBoxClearIndicator {
8135
- display: flex;
8136
- align-items: center;
8137
- justify-content: center;
8138
- --size: 1.25rem;
8139
- block-size: var(--size);
8140
- inline-size: var(--size);
8141
- cursor: pointer;
8370
+ .Layer__UI__Table-Row[data-depth="0"] {
8371
+ background-color: var(--color-base-0);
8142
8372
  }
8143
-
8144
- .Layer__ComboBoxLoadingIndicator {
8145
- display: flex;
8146
- align-items: center;
8147
- justify-content: center;
8148
- --size: 1.25rem;
8149
- block-size: var(--size);
8150
- inline-size: var(--size);
8151
- cursor: default;
8373
+ .Layer__UI__Table-Row[data-depth="1"] {
8374
+ background-color: var(--color-base-50);
8375
+ }
8376
+ .Layer__UI__Table-Row[data-depth="2"] {
8377
+ background-color: var(--color-base-100);
8152
8378
  }
8153
8379
 
8154
- .Layer__ComboBoxDropdownIndicator {
8380
+ .Layer__UI__Table-Column {
8381
+ box-sizing: border-box;
8155
8382
  display: flex;
8156
8383
  align-items: center;
8157
- justify-content: center;
8158
- block-size: var(--size);
8159
- inline-size: var(--size);
8160
- cursor: pointer;
8384
+ height: inherit;
8385
+ padding: var(--spacing-xs) var(--spacing-sm);
8386
+ font-size: var(--text-sm);
8387
+ font-weight: var(--font-weight-normal);
8161
8388
  color: var(--color-base-600);
8162
- --size: 1.25rem;
8163
8389
  }
8164
-
8165
- .Layer__ComboBoxMenu {
8166
- overflow: hidden;
8167
- border-radius: var(--border-radius-xs);
8168
- border: 1px solid var(--border-color);
8169
- margin-block-start: var(--spacing-2xs);
8170
- background-color: var(--color-base-0);
8390
+ .Layer__UI__Table-Column:first-child {
8391
+ padding-left: var(--spacing-md);
8171
8392
  }
8172
-
8173
- .Layer__ComboBoxMenuList {
8174
- overflow-y: auto;
8393
+ .Layer__UI__Table-Column:last-child {
8394
+ padding-right: var(--spacing-md);
8175
8395
  }
8176
- .Layer__ComboBoxMenuList .Layer__ComboBoxOption {
8177
- /*
8178
- * This is intentionally done indirectly to increase specificity.
8179
- *
8180
- * `react-select` explicitly sets 'block'
8181
- */
8182
- display: grid;
8183
- /*
8184
- * This is intentionally done indirectly to increase specificity.
8185
- *
8186
- * `react-select` explicitly sets 'default'
8187
- */
8188
- cursor: pointer;
8396
+ .Layer__UI__Table-Column[data-text-align=left] {
8397
+ text-align: left;
8189
8398
  }
8190
- .Layer__ComboBoxMenuList .Layer__ComboBoxOption--disabled {
8191
- cursor: not-allowed;
8399
+ .Layer__UI__Table-Column[data-text-align=center] {
8400
+ text-align: center;
8192
8401
  }
8193
- .Layer__ComboBoxMenuList .Layer__ComboBoxOption--hidden {
8194
- display: none;
8402
+ .Layer__UI__Table-Column[data-text-align=right] {
8403
+ text-align: right;
8195
8404
  }
8196
8405
 
8197
- .Layer__ComboBoxGroup {
8198
- padding-block: var(--spacing-xs);
8406
+ .Layer__UI__Table-Cell {
8407
+ box-sizing: border-box;
8408
+ display: flex;
8409
+ align-items: center;
8410
+ height: inherit;
8411
+ padding: var(--spacing-xs) var(--spacing-sm);
8412
+ font-size: var(--text-md);
8413
+ font-weight: var(--font-weight-normal);
8414
+ color: var(--color-base-800);
8199
8415
  }
8200
- .Layer__ComboBoxGroup > .Layer__ComboBoxGroupHeading {
8201
- padding-block-start: var(--spacing-3xs);
8202
- padding-block-end: var(--spacing-xs);
8203
- padding-inline: var(--spacing-sm);
8416
+ .Layer__UI__Table-Cell:first-child {
8417
+ padding-left: var(--spacing-md);
8204
8418
  }
8205
- .Layer__ComboBoxGroup > div > .Layer__ComboBoxOption {
8206
- padding-inline: var(--spacing-sm);
8419
+ .Layer__UI__Table-Cell:last-child {
8420
+ padding-right: var(--spacing-md);
8421
+ }.Layer__UI__VirtualizedTable__container {
8422
+ position: relative;
8423
+ overflow: auto;
8207
8424
  }
8208
8425
 
8209
- .Layer__ComboBoxOption {
8210
- padding-block: var(--spacing-xs);
8211
- padding-inline: var(--spacing-3xs);
8212
- border: 2px solid transparent;
8213
- }
8214
- .Layer__ComboBoxOption--focused {
8215
- background-color: var(--color-base-100);
8216
- }
8217
- .Layer__ComboBoxOption .Layer__ComboBoxOptionCheckIcon {
8218
- visibility: hidden;
8426
+ .Layer__UI__VirtualizedTable__state-container {
8427
+ display: flex;
8428
+ align-items: center;
8429
+ justify-content: center;
8219
8430
  }
8220
- .Layer__ComboBoxOption--selected {
8221
- background-color: var(--color-base-100);
8431
+
8432
+ .Layer__UI__VirtualizedTable {
8433
+ display: grid;
8222
8434
  }
8223
- .Layer__ComboBoxOption--selected .Layer__ComboBoxOptionCheckIcon {
8224
- visibility: visible;
8435
+
8436
+ .Layer__UI__VirtualizedTable__header {
8437
+ position: sticky;
8438
+ z-index: 1;
8439
+ top: 0;
8440
+ display: grid;
8225
8441
  }
8226
- .Layer__ComboBoxOption--disabled {
8227
- color: var(--color-base-500);
8442
+
8443
+ .Layer__UI__VirtualizedTable__header-cell {
8444
+ background-color: var(--color-base-0);
8228
8445
  }
8229
8446
 
8230
- .Layer__ComboBoxNoOptionsMessage {
8231
- padding-block: var(--spacing-sm);
8232
- }.Layer__TagDimensionsGroup__TagComboBox {
8447
+ .Layer__UI__VirtualizedTable__row {
8448
+ position: absolute;
8449
+ display: grid;
8233
8450
  width: 100%;
8234
- min-width: 10rem;
8235
- }.Layer__datetime {
8236
- display: inline-flex;
8237
- gap: var(--spacing-md);
8238
- align-items: center;
8239
- }.Layer__MoneyText {
8240
- color: var(--color-base-800);
8241
- }
8242
- .Layer__MoneyText[data-bold] {
8243
- font-weight: var(--font-weight-bold);
8244
- font-variation-settings: "wght" var(--font-weight-bold);
8245
- }
8246
- .Layer__MoneyText[data-size=xs] {
8247
- font-size: var(--text-xs);
8248
- }
8249
- .Layer__MoneyText[data-size=sm] {
8250
- font-size: var(--text-sm);
8251
- }
8252
- .Layer__MoneyText[data-size=md] {
8253
- font-size: var(--text-md);
8254
- }
8255
- .Layer__MoneyText[data-size=lg] {
8256
- font-size: var(--text-lg);
8451
+ }.Layer__AffectedTransactionsTable {
8452
+ container-type: inline-size;
8453
+ --affected-transactions-table-cols:
8454
+ minmax(10rem, 25%)
8455
+ minmax(20rem, 50%)
8456
+ minmax(10rem, 25%);
8257
8457
  }
8258
- .Layer__MoneyText[data-positive]::before {
8259
- content: "$";
8458
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable {
8459
+ table-layout: fixed;
8260
8460
  }
8261
- .Layer__MoneyText[data-negative]::before {
8262
- content: "-$";
8461
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
8462
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
8463
+ display: grid;
8464
+ grid-template-columns: var(--affected-transactions-table-cols);
8263
8465
  }
8264
- .Layer__MoneyText[data-display-plus-sign]::before {
8265
- content: "+$";
8266
- }.Layer__BankTransactionCategoryComboBox__LoadingSuggestionsOption {
8267
- color: var(--color-base-900);
8466
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Date,
8467
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Date {
8468
+ color: var(--color-base-600);
8268
8469
  }
8269
-
8270
- .Layer__BankTransactionCategoryComboBox__CustomGroupHeading {
8271
- /* style the parent .Layer__ComboBoxGroupHeading of this element */
8470
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Amount,
8471
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Amount {
8472
+ justify-content: flex-end;
8272
8473
  }
8273
- :is(.Layer__ComboBoxGroupHeading:has(.Layer__BankTransactionCategoryComboBox__CustomGroupHeading)) {
8274
- border-bottom: 1px solid var(--border-color);
8275
- margin-block-end: var(--spacing-3xs);
8276
- }.Layer__ExpandedBankTransactionRow__Description {
8277
- width: 55%;
8474
+ @container (width <= 840px) {
8475
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
8476
+ .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
8477
+ grid-template-columns: minmax(4rem, 25%) minmax(8rem, 50%) minmax(4rem, 25%); /* amount */
8478
+ }
8479
+ }.Layer__suggested-categorization-rule-updates .Layer__UI__Button {
8480
+ width: 100%;
8278
8481
  }
8279
8482
 
8280
- @container (max-width: 760px) {
8281
- .Layer__ExpandedBankTransactionRow__Description {
8282
- width: 95%;
8283
- }
8483
+ .Layer__suggested-categorization-rule-updates-header {
8484
+ padding-bottom: var(--spacing-sm);
8284
8485
  }.Layer__bookkeeping-status {
8285
8486
  display: flex;
8286
8487
  gap: var(--spacing-3xs);
@@ -8309,66 +8510,210 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
8309
8510
  .Layer__bookkeeping-status[data-status=error] .Layer__bookkeeping-status__icon-wrapper {
8310
8511
  background: var(--color-info-error-bg);
8311
8512
  color: var(--color-info-error-fg);
8312
- }.Layer__bank-transaction-row__category-hstack {
8313
- max-width: 100%;
8314
- }
8315
-
8316
- .Layer__bank-transaction-row__category-open {
8317
- padding-block-start: 0.875rem;
8513
+ }.Layer__file-thumb {
8514
+ box-sizing: border-box;
8515
+ position: relative;
8516
+ display: flex;
8517
+ gap: var(--spacing-2xs);
8518
+ align-items: flex-start;
8519
+ justify-content: space-between;
8520
+ min-height: 38px;
8521
+ container-type: normal;
8318
8522
  }
8319
-
8320
- .Layer__bank-transaction-row__category {
8321
- overflow: hidden;
8523
+ .Layer__file-thumb:not(.Layer__file-thumb--floating) {
8322
8524
  width: 100%;
8525
+ max-width: 680px;
8526
+ }
8527
+ @container (max-width: 300px) {
8528
+ .Layer__file-thumb:not(.Layer__file-thumb--floating) {
8529
+ flex-direction: column;
8530
+ border-bottom: 1px solid var(--color-base-300);
8531
+ }
8532
+ .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) {
8533
+ padding-right: 0;
8534
+ padding-left: 0;
8535
+ margin-left: -6px;
8536
+ }
8537
+ .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn {
8538
+ height: 26px;
8539
+ width: 26px;
8540
+ }
8541
+ .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn svg {
8542
+ height: 14px;
8543
+ width: 14px;
8544
+ }
8323
8545
  }
8324
8546
 
8325
- .Layer__BankTransactionRow__Description {
8326
- width: 40%;
8547
+ .Layer__file-thumb__main {
8548
+ display: grid;
8549
+ grid-template-columns: auto minmax(0, 1fr);
8550
+ gap: var(--spacing-2xs);
8327
8551
  }
8328
8552
 
8329
- @container (max-width: 760px) {
8330
- .Layer__BankTransactionRow__Description {
8331
- width: 100%;
8332
- }
8553
+ .Layer__file-thumb__actions {
8554
+ display: flex;
8555
+ gap: var(--spacing-4xs);
8556
+ padding: var(--spacing-4xs);
8333
8557
  }
8334
- .Layer__BankTransactionRow__CategoryComboBoxMotionContent {
8335
- flex: 1 0 auto;
8336
- max-width: 17.5rem;
8337
- }.Layer__bankTransactionsListItemCategory__List {
8338
- padding-block: var(--spacing-xs);
8339
- padding-inline: var(--spacing-md);
8340
- background-color: var(--color-base-100);
8558
+ .Layer__file-thumb__actions .Layer__icon-btn.Layer__icon-btn--active {
8559
+ background-color: var(--color-base-50);
8341
8560
  }
8342
-
8343
- .Layer__bankTransactionsListItemCategory__Mobile {
8344
- padding-block: var(--spacing-xs);
8345
- padding-inline: var(--spacing-md);
8346
- border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
8347
- border-top: 1px solid var(--color-base-400);
8561
+ .Layer__file-thumb__actions .Layer__icon-btn.Layer__icon-btn--active:hover {
8348
8562
  background-color: var(--color-base-100);
8349
- }.Layer__BusinessFormMobileItem[data-selected] {
8350
- background: var(--color-base-100);
8351
- }.Layer__BusinessFormMobile {
8352
- border-radius: var(--border-radius-2xs);
8353
- border: 1px solid var(--color-base-300);
8354
- }.Layer__actionable-list {
8355
- padding: 0;
8356
- margin: 0;
8357
- list-style: none;
8358
8563
  }
8359
- .Layer__actionable-list li {
8360
- box-sizing: border-box;
8361
- display: flex;
8362
- gap: var(--spacing-2xs);
8363
- align-items: center;
8364
- justify-content: space-between;
8365
- padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
8366
- border-radius: var(--spacing-xs);
8367
- cursor: pointer;
8368
- font-size: 12px;
8564
+ .Layer__file-thumb__actions .Layer__file-thumb__actions__remove {
8565
+ color: var(--color-danger);
8369
8566
  }
8370
- .Layer__actionable-list li .Layer__actionable-list__content {
8371
- display: flex;
8567
+ .Layer__file-thumb__actions.Layer__file-thumb__actions--floating {
8568
+ position: absolute;
8569
+ top: -20px;
8570
+ right: -10px;
8571
+ display: none;
8572
+ border-radius: var(--border-radius-3xs);
8573
+ box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
8574
+ background-color: var(--color-base-0);
8575
+ transform: scale(0.8);
8576
+ }
8577
+
8578
+ .Layer__file-thumb:hover .Layer__file-thumb__actions--floating {
8579
+ display: flex;
8580
+ }
8581
+
8582
+ .Layer__file-thumb__img {
8583
+ height: 100%;
8584
+ height: 38px;
8585
+ width: 100%;
8586
+ width: 38px;
8587
+ border-radius: var(--border-radius-3xs, 4px);
8588
+ box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
8589
+ background: var(--color-base-300);
8590
+ }
8591
+ .Layer__file-thumb__img img {
8592
+ height: 100%;
8593
+ width: 100%;
8594
+ object-fit: cover;
8595
+ }
8596
+
8597
+ .Layer__file-thumb__details {
8598
+ display: flex;
8599
+ flex-direction: column;
8600
+ gap: var(--spacing-4xs);
8601
+ align-items: flex-start;
8602
+ justify-content: flex-start;
8603
+ padding: var(--spacing-4xs) var(--spacing-2xs);
8604
+ font-size: var(--text-sm);
8605
+ }
8606
+
8607
+ .Layer__file-thumb__details__date {
8608
+ color: var(--color-base-600);
8609
+ }
8610
+
8611
+ .Layer__file-thumb__details__uploading {
8612
+ display: flex;
8613
+ gap: var(--spacing-3xs);
8614
+ align-items: center;
8615
+ color: var(--color-info-fg);
8616
+ }
8617
+
8618
+ .Layer__file-thumb__details__error {
8619
+ color: var(--color-danger);
8620
+ }
8621
+
8622
+ .Layer__file-thumb__details__name {
8623
+ overflow-wrap: break-word;
8624
+ }.Layer__TagDimensionsGroup__TagComboBox {
8625
+ width: 100%;
8626
+ min-width: 10rem;
8627
+ }.Layer__ExpandedBankTransactionRow__Description {
8628
+ width: 55%;
8629
+ }
8630
+
8631
+ @container (max-width: 760px) {
8632
+ .Layer__ExpandedBankTransactionRow__Description {
8633
+ width: 95%;
8634
+ }
8635
+ }.Layer__bank-transaction-row__category-hstack {
8636
+ max-width: 100%;
8637
+ }
8638
+
8639
+ .Layer__bank-transaction-row__category-open {
8640
+ padding-block-start: 0.875rem;
8641
+ }
8642
+
8643
+ .Layer__bank-transaction-row__category {
8644
+ overflow: hidden;
8645
+ width: 100%;
8646
+ }
8647
+
8648
+ .Layer__BankTransactionRow__CategoryComboBoxMotionContent {
8649
+ flex: 1 0 auto;
8650
+ max-width: 17.5rem;
8651
+ }.Layer__bankTransactionsListItemCategory__List {
8652
+ padding-block: var(--spacing-xs);
8653
+ padding-inline: var(--spacing-md);
8654
+ }
8655
+
8656
+ .Layer__bankTransactionsListItemCategory__Mobile {
8657
+ padding-block: var(--spacing-xs);
8658
+ padding-inline: var(--spacing-md);
8659
+ border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
8660
+ border-top: 1px solid var(--color-base-400);
8661
+ background-color: var(--color-base-100);
8662
+ }.Layer__Switch {
8663
+ display: flex;
8664
+ gap: 0.5rem;
8665
+ align-items: center;
8666
+ }
8667
+ .Layer__Switch [slot=indicator] {
8668
+ display: flex;
8669
+ align-items: center;
8670
+ height: 1.25rem;
8671
+ width: 2.25rem;
8672
+ border-radius: 1rem;
8673
+ border: 1px solid var(--outline-default);
8674
+ background: var(--color-base-0);
8675
+ transition: all 200ms;
8676
+ }
8677
+ .Layer__Switch [slot=indicator]::before {
8678
+ height: 1rem;
8679
+ width: 1rem;
8680
+ border-radius: 0.5rem;
8681
+ background: var(--color-base-1000);
8682
+ content: "";
8683
+ transition: all 200ms;
8684
+ }
8685
+ .Layer__Switch[data-selected] [slot=indicator] {
8686
+ border-color: var(--color-base-1000);
8687
+ background: var(--color-base-1000);
8688
+ }
8689
+ .Layer__Switch[data-selected] [slot=indicator]::before {
8690
+ background: var(--color-base-0);
8691
+ transform: translateX(1.125rem);
8692
+ }.Layer__BankTransactionsMobileBulkActionsHeader__checkbox-container {
8693
+ gap: 20px;
8694
+ }.Layer__BusinessFormMobile {
8695
+ border-radius: var(--border-radius-2xs);
8696
+ border: 1px solid var(--color-base-300);
8697
+ }.Layer__BusinessFormMobileItem[data-selected] {
8698
+ background: var(--color-base-100);
8699
+ }.Layer__actionable-list {
8700
+ padding: 0;
8701
+ margin: 0;
8702
+ list-style: none;
8703
+ }
8704
+ .Layer__actionable-list li {
8705
+ box-sizing: border-box;
8706
+ display: flex;
8707
+ gap: var(--spacing-2xs);
8708
+ align-items: center;
8709
+ justify-content: space-between;
8710
+ padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
8711
+ border-radius: var(--spacing-xs);
8712
+ cursor: pointer;
8713
+ font-size: 12px;
8714
+ }
8715
+ .Layer__actionable-list li .Layer__actionable-list__content {
8716
+ display: flex;
8372
8717
  flex-direction: column;
8373
8718
  gap: var(--spacing-2xs);
8374
8719
  align-items: flex-start;
@@ -8399,68 +8744,14 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
8399
8744
  border: 1px solid var(--color-info-success);
8400
8745
  background-color: var(--color-info-success-bg);
8401
8746
  color: var(--color-info-success);
8402
- }.Layer__MinimalSearchField {
8403
- display: grid;
8404
- grid-template-areas: "input clear-button";
8405
- grid-template-columns: minmax(0, 1fr) auto;
8406
- align-items: center;
8407
- border: none;
8408
- }
8409
- .Layer__MinimalSearchField > [slot=input] {
8410
- grid-area: input;
8411
- padding-inline: var(--spacing-3xs);
8412
- border: none;
8413
- outline: none;
8414
- /*
8415
- * The background on mobile is grey by default.
8416
- */
8417
- background: none;
8418
- font-family: var(--font-family);
8419
- }
8420
- .Layer__MinimalSearchField > [slot=input]::-webkit-search-cancel-button, .Layer__MinimalSearchField > [slot=input]::-webkit-search-decoration {
8421
- appearance: none;
8422
- }
8423
- .Layer__MinimalSearchField[data-empty] > [slot=input] {
8424
- grid-column: 1/-1;
8425
- }
8426
- .Layer__MinimalSearchField > [slot=clear-button] {
8427
- grid-area: clear-button;
8428
- }
8429
- .Layer__MinimalSearchField[data-empty] > [slot=clear-button] {
8430
- display: none;
8431
- }
8432
- .Layer__MinimalSearchField[data-disabled] {
8433
- cursor: not-allowed;
8434
- }
8435
- .Layer__MinimalSearchField[data-disabled] > [slot=input] {
8436
- cursor: not-allowed;
8437
- }.Layer__SearchField.Layer__InputGroup {
8438
- display: grid;
8439
- grid-template-areas: "icon search";
8440
- grid-template-columns: auto minmax(0, 1fr);
8441
- gap: 0;
8442
- padding-inline-start: 0;
8443
- padding-inline-end: var(--spacing-3xs);
8444
- }
8445
- .Layer__SearchField.Layer__InputGroup > [slot=icon] {
8446
- grid-area: icon;
8447
- block-size: 2rem;
8448
- inline-size: 2rem;
8449
- }
8450
- .Layer__SearchField.Layer__InputGroup > [slot=search] {
8451
- grid-area: search;
8452
- }
8453
- .Layer__SearchField.Layer__InputGroup .Layer__SearchField__Icon[data-disabled] {
8454
- cursor: not-allowed;
8455
- color: var(--color-base-500);
8456
- }.Layer__MatchFormMobileItem__Checkbox {
8457
- padding-inline-end: var(--spacing-md);
8458
8747
  }.Layer__MatchFormMobile {
8459
8748
  border-radius: var(--border-radius-2xs);
8460
8749
  border: 1px solid var(--color-base-300);
8461
8750
  }
8462
8751
  .Layer__MatchFormMobile [data-selected] {
8463
8752
  background: var(--color-base-100);
8753
+ }.Layer__MatchFormMobileItem__Checkbox {
8754
+ padding-inline-end: var(--spacing-md);
8464
8755
  }.Layer__BankTransactionsMobileSplitForm__AmountInput {
8465
8756
  inline-size: 6rem;
8466
8757
  }.Layer__bankTransactionsMobileListItem__categorizedValue {
@@ -8470,38 +8761,22 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
8470
8761
  .Layer__bankTransactionsMobileListItem__headingContentLeft {
8471
8762
  overflow: hidden;
8472
8763
  min-width: 0;
8473
- }.Layer__Switch {
8474
- display: flex;
8475
- gap: 0.5rem;
8476
- align-items: center;
8764
+ }.Layer__BaseDetailView {
8765
+ overflow: hidden;
8477
8766
  }
8478
- .Layer__Switch [slot=indicator] {
8479
- display: flex;
8767
+
8768
+ .Layer__BaseDetailView__Header {
8480
8769
  align-items: center;
8481
- height: 1.25rem;
8482
- width: 2.25rem;
8483
- border-radius: 1rem;
8484
- border: 1px solid var(--outline-default);
8485
- background: var(--color-base-0);
8486
- transition: all 200ms;
8487
- }
8488
- .Layer__Switch [slot=indicator]::before {
8489
- height: 1rem;
8490
- width: 1rem;
8491
- border-radius: 0.5rem;
8492
- background: var(--color-base-1000);
8493
- content: "";
8494
- transition: all 200ms;
8495
- }
8496
- .Layer__Switch[data-selected] [slot=indicator] {
8497
- border-color: var(--color-base-1000);
8498
- background: var(--color-base-1000);
8770
+ height: 4.75rem;
8771
+ padding-left: 1.25rem;
8772
+ border-bottom: 1px solid var(--border-color);
8773
+ }.Layer__DataTable__EmptyState__Row {
8774
+ height: fit-content;
8499
8775
  }
8500
- .Layer__Switch[data-selected] [slot=indicator]::before {
8501
- background: var(--color-base-0);
8502
- transform: translateX(1.125rem);
8503
- }.Layer__BankTransactionsMobileBulkActionsHeader__checkbox-container {
8504
- gap: 20px;
8776
+
8777
+ .Layer__DataTable__EmptyState__Cell {
8778
+ grid-column: 1/-1;
8779
+ justify-content: center;
8505
8780
  }.Layer__pagination-container {
8506
8781
  justify-content: end;
8507
8782
  padding: var(--spacing-md);
@@ -8527,612 +8802,330 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
8527
8802
  border: 1px solid var(--color-base-300);
8528
8803
  background: var(--color-base-50);
8529
8804
  list-style-type: none;
8530
- }.Layer__BankTransactionsActions {
8531
- display: grid;
8532
- grid-template-areas: "toggle . download-upload" "search search search";
8533
- grid-template-columns: auto minmax(0, 1fr) auto;
8534
- gap: var(--spacing-xs);
8535
- align-items: center;
8536
- }
8537
- @container (min-width: 840px) {
8538
- .Layer__BankTransactionsActions {
8539
- grid-template-areas: "toggle . search download-upload";
8540
- grid-template-columns: auto minmax(0, 2fr) 15rem auto;
8541
- }
8542
- }
8543
- .Layer__BankTransactionsActions > [slot=toggle] {
8544
- grid-area: toggle;
8545
- }
8546
- .Layer__BankTransactionsActions > [slot=search] {
8547
- grid-area: search;
8548
- }
8549
- .Layer__BankTransactionsActions > [slot=download-upload] {
8550
- grid-area: download-upload;
8551
- }.Layer__InvisibleDownload {
8552
- display: none;
8553
- }.Layer__UI__DropdownMenu__Popover[data-entering] {
8554
- animation: popover-slide 120ms;
8555
- }
8556
- .Layer__UI__DropdownMenu__Popover[data-exiting] {
8557
- animation: popover-slide reverse 120ms;
8558
- }
8559
-
8560
- @keyframes popover-slide {
8561
- from {
8562
- transform: translateY(-20px);
8563
- opacity: 0;
8564
- }
8565
- to {
8566
- transform: translateY(0);
8567
- opacity: 1;
8568
- }
8569
- }
8570
- .Layer__UI__DropdownMenu__Dialog {
8571
- display: grid;
8572
- gap: var(--spacing-xs);
8573
- overflow: hidden;
8574
- padding: var(--spacing-sm);
8575
- border-radius: var(--border-radius-xs);
8576
- border: 1px solid var(--border-color);
8577
- background: var(--color-base-0);
8578
- }
8579
- .Layer__UI__DropdownMenu__Dialog[data-variant=compact] {
8580
- padding: 0;
8581
- }
8582
-
8583
- .Layer__UI__DropdownMenu__MenuItem {
8584
- display: flex;
8585
- gap: var(--spacing-xs);
8586
- align-items: center;
8587
- padding: var(--spacing-xs);
8588
- border-radius: var(--border-radius-3xs);
8589
- border: 1px solid var(--border-color);
8590
- cursor: pointer;
8591
- transition: background-color 0.1s ease-in-out;
8592
- }
8593
- .Layer__UI__DropdownMenu__MenuItem:hover, .Layer__UI__DropdownMenu__MenuItem:focus-visible {
8594
- background-color: var(--color-base-50);
8595
- }
8596
- .Layer__UI__DropdownMenu__MenuItem[data-variant=compact] {
8597
- gap: 0;
8598
- border-radius: 0;
8805
+ }.Layer__PaginatedDataTable__Pagination {
8806
+ border-top: 1px solid var(--border-color);
8807
+ }.Layer__CategorizationRulesTable {
8599
8808
  border: none;
8600
8809
  }
8601
- .Layer__UI__DropdownMenu__MenuItem[data-variant=compact]:not(:last-child) {
8602
- border-bottom: 1px solid var(--border-color);
8603
- }
8604
8810
 
8605
- .Layer__UI__DropdownMenu__Menu {
8606
- display: grid;
8607
- gap: var(--spacing-3xs);
8608
- }
8609
- .Layer__UI__DropdownMenu__Menu[data-variant=compact] {
8610
- gap: 0;
8611
- }.Layer__UI__Input,
8612
- .Layer__UI__DateInput {
8613
- min-inline-size: 0;
8614
- padding-inline: var(--spacing-xs);
8615
- outline: none;
8616
- background-color: transparent;
8617
- font-size: var(--input-font-size);
8618
- line-height: 140%;
8619
- font-family: var(--font-family);
8620
- vertical-align: middle;
8621
- }
8622
- .Layer__UI__Input[data-inset],
8623
- .Layer__UI__DateInput[data-inset] {
8624
- padding-inline: 0;
8625
- border: none;
8811
+ .Layer__UI__Table__CategorizationRulesTable {
8812
+ table-layout: fixed;
8813
+ width: 100%;
8626
8814
  }
8627
- .Layer__UI__Input[data-placement=first],
8628
- .Layer__UI__DateInput[data-placement=first] {
8629
- border-start-start-radius: inherit;
8630
- border-end-start-radius: inherit;
8631
- }.Layer__FormCheckboxField {
8815
+ .Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row,
8816
+ .Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr {
8632
8817
  display: grid;
8633
- grid-template-areas: "label" "checkbox";
8634
- justify-content: center;
8635
- }
8636
- .Layer__FormCheckboxField > [slot=checkbox] {
8637
- grid-area: checkbox;
8638
- justify-self: center;
8639
- margin-block: var(--spacing-2xs);
8640
- }
8641
- .Layer__FormCheckboxField > [slot=label] {
8642
- grid-area: label;
8643
- padding-block-end: var(--spacing-3xs);
8644
- }
8645
- .Layer__FormCheckboxField--inline {
8646
- grid-template-areas: "checkbox label";
8647
- gap: var(--spacing-3xs);
8648
- align-items: center;
8649
- }
8650
- .Layer__FormCheckboxField--inline > [slot=label] {
8651
- padding-block-end: 0;
8652
- }.Layer__UI__TextArea {
8653
- box-sizing: content-box;
8654
- min-block-size: 5lh;
8655
- padding-block: var(--spacing-xs);
8656
- padding-inline-start: var(--spacing-xs);
8657
- padding-inline-end: var(--spacing-3xs);
8658
- border-radius: var(--input-border-radius);
8659
- border: 1px solid var(--color-base-300);
8660
- background-color: var(--color-base-0);
8661
- font-size: var(--input-font-size);
8662
- line-height: 140%;
8663
- font-family: var(--font-family);
8664
- }
8665
- .Layer__UI__TextArea::-webkit-scrollbar-track {
8666
- margin-block: 2px;
8667
- }
8668
- .Layer__UI__TextArea[data-resize=both] {
8669
- resize: both;
8670
- }
8671
- .Layer__UI__TextArea[data-resize=horizontal] {
8672
- resize: horizontal;
8673
- }
8674
- .Layer__UI__TextArea[data-resize=vertical] {
8675
- resize: vertical;
8676
- }
8677
- .Layer__UI__TextArea[data-resize=none] {
8678
- resize: none;
8679
- }
8680
- .Layer__UI__TextArea[data-focused] {
8681
- border-color: var(--color-base-800);
8682
- outline: 2px solid var(--outline-default);
8818
+ grid-template-columns: minmax(8rem, 45%) minmax(8rem, 45%) auto;
8683
8819
  }
8684
- .Layer__UI__TextArea[data-disabled] {
8685
- cursor: not-allowed;
8686
- }.Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip {
8820
+ .Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Cell__CategorizationRulesTable--Delete {
8821
+ justify-content: end;
8822
+ }.Layer__card {
8687
8823
  display: flex;
8688
- flex: 1 1;
8689
- }
8690
- .Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip > .Layer__custom-account-form__input {
8691
- flex: 1 1;
8692
- }.Layer__csv-upload {
8693
- position: relative;
8694
- height: 6rem;
8695
- padding: var(--spacing-xs);
8696
- border-radius: var(--spacing-3xs);
8697
- border: 1px dashed var(--color-base-300);
8698
- background: var(--color-base-100);
8699
- transition: border-color 0.5s, background-color 0.5s;
8700
- }
8701
- .Layer__csv-upload--drag-active {
8702
- background: var(--color-base-200);
8703
- border-color: var(--color-base-500);
8704
- }
8705
-
8706
- .Layer__csv-upload__browse-link {
8707
- all: unset;
8708
- cursor: pointer;
8709
- text-decoration: underline;
8710
- }
8711
- .Layer__csv-upload__browse-link:focus, .Layer__csv-upload__browse-link:active, .Layer__csv-upload__browse-link:focus-visible {
8712
- border-radius: 2px;
8713
- box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08), 0 0 0 1px var(--color-base-700);
8714
- outline: none;
8715
- }
8716
-
8717
- .Layer__csv-upload__error-message {
8718
- position: absolute;
8719
- bottom: var(--spacing-sm);
8720
- left: var(--spacing-sm);
8721
- }
8722
- .Layer__csv-upload__error-message .Layer__data-state__icon {
8824
+ flex-direction: column;
8825
+ border-radius: var(--spacing-sm);
8826
+ box-shadow: 0 4px 12px 0 var(--base-transparent-8), 0 2px 4px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
8723
8827
  background: var(--color-base-0);
8724
- }
8725
-
8726
- .Layer__csv-upload__file-row {
8727
- height: 2rem;
8728
- padding: var(--spacing-xs) var(--spacing-sm);
8729
- border-radius: var(--border-radius-3xs);
8730
- border: 1px solid var(--color-base-300);
8731
- background: var(--color-base-100);
8732
- }
8733
-
8734
- .Layer__csv-upload__file-row--drop-target {
8735
- height: 6rem;
8736
- }
8737
-
8738
- .Layer__csv-upload__copy-template-headers-button-group {
8739
- box-sizing: border-box;
8740
- padding: var(--spacing-3xs);
8741
- border-radius: var(--border-radius-3xs);
8742
- background-color: var(--color-base-200);
8743
- }
8744
- .Layer__csv-upload__copy-template-headers-button-group .Layer__btn {
8745
- flex: 1 1 auto;
8746
- }
8747
-
8748
- .Layer__csv-upload__validate-csv-table__container {
8828
+ }.Layer__hover-menu {
8749
8829
  position: relative;
8750
- overflow: auto;
8751
- border-radius: var(--border-radius-3xs);
8752
- border: 1px solid var(--border-color);
8753
- outline-offset: 1px;
8754
- }
8755
-
8756
- .Layer__csv-upload__validate-csv-table__header {
8757
- position: sticky;
8758
- z-index: 1;
8759
- top: 0;
8760
- background-color: var(--bg-subtle);
8761
- }
8762
-
8763
- .Layer__csv-upload__validate-csv-table__header-row {
8764
8830
  display: flex;
8765
8831
  width: 100%;
8766
8832
  }
8767
-
8768
- .Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell {
8769
- box-sizing: border-box;
8770
- display: flex;
8771
- flex: 1 1 0;
8772
- padding: 0;
8773
- border-bottom: 1px solid var(--border-color);
8774
- border-left: 1px solid var(--border-color);
8775
- }
8776
- .Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell--row {
8777
- flex: 0 0 68px;
8778
- border-left: none;
8779
- }
8780
-
8781
- .Layer__csv-upload__validate-csv-table__header-cell-content {
8782
- padding: var(--spacing-sm) var(--spacing-md);
8783
- }
8784
- .Layer__csv-upload__validate-csv-table__header-cell-content--row {
8785
- margin-left: auto;
8833
+ .Layer__hover-menu.Layer__hover-menu--open .Layer__hover-menu__list-wrapper {
8834
+ top: 100%;
8835
+ right: 0;
8836
+ opacity: 1;
8837
+ touch-action: auto;
8838
+ pointer-events: auto;
8786
8839
  }
8787
-
8788
- .Layer__table-row.Layer__csv-upload__validate-csv-table__row {
8789
- position: absolute;
8840
+ .Layer__hover-menu .Layer__hover-menu__children {
8790
8841
  display: flex;
8842
+ align-items: center;
8843
+ justify-content: center;
8791
8844
  width: 100%;
8845
+ cursor: pointer;
8792
8846
  }
8793
- .Layer__table-row.Layer__csv-upload__validate-csv-table__row--error {
8794
- background-color: var(--color-info-error-bg);
8795
- }
8796
- .Layer__table-row.Layer__csv-upload__validate-csv-table__row--bottom-border {
8797
- border-bottom: 1px solid var(--border-color);
8847
+ .Layer__hover-menu .Layer__hover-menu__list-wrapper {
8848
+ position: absolute;
8849
+ z-index: 99;
8850
+ top: 80%;
8851
+ right: -8px;
8852
+ display: flex;
8853
+ justify-content: stretch;
8854
+ min-width: 160px;
8855
+ padding-top: var(--spacing-xs);
8856
+ touch-action: none;
8857
+ pointer-events: none;
8858
+ opacity: 0;
8859
+ transition: all 0.15s ease-out;
8798
8860
  }
8799
-
8800
- .Layer__table-cell.Layer__csv-upload__validate-csv-table__cell {
8861
+ .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list {
8801
8862
  box-sizing: border-box;
8802
- flex: 1 1 0%;
8803
- min-width: 0;
8804
- border-left: 1px solid var(--border-color);
8805
- }
8806
- .Layer__table-cell.Layer__csv-upload__validate-csv-table__cell--row {
8807
- flex: 0 0 68px;
8808
- border-left: none;
8809
- }
8810
-
8811
- .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content {
8812
- display: block;
8813
- align-content: center;
8814
- overflow: hidden;
8815
- width: 100%;
8816
- white-space: nowrap;
8817
- text-overflow: ellipsis;
8818
- }
8819
- .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content--error {
8820
- color: var(--color-info-error-fg);
8821
- }
8822
- .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content--row {
8823
- text-align: end;
8824
- }.Layer__upload-transactions {
8825
- container-type: inline-size;
8826
- }
8827
- .Layer__upload-transactions .Layer__upload-transactions__select-account-name-field > .Layer__input-tooltip {
8828
- flex: auto;
8829
- }
8830
- .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input .Layer__select__control {
8831
- max-width: 24rem;
8832
- }
8833
- .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input--error .Layer__select__control {
8834
- box-shadow: 0 0 0 1px var(--color-base-300), 0 0 0 2px var(--color-danger);
8835
- }
8836
- .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input--error .Layer__select__placeholder {
8837
- color: var(--color-danger);
8838
- }
8839
- .Layer__upload-transactions .Layer__upload-transactions__create-account-form {
8840
- padding: var(--spacing-md);
8841
- border-radius: var(--border-radius-3xs);
8842
- background: var(--color-base-100);
8843
- }
8844
- .Layer__upload-transactions .Layer__upload-transactions__parse-csv-error-message {
8845
- max-width: 29rem;
8846
- }
8847
- .Layer__upload-transactions .Layer__upload-transactions__template-section {
8848
- padding: var(--spacing-md);
8849
- border-radius: var(--border-radius-3xs);
8850
- border: 1px solid var(--color-base-300);
8851
- }
8852
- .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row {
8853
8863
  display: flex;
8854
- justify-content: space-between;
8855
- }
8856
- @container (max-width: 36rem) {
8857
- .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row {
8858
- flex-direction: column;
8859
- }
8860
- .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row > .Layer__upload-transactions__template-section__button-row-item {
8861
- width: 100%;
8862
- }
8863
- }
8864
- @container (max-width: 30rem) {
8865
- .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row {
8866
- flex-direction: column;
8867
- }
8868
- .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row > .Layer__upload-transactions__confirmation-step__button-row-item {
8869
- width: 100%;
8870
- }
8871
- }
8872
- .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__data-state .Layer__data-state__description {
8873
- margin-bottom: 0;
8874
- }
8875
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--date,
8876
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--date {
8877
- min-width: 7.5rem;
8878
- }
8879
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount,
8880
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount {
8881
- min-width: 7.5rem;
8882
- }
8883
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content,
8884
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content {
8885
- margin-left: auto;
8886
- }
8887
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__cell-content,
8888
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__cell-content {
8889
- text-align: right;
8890
- }
8891
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--description,
8892
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--description {
8893
- flex: 3 1 0;
8894
- min-width: 12rem;
8895
- }
8896
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--external_id,
8897
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--external_id {
8898
- min-width: 7.5rem;
8899
- }
8900
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--reference_number,
8901
- .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--reference_number {
8902
- min-width: 7.5rem;
8903
- }.Layer__BulkActionsModule__SelectedItemsContainer {
8904
- height: 2.25rem;
8905
- border-radius: var(--border-radius-2xs);
8906
- border: 1px solid var(--color-base-300);
8907
- background-color: var(--color-base-100);
8908
- }.Layer__MonthCalendar__Header {
8909
- border-bottom: 1px solid var(--border-color);
8910
- }
8911
-
8912
- .Layer__MonthCalendar__MonthGrid {
8913
- display: grid;
8914
- grid-template-columns: repeat(3, 4.5rem);
8864
+ flex: 1;
8865
+ flex-direction: column;
8915
8866
  gap: var(--spacing-3xs);
8916
- padding: var(--spacing-xs);
8867
+ padding: var(--spacing-3xs);
8868
+ border-radius: var(--spacing-xs);
8869
+ box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.06), 0 4px 12px 0 var(--base-transparent-1, rgba(16, 24, 40, 0.01)), 0 2px 4px 0 rgba(25, 25, 25, 0.06);
8870
+ margin: 0;
8871
+ background: var(--color-base-0);
8872
+ list-style: none;
8917
8873
  }
8918
- .Layer__MonthCalendar__MonthGrid--mobile {
8919
- grid-template-columns: repeat(3, 6.5rem);
8874
+ .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item {
8875
+ display: flex;
8876
+ align-items: center;
8877
+ padding: var(--spacing-3xs);
8878
+ padding-left: var(--spacing-xs);
8879
+ border-radius: var(--spacing-2xs);
8880
+ color: var(--color-base-500);
8881
+ transition: all 0.2s ease-in-out;
8920
8882
  }
8921
-
8922
- .Layer__MonthCalendar__MonthGridItem {
8923
- display: grid;
8924
- justify-self: center;
8925
- block-size: 2rem;
8926
- inline-size: 4.5rem;
8927
- border-radius: var(--border-radius-2xs);
8883
+ .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item .Layer__hover-menu__list-item-button {
8884
+ width: 100%;
8885
+ border: none;
8886
+ outline: none;
8887
+ background: none;
8888
+ cursor: pointer;
8928
8889
  font-size: var(--text-sm);
8929
- text-align: center;
8930
- color: var(--button-fg-ghost);
8931
- place-items: center;
8932
- transition: background-color 0.2s ease, color 0.2s ease;
8933
- }
8934
- .Layer__MonthCalendar__MonthGridItem[data-focus-visible] {
8935
- outline: 1px auto -webkit-focus-ring-color;
8936
- }
8937
- .Layer__MonthCalendar__MonthGridItem[data-disabled] {
8938
- cursor: not-allowed;
8939
- color: var(--button-fg-disabled);
8940
- }
8941
- .Layer__MonthCalendar__MonthGridItem[data-selected] {
8942
- background-color: var(--color-base-900);
8943
- color: var(--color-base-0);
8890
+ line-height: normal;
8891
+ font-family: inherit;
8892
+ font-weight: 500;
8893
+ text-align: start;
8894
+ color: inherit;
8895
+ font-feature-settings: inherit;
8896
+ letter-spacing: -0.06px;
8944
8897
  }
8945
- .Layer__MonthCalendar__MonthGridItem[data-hovered]:not([data-disabled], [data-selected]) {
8946
- background-color: var(--button-bg-ghost-hovered);
8898
+ .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item:hover {
8899
+ background: var(--color-base-50);
8900
+ font-weight: 540;
8901
+ color: var(--color-base-800);
8902
+ }.Layer__BasicLinkedAccountContainer {
8903
+ display: grid;
8904
+ grid-template-columns: minmax(0, 1fr) auto;
8905
+ padding-block: var(--spacing-xs);
8906
+ padding-inline: var(--spacing-xs) var(--spacing-md);
8907
+ border-radius: var(--border-radius-xs);
8908
+ border: 1px solid var(--outline-subtle);
8947
8909
  }
8948
- .Layer__MonthCalendar__MonthGridItem--mobile {
8949
- block-size: 2.75rem;
8950
- inline-size: 6.5rem;
8951
- font-size: var(--text-md);
8952
- }.Layer__MonthPicker__Popover {
8953
- inline-size: auto;
8910
+ .Layer__BasicLinkedAccountContainer[data-selected] {
8911
+ background-color: var(--bg-subtle);
8954
8912
  }
8955
8913
 
8956
- .Layer__MonthPicker__InputGroup {
8957
- inline-size: 12rem;
8958
- }.Layer__UI__Table-Table {
8959
- border-collapse: collapse;
8914
+ .Layer__BasicLinkedAccountLogo {
8915
+ display: flex;
8916
+ align-items: center;
8917
+ justify-content: center;
8918
+ height: 28px;
8919
+ width: 52px;
8920
+ padding: var(--spacing-3xs) 0;
8921
+ border-radius: var(--border-radius-3xs);
8922
+ background: var(--color-base-0);
8923
+ color: var(--color-base-200);
8924
+ }.Layer__Menu {
8925
+ display: flex;
8926
+ flex-direction: column;
8927
+ gap: var(--spacing-3xs);
8928
+ overflow: auto;
8929
+ max-block-size: inherit;
8930
+ min-inline-size: 9rem;
8931
+ padding: var(--spacing-3xs);
8932
+ border-radius: var(--spacing-xs);
8933
+ border: 1px solid var(--border-color);
8934
+ outline: none;
8935
+ background: white;
8960
8936
  }
8961
8937
 
8962
- .Layer__UI__Table-TableHeader {
8963
- height: 3.25rem;
8964
- }
8965
- .Layer__UI__Table-TableHeader:not(:last-child) .Layer__UI__Table-Column {
8966
- border-bottom: 1px solid var(--color-base-300);
8967
- }
8968
- .Layer__UI__Table-TableHeader > tr {
8969
- height: inherit;
8938
+ .Layer__MenuItem {
8939
+ display: flex;
8940
+ align-items: center;
8941
+ padding-block: var(--spacing-3xs);
8942
+ padding-inline: var(--spacing-xs);
8943
+ border-radius: var(--spacing-2xs);
8944
+ outline: none;
8945
+ cursor: pointer;
8970
8946
  }
8971
- .Layer__UI__Table-TableHeader--hidden {
8972
- display: none;
8947
+ .Layer__MenuItem[data-focused] {
8948
+ background: var(--color-base-50);
8949
+ color: var(--color-base-800);
8973
8950
  }
8974
-
8975
- .Layer__UI__Table-Row {
8976
- height: 3.25rem;
8977
- background-color: var(--color-base-200);
8951
+ .Layer__MenuItem[data-focus-visible] {
8952
+ outline: 1px solid var(--color-base-100);
8953
+ outline-offset: 1px;
8954
+ }.Layer__Pill {
8955
+ display: inline-flex;
8956
+ flex-direction: row;
8957
+ align-items: center;
8958
+ padding: var(--spacing-2xs) var(--spacing-sm);
8959
+ border-radius: var(--badge-border-radius);
8960
+ border: none;
8961
+ outline: none;
8962
+ background-color: var(--badge-bg-color);
8963
+ cursor: pointer;
8964
+ user-select: none;
8965
+ font-size: var(--text-sm);
8966
+ color: var(--badge-color);
8967
+ white-space: nowrap;
8978
8968
  }
8979
- .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
8980
- border-bottom: 1px solid var(--color-base-300);
8969
+ .Layer__Pill svg {
8970
+ margin-right: 0.25rem;
8981
8971
  }
8982
- .Layer__UI__Table-Row[data-depth="0"] {
8983
- background-color: var(--color-base-0);
8972
+ .Layer__Pill[data-status=error] {
8973
+ background-color: var(--color-info-error-bg);
8974
+ color: var(--color-info-error-fg);
8984
8975
  }
8985
- .Layer__UI__Table-Row[data-depth="1"] {
8986
- background-color: var(--color-base-50);
8976
+ .Layer__Pill[data-status=error][data-focus-visible] {
8977
+ outline: 1px solid var(--color-info-error-bg);
8978
+ outline-offset: 1px;
8979
+ }.Layer__UI__Calendar {
8980
+ width: min-content;
8987
8981
  }
8988
- .Layer__UI__Table-Row[data-depth="2"] {
8989
- background-color: var(--color-base-100);
8982
+
8983
+ .Layer__UI__CalendarGrid {
8984
+ border-collapse: collapse;
8990
8985
  }
8991
8986
 
8992
- .Layer__UI__Table-Column {
8993
- box-sizing: border-box;
8994
- display: flex;
8995
- align-items: center;
8996
- height: inherit;
8997
- padding: var(--spacing-xs) var(--spacing-sm);
8987
+ .Layer__UI__CalendarCell,
8988
+ .Layer__UI__CalendarHeaderCell {
8989
+ height: 2rem;
8990
+ width: 2rem;
8991
+ border-radius: var(--border-radius-3xs);
8998
8992
  font-size: var(--text-sm);
8999
- font-weight: var(--font-weight-normal);
9000
- color: var(--color-base-600);
8993
+ line-height: 2rem;
8994
+ text-align: center;
9001
8995
  }
9002
- .Layer__UI__Table-Column:first-child {
9003
- padding-left: var(--spacing-md);
8996
+ .Layer__UI__CalendarCell[data-size=md],
8997
+ .Layer__UI__CalendarHeaderCell[data-size=md] {
8998
+ height: 2.75rem;
8999
+ width: 2.75rem;
9000
+ font-size: var(--text-md);
9001
+ line-height: 2.75rem;
9004
9002
  }
9005
- .Layer__UI__Table-Column:last-child {
9006
- padding-right: var(--spacing-md);
9003
+
9004
+ .Layer__UI__CalendarCell {
9005
+ transition: background-color 0.2s ease, color 0.2s ease;
9007
9006
  }
9008
- .Layer__UI__Table-Column[data-text-align=left] {
9009
- text-align: left;
9007
+ .Layer__UI__CalendarCell[data-hovered] {
9008
+ background-color: var(--color-base-400);
9010
9009
  }
9011
- .Layer__UI__Table-Column[data-text-align=center] {
9012
- text-align: center;
9010
+ .Layer__UI__CalendarCell[data-selected] {
9011
+ background-color: var(--color-base-900);
9012
+ color: var(--color-base-0);
9013
9013
  }
9014
- .Layer__UI__Table-Column[data-text-align=right] {
9015
- text-align: right;
9014
+ .Layer__UI__CalendarCell[data-disabled] {
9015
+ color: var(--color-base-400);
9016
9016
  }
9017
-
9018
- .Layer__UI__Table-Cell {
9019
- box-sizing: border-box;
9017
+ .Layer__UI__CalendarCell[data-outside-month] {
9018
+ color: var(--color-base-0);
9019
+ transition: none;
9020
+ }.Layer__DateCalendar__Header {
9021
+ border-bottom: 1px solid var(--border-color);
9022
+ }.Layer__caobfb {
9023
+ position: relative;
9020
9024
  display: flex;
9021
- align-items: center;
9022
- height: inherit;
9023
- padding: var(--spacing-xs) var(--spacing-sm);
9024
- font-size: var(--text-md);
9025
- font-weight: var(--font-weight-normal);
9026
- color: var(--color-base-800);
9027
- }
9028
- .Layer__UI__Table-Cell:first-child {
9029
- padding-left: var(--spacing-md);
9025
+ gap: var(--spacing-sm);
9026
+ max-height: 280px;
9027
+ padding-block: var(--spacing-sm);
9028
+ padding-inline: var(--spacing-md);
9029
+ border-radius: var(--border-radius-xs);
9030
+ border: 1px solid var(--color-base-100);
9031
+ container-type: inline-size;
9032
+ transition: all 0.25s ease-in-out;
9033
+ transition-delay: 0.8s;
9030
9034
  }
9031
- .Layer__UI__Table-Cell:last-child {
9032
- padding-right: var(--spacing-md);
9033
- }.Layer__UI__VirtualizedTable__container {
9034
- position: relative;
9035
- overflow: auto;
9035
+ .Layer__caobfb[data-confirmed=true] {
9036
+ background-color: var(--color-base-50);
9036
9037
  }
9037
9038
 
9038
- .Layer__UI__VirtualizedTable__state-container {
9039
+ .Layer__caobfb__icon-col {
9039
9040
  display: flex;
9040
- align-items: center;
9041
+ align-items: flex-start;
9041
9042
  justify-content: center;
9042
9043
  }
9043
9044
 
9044
- .Layer__UI__VirtualizedTable {
9045
- display: grid;
9046
- }
9047
-
9048
- .Layer__UI__VirtualizedTable__header {
9049
- position: sticky;
9050
- z-index: 1;
9051
- top: 0;
9052
- display: grid;
9045
+ .Layer__caobfb__details-col {
9046
+ display: flex;
9047
+ flex: 1;
9048
+ flex-direction: column;
9049
+ gap: var(--spacing-2xs);
9050
+ color: var(--color-base-700);
9053
9051
  }
9054
9052
 
9055
- .Layer__UI__VirtualizedTable__header-cell {
9056
- background-color: var(--color-base-0);
9053
+ .Layer__caobfb__details-col__details {
9054
+ padding-bottom: var(--spacing-sm);
9057
9055
  }
9058
9056
 
9059
- .Layer__UI__VirtualizedTable__row {
9060
- position: absolute;
9061
- display: grid;
9057
+ .Layer__caobfb__details-col__name {
9058
+ display: flex;
9059
+ gap: var(--spacing-3xs);
9062
9060
  width: 100%;
9063
- }.Layer__AffectedTransactionsTable {
9064
- container-type: inline-size;
9065
- --affected-transactions-table-cols:
9066
- minmax(10rem, 25%)
9067
- minmax(20rem, 50%)
9068
- minmax(10rem, 25%);
9069
- }
9070
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable {
9071
- table-layout: fixed;
9072
- }
9073
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
9074
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
9075
- display: grid;
9076
- grid-template-columns: var(--affected-transactions-table-cols);
9077
- }
9078
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Date,
9079
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Date {
9080
- color: var(--color-base-600);
9081
- }
9082
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Amount,
9083
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Amount {
9084
- justify-content: flex-end;
9061
+ max-width: 500px;
9085
9062
  }
9086
- @container (width <= 840px) {
9087
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
9088
- .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
9089
- grid-template-columns: minmax(4rem, 25%) minmax(8rem, 50%) minmax(4rem, 25%); /* amount */
9090
- }
9091
- }.Layer__suggested-categorization-rule-updates .Layer__UI__Button {
9092
- width: 100%;
9063
+
9064
+ .Layer__caobfb__details-col__name__institution-name {
9065
+ overflow: hidden;
9066
+ max-width: 50%;
9067
+ color: var(--color-base-500);
9068
+ text-overflow: ellipsis;
9069
+ white-space: nowrap;
9093
9070
  }
9094
9071
 
9095
- .Layer__suggested-categorization-rule-updates-header {
9096
- padding-bottom: var(--spacing-sm);
9097
- }.Layer__BaseDetailView {
9072
+ .Layer__caobfb__details-col__name__account-name {
9098
9073
  overflow: hidden;
9074
+ max-width: 50%;
9075
+ color: var(--color-base-1000);
9076
+ text-overflow: ellipsis;
9077
+ white-space: nowrap;
9099
9078
  }
9100
9079
 
9101
- .Layer__BaseDetailView__Header {
9080
+ .Layer__caobfb__details-col__inputs {
9081
+ display: flex;
9082
+ gap: var(--spacing-sm);
9102
9083
  align-items: center;
9103
- height: 4.75rem;
9104
- padding-left: 1.25rem;
9105
- border-bottom: 1px solid var(--border-color);
9106
- }.Layer__DataTable__EmptyState__Row {
9107
- height: fit-content;
9084
+ padding: var(--spacing-sm) 0;
9085
+ border-top: 1px solid var(--color-base-200);
9108
9086
  }
9109
-
9110
- .Layer__DataTable__EmptyState__Cell {
9111
- grid-column: 1/-1;
9112
- justify-content: center;
9113
- }.Layer__PaginatedDataTable__Pagination {
9114
- border-top: 1px solid var(--border-color);
9115
- }.Layer__CategorizationRulesTable {
9116
- border: none;
9087
+ .Layer__caobfb__details-col__inputs .Layer__input-group {
9088
+ width: 100%;
9117
9089
  }
9118
-
9119
- .Layer__UI__Table__CategorizationRulesTable {
9120
- table-layout: fixed;
9090
+ .Layer__caobfb__details-col__inputs .Layer__input-group .Layer__input {
9121
9091
  width: 100%;
9122
9092
  }
9123
- .Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row,
9124
- .Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr {
9125
- display: grid;
9126
- grid-template-columns: minmax(8rem, 45%) minmax(8rem, 45%) auto;
9093
+ @container (max-width: 440px) {
9094
+ .Layer__caobfb__details-col__inputs {
9095
+ flex-direction: column;
9096
+ }
9097
+ }
9098
+
9099
+ .Layer__caobfb__confirm-col {
9100
+ display: flex;
9101
+ align-items: flex-start;
9102
+ justify-content: flex-end;
9127
9103
  }
9128
- .Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Cell__CategorizationRulesTable--Delete {
9129
- justify-content: end;
9130
- }.Layer__card {
9104
+
9105
+ .Layer__caobfb__success-banner {
9106
+ position: absolute;
9107
+ z-index: -1;
9108
+ inset: 0;
9131
9109
  display: flex;
9132
9110
  flex-direction: column;
9133
- border-radius: var(--spacing-sm);
9134
- box-shadow: 0 4px 12px 0 var(--base-transparent-8), 0 2px 4px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
9135
- background: var(--color-base-0);
9111
+ align-items: center;
9112
+ justify-content: center;
9113
+ padding: var(--spacing-sm);
9114
+ background-color: var(--color-base-50);
9115
+ color: var(--color-info-success-fg);
9116
+ opacity: 0;
9117
+ transition: opacity 0.12s ease-in-out;
9118
+ }
9119
+
9120
+ .Layer__caobfb[data-saved] {
9121
+ overflow: hidden;
9122
+ max-height: 0;
9123
+ padding: 0;
9124
+ border-width: 0;
9125
+ }
9126
+ .Layer__caobfb[data-saved] .Layer__caobfb__success-banner {
9127
+ opacity: 1;
9128
+ z-index: 101;
9136
9129
  }.Layer__DateGroupByComboBox__Container {
9137
9130
  inline-size: 12rem;
9138
9131
  max-inline-size: 12rem;
@@ -9439,6 +9432,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9439
9432
  flex: 1;
9440
9433
  min-width: 20rem;
9441
9434
  max-width: 32rem;
9435
+ }.Layer__TasksEmptyContainer {
9436
+ display: grid;
9437
+ place-items: center;
9438
+ min-block-size: 20rem;
9442
9439
  }.Layer__mobile-panel {
9443
9440
  position: fixed;
9444
9441
  z-index: -1;
@@ -9573,10 +9570,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9573
9570
  .Layer__tabs-option .Layer__tasks__badge .Layer__tasks__badge__label-short {
9574
9571
  display: flex;
9575
9572
  }
9576
- }.Layer__TasksEmptyContainer {
9577
- display: grid;
9578
- place-items: center;
9579
- min-block-size: 20rem;
9580
9573
  }body .calendly-overlay .calendly-popup {
9581
9574
  max-height: 1024px;
9582
9575
  }
@@ -9737,6 +9730,43 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9737
9730
  flex-direction: column;
9738
9731
  gap: var(--spacing-md);
9739
9732
  container-type: inline-size;
9733
+ }.Layer__platform-onboarding__book-onboarding-call .Layer__platform-onboarding__error {
9734
+ height: 6rem;
9735
+ }
9736
+ .Layer__platform-onboarding__book-onboarding-call.is-tablet .Layer__calendly-inline-widget--success, .Layer__platform-onboarding__book-onboarding-call.is-desktop .Layer__calendly-inline-widget--success {
9737
+ height: 36rem;
9738
+ }
9739
+ .Layer__platform-onboarding__book-onboarding-call.is-tablet .Layer__calendly-inline-widget, .Layer__platform-onboarding__book-onboarding-call.is-desktop .Layer__calendly-inline-widget {
9740
+ height: 56rem;
9741
+ }.Layer__business-form {
9742
+ width: 100%;
9743
+ max-width: 620px;
9744
+ }
9745
+
9746
+ .Layer__business-form__name-fields {
9747
+ display: flex;
9748
+ gap: var(--spacing-sm);
9749
+ }
9750
+ @container (width < 400px) {
9751
+ .Layer__business-form__name-fields {
9752
+ flex-direction: column;
9753
+ }
9754
+ }
9755
+
9756
+ .Layer__business-form__state-tin-fields {
9757
+ display: flex;
9758
+ gap: var(--spacing-sm);
9759
+ }
9760
+ .Layer__business-form__state-tin-fields .Layer__business-form__state {
9761
+ max-width: 200px;
9762
+ }
9763
+ @container (width < 400px) {
9764
+ .Layer__business-form__state-tin-fields {
9765
+ flex-direction: column;
9766
+ }
9767
+ .Layer__business-form__state-tin-fields .Layer__business-form__state {
9768
+ max-width: 100%;
9769
+ }
9740
9770
  }.Layer__progress-steps {
9741
9771
  display: flex;
9742
9772
  align-items: center;
@@ -9844,43 +9874,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9844
9874
  .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--label {
9845
9875
  display: none;
9846
9876
  }
9847
- }.Layer__business-form {
9848
- width: 100%;
9849
- max-width: 620px;
9850
- }
9851
-
9852
- .Layer__business-form__name-fields {
9853
- display: flex;
9854
- gap: var(--spacing-sm);
9855
- }
9856
- @container (width < 400px) {
9857
- .Layer__business-form__name-fields {
9858
- flex-direction: column;
9859
- }
9860
- }
9861
-
9862
- .Layer__business-form__state-tin-fields {
9863
- display: flex;
9864
- gap: var(--spacing-sm);
9865
- }
9866
- .Layer__business-form__state-tin-fields .Layer__business-form__state {
9867
- max-width: 200px;
9868
- }
9869
- @container (width < 400px) {
9870
- .Layer__business-form__state-tin-fields {
9871
- flex-direction: column;
9872
- }
9873
- .Layer__business-form__state-tin-fields .Layer__business-form__state {
9874
- max-width: 100%;
9875
- }
9876
- }.Layer__platform-onboarding__book-onboarding-call .Layer__platform-onboarding__error {
9877
- height: 6rem;
9878
- }
9879
- .Layer__platform-onboarding__book-onboarding-call.is-tablet .Layer__calendly-inline-widget--success, .Layer__platform-onboarding__book-onboarding-call.is-desktop .Layer__calendly-inline-widget--success {
9880
- height: 36rem;
9881
- }
9882
- .Layer__platform-onboarding__book-onboarding-call.is-tablet .Layer__calendly-inline-widget, .Layer__platform-onboarding__book-onboarding-call.is-desktop .Layer__calendly-inline-widget {
9883
- height: 56rem;
9884
9877
  }.Layer__platform-onboarding {
9885
9878
  container-type: inline-size;
9886
9879
  }
@@ -10037,145 +10030,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10037
10030
  align-items: flex-start;
10038
10031
  padding: var(--spacing-sm);
10039
10032
  }
10040
- .Layer__bar-banner--bookkeeping .Layer__icon-box {
10041
- display: none;
10042
- }
10043
- }.Layer__UI__Link {
10044
- position: relative;
10045
- display: inline;
10046
- outline: none;
10047
- cursor: pointer;
10048
- font-size: var(--text-md);
10049
- font-family: var(--font-family);
10050
- font-weight: var(--font-weight-normal);
10051
- text-decoration: none;
10052
- /* Sizes */
10053
- }
10054
- .Layer__UI__Link[data-ellipsis], .Layer__UI__Link[data-with-tooltip] {
10055
- display: inline-block;
10056
- overflow: hidden;
10057
- white-space: nowrap;
10058
- text-overflow: ellipsis;
10059
- max-inline-size: 100%;
10060
- }
10061
- .Layer__UI__Link[data-disabled] {
10062
- cursor: not-allowed;
10063
- color: var(--color-base-500);
10064
- pointer-events: none;
10065
- }
10066
- .Layer__UI__Link[data-size=xs] {
10067
- font-size: var(--text-xs);
10068
- }
10069
- .Layer__UI__Link[data-size=sm] {
10070
- font-size: var(--text-sm);
10071
- }
10072
- .Layer__UI__Link[data-size=md] {
10073
- font-size: var(--text-md);
10074
- }
10075
- .Layer__UI__Link[data-size=lg] {
10076
- font-size: var(--text-lg);
10077
- }.Layer__AddToCalendar__CalendarIcon {
10078
- height: 1rem;
10079
- width: 1rem;
10080
- }.Layer__call-booking {
10081
- padding: var(--spacing-lg);
10082
- }
10083
- .Layer__call-booking .Layer__call-booking-details {
10084
- width: 100%;
10085
- }
10086
- .Layer__call-booking .Layer__call-booking-actions {
10087
- position: relative;
10088
- width: 100%;
10089
- }
10090
- .Layer__call-booking .Layer__call-booking-state {
10091
- text-align: center;
10092
- }
10093
-
10094
- @media (width <= 480px) {
10095
- .Layer__call-booking {
10096
- padding: var(--spacing-md);
10097
- }
10098
- }.Layer__project-view .Layer__category-menu {
10099
- max-width: 300px;
10100
- }
10101
- .Layer__project-view .Layer__select__menu {
10102
- z-index: 2;
10103
- }.Layer__due-status {
10104
- display: flex;
10105
- flex-direction: column;
10106
- white-space: nowrap;
10107
- }
10108
- .Layer__due-status--sm {
10109
- flex-direction: row;
10110
- gap: var(--spacing-3xs);
10111
- align-items: center;
10112
- }
10113
- .Layer__due-status[data-status=overdue] .Layer__due-status__title {
10114
- color: var(--color-info-error);
10115
- }
10116
- .Layer__due-status[data-status=today] .Layer__due-status__title {
10117
- color: var(--color-info-warning);
10118
- }
10119
- .Layer__due-status[data-status=paid] .Layer__due-status__title {
10120
- color: var(--color-info-success);
10121
- }
10122
- .Layer__due-status[data-status=soon] .Layer__due-status__title {
10123
- color: var(--color-base-800);
10124
- }
10125
- .Layer__due-status[data-status=before] .Layer__due-status__title {
10126
- color: var(--color-base-800);
10127
- }.Layer__ExpandButton {
10128
- height: 16px;
10129
- min-width: 16px;
10130
- transition: transform 0.1s ease-in-out;
10131
- }
10132
- .Layer__ExpandButton--collapsed {
10133
- transform: rotate(-90deg);
10134
- }
10135
- .Layer__ExpandButton--expanded {
10136
- transform: rotate(0deg);
10137
- }.Layer__UI__Table__UnifiedReport {
10138
- table-layout: fixed;
10139
- width: 100%;
10140
- }
10141
- .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Row,
10142
- .Layer__UI__Table__UnifiedReport .Layer__UI__Table-TableHeader > tr {
10143
- display: grid;
10144
- grid-template-columns: minmax(16rem, 80%) minmax(8rem, 20%);
10145
- }
10146
- .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column__UnifiedReport--Value,
10147
- .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell__UnifiedReport--Value {
10148
- justify-content: flex-end;
10149
- }.Layer__UnifiedReport__Header {
10150
- height: 4.75rem;
10151
- border-bottom: 1px solid var(--border-color);
10152
- }
10153
- @container (width <= 768px) {
10154
- .Layer__UnifiedReport__Header {
10155
- display: grid;
10156
- grid-template-columns: 100%;
10157
- height: fit-content;
10158
- padding-block: var(--spacing-md);
10159
- }
10160
- .Layer__UnifiedReport__Header > :last-child {
10161
- padding-block-start: var(--spacing-md);
10162
- }
10163
- .Layer__UnifiedReport__Header > :not(:last-child) {
10164
- padding-block-end: var(--spacing-md);
10165
- border-bottom: 1px solid var(--border-color);
10166
- }
10167
- }
10168
-
10169
- .Layer__UnifiedReport__Header__SecondaryActions {
10170
- gap: var(--spacing-xs);
10171
- }
10172
- @media (width <= 500px) {
10173
- .Layer__UnifiedReport__Header__SecondaryActions {
10174
- gap: var(--spacing-3xs);
10033
+ .Layer__bar-banner--bookkeeping .Layer__icon-box {
10034
+ display: none;
10175
10035
  }
10176
- }.Layer__UnifiedReport {
10177
- overflow: hidden;
10178
- width: clamp(24rem, 100%, 1406px);
10179
10036
  }.Layer__DataTableHeader__Filters {
10180
10037
  height: 4.25rem;
10181
10038
  border-bottom: 1px solid var(--border-color);
@@ -10209,6 +10066,35 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10209
10066
 
10210
10067
  .Layer__InvoiceTable__StatusFilter {
10211
10068
  width: 11rem;
10069
+ }.Layer__PaymentMethodComboBox {
10070
+ display: grid;
10071
+ grid-template-areas: "label" "input";
10072
+ gap: var(--spacing-3xs);
10073
+ }
10074
+ .Layer__PaymentMethodComboBox--inline {
10075
+ grid-template-areas: "label input";
10076
+ gap: 0;
10077
+ align-items: center;
10078
+ }.Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__InvoiceNo,
10079
+ .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__CompletedAt,
10080
+ .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__PaymentMethod {
10081
+ grid-template-columns: 8rem auto;
10082
+ min-width: 16rem;
10083
+ }
10084
+ .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__Amount {
10085
+ grid-template-columns: auto 8rem;
10086
+ }
10087
+ .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__FormError {
10088
+ height: 4rem;
10089
+ padding-inline: var(--spacing-md);
10090
+ border-bottom: 1px solid var(--border-color);
10091
+ }
10092
+ .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__InvoiceNo {
10093
+ display: grid;
10094
+ }
10095
+ .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Section {
10096
+ padding: var(--spacing-md);
10097
+ border-bottom: 1px solid var(--border-color);
10212
10098
  }.Layer__CustomerSelector {
10213
10099
  display: grid;
10214
10100
  grid-template-areas: "label" "input";
@@ -10295,15 +10181,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10295
10181
  height: 4rem;
10296
10182
  padding-left: 2.25rem;
10297
10183
  border-bottom: 1px solid var(--border-color);
10298
- }.Layer__PaymentMethodComboBox {
10299
- display: grid;
10300
- grid-template-areas: "label" "input";
10301
- gap: var(--spacing-3xs);
10302
- }
10303
- .Layer__PaymentMethodComboBox--inline {
10304
- grid-template-areas: "label input";
10305
- gap: 0;
10306
- align-items: center;
10307
10184
  }.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__InvoiceNo,
10308
10185
  .Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__PaidAt,
10309
10186
  .Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__PaymentMethod,
@@ -10335,26 +10212,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10335
10212
  }
10336
10213
  .Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Submit {
10337
10214
  display: grid;
10338
- }.Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__InvoiceNo,
10339
- .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__CompletedAt,
10340
- .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__PaymentMethod {
10341
- grid-template-columns: 8rem auto;
10342
- min-width: 16rem;
10343
- }
10344
- .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__Amount {
10345
- grid-template-columns: auto 8rem;
10346
- }
10347
- .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__FormError {
10348
- height: 4rem;
10349
- padding-inline: var(--spacing-md);
10350
- border-bottom: 1px solid var(--border-color);
10351
- }
10352
- .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Field__InvoiceNo {
10353
- display: grid;
10354
- }
10355
- .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Section {
10356
- padding: var(--spacing-md);
10357
- border-bottom: 1px solid var(--border-color);
10358
10215
  }.Layer__InvoiceDetail {
10359
10216
  width: clamp(62rem, 100%, 1406px);
10360
10217
  }
@@ -10400,6 +10257,249 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10400
10257
  }
10401
10258
  .Layer__InvoiceSummaryStats__Meter__fill {
10402
10259
  fill: var(--color-info-warning-bg);
10260
+ }.Layer__ExpandButton {
10261
+ height: 16px;
10262
+ min-width: 16px;
10263
+ transition: transform 0.1s ease-in-out;
10264
+ }
10265
+ .Layer__ExpandButton--collapsed {
10266
+ transform: rotate(-90deg);
10267
+ }
10268
+ .Layer__ExpandButton--expanded {
10269
+ transform: rotate(0deg);
10270
+ }.Layer__UI__Table__UnifiedReport {
10271
+ table-layout: fixed;
10272
+ width: 100%;
10273
+ }
10274
+ .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Row,
10275
+ .Layer__UI__Table__UnifiedReport .Layer__UI__Table-TableHeader > tr {
10276
+ display: grid;
10277
+ grid-template-columns: minmax(16rem, 80%) minmax(8rem, 20%);
10278
+ }
10279
+ .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column__UnifiedReport--Value,
10280
+ .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell__UnifiedReport--Value {
10281
+ justify-content: flex-end;
10282
+ }.Layer__UnifiedReport__Header {
10283
+ height: 4.75rem;
10284
+ border-bottom: 1px solid var(--border-color);
10285
+ }
10286
+ @container (width <= 768px) {
10287
+ .Layer__UnifiedReport__Header {
10288
+ display: grid;
10289
+ grid-template-columns: 100%;
10290
+ height: fit-content;
10291
+ padding-block: var(--spacing-md);
10292
+ }
10293
+ .Layer__UnifiedReport__Header > :last-child {
10294
+ padding-block-start: var(--spacing-md);
10295
+ }
10296
+ .Layer__UnifiedReport__Header > :not(:last-child) {
10297
+ padding-block-end: var(--spacing-md);
10298
+ border-bottom: 1px solid var(--border-color);
10299
+ }
10300
+ }
10301
+
10302
+ .Layer__UnifiedReport__Header__SecondaryActions {
10303
+ gap: var(--spacing-xs);
10304
+ }
10305
+ @media (width <= 500px) {
10306
+ .Layer__UnifiedReport__Header__SecondaryActions {
10307
+ gap: var(--spacing-3xs);
10308
+ }
10309
+ }.Layer__UnifiedReport {
10310
+ overflow: hidden;
10311
+ width: clamp(24rem, 100%, 1406px);
10312
+ }.Layer__due-status {
10313
+ display: flex;
10314
+ flex-direction: column;
10315
+ white-space: nowrap;
10316
+ }
10317
+ .Layer__due-status--sm {
10318
+ flex-direction: row;
10319
+ gap: var(--spacing-3xs);
10320
+ align-items: center;
10321
+ }
10322
+ .Layer__due-status[data-status=overdue] .Layer__due-status__title {
10323
+ color: var(--color-info-error);
10324
+ }
10325
+ .Layer__due-status[data-status=today] .Layer__due-status__title {
10326
+ color: var(--color-info-warning);
10327
+ }
10328
+ .Layer__due-status[data-status=paid] .Layer__due-status__title {
10329
+ color: var(--color-info-success);
10330
+ }
10331
+ .Layer__due-status[data-status=soon] .Layer__due-status__title {
10332
+ color: var(--color-base-800);
10333
+ }
10334
+ .Layer__due-status[data-status=before] .Layer__due-status__title {
10335
+ color: var(--color-base-800);
10336
+ }.Layer__UI__Link {
10337
+ position: relative;
10338
+ display: inline;
10339
+ outline: none;
10340
+ cursor: pointer;
10341
+ font-size: var(--text-md);
10342
+ font-family: var(--font-family);
10343
+ font-weight: var(--font-weight-normal);
10344
+ text-decoration: none;
10345
+ /* Sizes */
10346
+ }
10347
+ .Layer__UI__Link[data-ellipsis], .Layer__UI__Link[data-with-tooltip] {
10348
+ display: inline-block;
10349
+ overflow: hidden;
10350
+ white-space: nowrap;
10351
+ text-overflow: ellipsis;
10352
+ max-inline-size: 100%;
10353
+ }
10354
+ .Layer__UI__Link[data-disabled] {
10355
+ cursor: not-allowed;
10356
+ color: var(--color-base-500);
10357
+ pointer-events: none;
10358
+ }
10359
+ .Layer__UI__Link[data-size=xs] {
10360
+ font-size: var(--text-xs);
10361
+ }
10362
+ .Layer__UI__Link[data-size=sm] {
10363
+ font-size: var(--text-sm);
10364
+ }
10365
+ .Layer__UI__Link[data-size=md] {
10366
+ font-size: var(--text-md);
10367
+ }
10368
+ .Layer__UI__Link[data-size=lg] {
10369
+ font-size: var(--text-lg);
10370
+ }.Layer__AddToCalendar__CalendarIcon {
10371
+ height: 1rem;
10372
+ width: 1rem;
10373
+ }.Layer__call-booking {
10374
+ padding: var(--spacing-lg);
10375
+ }
10376
+ .Layer__call-booking .Layer__call-booking-details {
10377
+ width: 100%;
10378
+ }
10379
+ .Layer__call-booking .Layer__call-booking-actions {
10380
+ position: relative;
10381
+ width: 100%;
10382
+ }
10383
+ .Layer__call-booking .Layer__call-booking-state {
10384
+ text-align: center;
10385
+ }
10386
+
10387
+ @media (width <= 480px) {
10388
+ .Layer__call-booking {
10389
+ padding: var(--spacing-md);
10390
+ }
10391
+ }.Layer__TripPurposeComboBox {
10392
+ display: grid;
10393
+ grid-template-areas: "label" "input";
10394
+ gap: var(--spacing-3xs);
10395
+ }
10396
+ .Layer__TripPurposeComboBox--inline {
10397
+ grid-template-areas: "label input";
10398
+ gap: 0;
10399
+ align-items: center;
10400
+ }.Layer__VehicleSelector {
10401
+ display: grid;
10402
+ grid-template-areas: "label" "input";
10403
+ gap: var(--spacing-3xs);
10404
+ }
10405
+ .Layer__VehicleSelector--inline {
10406
+ grid-template-areas: "label input";
10407
+ gap: 0;
10408
+ align-items: center;
10409
+ }.Layer__TripForm {
10410
+ display: flex;
10411
+ flex-direction: column;
10412
+ gap: var(--spacing-sm);
10413
+ max-width: 44rem;
10414
+ padding-inline: var(--spacing-lg);
10415
+ }
10416
+ .Layer__TripForm .Layer__TripForm__FormError {
10417
+ padding-block: var(--spacing-xs);
10418
+ }
10419
+ .Layer__TripForm .Layer__TripForm__Field__Vehicle,
10420
+ .Layer__TripForm .Layer__TripForm__Field__TripDate,
10421
+ .Layer__TripForm .Layer__TripForm__Field__Distance,
10422
+ .Layer__TripForm .Layer__TripForm__Field__Purpose,
10423
+ .Layer__TripForm .Layer__TripForm__Field__StartAddress,
10424
+ .Layer__TripForm .Layer__TripForm__Field__EndAddress,
10425
+ .Layer__TripForm .Layer__TripForm__Field__Description {
10426
+ grid-template-columns: 10rem auto;
10427
+ width: 100%;
10428
+ }
10429
+ .Layer__TripForm .Layer__TripForm__Submit {
10430
+ align-items: flex-end;
10431
+ padding-block-start: 1rem;
10432
+ }.Layer__TripsTable {
10433
+ overflow: hidden;
10434
+ width: clamp(61rem, 100%, 1406px);
10435
+ }
10436
+
10437
+ .Layer__TripsTable__VehicleSelector {
10438
+ width: 12rem;
10439
+ }
10440
+
10441
+ .Layer__TripsTable__SearchField {
10442
+ width: 15rem;
10443
+ }
10444
+
10445
+ .Layer__UI__Table__TripsTable {
10446
+ table-layout: fixed;
10447
+ width: 100%;
10448
+ }
10449
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-Row,
10450
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-TableHeader > tr {
10451
+ display: grid;
10452
+ grid-template-columns: minmax(8rem, 10%) minmax(8rem, 15%) minmax(6rem, 10%) minmax(8rem, 10%) minmax(12rem, 25%) minmax(12rem, 30%) 3.75rem;
10453
+ }
10454
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Distance,
10455
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Distance {
10456
+ justify-content: flex-end;
10457
+ }.Layer__VehicleForm {
10458
+ display: flex;
10459
+ flex-direction: column;
10460
+ gap: var(--spacing-md);
10461
+ width: 100%;
10462
+ }
10463
+ .Layer__VehicleForm .Layer__VehicleForm__FormError {
10464
+ padding: var(--spacing-sm);
10465
+ }
10466
+ .Layer__VehicleForm .Layer__VehicleForm__Submit {
10467
+ align-items: flex-end;
10468
+ padding-block-start: 1rem;
10469
+ }
10470
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Make,
10471
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Model,
10472
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Year,
10473
+ .Layer__VehicleForm .Layer__VehicleForm__Field__LicensePlate,
10474
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Vin,
10475
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Description {
10476
+ grid-template-columns: 10rem auto;
10477
+ width: 100%;
10478
+ }.Layer__VehicleManagementGrid {
10479
+ display: grid;
10480
+ grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
10481
+ gap: var(--spacing-md);
10482
+ padding: var(--spacing-md);
10483
+ }
10484
+ @media (width <= 768px) {
10485
+ .Layer__VehicleManagementGrid {
10486
+ grid-template-columns: 1fr;
10487
+ }
10488
+ }.Layer__VehicleCard {
10489
+ transition: box-shadow 0.2s ease;
10490
+ }
10491
+ .Layer__VehicleCard:hover {
10492
+ box-shadow: 0 8px 16px 0 var(--base-transparent-8), 0 4px 8px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
10493
+ }
10494
+ .Layer__VehicleCard .Layer__VehicleCard__icon {
10495
+ min-height: 20px;
10496
+ min-width: 20px;
10497
+ color: var(--color-base-400);
10498
+ }.Layer__project-view .Layer__category-menu {
10499
+ max-width: 300px;
10500
+ }
10501
+ .Layer__project-view .Layer__select__menu {
10502
+ z-index: 2;
10403
10503
  }.Layer__toasts-container {
10404
10504
  position: fixed;
10405
10505
  z-index: 1000;