@layerfi/components 0.1.128-alpha.1 → 0.1.128

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
@@ -216,6 +216,12 @@
216
216
  .Layer__Stack[data-direction=column] {
217
217
  flex-direction: column;
218
218
  }
219
+ .Layer__Stack[data-direction=row-reverse] {
220
+ flex-direction: row-reverse;
221
+ }
222
+ .Layer__Stack[data-direction=column-reverse] {
223
+ flex-direction: column-reverse;
224
+ }
219
225
  .Layer__Stack[data-align=start] {
220
226
  align-items: start;
221
227
  }
@@ -497,6 +503,15 @@
497
503
  border-radius: var(--border-radius-2xs);
498
504
  border: 1px solid var(--border-color);
499
505
  background-color: var(--color-base-0);
506
+ }
507
+ .Layer__MobileListSkeleton[data-variant=compact] {
508
+ gap: 0;
509
+ }
510
+ .Layer__MobileListSkeleton[data-variant=compact] .Layer__MobileListSkeleton__Item {
511
+ padding-inline: 0;
512
+ border-radius: 0;
513
+ border: none;
514
+ background-color: transparent;
500
515
  }.Layer__InvisibleDownload {
501
516
  display: none;
502
517
  }.Layer__UI__Toggle {
@@ -541,7 +556,7 @@
541
556
  background: var(--color-base-1000);
542
557
  }
543
558
 
