@layerfi/components 0.1.126 → 0.1.128-alpha

package/dist/index.css

@@ -1030,6 +1030,24 @@
   border-color: var(--button-border-color-ghost-active);
   outline: 2px solid var(--outline-default);
 }
+.Layer__UI__Button[data-variant=outlined-light] {
+  border: 1px solid var(--color-base-300);
+  background-color: var(--color-base-0);
+  color: var(--color-base-900);
+}
+.Layer__UI__Button[data-variant=outlined-light][data-pending], .Layer__UI__Button[data-variant=outlined-light][data-disabled] {
+  border-color: var(--color-base-200);
+  background-color: var(--color-base-100);
+  color: var(--button-fg-disabled);
+}
+.Layer__UI__Button[data-variant=outlined-light][data-hovered]:not([data-pressed], [data-focus-visible], [data-disabled]) {
+  outline: 1px solid var(--outline-default);
+  background-color: var(--color-base-100);
+}
+.Layer__UI__Button[data-variant=outlined-light][data-pressed]:not([data-focus-visible], [data-disabled]) {
+  outline: 2px solid var(--outline-default);
+  background-color: var(--color-base-200);
+}
 .Layer__UI__Button[data-variant=solid] {
   background-color: var(--button-bg-default);
   color: var(--button-fg-default);
@@ -1988,11 +2006,10 @@
   color: var(--bg-default);
   border-color: var(--fg-default);
 }
