@layerfi/components 0.1.7 → 0.1.9

package/dist/styles/index.css

@@ -58,7 +58,7 @@
   --text-heading: 24px;
   --text-heading-sm: 16px;
   --font-weight-normal: 460;
-  --font-weight-bold: 580;
+  --font-weight-bold: 540;
   --spacing-4xs: 2px;
   --spacing-3xs: 4px;
   --spacing-2xs: 6px;
@@ -106,6 +106,7 @@
   --tooltip-bg-color: var(--color-base-800);
   --bar-color-income: var(--color-base-400);
   --bar-color-expenses: var(--color-base-900);
+  --chart-indicator-color: var(--color-base-700);
   --color-alabaster: #f9f9f9;
   --color-athens-gray: #eaecf0;
   --color-blue-ribbon: #0c48e5;
@@ -122,7 +123,6 @@
   --buttons-border-color: var(--color-mischke);
   --button-color-dark: var(--color-fiord);
   --corner-radius: 0.5rem;
-  --indicator-color: var(--color-mine-shaft);
   --table-border-color: var(--color-athens-gray);
   --table-expanded-background-color: var(--color-alabaster);
   --text-color: var(--color-ebony);
@@ -424,6 +424,12 @@
 .Layer__chart__tooltip-list .Layer__chart__tooltip-value {
   color: var(--color-base-300);
 }
+.Layer__chart__tooltip-list .Layer__chart__tooltip-value.positive {
+  color: var(--color-success);
+}
+.Layer__chart__tooltip-list .Layer__chart__tooltip-value.negative {
+  color: var(--color-danger);
+}
 .Layer__component-container {
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--border-color);
@@ -473,6 +479,27 @@
   display: flex;
   flex-direction: column;
 }
+.Layer__input-group.Layer__input-group--inline {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  flex: 1;
+}
+.Layer__input-group.Layer__input-group--inline label {
+  width: 33%;
+  flex: 1 1 auto;
+  display: flex;
+}
+.Layer__input-group.Layer__input-group--inline input {
+  flex: 3 3 auto;
+}
+.Layer__input-group.Layer__input-group--inline .Layer__input-tooltip {
+  flex: 3 3 auto;
+  width: 100%;
+}
+.Layer__input-group.Layer__input-group--inline .Layer__input {
+  width: 100%;
+}
 .Layer__input-label {
   padding: var(--spacing-2xs);
   color: var(--label-color);
@@ -654,6 +681,29 @@
 .Layer__select .Layer__select__control--is-focused {
   box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
 }
+.Layer__select .Layer__select__multi-value {
+  border-radius: var(--border-radius-3xs);
+  background-color: var(--color-base-100);
+  color: var(--color-base-700);
+}
+.Layer__select .Layer__select__multi-value .Layer__select__multi-value__remove:hover {
+  background: #f3b9b9;
+  color: var(--color-danger);
+  cursor: pointer;
+}
+.Layer__select .Layer__select__multi-all-placeholder-badge {
+  border-radius: var(--border-radius-3xs);
+  background-color: var(--color-base-100);
+  color: var(--color-base-700);
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  line-height: 120%;
+  height: 24px;
+  box-sizing: border-box;
+}
+.Layer__select .Layer__select__menu-notice {
+  white-space: nowrap;
+  font-size: 12px;
+}
 .Layer__select .Layer__select__indicator-separator {
   display: none;
 }
@@ -780,6 +830,42 @@
     font-size: var(--text-sm) !important;
   }
 }