544
- .Layer__UI__tooltip-content--text {
559
+ .Layer__UI__tooltip-content > .Layer__UI__tooltip-content--text {
545
560
  display: block;
546
561
  font-size: var(--text-sm);
547
562
  text-align: justify;
@@ -3104,10 +3119,35 @@
3104
3119
  .Layer__MobileListItem[data-selection-mode=multiple], .Layer__MobileListItem[data-selection-mode=single] {
3105
3120
  grid-template-areas: "selection content";
3106
3121
  grid-template-columns: auto 1fr;
3122
+ }
3123
+ [data-variant=compact] .Layer__MobileListItem {
3124
+ padding-inline: 0;
3125
+ border-radius: 0;
3126
+ border: none;
3127
+ }.Layer__MobileListSection {
3128
+ display: flex;
3129
+ flex-direction: column;
3130
+ }
3131
+ .Layer__MobileListSection__Heading {
3132
+ padding-block-end: var(--spacing-xs);
3133
+ padding-inline: var(--spacing-3xs);
3134
+ outline: none;
3135
+ background-color: transparent;
3136
+ cursor: default;
3137
+ }
3138
+ .Layer__MobileListSection:not(:last-child) {
3139
+ padding-block-end: var(--spacing-xs);
3140
+ }
3141
+ .Layer__MobileListSection:not(:first-child) {
3142
+ padding-block-start: var(--spacing-md);
3143
+ border-block-start: 1px solid var(--border-color);
3107
3144
  }.Layer__MobileList {
3108
3145
  display: flex;
3109
3146
  flex-direction: column;
3110
3147
  gap: var(--spacing-sm);
3148
+ }
3149
+ .Layer__MobileList[data-variant=compact] {
3150
+ gap: 0;
3111
3151
  }.Layer__pagination-container {
3112
3152
  justify-content: end;
3113
3153
  padding: var(--spacing-md);
@@ -3162,11 +3202,7 @@
3162
3202
  cursor: pointer;
3163
3203
  }.Layer__PaginatedDataTable__Pagination {
3164
3204
  border-top: 1px solid var(--border-color);
3165
- }.Layer__CategorizationRulesTable {
3166
- border: none;
3167
- }
3168
-
3169
- .Layer__UI__Table__CategorizationRulesTable {
3205
+ }.Layer__UI__Table__CategorizationRulesTable {
3170
3206
  table-layout: fixed;
3171
3207
  width: 100%;
3172
3208
  }
@@ -3700,12 +3736,15 @@
3700
3736
  min-height: 0;
3701
3737
  }.Layer__GlobalDateRangeSelection {
3702
3738
  display: grid;
3703
- grid-template-columns: 9rem repeat(2, minmax(10rem, 12rem));
3739
+ grid-template-columns: repeat(3, minmax(10rem, 1fr));
3704
3740
  gap: var(--spacing-xs);
3705
3741
  }
3706
- .Layer__GlobalDateRangeSelection--mobile {
3707
- grid-template-columns: 8rem repeat(2, minmax(6.75rem, 10rem));
3708
- gap: var(--spacing-3xs);
3742
+ .Layer__GlobalDateRangeSelection--compact {
3743
+ grid-template-columns: repeat(2, minmax(6.75rem, 1fr));
3744
+ width: 100%;
3745
+ }
3746
+ .Layer__GlobalDateRangeSelection--compact > :first-child {
3747
+ grid-column: 1/-1;
3709
3748
  }
3710
3749
  .Layer__GlobalDateRangeSelection .Layer__tooltip-trigger {
3711
3750
  padding-top: 0;
@@ -3739,6 +3778,25 @@
3739
3778
 
3740
3779
  :is(.Layer__input-tooltip:has(.Layer__CompareTagsMultiSelect)) {
3741
3780
  flex: 1;
3781
+ }.Layer__ProfitAndLossCompareOptions__Container[data-compact=true] .Layer__DateGroupByComboBox__Container,
3782
+ .Layer__ProfitAndLossCompareOptions__Container[data-compact=true] .Layer__CompareTagsMultiSelect__Container {
3783
+ inline-size: 100%;
3784
+ max-inline-size: none;
3785
+ }.Layer__MobileSelectionDrawerList__Check {
3786
+ visibility: hidden;
3787
+ height: 1rem;
3788
+ min-width: 1rem;
3789
+ }
3790
+ .Layer__MobileSelectionDrawerList__Check[data-selected=true] {
3791
+ visibility: visible;
3792
+ }.Layer__MobileSelectionDrawerWithTrigger .Layer__SearchField {
3793
+ inline-size: 100%;
3794
+ }
3795
+ .Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem {
3796
+ transition: background-color 120ms ease;
3797
+ }
3798
+ .Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem[data-hovered] {
3799
+ background-color: var(--bg-element-focus);
3742
3800
  }.Layer__panel {
3743
3801
  display: flex;
3744
3802
  flex: 1;
@@ -3786,7 +3844,6 @@
3786
3844
  height: 100%;
3787
3845
  width: 480px;
3788
3846
  min-width: 480px;
3789
- background: var(--color-base-0);
3790
3847
  opacity: 0.2;
3791
3848
  transition: opacity 180ms ease-in-out;
3792
3849
  }
@@ -3859,14 +3916,15 @@
3859
3916
  min-height: 40px;
3860
3917
  }.Layer__GlobalDateSelection {
3861
3918
  display: grid;
3862
- grid-template-columns: repeat(2, minmax(10rem, 12rem));
3919
+ grid-template-columns: repeat(2, minmax(10rem, 1fr));
3863
3920
  gap: var(--spacing-xs);
3864
- min-width: 18.5rem;
3865
3921
  }
3866
- .Layer__GlobalDateSelection--mobile {
3867
- grid-template-columns: repeat(2, minmax(6.75rem, 10rem));
3868
- gap: var(--spacing-3xs);
3869
- min-width: 16rem;
3922
+ .Layer__GlobalDateSelection--compact {
3923
+ grid-template-columns: minmax(6.75rem, 1fr);
3924
+ width: 100%;
3925
+ }
3926
+ .Layer__GlobalDateSelection--compact > :first-child {
3927
+ grid-column: 1/-1;
3870
3928
  }
3871
3929
  .Layer__GlobalDateSelection .Layer__tooltip-trigger {
3872
3930
  padding-top: 0;
@@ -4664,44 +4722,48 @@
4664
4722
  border-radius: var(--border-radius-sm);
4665
4723
  border: 1px solid var(--banner-border-color);
4666
4724
  background-color: var(--banner-bg);
4725
+ --banner-fg: var(--color-base-900);
4726
+ --banner-fg-muted: var(--color-base-800);
4727
+ --banner-icon-border: transparent;
4667
4728
  }
4668
4729
  .Layer__UI__Banner[data-variant=default] {
4669
- --banner-bg: var(--color-base-100);
4670
- --banner-border-color: var(--color-base-800);
4671
- --banner-fg: var(--color-base-800);
4672
- --banner-fg-muted: var(--color-base-600);
4673
- --banner-icon-color: var(--color-base-800);
4730
+ --banner-bg: var(--color-base-50);
4731
+ --banner-border-color: var(--color-base-300);
4732
+ --banner-icon-color: var(--color-base-900);
4733
+ --banner-icon-bg: var(--color-base-200);
4674
4734
  }
4675
4735
  .Layer__UI__Banner[data-variant=info] {
4676
- --banner-bg: var(--badge-bg-color-info);
4677
- --banner-border-color: var(--badge-color-info);
4678
- --banner-fg: var(--color-base-800);
4679
- --banner-fg-muted: var(--color-base-600);
4680
- --banner-icon-color: var(--color-base-800);
4736
+ --banner-bg: color-mix(in srgb, var(--color-info-bg) 35%, var(--color-base-0));
4737
+ --banner-border-color: color-mix(in srgb, var(--color-info) 30%, var(--color-base-0));
4738
+ --banner-icon-color: var(--color-info-fg);
4739
+ --banner-icon-bg: var(--color-info-bg);
4681
4740
  }
4682
4741
  .Layer__UI__Banner[data-variant=warning] {
4683
- --banner-bg: var(--badge-bg-color-warning);
4684
- --banner-border-color: var(--badge-color-warning);
4685
- --banner-fg: var(--color-base-800);
4686
- --banner-fg-muted: var(--color-base-600);
4687
- --banner-icon-color: var(--color-base-800);
4742
+ --banner-bg: color-mix(in srgb, var(--color-info-warning-bg) 50%, var(--color-base-0));
4743
+ --banner-border-color: color-mix(in srgb, var(--color-info-warning) 50%, var(--color-base-0));
4744
+ --banner-icon-color: var(--color-info-warning-fg);
4745
+ --banner-icon-bg: var(--color-info-warning-bg);
4688
4746
  }
4689
4747
  .Layer__UI__Banner[data-variant=error] {
4690
- --banner-bg: var(--badge-bg-color-error);
4691
- --banner-border-color: var(--badge-color-error);
4692
- --banner-fg: var(--color-base-800);
4693
- --banner-fg-muted: var(--color-base-600);
4694
- --banner-icon-color: var(--color-base-800);
4748
+ --banner-bg: color-mix(in srgb, var(--color-info-error-bg) 25%, var(--color-base-0));
4749
+ --banner-border-color: color-mix(in srgb, var(--color-info-error) 30%, var(--color-base-0));
4750
+ --banner-icon-color: var(--color-info-error-fg);
4751
+ --banner-icon-bg: var(--color-info-error-bg);
4695
4752
  }
4696
4753
  .Layer__UI__Banner[data-variant=success] {
4697
- --banner-bg: var(--badge-bg-color-success);
4698
- --banner-border-color: var(--badge-color-success);
4699
- --banner-fg: var(--color-base-800);
4700
- --banner-fg-muted: var(--color-base-600);
4701
- --banner-icon-color: var(--color-base-800);
4754
+ --banner-bg: color-mix(in srgb, var(--color-info-success-bg) 35%, var(--color-base-0));
4755
+ --banner-border-color: color-mix(in srgb, var(--color-info-success) 50%, var(--color-base-0));
4756
+ --banner-icon-color: var(--color-info-success-fg);
4757
+ --banner-icon-bg: var(--color-info-success-bg);
4702
4758
  }
4703
4759
 
4704
4760
  .Layer__UI__Banner__iconContainer {
4761
+ flex-shrink: 0;
4762
+ min-block-size: 2rem;
4763
+ min-inline-size: 2rem;
4764
+ border-radius: var(--border-radius-2xs);
4765
+ border: 1px solid var(--banner-icon-border);
4766
+ background-color: var(--banner-icon-bg);
4705
4767
  color: var(--banner-icon-color);
4706
4768
  }
4707
4769
 
@@ -4743,7 +4805,7 @@
4743
4805
  }.Layer__TreeNavigation .Layer__UI__TreeItem {
4744
4806
  position: relative;
4745
4807
  align-content: center;
4746
- height: var(--spacing-5xl);
4808
+ padding-block: var(--spacing-sm);
4747
4809
  padding-inline-start: calc(var(--spacing-3xs) + var(--spacing-sm) * var(--tree-item-level));
4748
4810
  padding-inline-end: var(--spacing-md);
4749
4811
  border-bottom: 1px solid var(--color-base-300);
@@ -4792,13 +4854,20 @@
4792
4854
  width: 100%;
4793
4855
  }
4794
4856
  .Layer__TreeNavigationSkeleton__Group, .Layer__TreeNavigationSkeleton__Leaf {
4795
- height: var(--spacing-5xl);
4796
- padding-inline: var(--spacing-md);
4857
+ height: 44px;
4858
+ padding-inline-end: var(--spacing-md);
4797
4859
  border-bottom: 1px solid var(--color-base-300);
4798
4860
  }
4861
+ .Layer__TreeNavigationSkeleton__Group {
4862
+ padding-inline-start: calc(var(--spacing-3xs) + var(--spacing-sm));
4863
+ }
4799
4864
  .Layer__TreeNavigationSkeleton__Leaf {
4800
- padding-inline-start: calc(var(--spacing-lg) + var(--spacing-md));
4865
+ padding-inline-start: calc(var(--spacing-3xs) + var(--spacing-sm) * 2);
4801
4866
  background-color: var(--color-base-50);
4867
+ }.Layer__UnifiedReport__HeaderButtons {
4868
+ justify-content: flex-end;
4869
+ min-width: 15rem;
4870
+ max-width: 24rem;
4802
4871
  }.Layer__ExpandButton {
4803
4872
  height: 16px;
4804
4873
  min-width: 16px;
@@ -4815,23 +4884,24 @@
4815
4884
  .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell {
4816
4885
  display: table-cell;
4817
4886
  min-width: 6rem;
4818
- }.Layer__UnifiedReport__Header {
4819
- border-bottom: 1px solid var(--border-color);
4887
+ }.Layer__UnifiedReport__AdditionalControls {
4888
+ display: grid;
4889
+ gap: var(--spacing-xs);
4820
4890
  }
4821
- @container (width <= 768px) {
4822
- .Layer__UnifiedReport__Header {
4823
- display: grid;
4824
- grid-template-columns: 100%;
4825
- height: fit-content;
4826
- padding-block: var(--spacing-md);
4827
- }
4828
- .Layer__UnifiedReport__Header > :last-child {
4829
- padding-block-start: var(--spacing-md);
4830
- }
4831
- .Layer__UnifiedReport__Header > :not(:last-child) {
4832
- padding-block-end: var(--spacing-md);
4833
- border-bottom: 1px solid var(--border-color);
4834
- }
4891
+ .Layer__UnifiedReport__AdditionalControls[data-variant=small] {
4892
+ grid-template-columns: 1fr;
4893
+ }
4894
+ .Layer__UnifiedReport__AdditionalControls[data-variant=medium] {
4895
+ grid-template-columns: repeat(2, 1fr);
4896
+ }
4897
+ .Layer__UnifiedReport__AdditionalControls[data-variant=large] {
4898
+ grid-template-columns: repeat(3, 1fr);
4899
+ }
4900
+ .Layer__UnifiedReport__AdditionalControls[data-variant=small] > *,
4901
+ .Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container, .Layer__UnifiedReport__AdditionalControls[data-variant=medium] > *,
4902
+ .Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container {
4903
+ inline-size: 100%;
4904
+ max-inline-size: none;
4835
4905
  }.Layer__UI__Link {
4836
4906
  position: relative;
4837
4907
  display: inline;
@@ -4890,13 +4960,16 @@
4890
4960
  outline-offset: 2px;
4891
4961
  }.Layer__UnifiedReport__DetailHeader {
4892
4962
  border-bottom: 1px solid var(--border-color);
4893
- }.Layer__UnifiedReport {
4963
+ }.Layer__view.Layer__UnifiedReport {
4894
4964
  overflow: hidden;
4895
- min-width: clamp(24rem, 100%, 1406px);
4965
+ min-width: clamp(23rem, 100%, 1406px);
4896
4966
  }
4897
- .Layer__UnifiedReport .Layer__view-main.Layer__view-main {
4967
+ .Layer__view.Layer__UnifiedReport .Layer__view-main.Layer__view-main {
4898
4968
  padding: 0;
4899
4969
  }
4970
+ .Layer__view.Layer__UnifiedReport .Layer__view-header__children.Layer__view-header__children {
4971
+ width: max-content;
4972
+ }
4900
4973
 
4901
4974
  .Layer__UnifiedReport__Sidebar {
4902
4975
  flex-shrink: 0;
@@ -4906,40 +4979,81 @@
4906
4979
 
4907
4980
  .Layer__UnifiedReport__Content {
4908
4981
  min-width: 0;
4909
- }.Layer__AddToCalendar__CalendarIcon {
4910
- height: 1rem;
4911
- width: 1rem;
4912
- }.Layer__CallBooking {
4913
- padding: var(--spacing-lg);
4982
+ }.Layer__UI__DateTile {
4983
+ width: 5.5rem;
4984
+ border-radius: var(--border-radius-xs);
4985
+ border: 1px solid var(--color-base-200);
4986
+ background: var(--color-base-0);
4914
4987
  }
4915
- .Layer__CallBooking .Layer__CallBooking__Icon {
4916
- display: flex;
4917
- align-items: center;
4918
- justify-content: center;
4919
- height: 3rem;
4920
- width: 3rem;
4921
- border-radius: 50%;
4922
- background-color: var(--color-base-50);
4988
+ .Layer__UI__DateTile__Month, .Layer__UI__DateTile__Day, .Layer__UI__DateTile__Weekday {
4989
+ display: block;
4990
+ }
4991
+ .Layer__UI__DateTile__Month {
4992
+ background: var(--color-base-1000);
4993
+ line-height: 1.2;
4994
+ text-transform: uppercase;
4995
+ color: var(--color-base-0);
4996
+ }
4997
+ .Layer__UI__DateTile__Day {
4998
+ font-size: var(--text-heading-lg);
4999
+ line-height: 1;
4923
5000
  color: var(--color-base-900);
4924
5001
  }
4925
- .Layer__CallBooking .Layer__CallBooking__DetailRow {
4926
- display: grid;
4927
- grid-template-columns: 16px 72px 1fr;
4928
- column-gap: var(--spacing-sm);
4929
- align-items: center;
4930
- width: 100%;
5002
+ .Layer__UI__DateTile__Weekday {
5003
+ line-height: 1.2;
5004
+ text-transform: uppercase;
4931
5005
  }
4932
- .Layer__CallBooking .Layer__CallBooking__Actions {
4933
- width: 100%;
5006
+ @container (width <= 400px) {
5007
+ .Layer__UI__DateTile__Day {
5008
+ font-size: var(--text-heading);
5009
+ }
5010
+ }.Layer__CallBooking__HeaderDetails {
5011
+ min-width: 0;
4934
5012
  }
4935
- .Layer__CallBooking .Layer__CallBooking__Actions > * {
4936
- flex: 1;
5013
+ .Layer__CallBooking__TitleRow {
5014
+ flex-wrap: wrap;
5015
+ }
5016
+ .Layer__CallBooking__DateTimeRow, .Layer__CallBooking__LocationRow, .Layer__CallBooking__CoverageItem {
4937
5017
  min-width: 0;
4938
5018
  }
4939
-
4940
- @media (width <= 480px) {
4941
- .Layer__CallBooking {
4942
- padding: var(--spacing-md);
5019
+ .Layer__CallBooking__DateTimeRow {
5020
+ align-self: flex-start;
5021
+ color: var(--color-base-800);
5022
+ }
5023
+ .Layer__CallBooking__LocationRow {
5024
+ border-radius: var(--border-radius-5xl);
5025
+ background: var(--bg-muted);
5026
+ color: var(--fg-subtle);
5027
+ }
5028
+ .Layer__CallBooking__Divider {
5029
+ display: block;
5030
+ height: 1px;
5031
+ width: 100%;
5032
+ margin-block: var(--spacing-md);
5033
+ background: var(--bg-muted);
5034
+ }
5035
+ .Layer__CallBooking__CoverageHeading {
5036
+ display: block;
5037
+ line-height: 1.2;
5038
+ text-transform: uppercase;
5039
+ }
5040
+ .Layer__CallBooking__CoverageBadge {
5041
+ flex: 0 0 auto;
5042
+ height: var(--spacing-md);
5043
+ width: var(--spacing-md);
5044
+ border-radius: var(--border-radius-5xl);
5045
+ margin-top: var(--spacing-4xs);
5046
+ background: var(--color-info-success-bg);
5047
+ color: var(--color-info-success-fg);
5048
+ }
5049
+ @container (width <= 400px) {
5050
+ .Layer__CallBooking__HeaderRow {
5051
+ gap: var(--spacing-lg);
5052
+ }
5053
+ }
5054
+ @container (width <= 360px) {
5055
+ .Layer__CallBooking__JoinAction {
5056
+ flex: 1 1 100%;
4943
5057
  }
4944
5058
  }.Layer__YearPicker {
4945
5059
  inline-size: 8rem;
@@ -5106,6 +5220,8 @@
5106
5220
  }
5107
5221
  .Layer__TaxProfileForm .Layer__TaxProfileForm__Field--desktop {
5108
5222
  grid-template-columns: 16rem minmax(auto, 24rem);
5223
+ }.Layer__TaxBanner {
5224
+ max-width: 1406px;
5109
5225
  }.Layer__ExpandableCard {
5110
5226
  border-radius: 0;
5111
5227
  border: none;
@@ -5221,16 +5337,12 @@
5221
5337
  inline-size: 11rem;
5222
5338
  max-inline-size: 11rem;
5223
5339
  }
5224
- @container (max-width: 500px) {
5340
+ @media (width <= 500px) {
5225
5341
  .Layer__FullYearProjectionComboBox__Container {
5226
5342
  inline-size: 100%;
5227
5343
  max-inline-size: 100%;
5228
5344
  }
5229
- }@container (max-width: 500px) {
5230
- .Layer__TaxEstimatesHeader.Layer__TaxEstimatesHeader {
5231
- flex-direction: column;
5232
- align-items: flex-start;
5233
- }
5345
+ }@media (width <= 500px) {
5234
5346
  .Layer__TaxEstimatesHeader__ComboBoxContainer {
5235
5347
  width: 100%;
5236
5348
  }
@@ -5292,15 +5404,6 @@
5292
5404
  }
5293
5405
  .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Content {
5294
5406
  align-items: center;
5295
- }
5296
-
5297
- @media (width >= 760px) {
5298
- .Layer__card.Layer__TaxEstimatesSummaryCard {
5299
- border-radius: 0;
5300
- border-right: none;
5301
- border-bottom: none;
5302
- border-left: none;
5303
- }
5304
5407
  }.Layer__MetricRow {
5305
5408
  min-block-size: 2.5rem;
5306
5409
  }
@@ -5387,15 +5490,113 @@
5387
5490
  }
5388
5491
  .Layer__TaxOverview__Card__MetricRow--mobile {
5389
5492
  gap: var(--spacing-sm);
5390
- padding: var(--spacing-sm);
5391
5493
  }
5392
5494
 
5393
5495
  .Layer__MetricCard .Layer__TaxOverview__Meter {
5394
5496
  width: 100%;
5395
5497
  min-width: 0;
5498
+ }.Layer__TaxOverview__DeadlineCard {
5499
+ box-sizing: border-box;
5500
+ min-width: 0;
5501
+ padding: 0;
5502
+ border-radius: var(--border-radius-xs);
5503
+ border: 1px solid var(--color-base-200);
5504
+ background-color: var(--color-base-0);
5505
+ }
5506
+ .Layer__TaxOverview__DeadlineReviewRow {
5507
+ background-color: var(--color-base-50);
5508
+ }
5509
+ .Layer__TaxOverview__DeadlineContent {
5510
+ min-width: 0;
5511
+ }
5512
+ .Layer__TaxOverview__DeadlineAmountColumn {
5513
+ flex-shrink: 0;
5514
+ min-width: 10rem;
5515
+ }
5516
+ .Layer__TaxOverview__DeadlineValueRow {
5517
+ justify-content: flex-end;
5518
+ }
5519
+ .Layer__TaxOverview__AmountIcon {
5520
+ display: inline-flex;
5521
+ align-items: center;
5522
+ justify-content: center;
5523
+ height: 1.25rem;
5524
+ width: 1.25rem;
5525
+ border-radius: 50%;
5526
+ background-color: var(--color-info-neutral-bg);
5527
+ color: var(--color-info-neutral-fg);
5528
+ }
5529
+ .Layer__TaxOverview__AmountIcon--warning {
5530
+ background-color: var(--color-info-warning-bg);
5531
+ color: var(--color-info-warning-fg);
5532
+ }
5533
+ .Layer__TaxOverview__AmountIcon--pastDue {
5534
+ background-color: var(--color-info-error-bg);
5535
+ color: var(--color-info-error);
5536
+ }
5537
+ .Layer__TaxOverview__AmountIcon--paid {
5538
+ background-color: var(--color-info-success-bg);
5539
+ color: var(--color-info-success);
5540
+ }
5541
+ .Layer__TaxOverview__AmountIcon--due {
5542
+ background-color: var(--color-info-bg);
5543
+ color: var(--color-info);
5544
+ }
5545
+ .Layer__TaxOverview__DeadlineReviewContent {
5546
+ min-width: 0;
5547
+ }
5548
+ .Layer__TaxOverview__DeadlineReviewIcon {
5549
+ display: inline-flex;
5550
+ align-items: center;
5551
+ justify-content: center;
5552
+ color: var(--color-info-warning);
5553
+ }
5554
+ .Layer__TaxOverview__DeadlineReviewLabel {
5555
+ color: var(--color-info-warning-fg);
5556
+ }
5557
+
5558
+ @media (width <= 500px) {
5559
+ .Layer__TaxOverview__DeadlineReviewRow button {
5560
+ width: fit-content;
5561
+ }
5562
+ }.Layer__TaxOverview__Card--deadlines {
5563
+ min-width: 25rem;
5564
+ }
5565
+ @container (max-width: 960px) {
5566
+ .Layer__TaxOverview__Card--deadlines {
5567
+ min-width: unset;
5568
+ }
5569
+ }
5570
+ .Layer__TaxOverview__Card.Layer__card {
5571
+ gap: var(--spacing-lg);
5572
+ padding: var(--spacing-lg);
5573
+ border: 1px solid var(--color-base-200);
5574
+ box-shadow: none;
5575
+ }
5576
+
5577
+ @container (max-width: 720px) {
5578
+ .Layer__TaxOverview__Card.Layer__card {
5579
+ gap: var(--spacing-md);
5580
+ }
5396
5581
  }.Layer__TaxOverview {
5397
5582
  inline-size: min(100%, 1406px);
5398
5583
  container-type: inline-size;
5584
+ }
5585
+ .Layer__TaxOverview__PrimaryColumn {
5586
+ flex: 1 1 0%;
5587
+ min-width: 0;
5588
+ }
5589
+ .Layer__TaxOverview__SecondaryColumn {
5590
+ flex: 0 0 38%;
5591
+ min-width: 23rem;
5592
+ max-width: 32rem;
5593
+ }
5594
+
5595
+ @container (max-width: 1140px) {
5596
+ .Layer__TaxOverview__SecondaryColumn {
5597
+ flex-basis: 36%;
5598
+ min-width: 22rem;
5599
+ }
5399
5600
  }.Layer__TaxPaymentsMobileList .Layer__TaxPayments__ErrorState,
5400
5601
  .Layer__TaxPaymentsMobileList .Layer__TaxPayments__EmptyState {
5401
5602
  padding: var(--spacing-sm);
@@ -5422,8 +5623,6 @@
5422
5623
  }
5423
5624
  .Layer__UI__Table__TaxPaymentsTable .Layer__DataTable__EmptyState__Row {
5424
5625
  background-color: var(--color-base-0);
5425
- }.Layer__TaxEstimates__TaxBannerWrapper {
5426
- inline-size: min(100%, 1406px);
5427
5626
  }.Layer__TimeTrackingServicesDrawer {
5428
5627
  box-sizing: border-box;
5429
5628
  }
@@ -7413,12 +7612,7 @@ tbody .Layer__table__empty-row:first-child {
7413
7612
  color: var(--color-warning);
7414
7613
  }
7415
7614
  .Layer__tasks-header {
7416
- display: flex;
7417
- gap: var(--spacing-md);
7418
- align-items: center;
7419
- justify-content: space-between;
7420
7615
  min-height: 36px;
7421
- padding: var(--spacing-md);
7422
7616
  container-type: inline-size;
7423
7617
  }
7424
7618
  .Layer__tasks__content {
@@ -7958,11 +8152,11 @@ tbody .Layer__table__empty-row:first-child {
7958
8152
  display: flex;
7959
8153
  align-items: center;
7960
8154
  min-height: 44px;
7961
- width: 100%;
7962
8155
  padding: var(--spacing-md) 0;
7963
8156
  }
7964
8157
  .Layer__view .Layer__view-header__content {
7965
8158
  display: flex;
8159
+ gap: var(--spacing-md);
7966
8160
  align-items: center;
7967
8161
  justify-content: space-between;
7968
8162
  width: 100%;
package/dist/index.d.ts CHANGED
@@ -107,7 +107,9 @@ export declare const BalanceSheet: (props: BalanceSheetProps) => JSX_2.Element;
107
107
 
108
108
  declare type BalanceSheetProps = PropsWithChildren<{
109
109
  effectiveDate?: Date;
110
- asWidget?: boolean;
110
+ /** @deprecated No longer used. Expand all does not exist in Balance Sheet. */
111
+ withExpandAllButton?: boolean;
112
+ view?: View;
111
113
  stringOverrides?: BalanceSheetStringOverrides;
112
114
  dateSelectionMode?: DateSelectionMode;
113
115
  }>;
@@ -495,9 +497,12 @@ declare interface GeneralLedgerStringOverrides {
495
497
 
496
498
  export declare const GeneralLedgerView: ({ title, showTitle, showTags, showCustomerVendor, stringOverrides, chartOfAccountsOptions, renderInAppLink, }: GeneralLedgerProps) => JSX_2.Element;
497
499
 
498
- export declare const GlobalDateRangeSelection: ({ showLabels }: {
500
+ export declare const GlobalDateRangeSelection: ({ showLabels, isCompact }: GlobalDateRangeSelectionProps) => JSX_2.Element;
501
+
502
+ declare type GlobalDateRangeSelectionProps = {
499
503
  showLabels?: boolean;
500
- }) => JSX_2.Element;
504
+ isCompact?: boolean;
505
+ };
501
506
 
502
507
  export declare const GlobalMonthPicker: ({ truncateMonth, showLabel }: GlobalMonthPickerProps) => JSX_2.Element;
503
508
 
@@ -1024,6 +1029,7 @@ declare interface SourceDetailStringOverrides {
1024
1029
  export declare const StatementOfCashFlow: (props: StatementOfCashFlowProps) => JSX_2.Element;
1025
1030
 
1026
1031
  declare type StatementOfCashFlowProps = TimeRangePickerConfig & {
1032
+ view?: View;
1027
1033
  stringOverrides?: StatementOfCashFlowStringOverrides;
1028
1034
  };
1029
1035
 
@@ -1080,7 +1086,16 @@ declare interface TasksStringOverrides {
1080
1086
  header?: string;
1081
1087
  }
1082
1088
 
1083
- export declare const TaxEstimates: () => JSX_2.Element;
1089
+ declare type TaxEstimatesContextProviderProps = PropsWithChildren<{
1090
+ onClickReviewTransactions?: (payload: TaxEstimatesReviewTransactionsPayload) => void;
1091
+ }>;
1092
+
1093
+ declare type TaxEstimatesProps = TaxEstimatesContextProviderProps;
1094
+
1095
+ declare type TaxEstimatesReviewTransactionsPayload = {
1096
+ uncategorizedAmount: number;
1097
+ uncategorizedTransactionCount: number;
1098
+ };
1084
1099
 
1085
1100
  declare type TimeRangePickerConfig = {
1086
1101
  /**
@@ -1133,6 +1148,8 @@ export declare const unstable_MileageTracking: ({ showTitle }: {
1133
1148
  showTitle?: boolean;
1134
1149
  }) => JSX_2.Element;
1135
1150
 
1151
+ export declare const unstable_TaxEstimates: ({ onClickReviewTransactions: onReviewClicked }: TaxEstimatesProps) => JSX_2.Element;
1152
+
1136
1153
  export declare const unstable_TimeTracking: ({ showTitle, onReportsClick, stringOverrides }: TimeTrackingProps) => JSX_2.Element;
1137
1154
 
1138
1155
  export declare const unstable_UnifiedReports: ({ dateSelectionMode }: UnifiedReportProps) => JSX_2.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@layerfi/components",
3
- "version": "0.1.128-alpha.1",
3
+ "version": "0.1.128",
4
4
  "description": "Layer React Components",
5
5
  "main": "dist/cjs/index.cjs",
6
6
  "module": "dist/esm/index.mjs",