-.Layer__Checkbox[data-variant=success] [slot=checkbox] {
-  background-color: var(--color-info-success);
-}
 .Layer__Checkbox[data-selected][data-variant=success] [slot=checkbox] {
-  border-color: var(--color-info-success);
+  background-color: var(--bg-brand-accent, var(--color-accent));
+  border-color: var(--bg-brand-accent, var(--color-accent));
+  color: var(--fg-brand-accent, var(--color-primary));
 }
 .Layer__Checkbox[data-variant=error] [slot=checkbox] {
   border-color: var(--color-info-error);
@@ -2372,15 +2389,6 @@
 .Layer__UI__Table-Column:last-child {
   padding-right: var(--spacing-md);
 }
-.Layer__UI__Table-Column[data-text-align=left] {
-  text-align: left;
-}
-.Layer__UI__Table-Column[data-text-align=center] {
-  text-align: center;
-}
-.Layer__UI__Table-Column[data-text-align=right] {
-  text-align: right;
-}
 
 .Layer__UI__Table-Cell {
   box-sizing: border-box;
@@ -2397,6 +2405,19 @@
 }
 .Layer__UI__Table-Cell:last-child {
   padding-right: var(--spacing-md);
+}
+
+.Layer__UI__Table-Column[data-align=start],
+.Layer__UI__Table-Cell[data-align=start] {
+  text-align: start;
+}
+.Layer__UI__Table-Column[data-align=center],
+.Layer__UI__Table-Cell[data-align=center] {
+  text-align: center;
+}
+.Layer__UI__Table-Column[data-align=end],
+.Layer__UI__Table-Cell[data-align=end] {
+  text-align: end;
 }.Layer__UI__VirtualizedTable__container {
   position: relative;
   overflow: auto;
@@ -3121,6 +3142,10 @@
 .Layer__DataTable__EmptyState__Cell {
   grid-column: 1/-1;
   justify-content: center;
+}
+
+.Layer__DataTable__ClickableRow {
+  cursor: pointer;
 }.Layer__PaginatedDataTable__Pagination {
   border-top: 1px solid var(--border-color);
 }.Layer__CategorizationRulesTable {
@@ -3449,6 +3474,130 @@
   column-gap: var(--spacing-sm);
   justify-content: space-between;
   list-style: none;
+}#layer-pie-dots-pattern rect {
+  fill: var(--color-base-500);
+}
+
+#layer-pie-dots-pattern rect.bg {
+  fill: var(--color-base-100);
+}
+
+.Layer__DetailedChart {
+  width: 100%;
+}
+
+.Layer__DetailedChart__container {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+
+.Layer__DetailedChart__centerLabelTitle,
+.Layer__DetailedChart__centerLabelShare {
+  fill: var(--color-base-600);
+  font-size: 12px;
+}
+
+.Layer__DetailedChart__centerLabelValue {
+  fill: var(--text-color-primary);
+  font-size: var(--text-md);
+}
+
+.Layer__DetailedChart__centerLabelLoading {
+  fill: var(--color-base-600);
+  font-size: 14px;
+}
+
+.Layer__DetailedChart__Slice {
+  transition: fill 1000ms ease-out;
+}
+
+.Layer__DetailedChart__Slice--inactive {
+  fill: var(--color-base-300);
+}.Layer__DetailedTable__table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.Layer__DetailedTable__table table th,
+.Layer__DetailedTable__table table td {
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: 12px;
+}
+.Layer__DetailedTable__table table th:first-child,
+.Layer__DetailedTable__table table td:first-child {
+  width: 20px;
+  padding-right: 0;
+}
+.Layer__DetailedTable__table table th:last-child,
+.Layer__DetailedTable__table table td:last-child {
+  text-align: right;
+}
+.Layer__DetailedTable__table table th {
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-base-300);
+  transition: color 150ms ease-out;
+}
+.Layer__DetailedTable__table--sortable table th {
+  cursor: pointer;
+}
+.Layer__DetailedTable__table--sortable table th:first-child {
+  cursor: default;
+}
+.Layer__DetailedTable__table table tbody tr {
+  height: 2.5rem;
+}
+.Layer__DetailedTable__Column--color .share-icon {
+  height: 12px;
+  width: 12px;
+  border-radius: 2px;
+}
+.Layer__DetailedTable__Column--percent {
+  width: 4ch;
+  padding-left: 0;
+  text-align: right;
+}
+.Layer__DetailedTable__Column--percent .share-text {
+  font-size: var(--text-sm);
+  line-height: 140%;
+}
+.Layer__DetailedTable__row {
+  border-radius: 2px;
+  background: transparent;
+  transition: background-color 300ms ease-out;
+}
+.Layer__DetailedTable__row.active {
+  background: var(--color-base-50);
+}
+.Layer__DetailedTable__SortableColumn--value, .Layer__DetailedTable__Column--value {
+  text-align: right;
+}
+.Layer__DetailedTable__sortArrows {
+  position: relative;
+  top: 1px;
+}
+.Layer__DetailedTable__sortArrows .Layer__SortArrows__DescArrow,
+.Layer__DetailedTable__sortArrows .Layer__SortArrows__AscArrow {
+  stroke: var(--color-base-500);
+}
+.Layer__DetailedTable__SortableColumn--sortdesc .Layer__DetailedTable__sortArrows .Layer__SortArrows__DescArrow {
+  stroke: var(--color-base-1000);
+}
+.Layer__DetailedTable__SortableColumn--sortasc .Layer__DetailedTable__sortArrows .Layer__SortArrows__AscArrow {
+  stroke: var(--color-base-1000);
+}
+
+@container (max-width: 1023px) and (min-width: 768px) {
+  .Layer__DetailedTable {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
+@container (max-width: 767px) {
+  .Layer__DetailedTable {
+    width: 100%;
+    padding-inline: var(--spacing-md);
+  }
 }.Layer__ProfitAndLossDetailReport {
   --pnl-detail-table-cols:
     minmax(7.5rem, 8%)
@@ -4569,29 +4718,93 @@
   box-sizing: border-box;
   width: clamp(48rem, 100%, 1406px);
   container-type: inline-size;
+}.Layer__UI__Tree {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+.Layer__UI__TreeItem {
+  outline: none;
+}.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-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;
+}
+.Layer__TreeNavigation .Layer__UI__TreeItem[aria-level="1"] {
+  background-color: var(--color-base-0);
+}
+.Layer__TreeNavigation .Layer__UI__TreeItem[aria-level="2"] {
+  background-color: var(--color-base-50);
+}
+.Layer__TreeNavigation .Layer__UI__TreeItem[data-hovered] {
+  background-color: var(--color-base-100);
+}
+.Layer__TreeNavigation .Layer__UI__TreeItem[data-selected] {
+  font-weight: var(--font-weight-bold);
+}
+.Layer__TreeNavigation .Layer__UI__TreeItem[data-selected]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 2px;
+  background: black;
+}
+.Layer__TreeNavigation .Layer__UI__TreeItem[data-selected] .Layer__TreeNavigation__Check {
+  visibility: visible;
+}
+
+.Layer__TreeNavigation__Chevron {
+  padding: 0;
+  border: none;
+  background: transparent;
+  transition: transform var(--transition-speed) ease;
+}
+
+.Layer__UI__TreeItem[data-expanded] .Layer__TreeNavigation__Chevron {
+  transform: rotate(90deg);
+}.Layer__TreeNavigationSkeleton {
+  width: 100%;
+}
+.Layer__TreeNavigationSkeleton__Group, .Layer__TreeNavigationSkeleton__Leaf {
+  height: var(--spacing-5xl);
+  padding-inline: var(--spacing-md);
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__TreeNavigationSkeleton__Leaf {
+  padding-inline-start: calc(var(--spacing-lg) + var(--spacing-md));
+  background-color: var(--color-base-50);
+}.Layer__ReportsNavigation__GroupLabel {
+  min-width: 0;
+}
+
+.Layer__ReportsNavigation__GroupIcon {
+  color: var(--color-base-500);
 }.Layer__ExpandButton {
   height: 16px;
   min-width: 16px;
-  transition: transform 0.1s ease-in-out;
 }
 .Layer__ExpandButton--collapsed {
-  transform: rotate(0deg);
+  transform: rotate(-90deg);
 }
 .Layer__ExpandButton--expanded {
-  transform: rotate(180deg);
+  transform: rotate(0deg);
 }.Layer__UI__Table__UnifiedReport {
   min-width: 100%;
 }
 .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column,
 .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell {
   display: table-cell;
-  text-align: end;
-}
-.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column__UnifiedReport--displayName,
-.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell__UnifiedReport--displayName {
-  text-align: start;
 }.Layer__UnifiedReport__Header {
-  height: 4.75rem;
   border-bottom: 1px solid var(--border-color);
 }
 @container (width <= 768px) {
@@ -4620,25 +4833,52 @@
 }.Layer__UnifiedReport {
   overflow: hidden;
   min-width: clamp(24rem, 100%, 1406px);
+}
+.Layer__UnifiedReport .Layer__view-main.Layer__view-main {
+  padding: 0;
+}
+
+.Layer__UnifiedReport__Sidebar {
+  flex-shrink: 0;
+  width: 18rem;
+  border-right: 1px solid var(--color-base-300);
+}
+
+.Layer__UnifiedReport__Content {
+  min-width: 0;
 }.Layer__AddToCalendar__CalendarIcon {
   height: 1rem;
   width: 1rem;
-}.Layer__call-booking {
+}.Layer__CallBooking {
   padding: var(--spacing-lg);
 }
-.Layer__call-booking .Layer__call-booking-details {
+.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);
+  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__call-booking .Layer__call-booking-actions {
-  position: relative;
+.Layer__CallBooking .Layer__CallBooking__Actions {
   width: 100%;
 }
-.Layer__call-booking .Layer__call-booking-state {
-  text-align: center;
+.Layer__CallBooking .Layer__CallBooking__Actions > * {
+  flex: 1;
+  min-width: 0;
 }
 
 @media (width <= 480px) {
-  .Layer__call-booking {
+  .Layer__CallBooking {
     padding: var(--spacing-md);
   }
 }.Layer__YearPicker {
@@ -4772,6 +5012,40 @@
 }
 .Layer__project-view .Layer__select__menu {
   z-index: 2;
+}.Layer__FilingStatusComboBox {
+  display: grid;
+  grid-template-areas: "label" "input";
+  gap: var(--spacing-3xs);
+}
+.Layer__FilingStatusComboBox--inline {
+  grid-template-areas: "label input";
+  gap: 0;
+  align-items: center;
+}.Layer__UsStateComboBox {
+  display: grid;
+  grid-template-areas: "label" "input";
+  gap: var(--spacing-3xs);
+}
+.Layer__UsStateComboBox--inline {
+  grid-template-areas: "label input";
+  gap: 0;
+  align-items: center;
+}.Layer__TaxProfileForm {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.Layer__TaxProfileForm__Content .Layer__Checkbox > .Layer__Span {
+  margin-inline-start: var(--spacing-xs);
+}
+.Layer__TaxProfileForm .Layer__TaxProfileForm__Section {
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
+  background: var(--color-base-50);
+}
+.Layer__TaxProfileForm .Layer__TaxProfileForm__Field--desktop {
+  grid-template-columns: 16rem minmax(auto, 24rem);
 }.Layer__ExpandableCard {
   border-radius: 0;
   border: none;
@@ -4855,120 +5129,711 @@
   align-items: baseline;
   width: fit-content;
 }
-.Layer__TaxSummaryCard__Grid > .Layer__Span {
-  text-align: right;
+.Layer__TaxSummaryCard__Grid > .Layer__Span {
+  text-align: right;
+}
+.Layer__TaxSummaryCard__Grid--mobile {
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  column-gap: var(--spacing-sm);
+  width: 100%;
+}
+.Layer__TaxSummaryCard__SectionGroup {
+  display: contents;
+}
+.Layer__TaxSummaryCard__SectionGroup > .Layer__Span:first-child {
+  grid-column: 1/-1;
+  text-align: left;
+}
+.Layer__TaxSummaryCard__SectionGroup:not(:first-child) > .Layer__Span:first-child {
+  padding-block-start: var(--spacing-md);
+  margin-block-start: var(--spacing-3xs);
+  border-block-start: 1px solid var(--color-base-100);
+}
+.Layer__TaxSummaryCard--mobile {
+  width: 100%;
+}
+.Layer__TaxSummaryCard__OverviewCard {
+  padding: var(--spacing-lg);
+}
+.Layer__TaxSummaryCard__BreakdownCard {
+  padding: var(--spacing-lg);
+}.Layer__FullYearProjectionComboBox__Container {
+  inline-size: 11rem;
+  max-inline-size: 11rem;
+}
+@container (max-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;
+  }
+  .Layer__TaxEstimatesHeader__ComboBoxContainer {
+    width: 100%;
+  }
+}.Layer__TaxDetails--mobile .Layer__TaxSummaryCard--mobile > .Layer__card,
+.Layer__TaxDetails--mobile .Layer__TaxDetails__ExpandableCardsWrapper {
+  border: 1px solid var(--color-base-200);
+  box-shadow: none;
+}
+
+.Layer__TaxDetails__ExpandableCardsWrapper {
+  overflow: hidden;
+  border-radius: var(--spacing-sm);
+}.Layer__SummaryCard__ContainerHeader {
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--color-base-300);
+}
+
+.Layer__TaxEstimatesSummaryCard__Container {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.Layer__TaxEstimatesSummaryCard {
+  min-width: 0;
+}
+.Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
+  height: 12rem;
+  max-width: 18rem;
+}
+@media (width >= 760px) {
+  .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
+    width: 18rem;
+  }
+}
+.Layer__TaxEstimatesSummaryCard.Layer__card {
+  gap: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-base-200);
+  box-shadow: none;
+}
+.Layer__TaxEstimatesSummaryCard__Content {
+  justify-content: space-between;
+  min-width: 0;
+}
+.Layer__TaxEstimatesSummaryCard__Content--mobile {
+  align-items: center;
+}
+.Layer__TaxEstimatesSummaryCard__Header, .Layer__TaxEstimatesSummaryCard__Body {
+  min-width: 0;
+}
+.Layer__TaxEstimatesSummaryCard--summaryCard.Layer__card {
+  gap: 0;
+  width: auto;
+  max-width: 100%;
+  padding: 0;
+}
+.Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Header {
+  padding: var(--spacing-lg);
+}
+.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;
+}
+
+.Layer__MetricCard {
+  min-width: 0;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius-xs);
+  background-color: var(--color-base-50);
+}
+
+.Layer__MetricCard__Label {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.Layer__MetricCard__Meter {
+  flex: 1;
+  min-width: 0;
+}
+
+.Layer__MetricRow__Value {
+  flex: 0 0 56%;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.Layer__MetricCard .Layer__MoneySpan {
+  flex-shrink: 0;
+}
+
+@container (max-width: 720px) {
+  .Layer__MetricRow,
+  .Layer__MetricRow__Value {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .Layer__MetricRow__Value {
+    flex-basis: auto;
+  }
+}.Layer__TaxOverview__Card {
+  --color-tax-overview-income-meter-fill: #6d3cc8;
+  --color-tax-overview-deductions-meter-fill: #1c7e9a;
+  --color-tax-overview-taxable-income-meter-fill: #3b9c63;
+  --color-tax-overview-unknown-meter-fill: var(--color-base-500);
+  gap: var(--spacing-lg);
+  padding: var(--spacing-lg);
+}
+.Layer__TaxOverview__Card .Layer__card {
+  border: 1px solid var(--color-base-200);
+  box-shadow: none;
+}
+
+.Layer__TaxOverview__Meter {
+  flex: 1;
+  min-width: 9rem;
+}
+
+.Layer__TaxOverview__Meter__track {
+  fill: var(--color-base-100);
+}
+
+.Layer__TaxOverview__IncomeMeter.Layer__TaxOverview__Meter__fill {
+  fill: var(--color-tax-overview-income-meter-fill);
+}
+
+.Layer__TaxOverview__DeductionsMeter.Layer__TaxOverview__Meter__fill {
+  fill: var(--color-tax-overview-deductions-meter-fill);
+}
+
+.Layer__TaxOverview__TaxableIncomeMeter.Layer__TaxOverview__Meter__fill {
+  fill: var(--color-tax-overview-taxable-income-meter-fill);
+}
+
+.Layer__TaxOverview__UnknownMetricMeter.Layer__TaxOverview__Meter__fill {
+  fill: var(--color-tax-overview-unknown-meter-fill);
+}
+
+@container (max-width: 720px) {
+  .Layer__TaxOverview__Card {
+    gap: var(--spacing-md);
+    padding: 0;
+  }
+}
+.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 {
+  inline-size: min(100%, 1406px);
+  container-type: inline-size;
+}.Layer__TaxPaymentsMobileList .Layer__TaxPayments__ErrorState,
+.Layer__TaxPaymentsMobileList .Layer__TaxPayments__EmptyState {
+  padding: var(--spacing-sm);
+  padding-top: var(--spacing-lg);
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--color-base-0);
+}.Layer__UI__Table__TaxPaymentsTable {
+  width: 100%;
+  table-layout: fixed;
+}
+.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Row,
+.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(8rem, 24%) repeat(4, minmax(6rem, 19%));
+}
+.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--RolledOverFromPrevious, .Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--RemainingBalance, .Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--Estimated, .Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--Paid,
+.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--RolledOverFromPrevious,
+.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--RemainingBalance,
+.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--Estimated,
+.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--Paid {
+  justify-content: flex-end;
+  text-align: right;
+}
+.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;
+}
+
+.Layer__TimeTrackingServicesDrawer__tabs .Layer__UI__Toggle[data-size=xsmall] {
+  height: auto;
+  padding: 2px;
+  border-radius: var(--border-radius-2xs);
+}
+.Layer__TimeTrackingServicesDrawer__tabs .Layer__UI__Toggle[data-size=xsmall] .Layer__UI__ToggleOption {
+  height: 26px;
+  padding: 4px 12px;
+  border-radius: var(--border-radius-2xs);
+}
+.Layer__TimeTrackingServicesDrawer__tabs .Layer__UI__Toggle[data-size=xsmall] .Layer__UI__ToggleOption-SelectionIndicator {
+  border-radius: var(--border-radius-2xs);
+}
+
+.Layer__TimeTrackingServicesDrawer__addWrap {
+  overflow: hidden;
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--border-color);
+}
+
+.Layer__TimeTrackingServicesDrawer__accordion {
+  overflow: hidden;
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--border-color);
+}
+.Layer__TimeTrackingServicesDrawer__accordion .Layer__ExpandableCard:first-child {
+  border-top: none;
+}
+
+.Layer__TimeTrackingServicesDrawer__archivedList {
+  overflow: hidden;
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--border-color);
+}
+
+.Layer__TimeTrackingServicesDrawer__archivedRow {
+  box-sizing: border-box;
+  border-block-start: 1px solid var(--border-color);
+  background-color: var(--color-base-0);
+}
+.Layer__TimeTrackingServicesDrawer__archivedRow:first-child {
+  border-block-start: none;
+}
+.Layer__TimeTrackingServicesDrawer__archivedRow .Layer__UI__Button {
+  gap: var(--spacing-2xs);
+  padding-inline: var(--spacing-sm);
+}
+
+.Layer__TimeTrackingServicesDrawer__rowName {
+  flex: 1;
+  min-width: 0;
+}
+
+.Layer__TimeTrackingServicesDrawer__rowRate {
+  flex-shrink: 0;
+}
+
+.Layer__TimeTrackingServicesDrawer__addCard {
+  box-sizing: border-box;
+  background-color: var(--bg-subtle);
+}
+
+.Layer__TimeTrackingServicesDrawer__editForm {
+  box-sizing: border-box;
+  margin-inline: calc(-1 * var(--spacing-md));
+  background-color: var(--bg-subtle);
+  border-block-start: 1px solid var(--color-base-300);
+}
+
+.Layer__TimeTrackingServicesDrawer__rateField {
+  display: grid;
+  gap: var(--spacing-3xs);
+}.Layer__TimeEntryServiceSelector {
+  display: grid;
+  grid-template-areas: "label" "input";
+  gap: var(--spacing-3xs);
+}
+.Layer__TimeEntryServiceSelector--inline {
+  grid-template-areas: "label input";
+  gap: 0;
+  align-items: center;
+}.Layer__component-container.Layer__ActiveTimeTracker {
+  --border-color: #000;
+  --bg-color: #000;
+}
+
+.Layer__ActiveTimeTracker__Main {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
+}
+
+.Layer__ActiveTimeTracker__Controls {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.Layer__ActiveTimeTracker__InlineFields {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.Layer__ActiveTimeTracker__Timer {
+  min-inline-size: 10rem;
+}
+
+.Layer__ActiveTimeTracker__TimerDot {
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--color-info-success);
+}
+
+.Layer__ActiveTimeTracker__TimerValue {
+  font-size: 1.75rem;
+  line-height: 1;
+  color: var(--color-base-0);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+}
+
+.Layer__ActiveTimeTracker__Actions {
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+.Layer__ActiveTimeTracker__Actions .Layer__UI__Button[data-variant=text] {
+  color: var(--color-base-300);
+}
+
+.Layer__ActiveTimeTracker__DrawerContent {
+  padding-block-end: var(--spacing-lg);
+  padding-inline: var(--spacing-lg);
+}
+
+.Layer__ActiveTimeTracker__DurationValue {
+  font-size: var(--text-heading-3xl);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.Layer__ActiveTimeTracker__DurationLabel {
+  text-transform: uppercase;
+}
+
+.Layer__ActiveTimeTracker__Field__Service,
+.Layer__ActiveTimeTracker__Field__Customer,
+.Layer__ActiveTimeTracker__Field__Memo {
+  grid-template-columns: 10rem auto;
+  width: 100%;
+}
+
+.Layer__ActiveTimeTracker__Field--inline {
+  flex: 1 1 14rem;
+  grid-template-columns: minmax(0, 1fr);
+  width: auto;
+  min-inline-size: 0;
+  max-inline-size: 18rem;
+}
+
+@container (max-width: 1100px) {
+  .Layer__ActiveTimeTracker__Controls {
+    flex-wrap: wrap;
+    align-items: flex-end;
+    inline-size: 100%;
+  }
+  .Layer__ActiveTimeTracker__InlineFields {
+    flex-wrap: wrap;
+    inline-size: 100%;
+  }
+  .Layer__ActiveTimeTracker__Actions {
+    justify-content: flex-end;
+    inline-size: 100%;
+  }
+}
+@container (max-width: 760px) {
+  .Layer__ActiveTimeTracker__Main[data-direction=row] {
+    flex-direction: column;
+  }
+  .Layer__ActiveTimeTracker__Main[data-align=center] {
+    align-items: flex-start;
+  }
+  .Layer__ActiveTimeTracker__Main[data-justify=space-between] {
+    justify-content: flex-start;
+  }
+  .Layer__ActiveTimeTracker__Controls[data-direction=row] {
+    flex-direction: column;
+  }
+  .Layer__ActiveTimeTracker__Controls[data-align=center] {
+    align-items: stretch;
+  }
+  .Layer__ActiveTimeTracker__TimerValue {
+    font-size: 1.5rem;
+  }
+  .Layer__ActiveTimeTracker__Controls {
+    inline-size: 100%;
+  }
+  .Layer__ActiveTimeTracker__InlineFields[data-align=center] {
+    align-items: stretch;
+  }
+  .Layer__ActiveTimeTracker__InlineFields {
+    inline-size: 100%;
+  }
+  .Layer__ActiveTimeTracker__Field--inline {
+    flex-basis: 100%;
+    max-inline-size: 100%;
+  }
+  .Layer__ActiveTimeTracker__Actions {
+    justify-content: space-between;
+    inline-size: 100%;
+  }
+}
+@container (min-width: 761px) {
+  .Layer__ActiveTimeTracker__Main[data-direction=row] {
+    flex-direction: row;
+  }
+  .Layer__ActiveTimeTracker__Main[data-align=center] {
+    align-items: center;
+  }
+  .Layer__ActiveTimeTracker__Main[data-justify=space-between] {
+    justify-content: space-between;
+  }
+  .Layer__ActiveTimeTracker__Controls[data-direction=row] {
+    flex-direction: row;
+  }
+  .Layer__ActiveTimeTracker__Controls[data-align=center] {
+    align-items: center;
+  }
+  .Layer__ActiveTimeTracker__Controls {
+    flex-wrap: nowrap;
+    inline-size: auto;
+  }
+  .Layer__ActiveTimeTracker__InlineFields {
+    flex-wrap: nowrap;
+    inline-size: auto;
+  }
+  .Layer__ActiveTimeTracker__Actions {
+    justify-content: normal;
+    inline-size: auto;
+  }
+}.Layer__TimeEntriesTable__FilterCustomer,
+.Layer__TimeEntriesTable__FilterService {
+  flex: 0 0 12rem;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (max-width: 760px) {
+  .Layer__TimeEntriesTable .Layer__DataTableHeader__Header {
+    height: auto;
+    padding-block: var(--spacing-sm);
+  }
+  .Layer__TimeEntriesTable .Layer__DataTableHeader__Header[data-direction=row] {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: stretch;
+  }
+  .Layer__TimeEntriesTable .Layer__DataTableHeader__Header > .Layer__Stack:first-child,
+  .Layer__TimeEntriesTable .Layer__DataTableHeader__Header > .Layer__Stack:last-child {
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding-inline: var(--spacing-md);
+  }
+  .Layer__TimeEntriesTable .Layer__DataTableHeader__Header > .Layer__Stack:first-child {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: stretch;
+  }
+  .Layer__TimeEntriesTable .Layer__DataTableHeader__Header > .Layer__Stack:last-child {
+    justify-content: flex-start;
+  }
+  .Layer__TimeEntriesTable .Layer__DataTableHeader__Header > .Layer__Stack:last-child > .Layer__Stack {
+    flex-wrap: wrap;
+    inline-size: 100%;
+  }
+  .Layer__TimeEntriesTable .Layer__TimeEntriesTable__Filters[data-direction=row] {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: stretch;
+  }
+  .Layer__TimeEntriesTable .Layer__TimeEntriesTable__FilterCustomer,
+  .Layer__TimeEntriesTable .Layer__TimeEntriesTable__FilterService {
+    flex: 1 1 auto;
+  }
+}.Layer__TimeEntriesTable {
+  overflow: hidden;
+  width: min(100%, 1406px);
+}
+
+.Layer__UI__Table__TimeEntriesTable {
+  table-layout: fixed;
+  width: 100%;
+}
+.Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-Row,
+.Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.9fr) minmax(10rem, 1.35fr) minmax(10rem, 1.35fr) 5rem;
+}
+.Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-Column__TimeEntriesTable--Actions,
+.Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-Cell__TimeEntriesTable--Actions {
+  justify-content: flex-end;
+}
+
+@container (max-width: 760px) {
+  .Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-Row,
+  .Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-TableHeader > tr {
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.2fr) 4.5rem;
+  }
+  .Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-Column__TimeEntriesTable--Service,
+  .Layer__UI__Table__TimeEntriesTable .Layer__UI__Table-Cell__TimeEntriesTable--Service {
+    display: none;
+  }
+}.Layer__TimeEntryForm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  max-width: 44rem;
+  padding-inline: var(--spacing-lg);
+}
+.Layer__TimeEntryForm .Layer__TimeEntryForm__FormError {
+  padding-block-end: var(--spacing-xs);
 }