+.Layer__profit-and-loss-date-picker {
+  width: 210px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.25rem;
+  border: 1px solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+}
+.Layer__profit-and-loss-date-picker__button {
+  padding: 0.25rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background-color: var(--color-base-0);
+  border: 0;
+  border-radius: var(--input-border-radius);
+}
+.Layer__profit-and-loss-date-picker__button:active {
+  background-color: var(--color-base-0);
+}
+.Layer__profit-and-loss-date-picker__button-icon path {
+  stroke: var(--text-color);
+}
+.Layer__profit-and-loss-date-picker__label {
+  flex: 1;
+  font-size: 14px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  padding: 0 var(--spacing-xs);
+}
 .Layer__table {
   width: 100%;
   border-collapse: separate;
@@ -907,6 +993,7 @@
     "cv08" on,
     "ss03" on;
   line-height: 140%;
+  margin: 0;
 }
 .Layer__text--sm {
   font-size: var(--text-sm);
@@ -2240,147 +2327,238 @@
     border-right-color: transparent;
   }
 }
-.Layer__chart-of-accounts {
-  background-color: var(--background-color);
-  border: 1px solid var(--border-color);
-  border-radius: var(--corner-radius);
+.Layer__component-container.Layer__ledger-accounts {
+  display: flex;
+  align-items: stretch;
+  position: relative;
 }
-.Layer__chart-of-accounts * {
-  color: var(--text-color);
-  stroke: var(--text-color);
-  font-family: Inter;
-  font-weight: 500;
-  font-style: normal;
+.Layer__ledger-accounts__loader-container {
+  padding: var(--spacing-2xl);
 }
-.Layer__chart-of-accounts__table {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr auto;
-  gap: 1px 0;
-  font-size: 1rem;
+.Layer__ledger-accounts__main-panel {
+  padding-bottom: var(--spacing-lg);
+  flex: 1;
+}
+.Layer__ledger-accounts__sidebar {
+  width: 480px;
+  max-width: 0;
+  overflow: hidden;
+  transition: max-width 250ms ease-out;
 }
-.Layer__chart-of-accounts__header {
+.Layer__ledger-accounts__sidebar .Layer__ledger-accounts__sidebar-content {
+  width: 480px;
+  height: 100%;
+  opacity: 0.2;
+  transition: opacity 250ms ease-out;
+  background: var(--color-base-0);
+  border-left: 1px solid var(--color-base-300);
+  box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
+}
+.Layer__ledger-accounts__sidebar.Layer__ledger-accounts__sidebar.open {
+  max-width: 480px;
+}
+.Layer__ledger-accounts__sidebar.Layer__ledger-accounts__sidebar.open .Layer__ledger-accounts__sidebar-content {
+  opacity: 1;
+}
+.Layer__ledger-accounts__actions {
   display: flex;
-  flex: 1;
-  flex-direction: row;
-  padding: 1rem;
-  border-bottom: 1px solid var(--border-color);
   align-items: center;
+  gap: var(--spacing-sm);
 }
-.Layer__chart-of-accounts__title {
-  display: inline;
-  flex: 1;
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin: 0;
+.Layer__coa__type.Layer__alt-table__head-cell,
+.Layer__coa__type.Layer__alt-table__cell,
+.Layer__coa__subtype.Layer__alt-table__head-cell,
+.Layer__coa__subtype.Layer__alt-table__cell,
+.Layer__coa__balance.Layer__alt-table__head-cell,
+.Layer__coa__balance.Layer__alt-table__cell,
+.Layer__coa__actions.Layer__alt-table__head-cell,
+.Layer__coa__actions.Layer__alt-table__cell {
+  width: 18%;
+  flex: 18 18 auto;
+}
+.Layer__coa__name.Layer__alt-table__head-cell,
+.Layer__coa__name.Layer__alt-table__cell {
+  width: 28%;
+  flex: 28 28 auto;
+}
+.Layer__alt-table__cell.Layer__coa__name,
+.Layer__alt-table__cell.Layer__coa__balance {
+  color: var(--color-base-800);
+}
+.Layer__alt-table__cell.Layer__coa__balance {
+  font-variation-settings: "wght" var(--font-weight-bold);
 }
-.Layer__chart-of-accounts__actions {
+.Layer__alt-table-row--depth-0 .Layer__alt-table__cell.Layer__coa__name {
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
+.Layer__coa__balance {
+  text-align: right;
+  justify-content: flex-end;
+}
+.Layer__coa__actions {
   display: flex;
-  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  min-width: 192px;
 }
-.Layer__chart-of-accounts__download-button {
-  align-self: center;
-  border: 2px solid var(--border-color);
-  background-color: var(--background-color);
-  border-radius: var(--corner-radius);
-  margin-left: 0.5rem;
+.Layer__coa__actions > .Layer__btn {
+  opacity: 0;
+  visibility: hidden;
+  transition: all 300ms ease-out;
+  transform: scale(0.92);
+}
+.Layer__alt-table-row:hover .Layer__coa__actions > .Layer__btn {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+.Layer__ledger-accounts__sidebar__header {
   display: flex;
-  flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--spacing-xl);
+  padding-bottom: var(--spacing-lg);
+  gap: var(--spacing-md);
+}
+.Layer__ledger-accounts__sidebar__header .title {
+  margin: 0;
+  font-size: 24px;
+}
+.Layer__ledger-accounts__sidebar__header .actions {
+  display: flex;
+  gap: var(--spacing-sm);
   align-items: center;
-  padding: 0.5rem 1rem;
-  font-weight: 600;
 }
-.Layer__chart-of-accounts__download-button:active {
-  background-color: var(--active);
+.Layer__ledger-accounts__form {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl);
 }
-.Layer__chart-of-accounts__download-button svg {
-  margin-right: 0.5rem;
+.Layer__ledger-accounts__form .Layer__input-group.Layer__input-group--inline {
+  padding: var(--spacing-sm) 0;
 }
-.Layer__chart-of-accounts__edit-accounts-button {
-  align-self: center;
-  border: 2px solid var(--button-color-dark);
-  border-radius: var(--corner-radius);
-  margin-left: 0.5rem;
+.Layer__ledger-accounts__form .Layer__input-group.Layer__input-group--inline label {
+  width: 140px;
+  min-width: 140px;
+  max-width: 140px;
+}
+.Layer__ledger-accounts__form-edit-entry {
+  padding: var(--spacing-md) var(--spacing-xl);
   display: flex;
-  flex-direction: row;
-  justify-content: center;
   align-items: center;
-  color: var(--background-color);
-  background-color: var(--button-color-dark);
-  padding: 0.5rem 1rem;
-  font-weight: 600;
+  justify-content: space-between;
+  gap: var(--spacing-md);
 }
-.Layer__chart-of-accounts__edit-accounts-button svg {
-  margin-right: 0.5rem;
+.Layer__ledger-accounts__form-edit-entry .Layer__text {
+  margin: 0;
 }
-.Layer__chart-of-accounts__edit-accounts-button:active {
-  background-color: var(--active);
+.Layer__alt-table-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+  box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
+  transition: background 200ms ease-in-out;
+  position: relative;
 }
-.Layer__chart-of-accounts__table-cell--header {
-  font-weight: 700;
+.Layer__alt-table-row:not(.Layer__alt-table-row--header) {
+  cursor: pointer;
 }
-.Layer__chart-of-accounts__table-cell--header,
-.Layer__chart-of-accounts-row__table-cell {
-  background-color: var(--background-color);
-  padding: 1rem 1.5rem;
+.Layer__alt-table-row:not(.Layer__alt-table-row--header):hover {
+  background-color: var(--color-base-50);
+}
+.Layer__alt-table-row.active {
+  background-color: var(--color-base-50);
+}
+.Layer__alt-table-row.active:before {
+  content: "";
+  background-color: var(--color-base-400);
+  height: 100%;
+  width: 2px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.Layer__alt-table__head-cell,
+.Layer__alt-table__cell {
+  flex: 1;
+  padding: var(--spacing-md);
+}
+.Layer__alt-table__head-cell {
+  color: var(--color-base-600);
+  font-size: 12px;
+}
+.Layer__alt-table__cell {
+  color: var(--color-base-600);
+  font-size: 14px;
   display: flex;
-  flex-direction: row;
   align-items: center;
+  gap: var(--spacing-md);
 }
-.Layer__chart-of-accounts__table-cell--header-balance,
-.Layer__chart-of-accounts-row__table-cell--balance {
-  justify-content: flex-end;
+.Layer__alt-table__expand-icon {
+  transition: transform 150ms ease-out;
+  color: var(--color-base-600);
 }
-.Layer__chart-of-accounts-row__table-cell--amount-positive::before {
-  content: "$";
+.Layer__alt-table-row:not(.Layer__alt-table-row--depth-0):not(.Layer__alt-table-row--header) {
+  background-color: var(--color-base-50);
 }
-.Layer__chart-of-accounts-row__table-cell--amount-negative::before {
-  content: "-$";
+.Layer__alt-table-row--collapsed .Layer__alt-table__expand-icon {
+  transform: rotate(-90deg);
 }
-.Layer__chart-of-accounts-row__table-cell--depth-0 {
-  font-weight: 700;
+.Layer__accounts-receivable__index {
+  position: fixed;
+  visibility: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: var(--color-base-0);
+  transform: scale(0.5), translateY(-100);
+  opacity: 0.4;
+  transition: transform 200ms ease-out, opacity 300ms ease-out;
 }
-.Layer__chart-of-accounts-row__table-cell--depth-1.Layer__chart-of-accounts-row__table-cell--name {
-  padding-right: 2em;
-  padding-left: 2em;
+.Layer__accounts-receivable__index.open {
+  visibility: visible;
+  transform: scale(1), translateY(0);
+  opacity: 1;
 }
-.Layer__chart-of-accounts-row__table-cell--depth-2.Layer__chart-of-accounts-row__table-cell--name {
-  padding-right: 2em;
-  padding-left: 4em;
+.Layer__accounts-receivable__header {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl);
+  padding-bottom: var(--spacing-md);
+  align-items: flex-start;
+  justify-content: flex-start;
 }
-.Layer__chart-of-accounts-row__view-entries-button {
-  align-self: center;
-  border: 2px solid var(--border-color);
-  background-color: var(--background-color);
-  border-radius: var(--corner-radius);
-  margin-left: 0.5rem;
+.Layer__accounts-receivable__title-container {
   display: flex;
-  flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 1rem;
-  font-weight: 600;
+  width: 100%;
+  padding-top: var(--spacing-md);
+  padding-bottom: var(--spacing-3xs);
 }
-.Layer__chart-of-accounts-row__view-entries-button:active {
-  background-color: var(--active);
+.Layer__accounts-receivable__title {
+  font-size: 24px;
 }
-.Layer__chart-of-accounts-new-form {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  border: 1px solid var(--border-color);
-  border-radius: var(--corner-radius);
-  font-size: 1rem;
+.Layer__accounts-receivable__balance-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
 }
-.Layer__chart-of-accounts-new-form__field {
-  display: grid;
-  grid-column: span 2;
-  grid-template-columns: subgrid;
-  padding: 0.5rem;
-  margin: 0.5rem;
+.Layer__accounts-receivable__balance-label {
+  color: var(--color-base-600);
 }
-.Layer__chart-of-accounts-new-form__field span {
-  padding-right: 0.5rem;
-  align-self: center;
+.Layer__accounts-receivable-table .Layer__table-cell {
+  border-top: 1px solid var(--border-color);
+}
+@container (max-width: 1400px) {
+  .Layer__accounts-receivable__header {
+    padding: var(--spacing-md);
+  }
 }
 .Layer__data-state {
   display: flex;
@@ -2646,15 +2824,25 @@
   max-width: 480px;
   opacity: 1;
 }
-@container (max-width: 1100px) {
+@container (max-width: 1023px) {
   .Layer__profit-and-loss__side-panel {
+    transition: transform 200ms ease-out;
     position: absolute;
-    right: -500px;
+    left: 0;
+    right: 0;
     top: 0;
+    transform: translateX(-100%);
+    z-index: -1;
+    max-width: 100%;
+    width: 100%;
     height: 100%;
   }
   .Layer__profit-and-loss__side-panel.open {
+    left: 0;
     right: 0;
+    max-width: 100%;
+    transform: translateX(0);
+    z-index: 1;
   }
 }
 .Layer__profit-and-loss__title {
@@ -2677,7 +2865,7 @@
   min-height: 950px;
 }
 .Layer__profit-and-loss-table__outflows {
-  margin-top: 1rem;
+  padding-top: var(--spacing-2xs);
 }
 .Layer__profit-and-loss-row {
   padding: 1em;
@@ -2711,10 +2899,14 @@
 }
 .Layer__profit-and-loss-row__label {
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
+  align-items: center;
+}
+.Layer__profit-and-loss-row__label .Layer__profit-and-loss-row__label__title {
+  display: flex;
   align-items: center;
 }
-.Layer__profit-and-loss-row__label svg {
+.Layer__profit-and-loss-row__label svg.Layer__profit-and-loss-row__label__chevron {
   color: var(--color-base-600);
   width: 1.25rem;
   height: 1.25rem;
@@ -2728,7 +2920,7 @@
 .Layer__profit-and-loss-row__value.Layer__profit-and-loss-row__value--display-children-true:hover + .Layer__profit-and-loss-row__label {
   background: var(--color-base-50);
 }
-.Layer__profit-and-loss-row__label--expanded svg {
+.Layer__profit-and-loss-row__label--expanded svg.Layer__profit-and-loss-row__label__chevron {
   transform: rotate(0deg);
 }
 .Layer__profit-and-loss-row__value--expanded {
@@ -2749,7 +2941,7 @@
 .Layer__profit-and-loss-row__label--display-children-false {
   font-weight: normal;
 }
-.Layer__profit-and-loss-row__label--display-children-false svg {
+.Layer__profit-and-loss-row__label--display-children-false svg.Layer__profit-and-loss-row__label__chevron {
   visibility: hidden;
   display: none;
 }
@@ -2810,48 +3002,15 @@
   font-variation-settings: "wght" var(--font-weight-normal);
   margin: 0;
 }
-.Layer__profit-and-loss-date-picker {
-  width: 270px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0.25rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--corner-radius);
-}
-.Layer__profit-and-loss-date-picker__button {
-  padding: 0.25rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background-color: var(--background-color);
-  border: 0;
-  border-radius: var(--corner-radius);
-}
-.Layer__profit-and-loss-date-picker__button:active {
-  background-color: var(--active);
-}
-.Layer__profit-and-loss-date-picker__button-icon path {
-  stroke: var(--text-color);
-}
-.Layer__profit-and-loss-date-picker__label {
-  flex: 1;
-  font-size: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
 .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
   font-size: 0.75rem;
 }
 .Layer__profit-and-loss-chart .recharts-legend-wrapper {
-  margin-top: -1.25rem;
+  margin-top: 1.75rem;
 }
 .Layer__profit-and-loss-chart .recharts-legend-item-text {
-  font-size: 1rem;
+  font-size: 12px;
+  color: var(--color-base-700);
   vertical-align: middle;
 }
 .Layer__profit-and-loss-chart .recharts-legend-item {
@@ -2865,9 +3024,9 @@
   fill: var(--bar-color-expenses);
 }
 .Layer__profit-and-loss-chart__selection-indicator {
-  stroke: var(--indicator-color);
+  stroke: var(--chart-indicator-color);
   fill: none;
-  transition: x 0.5s;
+  transition: x 0.35s ease-in-out;
 }
 .Layer__profit-and-loss__chart_with_summaries {
   display: flex;
@@ -2893,7 +3052,6 @@
   flex-direction: column;
   flex: 1;
   padding: var(--spacing-md);
-  padding-top: 68px;
 }
 .Layer__profit-and-loss-summaries {
   display: flex;
@@ -2909,23 +3067,36 @@
 .Layer__profit-and-loss-summaries__summary {
   display: flex;
   flex: 1;
-  flex-direction: column;
-  gap: var(--spacing-4xs);
-  justify-content: center;
+  gap: var(--spacing-xs);
+  align-items: center;
   box-shadow: 0px 0px 0px 1px var(--color-base-300);
   border-radius: var(--border-radius-xs);
-  padding: var(--spacing-md);
-  min-height: 72px;
+  padding: var(--spacing-4xs);
+  min-height: 52px;
   box-sizing: border-box;
 }
 .Layer__profit-and-loss-summaries__summary.Layer__actionable {
   cursor: pointer;
 }
 .Layer__profit-and-loss-summaries__summary.Layer__actionable:hover {
-  box-shadow: 0px 0px 0px 1px var(--color-base-500);
+  background: var(--color-base-50);
 }
 .Layer__profit-and-loss-summaries__summary.active {
-  box-shadow: 0px 0px 0px 1px var(--color-base-900);
+  box-shadow: 0px 0px 0px 1px var(--color-base-200);
+  background: var(--color-base-50);
+}
+.Layer__profit-and-loss-summaries__summary .mini-chart {
+  background: var(--color-base-50);
+  border-radius: 6px;
+  border-width: 0;
+  box-shadow: none;
+}
+.Layer__profit-and-loss-summaries__summary.net-profit {
+  padding-left: var(--spacing-xs);
+  background: var(--color-base-50);
+  border-color: transparent;
+  box-shadow: none;
+  min-height: 56px;
 }
 .Layer__profit-and-loss-summaries__loader {
   height: 17px;
@@ -2935,18 +3106,22 @@
 .Layer__profit-and-loss-summaries__loader .Layer__skeleton-loader {
   height: 14px;
 }
+.Layer__profit-and-loss-summaries__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4xs);
+}
 .Layer__profit-and-loss-summaries__title {
-  color: var(--text-color-primary);
+  color: var(--color-base-700);
   font-size: var(--text-sm);
 }
 .Layer__profit-and-loss-summaries__month {
   font-size: 1.125rem;
   margin-bottom: 0.25rem;
-  color: red;
 }
 .Layer__profit-and-loss-summaries__amount,
 .Layer__profit-and-loss-summaries__amount--positive {
-  color: var(--text-color-primary);
+  color: var(--color-base-900);
   font-size: var(--text-md);
 }
 .Layer__profit-and-loss-summaries__amount::before,
@@ -3038,7 +3213,24 @@
     min-width: 150px;
   }
 }
-.Layer__profit-and-loss-detailed-charts > header {
+.Layer__profit-and-loss-row__detailed-chart-btn {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-base-100);
+  color: var(--color-base-600);
+  cursor: pointer;
+  transition: color 150ms ease-out, background-color 150ms ease-out;
+}
+.Layer__profit-and-loss-row__detailed-chart-btn:hover {
+  background: var(--color-base-200);
+  color: var(--color-base-900);
+}
+.Layer__profit-and-loss-detailed-charts__header--tablet,
+.Layer__profit-and-loss-detailed-charts__header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -3046,12 +3238,24 @@
   padding-bottom: var(--spacing-lg);
   box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
 }
-.Layer__profit-and-loss-detailed-charts > header button.Layer__btn.Layer__btn--icon-only {
+.Layer__profit-and-loss-detailed-charts__header--tablet button.Layer__btn.Layer__btn--icon-only,
+.Layer__profit-and-loss-detailed-charts__header button.Layer__btn.Layer__btn--icon-only {
   width: 32px;
   height: 32px;
   min-height: 32px;
   padding: 0;
 }
+header.Layer__profit-and-loss-detailed-charts__header--tablet {
+  display: none;
+}
+@container (max-width: 1023px) and (min-width: 768px) {
+  header.Layer__profit-and-loss-detailed-charts__header {
+    display: none;
+  }
+  header.Layer__profit-and-loss-detailed-charts__header--tablet {
+    display: flex;
+  }
+}
 .Layer__profit-and-loss-detailed-charts__head {
   display: flex;
   flex-direction: column;
@@ -3066,6 +3270,9 @@
 .Layer__profit-and-loss-detailed-charts__head > .Layer__text {
   margin: 0;
 }
+.Layer__profit-and-loss-detailed-charts__head .Layer__profit-and-loss-date-picker {
+  display: none;
+}
 .Layer__profit-and-loss-detailed-charts {
   width: 480px;
   background: var(--color-base-0);
@@ -3111,6 +3318,7 @@
     "cv05" on,
     "cv08" on,
     "ss03" on;
+  display: inline-flex;
 }
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__control {
   border-color: transparent;
@@ -3122,6 +3330,7 @@
     "cv05" on,
     "cv08" on,
     "ss03" on;
+  box-shadow: none;
 }
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__placeholder {
   font-size: 12px;
@@ -3160,7 +3369,7 @@
 }
 .Layer__profit-and-loss-detailed-charts .details-container {
   padding: var(--spacing-md);
-  padding-top: var(--spacing-sm);
+  padding-top: var(--spacing-2xs);
 }
 .Layer__profit-and-loss-detailed-charts .details-container table {
   width: 100%;
@@ -3184,6 +3393,7 @@
   color: var(--color-base-500);
   border-bottom: 1px solid var(--color-base-300);
   transition: color 150ms ease-out;
+  padding-bottom: var(--spacing-sm);
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th:hover {
   color: var(--color-base-800);
@@ -3207,24 +3417,99 @@
   height: 12px;
   border-radius: 2px;
 }
+.Layer__profit-and-loss-detailed-table__row {
+  transition: background-color 300ms ease-out;
+  background: transparent;
+  border-radius: 2px;
+}
 .Layer__profit-and-loss-detailed-table__row .category-col,
 .Layer__profit-and-loss-detailed-table__row .value-col {
   color: var(--color-base-900);
 }
 .Layer__profit-and-loss-detailed-table__row .type-col,
 .Layer__profit-and-loss-detailed-table__row .share-col {
-  color: var(--color-base-1000);
-}
-.Layer__profit-and-loss-detailed-table__row.inactive .type-col,
-.Layer__profit-and-loss-detailed-table__row.inactive .share-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 .share-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;
+}
+.Layer__profit-and-loss-detailed-charts .chart-field {
+  display: flex;
+  flex-direction: column;
+}
+@container (max-width: 1023px) {
+  .Layer__profit-and-loss-detailed-charts {
+    width: 100%;
+    height: 100%;
+  }
+}
+@container (max-width: 1023px) and (min-width: 768px) {
+  .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-container {
+    max-width: 300px;
+  }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  .Layer__profit-and-loss-detailed-charts .header--tablet {
+    display: flex;
+    flex-direction: column;
+    padding-left: var(--spacing-xl);
+    padding-top: var(--spacing-lg);
+  }
+  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__text {
+    margin: 0;
+  }
+  .Layer__profit-and-loss-detailed-charts .header--tablet .title {
+    font-size: 24px;
+  }
+  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__profit-and-loss-date-picker {
+    margin-top: var(--spacing-sm);
+  }
+  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__profit-and-loss-date-picker .Layer__profit-and-loss-date-picker__label {
+    font-size: 14px;
+  }
+}
+@container (max-width: 767px) {
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
+    width: 100%;
+  }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .date {
+    display: none;
+  }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__profit-and-loss-date-picker {
+    display: flex;
+  }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__profit-and-loss-date-picker .Layer__profit-and-loss-date-picker__label {
+    font-size: 14px;
+  }
+}
 .Layer__radio-button-group {
   display: flex;
   font-size: 1rem;