@layerfi/components 0.1.128-alpha → 0.1.128-alpha.2

package/dist/index.css

@@ -216,6 +216,12 @@
 .Layer__Stack[data-direction=column] {
   flex-direction: column;
 }
+.Layer__Stack[data-direction=row-reverse] {
+  flex-direction: row-reverse;
+}
+.Layer__Stack[data-direction=column-reverse] {
+  flex-direction: column-reverse;
+}
 .Layer__Stack[data-align=start] {
   align-items: start;
 }
@@ -497,6 +503,15 @@
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--border-color);
   background-color: var(--color-base-0);
+}
+.Layer__MobileListSkeleton[data-variant=compact] {
+  gap: 0;
+}
+.Layer__MobileListSkeleton[data-variant=compact] .Layer__MobileListSkeleton__Item {
+  padding-inline: 0;
+  border-radius: 0;
+  border: none;
+  background-color: transparent;
 }.Layer__InvisibleDownload {
   display: none;
 }.Layer__UI__Toggle {
@@ -541,7 +556,7 @@
   background: var(--color-base-1000);
 }
 
-.Layer__UI__tooltip-content--text {
+.Layer__UI__tooltip-content > .Layer__UI__tooltip-content--text {
   display: block;
   font-size: var(--text-sm);
   text-align: justify;
@@ -2340,7 +2355,8 @@
 .Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip > .Layer__custom-account-form__input {
   flex: 1 1;
 }.Layer__UI__Table-Table {
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
 .Layer__UI__Table-TableHeader {
@@ -2352,9 +2368,6 @@
 .Layer__UI__Table-TableHeader > tr {
   height: inherit;
 }
-.Layer__UI__Table-TableHeader--hidden {
-  display: none;
-}
 
 .Layer__UI__Table-Row {
   height: 3.25rem;
@@ -2418,6 +2431,22 @@
 .Layer__UI__Table-Column[data-align=end],
 .Layer__UI__Table-Cell[data-align=end] {
   text-align: end;
+}
+
+.Layer__UI__Table-ScrollContainer {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.Layer__UI__Table-Column[data-pinned],
+.Layer__UI__Table-Cell[data-pinned] {
+  z-index: 1;
+  background-color: inherit;
+}
+
+.Layer__UI__Table-TableHeader .Layer__UI__Table-Column[data-pinned] {
+  z-index: 2;
+  background-color: var(--color-base-0);
 }.Layer__UI__VirtualizedTable__container {
   position: relative;
   overflow: auto;
@@ -3090,10 +3119,35 @@
 .Layer__MobileListItem[data-selection-mode=multiple], .Layer__MobileListItem[data-selection-mode=single] {
   grid-template-areas: "selection content";
   grid-template-columns: auto 1fr;
+}
+[data-variant=compact] .Layer__MobileListItem {
+  padding-inline: 0;
+  border-radius: 0;
+  border: none;
+}.Layer__MobileListSection {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__MobileListSection__Heading {
+  padding-block-end: var(--spacing-xs);
+  padding-inline: var(--spacing-3xs);
+  outline: none;
+  background-color: transparent;
+  cursor: default;
+}
+.Layer__MobileListSection:not(:last-child) {
+  padding-block-end: var(--spacing-xs);
+}
+.Layer__MobileListSection:not(:first-child) {
+  padding-block-start: var(--spacing-md);
+  border-block-start: 1px solid var(--border-color);
 }.Layer__MobileList {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
+}
+.Layer__MobileList[data-variant=compact] {
+  gap: 0;
 }.Layer__pagination-container {
   justify-content: end;
   padding: var(--spacing-md);
@@ -3148,11 +3202,7 @@
   cursor: pointer;
 }.Layer__PaginatedDataTable__Pagination {
   border-top: 1px solid var(--border-color);
-}.Layer__CategorizationRulesTable {
-  border: none;
-}
-
-.Layer__UI__Table__CategorizationRulesTable {
+}.Layer__UI__Table__CategorizationRulesTable {
   table-layout: fixed;
   width: 100%;
 }
@@ -3686,12 +3736,15 @@
   min-height: 0;
 }.Layer__GlobalDateRangeSelection {
   display: grid;
-  grid-template-columns: 9rem repeat(2, minmax(10rem, 12rem));
+  grid-template-columns: repeat(3, minmax(10rem, 1fr));
   gap: var(--spacing-xs);
 }
-.Layer__GlobalDateRangeSelection--mobile {
-  grid-template-columns: 8rem repeat(2, minmax(6.75rem, 10rem));
-  gap: var(--spacing-3xs);
+.Layer__GlobalDateRangeSelection--compact {
+  grid-template-columns: repeat(2, minmax(6.75rem, 1fr));
+  width: 100%;
+}
+.Layer__GlobalDateRangeSelection--compact > :first-child {
+  grid-column: 1/-1;
 }
 .Layer__GlobalDateRangeSelection .Layer__tooltip-trigger {
   padding-top: 0;
@@ -3725,6 +3778,28 @@
 
 :is(.Layer__input-tooltip:has(.Layer__CompareTagsMultiSelect)) {
   flex: 1;
+}.Layer__ProfitAndLossCompareOptions__Container[data-compact=true] .Layer__DateGroupByComboBox__Container,
+.Layer__ProfitAndLossCompareOptions__Container[data-compact=true] .Layer__CompareTagsMultiSelect__Container {
+  inline-size: 100%;
+  max-inline-size: none;
+}.Layer__MobileSelectionDrawerList__Check {
+  visibility: hidden;
+  height: 1rem;
+  min-width: 1rem;
+}
+.Layer__MobileSelectionDrawerList__Check[data-selected=true] {
+  visibility: visible;
+}.Layer__MobileSelectionDrawerWithTrigger {
+  padding-inline: var(--spacing-sm);
+}
+.Layer__MobileSelectionDrawerWithTrigger .Layer__SearchField {
+  inline-size: 100%;
+}
+.Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem {
+  transition: background-color 120ms ease;
+}
+.Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem[data-hovered] {
+  background-color: var(--bg-element-focus);
 }.Layer__panel {
   display: flex;
   flex: 1;
@@ -3772,7 +3847,6 @@
   height: 100%;
   width: 480px;
   min-width: 480px;
-  background: var(--color-base-0);
   opacity: 0.2;
   transition: opacity 180ms ease-in-out;
 }
@@ -3845,14 +3919,15 @@
   min-height: 40px;
 }.Layer__GlobalDateSelection {
   display: grid;
-  grid-template-columns: repeat(2, minmax(10rem, 12rem));
+  grid-template-columns: repeat(2, minmax(10rem, 1fr));
   gap: var(--spacing-xs);
-  min-width: 18.5rem;
 }
-.Layer__GlobalDateSelection--mobile {
-  grid-template-columns: repeat(2, minmax(6.75rem, 10rem));
-  gap: var(--spacing-3xs);
-  min-width: 16rem;
+.Layer__GlobalDateSelection--compact {
+  grid-template-columns: minmax(6.75rem, 1fr);
+  width: 100%;
+}
+.Layer__GlobalDateSelection--compact > :first-child {
+  grid-column: 1/-1;
 }
 .Layer__GlobalDateSelection .Layer__tooltip-trigger {
   padding-top: 0;
@@ -4650,44 +4725,48 @@
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--banner-border-color);
   background-color: var(--banner-bg);
+  --banner-fg: var(--color-base-900);
+  --banner-fg-muted: var(--color-base-800);
+  --banner-icon-border: transparent;
 }
 .Layer__UI__Banner[data-variant=default] {
-  --banner-bg: var(--color-base-100);
-  --banner-border-color: var(--color-base-800);
-  --banner-fg: var(--color-base-800);
-  --banner-fg-muted: var(--color-base-600);
-  --banner-icon-color: var(--color-base-800);
+  --banner-bg: var(--color-base-50);
+  --banner-border-color: var(--color-base-300);
+  --banner-icon-color: var(--color-base-900);
+  --banner-icon-bg: var(--color-base-200);
 }
 .Layer__UI__Banner[data-variant=info] {
-  --banner-bg: var(--badge-bg-color-info);
-  --banner-border-color: var(--badge-color-info);
-  --banner-fg: var(--color-base-800);
-  --banner-fg-muted: var(--color-base-600);
-  --banner-icon-color: var(--color-base-800);
+  --banner-bg: color-mix(in srgb, var(--color-info-bg) 35%, var(--color-base-0));
+  --banner-border-color: color-mix(in srgb, var(--color-info) 30%, var(--color-base-0));
+  --banner-icon-color: var(--color-info-fg);
+  --banner-icon-bg: var(--color-info-bg);
 }
 .Layer__UI__Banner[data-variant=warning] {
-  --banner-bg: var(--badge-bg-color-warning);
-  --banner-border-color: var(--badge-color-warning);
-  --banner-fg: var(--color-base-800);
-  --banner-fg-muted: var(--color-base-600);
-  --banner-icon-color: var(--color-base-800);
+  --banner-bg: color-mix(in srgb, var(--color-info-warning-bg) 50%, var(--color-base-0));
+  --banner-border-color: color-mix(in srgb, var(--color-info-warning) 50%, var(--color-base-0));
+  --banner-icon-color: var(--color-info-warning-fg);
+  --banner-icon-bg: var(--color-info-warning-bg);
 }
 .Layer__UI__Banner[data-variant=error] {
-  --banner-bg: var(--badge-bg-color-error);
-  --banner-border-color: var(--badge-color-error);
-  --banner-fg: var(--color-base-800);
-  --banner-fg-muted: var(--color-base-600);
-  --banner-icon-color: var(--color-base-800);
+  --banner-bg: color-mix(in srgb, var(--color-info-error-bg) 25%, var(--color-base-0));
+  --banner-border-color: color-mix(in srgb, var(--color-info-error) 30%, var(--color-base-0));
+  --banner-icon-color: var(--color-info-error-fg);
+  --banner-icon-bg: var(--color-info-error-bg);
 }
 .Layer__UI__Banner[data-variant=success] {
-  --banner-bg: var(--badge-bg-color-success);
-  --banner-border-color: var(--badge-color-success);
-  --banner-fg: var(--color-base-800);
-  --banner-fg-muted: var(--color-base-600);
-  --banner-icon-color: var(--color-base-800);
+  --banner-bg: color-mix(in srgb, var(--color-info-success-bg) 35%, var(--color-base-0));
+  --banner-border-color: color-mix(in srgb, var(--color-info-success) 50%, var(--color-base-0));
+  --banner-icon-color: var(--color-info-success-fg);
+  --banner-icon-bg: var(--color-info-success-bg);
 }
 
 .Layer__UI__Banner__iconContainer {
+  flex-shrink: 0;
+  min-block-size: 2rem;
+  min-inline-size: 2rem;
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--banner-icon-border);
+  background-color: var(--banner-icon-bg);
   color: var(--banner-icon-color);
 }
 
@@ -4729,14 +4808,16 @@
 }.Layer__TreeNavigation .Layer__UI__TreeItem {
   position: relative;
   align-content: center;
-  height: var(--spacing-5xl);
-  padding-inline-start: calc(var(--spacing-sm) * (var(--tree-item-level) - 1) + var(--spacing-md) * var(--tree-item-level));
+  padding-block: var(--spacing-sm);
+  padding-inline-start: calc(var(--spacing-3xs) + var(--spacing-sm) * var(--tree-item-level));
   padding-inline-end: var(--spacing-md);
   border-bottom: 1px solid var(--color-base-300);
   cursor: pointer;
 }
 .Layer__TreeNavigation .Layer__UI__TreeItem .Layer__TreeNavigation__Check {
   visibility: hidden;
+  height: 1rem;
+  min-width: 1rem;
 }
 .Layer__TreeNavigation .Layer__UI__TreeItem[aria-level="1"] {
   background-color: var(--color-base-0);
@@ -4776,19 +4857,20 @@
   width: 100%;
 }
 .Layer__TreeNavigationSkeleton__Group, .Layer__TreeNavigationSkeleton__Leaf {
-  height: var(--spacing-5xl);
-  padding-inline: var(--spacing-md);
+  height: 44px;
+  padding-inline-end: var(--spacing-md);
   border-bottom: 1px solid var(--color-base-300);
 }
+.Layer__TreeNavigationSkeleton__Group {
+  padding-inline-start: calc(var(--spacing-3xs) + var(--spacing-sm));
+}
 .Layer__TreeNavigationSkeleton__Leaf {
-  padding-inline-start: calc(var(--spacing-lg) + var(--spacing-md));
+  padding-inline-start: calc(var(--spacing-3xs) + var(--spacing-sm) * 2);
   background-color: var(--color-base-50);
-}.Layer__ReportsNavigation__GroupLabel {
-  min-width: 0;
-}
-
-.Layer__ReportsNavigation__GroupIcon {
-  color: var(--color-base-500);
+}.Layer__UnifiedReport__HeaderButtons {
+  justify-content: flex-end;
+  min-width: 15rem;
+  max-width: 24rem;
 }.Layer__ExpandButton {
   height: 16px;
   min-width: 16px;
@@ -4804,82 +4886,177 @@
 .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column,
 .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell {
   display: table-cell;
-}.Layer__UnifiedReport__Header {
-  border-bottom: 1px solid var(--border-color);
+  min-width: 6rem;
+}.Layer__UnifiedReport__AdditionalControls {
+  display: grid;
+  gap: var(--spacing-xs);
 }
-@container (width <= 768px) {
-  .Layer__UnifiedReport__Header {
-    display: grid;
-    grid-template-columns: 100%;
-    height: fit-content;
-    padding-block: var(--spacing-md);
-  }
-  .Layer__UnifiedReport__Header > :last-child {
-    padding-block-start: var(--spacing-md);
-  }
-  .Layer__UnifiedReport__Header > :not(:last-child) {
-    padding-block-end: var(--spacing-md);
-    border-bottom: 1px solid var(--border-color);
-  }
+.Layer__UnifiedReport__AdditionalControls[data-variant=small] {
+  grid-template-columns: 1fr;
+}
+.Layer__UnifiedReport__AdditionalControls[data-variant=medium] {
+  grid-template-columns: repeat(2, 1fr);
+}
+.Layer__UnifiedReport__AdditionalControls[data-variant=large] {
+  grid-template-columns: repeat(3, 1fr);
+}
+.Layer__UnifiedReport__AdditionalControls[data-variant=small] > *,
+.Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container, .Layer__UnifiedReport__AdditionalControls[data-variant=medium] > *,
+.Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container {
+  inline-size: 100%;
+  max-inline-size: none;
+}.Layer__UI__Link {
+  position: relative;
+  display: inline;
+  outline: none;
+  cursor: pointer;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  text-decoration: none;
+}
+.Layer__UI__Link[data-hovered] {
+  text-decoration: underline;
+}
+.Layer__UI__Link[data-ellipsis], .Layer__UI__Link[data-with-tooltip] {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-inline-size: 100%;
+}
+.Layer__UI__Link[data-disabled] {
+  cursor: not-allowed;
+  color: var(--color-base-500);
+  pointer-events: none;
+}
+.Layer__UI__Link[data-size=xs] {
+  font-size: var(--text-xs);
+}
+.Layer__UI__Link[data-size=sm] {
+  font-size: var(--text-sm);
+}
+.Layer__UI__Link[data-size=md] {
+  font-size: var(--text-md);
+}
+.Layer__UI__Link[data-size=lg] {
+  font-size: var(--text-lg);
+}.Layer__Breadcrumbs {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
-.Layer__UnifiedReport__Header__SecondaryActions {
-  gap: var(--spacing-xs);
+.Layer__Breadcrumb {
+  display: flex;
+  align-items: center;
 }
-@media (width <= 500px) {
-  .Layer__UnifiedReport__Header__SecondaryActions {
-    gap: var(--spacing-3xs);
-  }
-}.Layer__UnifiedReport {
+.Layer__Breadcrumb .Layer__UI__Link {
+  color: var(--color-base-500);
+}
+.Layer__Breadcrumb .Layer__UI__Link[data-current] {
+  color: var(--color-base-1000);
+}
+.Layer__Breadcrumb .Layer__UI__Link[data-focus-visible] {
+  outline: -webkit-focus-ring-color auto 1px;
+  outline-offset: 2px;
+}.Layer__UnifiedReport__DetailHeader {
+  border-bottom: 1px solid var(--border-color);
+}.Layer__view.Layer__UnifiedReport {
   overflow: hidden;
-  min-width: clamp(24rem, 100%, 1406px);
+  min-width: clamp(23rem, 100%, 1406px);
 }
-.Layer__UnifiedReport .Layer__view-main.Layer__view-main {
+.Layer__view.Layer__UnifiedReport .Layer__view-main.Layer__view-main {
   padding: 0;
 }
+.Layer__view.Layer__UnifiedReport .Layer__view-header__children.Layer__view-header__children {
+  width: max-content;
+}
 
 .Layer__UnifiedReport__Sidebar {
   flex-shrink: 0;
-  width: 18rem;
+  width: 15rem;
   border-right: 1px solid var(--color-base-300);
 }
 
 .Layer__UnifiedReport__Content {
   min-width: 0;
-}.Layer__AddToCalendar__CalendarIcon {
-  height: 1rem;
-  width: 1rem;
-}.Layer__CallBooking {
-  padding: var(--spacing-lg);
+}.Layer__UI__DateTile {
+  width: 5.5rem;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--color-base-200);
+  background: var(--color-base-0);
 }
-.Layer__CallBooking .Layer__CallBooking__Icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 3rem;
-  width: 3rem;
-  border-radius: 50%;
-  background-color: var(--color-base-50);
+.Layer__UI__DateTile__Month, .Layer__UI__DateTile__Day, .Layer__UI__DateTile__Weekday {
+  display: block;
+}
+.Layer__UI__DateTile__Month {
+  background: var(--color-base-1000);
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: var(--color-base-0);
+}
+.Layer__UI__DateTile__Day {
+  font-size: var(--text-heading-lg);
+  line-height: 1;
   color: var(--color-base-900);
 }
-.Layer__CallBooking .Layer__CallBooking__DetailRow {
-  display: grid;
-  grid-template-columns: 16px 72px 1fr;
-  column-gap: var(--spacing-sm);
-  align-items: center;
-  width: 100%;
+.Layer__UI__DateTile__Weekday {
+  line-height: 1.2;
+  text-transform: uppercase;
 }
-.Layer__CallBooking .Layer__CallBooking__Actions {
-  width: 100%;
+@container (width <= 400px) {
+  .Layer__UI__DateTile__Day {
+    font-size: var(--text-heading);
+  }
+}.Layer__CallBooking__HeaderDetails {
+  min-width: 0;
 }
-.Layer__CallBooking .Layer__CallBooking__Actions > * {
-  flex: 1;
+.Layer__CallBooking__TitleRow {
+  flex-wrap: wrap;
+}
+.Layer__CallBooking__DateTimeRow, .Layer__CallBooking__LocationRow, .Layer__CallBooking__CoverageItem {
   min-width: 0;
 }
-
-@media (width <= 480px) {
-  .Layer__CallBooking {
-    padding: var(--spacing-md);
+.Layer__CallBooking__DateTimeRow {
+  align-self: flex-start;
+  color: var(--color-base-800);
+}
+.Layer__CallBooking__LocationRow {
+  border-radius: var(--border-radius-5xl);
+  background: var(--bg-muted);
+  color: var(--fg-subtle);
+}
+.Layer__CallBooking__Divider {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin-block: var(--spacing-md);
+  background: var(--bg-muted);
+}
+.Layer__CallBooking__CoverageHeading {
+  display: block;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+.Layer__CallBooking__CoverageBadge {
+  flex: 0 0 auto;
+  height: var(--spacing-md);
+  width: var(--spacing-md);
+  border-radius: var(--border-radius-5xl);
+  margin-top: var(--spacing-4xs);
+  background: var(--color-info-success-bg);
+  color: var(--color-info-success-fg);
+}
+@container (width <= 400px) {
+  .Layer__CallBooking__HeaderRow {
+    gap: var(--spacing-lg);
+  }
+}
+@container (width <= 360px) {
+  .Layer__CallBooking__JoinAction {
+    flex: 1 1 100%;
   }
 }.Layer__YearPicker {
   inline-size: 8rem;
@@ -5046,6 +5223,8 @@
 }
 .Layer__TaxProfileForm .Layer__TaxProfileForm__Field--desktop {
   grid-template-columns: 16rem minmax(auto, 24rem);
+}.Layer__TaxBanner {
+  max-width: 1406px;
 }.Layer__ExpandableCard {
   border-radius: 0;
   border: none;
@@ -5161,16 +5340,12 @@
   inline-size: 11rem;
   max-inline-size: 11rem;
 }
-@container (max-width: 500px) {
+@media (width <= 500px) {
   .Layer__FullYearProjectionComboBox__Container {
     inline-size: 100%;
     max-inline-size: 100%;
   }
-}@container (max-width: 500px) {
-  .Layer__TaxEstimatesHeader.Layer__TaxEstimatesHeader {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+}@media (width <= 500px) {
   .Layer__TaxEstimatesHeader__ComboBoxContainer {
     width: 100%;
   }
@@ -5232,15 +5407,6 @@
 }
 .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Content {
   align-items: center;
-}
-
-@media (width >= 760px) {
-  .Layer__card.Layer__TaxEstimatesSummaryCard {
-    border-radius: 0;
-    border-right: none;
-    border-bottom: none;
-    border-left: none;
-  }
 }.Layer__MetricRow {
   min-block-size: 2.5rem;
 }
@@ -5327,15 +5493,113 @@
 }
 .Layer__TaxOverview__Card__MetricRow--mobile {
   gap: var(--spacing-sm);
-  padding: var(--spacing-sm);
 }
 
 .Layer__MetricCard .Layer__TaxOverview__Meter {
   width: 100%;
   min-width: 0;
+}.Layer__TaxOverview__DeadlineCard {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 0;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--color-base-200);
+  background-color: var(--color-base-0);
+}
+.Layer__TaxOverview__DeadlineReviewRow {
+  background-color: var(--color-base-50);
+}
+.Layer__TaxOverview__DeadlineContent {
+  min-width: 0;
+}
+.Layer__TaxOverview__DeadlineAmountColumn {
+  flex-shrink: 0;
+  min-width: 10rem;
+}
+.Layer__TaxOverview__DeadlineValueRow {
+  justify-content: flex-end;
+}
+.Layer__TaxOverview__AmountIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 50%;
+  background-color: var(--color-info-neutral-bg);
+  color: var(--color-info-neutral-fg);
+}
+.Layer__TaxOverview__AmountIcon--warning {
+  background-color: var(--color-info-warning-bg);
+  color: var(--color-info-warning-fg);
+}
+.Layer__TaxOverview__AmountIcon--pastDue {
+  background-color: var(--color-info-error-bg);
+  color: var(--color-info-error);
+}
+.Layer__TaxOverview__AmountIcon--paid {
+  background-color: var(--color-info-success-bg);
+  color: var(--color-info-success);
+}
+.Layer__TaxOverview__AmountIcon--due {
+  background-color: var(--color-info-bg);
+  color: var(--color-info);
+}
+.Layer__TaxOverview__DeadlineReviewContent {
+  min-width: 0;
+}
+.Layer__TaxOverview__DeadlineReviewIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-info-warning);
+}
+.Layer__TaxOverview__DeadlineReviewLabel {
+  color: var(--color-info-warning-fg);
+}
+
+@media (width <= 500px) {
+  .Layer__TaxOverview__DeadlineReviewRow button {
+    width: fit-content;
+  }
+}.Layer__TaxOverview__Card--deadlines {
+  min-width: 25rem;
+}
+@container (max-width: 960px) {
+  .Layer__TaxOverview__Card--deadlines {
+    min-width: unset;
+  }
+}
+.Layer__TaxOverview__Card.Layer__card {
+  gap: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-base-200);
+  box-shadow: none;
+}
+
+@container (max-width: 720px) {
+  .Layer__TaxOverview__Card.Layer__card {
+    gap: var(--spacing-md);
+  }
 }.Layer__TaxOverview {
   inline-size: min(100%, 1406px);
   container-type: inline-size;
+}
+.Layer__TaxOverview__PrimaryColumn {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+.Layer__TaxOverview__SecondaryColumn {
+  flex: 0 0 38%;
+  min-width: 23rem;
+  max-width: 32rem;
+}
+
+@container (max-width: 1140px) {
+  .Layer__TaxOverview__SecondaryColumn {
+    flex-basis: 36%;
+    min-width: 22rem;
+  }
 }.Layer__TaxPaymentsMobileList .Layer__TaxPayments__ErrorState,
 .Layer__TaxPaymentsMobileList .Layer__TaxPayments__EmptyState {
   padding: var(--spacing-sm);
@@ -5362,8 +5626,6 @@
 }
 .Layer__UI__Table__TaxPaymentsTable .Layer__DataTable__EmptyState__Row {
   background-color: var(--color-base-0);
-}.Layer__TaxEstimates__TaxBannerWrapper {
-  inline-size: min(100%, 1406px);
 }.Layer__TimeTrackingServicesDrawer {
   box-sizing: border-box;
 }
@@ -5388,6 +5650,14 @@
   border: 1px solid var(--border-color);
 }
 
+.Layer__TimeTrackingServicesDrawer__EmptyState {
+  box-sizing: border-box;
+  overflow: hidden;
+  inline-size: 100%;
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--border-color);
+}
+
 .Layer__TimeTrackingServicesDrawer__accordion {
   overflow: hidden;
   border-radius: var(--border-radius-2xs);
@@ -5449,11 +5719,45 @@
   grid-template-areas: "label input";
   gap: 0;
   align-items: center;
+}
+.Layer__TimeEntryServiceSelector__CreateLabel.Layer__Span {
+  display: inline-flex;
+  gap: var(--spacing-2xs);
+  align-items: center;
+  color: var(--color-base-900);
 }.Layer__component-container.Layer__ActiveTimeTracker {
   --border-color: #000;
   --bg-color: #000;
 }
 
+.Layer__component-container.Layer__ActiveTimeTracker.Layer__ActiveTimeTracker__Container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.Layer__ActiveTimeTracker__ErrorStrip {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border-block-end: 1px solid rgba(255, 255, 255, 0.14);
+  background-color: color-mix(in srgb, var(--color-info-error), transparent);
+}
+
+.Layer__ActiveTimeTracker__ErrorStripRow {
+  min-inline-size: 0;
+}
+
+.Layer__ActiveTimeTracker__ErrorStripIcon {
+  flex-shrink: 0;
+  color: var(--color-base-0);
+}
+
+.Layer__ActiveTimeTracker__ErrorStripText {
+  flex: 1;
+  min-inline-size: 0;
+  color: var(--color-base-0);
+}
+
 .Layer__ActiveTimeTracker__Main {
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
@@ -5686,6 +5990,7 @@
 }
 .Layer__TimeEntryForm .Layer__TimeEntryForm__FormError {
   padding-block-end: var(--spacing-xs);
+  margin-block-start: calc(-1 * var(--spacing-md));
 }
 .Layer__TimeEntryForm .Layer__TimeEntryForm__Field__EntryDate,
 .Layer__TimeEntryForm .Layer__TimeEntryForm__Field__Duration,
@@ -5755,6 +6060,14 @@
 
 .Layer__TimeTrackingStats__LegendItem {
   min-inline-size: 10rem;
+  max-inline-size: 10rem;
+}
+
+.Layer__TimeTrackingStats__LegendLabel {
+  min-inline-size: 0;
+}
+.Layer__TimeTrackingStats__LegendLabel > .Layer__Span {
+  min-inline-size: 0;
 }
 
 .Layer__TimeTrackingStats__LegendSwatch {
@@ -5808,11 +6121,12 @@
   }
   .Layer__TimeTrackingStats__LegendItem {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-columns: minmax(0, 1fr) auto;
     row-gap: 0;
     column-gap: var(--spacing-sm);
     align-items: center;
     min-inline-size: 100%;
+    max-inline-size: none;
   }
   .Layer__TimeTrackingStats__LegendLabel {
     min-inline-size: 0;
@@ -5822,17 +6136,12 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .Layer__TimeTrackingStats__LegendDuration,
-  .Layer__TimeTrackingStats__LegendPercentage {
-    white-space: nowrap;
-  }
-  .Layer__TimeTrackingStats__LegendDuration {
+  .Layer__TimeTrackingStats__LegendMeta {
     justify-self: end;
   }
+  .Layer__TimeTrackingStats__LegendDuration,
   .Layer__TimeTrackingStats__LegendPercentage {
-    justify-self: end;
-    min-inline-size: 2.25rem;
-    text-align: right;
+    white-space: nowrap;
   }
 }.Layer__toasts-container {
   position: fixed;
@@ -7306,12 +7615,7 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-warning);
 }
 .Layer__tasks-header {
-  display: flex;
-  gap: var(--spacing-md);
-  align-items: center;
-  justify-content: space-between;
   min-height: 36px;
-  padding: var(--spacing-md);
   container-type: inline-size;
 }
 .Layer__tasks__content {
@@ -7851,11 +8155,11 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   min-height: 44px;
-  width: 100%;
   padding: var(--spacing-md) 0;
 }
 .Layer__view .Layer__view-header__content {
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: space-between;
   width: 100%;