-.Layer__TaxSummaryCard__Grid--mobile {
-  grid-template-columns: 1fr auto 1fr auto 1fr;
-  column-gap: var(--spacing-sm);
+.Layer__TimeEntryForm .Layer__TimeEntryForm__Field__EntryDate,
+.Layer__TimeEntryForm .Layer__TimeEntryForm__Field__Duration,
+.Layer__TimeEntryForm .Layer__TimeEntryForm__Field__Service,
+.Layer__TimeEntryForm .Layer__TimeEntryForm__Field__Customer,
+.Layer__TimeEntryForm .Layer__TimeEntryForm__Field__Memo {
+  grid-template-columns: 10rem auto;
   width: 100%;
 }
-.Layer__TaxSummaryCard__SectionGroup {
-  display: contents;
+.Layer__TimeEntryForm .Layer__TimeEntryForm__Submit {
+  align-items: flex-end;
+  padding-block-start: 1rem;
+}.Layer__TimeTrackingStats__Content {
+  container: time-tracking-stats/inline-size;
 }
-.Layer__TaxSummaryCard__SectionGroup > .Layer__Span:first-child {
-  grid-column: 1/-1;
-  text-align: left;
+
+.Layer__TimeTrackingStats__TopRow {
+  min-inline-size: 0;
 }
-.Layer__TaxSummaryCard__SectionGroup:not(:first-child) > .Layer__Span:first-child {
-  padding-block-start: var(--spacing-md);
-  margin-block-start: var(--spacing-3xs);
-  border-block-start: 1px solid var(--color-base-100);
+
+.Layer__TimeTrackingStats__Controls {
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  min-inline-size: 0;
 }
-.Layer__TaxSummaryCard--mobile {
-  width: 100%;
+
+.Layer__TimeTrackingStats__DateSelection {
+  flex: 0 1 30rem;
+  min-inline-size: 0;
+  container: time-tracking-stats-dates/inline-size;
 }
-.Layer__TaxSummaryCard__OverviewCard {
-  padding: var(--spacing-lg);
+.Layer__TimeTrackingStats__DateSelection .Layer__GlobalDateRangeSelection {
+  inline-size: 100%;
 }
-.Layer__TaxSummaryCard__BreakdownCard {
-  padding: var(--spacing-lg);
-}.Layer__FullYearProjectionComboBox__Container {
-  inline-size: 11rem;
-  max-inline-size: 11rem;
+
+.Layer__TimeTrackingStats__Summary {
+  flex: 0 0 auto;
+  min-inline-size: 0;
 }
-@container (max-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;
-  }
-  .Layer__TaxEstimatesHeader__ComboBoxContainer {
-    width: 100%;
-  }
-}.Layer__TaxDetails--mobile .Layer__TaxSummaryCard--mobile > .Layer__card,
-.Layer__TaxDetails--mobile .Layer__TaxDetails__ExpandableCardsWrapper {
-  border: 1px solid var(--color-base-200);
-  box-shadow: none;
+
+.Layer__TimeTrackingStats__SummaryValue {
+  font-size: var(--text-heading);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
 }
 
-.Layer__TaxDetails__ExpandableCardsWrapper {
-  overflow: hidden;
-  border-radius: var(--spacing-sm);
-}.Layer__TaxPaymentsMobileList .Layer__TaxPayments__ErrorState,
-.Layer__TaxPaymentsMobileList .Layer__TaxPayments__EmptyState {
-  padding: var(--spacing-sm);
-  padding-top: var(--spacing-lg);
-  border-radius: var(--border-radius-sm);
-  border: 1px solid var(--border-color);
-  background-color: var(--color-base-0);
-}.Layer__UI__Table__TaxPaymentsTable {
-  width: 100%;
-  table-layout: fixed;
+.Layer__TimeTrackingStats__Chart {
+  border-top: 1px solid var(--color-base-300);
 }
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Row,
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-TableHeader > tr {
-  display: grid;
-  grid-template-columns: minmax(4rem, 10%) repeat(4, minmax(6rem, 22.5%));
+
+.Layer__TimeTrackingStats__ChartBar {
+  block-size: 1.5rem;
 }
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--OwedFromPrevious, .Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--OwedThisQuarter, .Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--TotalPaid, .Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Column__TaxPaymentsTable--Total,
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--OwedFromPrevious,
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--OwedThisQuarter,
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--TotalPaid,
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Cell__TaxPaymentsTable--Total {
-  justify-content: flex-end;
-  text-align: right;
+.Layer__TimeTrackingStats__ChartBar .recharts-responsive-container {
+  padding: 0;
 }
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Row {
-  background-color: var(--color-base-50);
+
+.Layer__TimeTrackingStats__ChartBar--empty {
+  inline-size: 100%;
+  border-radius: var(--border-radius-xs);
+  background-color: var(--color-base-100);
 }
-.Layer__UI__Table__TaxPaymentsTable .Layer__UI__Table-Row.Layer__DataTable__EmptyState__Row {
-  background-color: var(--color-base-0);
-}.Layer__FilingStatusComboBox {
-  display: grid;
-  grid-template-areas: "label" "input";
-  gap: var(--spacing-3xs);
+
+.Layer__TimeTrackingStats__Legend {
+  flex-wrap: wrap;
 }
-.Layer__FilingStatusComboBox--inline {
-  grid-template-areas: "label input";
-  gap: 0;
-  align-items: center;
-}.Layer__UsStateComboBox {
-  display: grid;
-  grid-template-areas: "label" "input";
-  gap: var(--spacing-3xs);
+
+.Layer__TimeTrackingStats__LegendItem {
+  min-inline-size: 10rem;
 }
-.Layer__UsStateComboBox--inline {
-  grid-template-areas: "label input";
-  gap: 0;
-  align-items: center;
-}.Layer__TaxProfileForm {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+
+.Layer__TimeTrackingStats__LegendSwatch {
+  flex-shrink: 0;
+  block-size: 0.625rem;
+  inline-size: 0.625rem;
 }
-.Layer__TaxProfileForm .Layer__TaxProfileForm__Section {
-  padding: var(--spacing-md);
-  border-radius: var(--border-radius-sm);
-  border: 1px solid var(--border-color);
-  background: var(--color-base-50);
+
+@container time-tracking-stats (max-width: 760px) {
+  .Layer__TimeTrackingStats__TopRow[data-direction=row] {
+    flex-direction: column;
+  }
+  .Layer__TimeTrackingStats__TopRow[data-align=center] {
+    align-items: stretch;
+  }
+  .Layer__TimeTrackingStats__TopRow[data-justify=space-between] {
+    justify-content: flex-start;
+  }
+  .Layer__TimeTrackingStats__Controls[data-direction=row] {
+    flex-direction: column;
+    align-items: stretch;
+    inline-size: 100%;
+  }
+  .Layer__TimeTrackingStats__DateSelection {
+    flex-basis: auto;
+    inline-size: 100%;
+  }
+  .Layer__TimeTrackingStats__DateSelection .Layer__GlobalDateRangeSelection {
+    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+  .Layer__TimeTrackingStats__DateSelection .Layer__GlobalDateRangeSelection.Layer__GlobalDateRangeSelection--mobile {
+    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
+  }
+  .Layer__TimeTrackingStats__DateSelection .Layer__GlobalDateRangeSelection > * {
+    min-inline-size: 0;
+  }
 }
-.Layer__TaxProfileForm .Layer__TaxProfileForm__Field--desktop {
-  grid-template-columns: 16rem minmax(auto, 24rem);
+@container time-tracking-stats (max-width: 430px) {
+  .Layer__TimeTrackingStats__DateSelection .Layer__GlobalDateRangeSelection,
+  .Layer__TimeTrackingStats__DateSelection .Layer__GlobalDateRangeSelection.Layer__GlobalDateRangeSelection--mobile {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@container time-tracking-stats (max-width: 1100px) {
+  .Layer__TimeTrackingStats__Legend {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: stretch;
+  }
+  .Layer__TimeTrackingStats__LegendItem {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    row-gap: 0;
+    column-gap: var(--spacing-sm);
+    align-items: center;
+    min-inline-size: 100%;
+  }
+  .Layer__TimeTrackingStats__LegendLabel {
+    min-inline-size: 0;
+  }
+  .Layer__TimeTrackingStats__LegendLabel .Layer__UI__Text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .Layer__TimeTrackingStats__LegendDuration,
+  .Layer__TimeTrackingStats__LegendPercentage {
+    white-space: nowrap;
+  }
+  .Layer__TimeTrackingStats__LegendDuration {
+    justify-self: end;
+  }
+  .Layer__TimeTrackingStats__LegendPercentage {
+    justify-self: end;
+    min-inline-size: 2.25rem;
+    text-align: right;
+  }
 }.Layer__toasts-container {
   position: fixed;
   z-index: 1000;
@@ -5270,19 +6135,6 @@
 .Layer__component *::-webkit-scrollbar-thumb:hover {
   background: #999;
 }
-.Layer__sortable-col.value-col {
-  text-align: right;
-}
-.Layer__sortable-col .Layer__sort-arrows .desc-arrow,
-.Layer__sortable-col .Layer__sort-arrows .asc-arrow {
-  stroke: var(--color-base-500);
-}
-.Layer__sortable-col.sort--desc .Layer__sort-arrows .desc-arrow {
-  stroke: var(--color-base-1000);
-}
-.Layer__sortable-col.sort--asc .Layer__sort-arrows .asc-arrow {
-  stroke: var(--color-base-1000);
-}
 /* stylelint-disable-next-line keyframes-name-pattern */
 @keyframes Layer__rotate {
   from {
@@ -6985,7 +7837,7 @@ tbody .Layer__table__empty-row:first-child {
   overflow: auto;
   width: 100%;
   max-width: 100%;
-  padding: 0 var(--spacing-md);
+  padding: 0 var(--spacing-lg);
   border-bottom: 1px solid var(--border-color);
   container-type: inline-size;
 }
@@ -7000,14 +7852,14 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
   min-height: 44px;
   width: 100%;
-  padding: var(--spacing-md) var(--spacing-sm);
+  padding: var(--spacing-md) 0;
 }
 .Layer__view .Layer__view-header__content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  max-width: 1460px;
+  max-width: 1406px;
 }
 .Layer__view .Layer__view-header--paddings .Layer__view-header__content {
   padding: var(--spacing-md);
@@ -9088,6 +9940,11 @@ tbody .Layer__table__empty-row:first-child {
   background-size: 200% 100%;
   animation: 1.5s shine linear infinite;
 }
+.Layer__skeleton-loader--circle {
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+}
 .Layer__syncing-component {
   display: flex;
   gap: var(--spacing-md);
@@ -9265,9 +10122,6 @@ tbody .Layer__table__empty-row:first-child {
     fill: var(--color-base-50);
   }
 }
-.Layer__profit-and-loss-detailed-charts__pie--border {
-  stroke: var(--color-base-200);
-}
 #layer-bar-stripe-pattern rect {
   fill: var(--color-light);
 }
@@ -9421,15 +10275,18 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts__head > .Layer__text {
   margin: 0;
 }
+.Layer__ProfitAndLossDetailedCharts__DatePickerHeader--tablet {
+  display: none;
+}
 .Layer__profit-and-loss-detailed-charts {
   width: 100%;
   border-radius: var(--border-radius-sm);
   background: var(--color-base-0);
 }
-.Layer__profit-and-loss-detailed-charts .chart-field {
+.Layer__profit-and-loss-detailed-charts .Layer__DetailedChart {
   width: 100%;
 }
-.Layer__profit-and-loss-detailed-charts .chart-container {
+.Layer__profit-and-loss-detailed-charts .Layer__DetailedChart__container {
   box-sizing: border-box;
   height: 280px;
   width: 100%;
@@ -9453,112 +10310,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__empty-chart-icon {
   color: var(--color-base-400);
 }
-.Layer__profit-and-loss-detailed-charts .pie-center-label__title,
-.Layer__profit-and-loss-detailed-charts .pie-center-label__share {
-  fill: var(--color-base-600);
-  font-size: 12px;
-}
-.Layer__profit-and-loss-detailed-charts .pie-center-label__value {
-  fill: var(--text-color-primary);
-  font-size: 14px;
-}
-.Layer__profit-and-loss-detailed-charts .pie-center-label__loading {
-  fill: var(--color-base-600);
-  font-size: 14px;
-}
-.Layer__profit-and-loss-detailed-charts .details-container {
-  padding: var(--spacing-md);
-  padding-top: var(--spacing-2xs);
-}
-.Layer__profit-and-loss-detailed-charts .details-container table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th,
-.Layer__profit-and-loss-detailed-charts .details-container table td {
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  font-size: 12px;
-  text-align: left;
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th:first-child,
-.Layer__profit-and-loss-detailed-charts .details-container table td:first-child {
-  width: 20px;
-  padding-right: 0;
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th:last-child,
-.Layer__profit-and-loss-detailed-charts .details-container table td:last-child {
-  text-align: right;
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th.percent-col,
-.Layer__profit-and-loss-detailed-charts .details-container table td.percent-col {
-  width: 4ch;
-  padding-left: 0;
-  text-align: right;
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th {
-  padding-bottom: var(--spacing-sm);
-  border-bottom: 1px solid var(--color-base-300);
-  cursor: pointer;
-  color: var(--color-base-500);
-  transition: color 150ms ease-out;
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th:first-child {
-  cursor: default;
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th:hover {
-  color: var(--color-base-800);
-}
-.Layer__profit-and-loss-detailed-charts .details-container table th.sort--asc, .Layer__profit-and-loss-detailed-charts .details-container table th.sort--desc {
-  color: var(--color-base-1000);
-}
-.Layer__profit-and-loss-detailed-charts .details-container .Layer__sort-arrows {
-  position: relative;
-  top: 1px;
-}
-.Layer__profit-and-loss-detailed-charts .details-container .color-col .share-icon {
-  height: 12px;
-  width: 12px;
-  border-radius: 2px;
-}
-.Layer__profit-and-loss-detailed-charts .details-container .percent-col .share-text {
-  font-size: var(--text-sm);
-  line-height: 140%;
-  color: var(--color-base-600);
-}
-.Layer__profit-and-loss-detailed-charts .details-container tbody tr {
-  height: 2.5rem;
-}
-.Layer__profit-and-loss-detailed-table__row {
-  border-radius: 2px;
-  background: transparent;
-  transition: background-color 300ms ease-out;
-}
-.Layer__profit-and-loss-detailed-table__row .category-col,
-.Layer__profit-and-loss-detailed-table__row .value-col {
-  color: var(--text-color-primary);
-}
-.Layer__profit-and-loss-detailed-table__row .type-col,
-.Layer__profit-and-loss-detailed-table__row .percent-col {
-  color: var(--color-base-500);
-}
-.Layer__profit-and-loss-detailed-table__row.active {
-  background: var(--color-base-50);
-}
-.Layer__profit-and-loss-detailed-table__row.active .category-col,
-.Layer__profit-and-loss-detailed-table__row.active .value-col,
-.Layer__profit-and-loss-detailed-table__row.active .type-col,
-.Layer__profit-and-loss-detailed-table__row.active .percent-col {
-  color: var(--color-base-1000);
-}
-.Layer__profit-and-loss-detailed-charts__pie {
-  transition: fill 1000ms ease-out;
-}
-.Layer__profit-and-loss-detailed-charts__pie.inactive {
-  fill: var(--color-base-300);
-}
-.Layer__profit-and-loss-detailed-charts .header--tablet {
-  display: none;
-}
 @container (max-width: 1023px) {
   .Layer__profit-and-loss-detailed-charts {
     height: 100%;
@@ -9566,17 +10317,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
 }
 @container (max-width: 1023px) and (min-width: 768px) {
+  .Layer__ProfitAndLossDetailedCharts__DatePickerHeader--tablet {
+    display: flex;
+  }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
-  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-field {
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .Layer__DetailedChart {
     display: flex;
     flex-direction: column;
     max-width: 300px;
   }
-  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-container {
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .Layer__DetailedChart__container {
     max-width: 300px;
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .Layer__profit-and-loss-detailed-charts__empty-chart {
@@ -9587,18 +10341,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     flex: 1;
     flex-direction: column;
   }
-  .Layer__profit-and-loss-detailed-charts .header--tablet {
-    display: flex;
-    flex-direction: column;
-    padding-top: var(--spacing-lg);
-    padding-left: var(--spacing-xl);
-  }
-  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__text {
-    margin: 0;
-  }
-  .Layer__profit-and-loss-detailed-charts .header--tablet .title {
-    font-size: 24px;
-  }
 }
 @container (max-width: 767px) {
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content {