@layerfi/components 0.1.10 → 0.1.11

package/dist/styles/index.css

@@ -1,17 +1,22 @@
+@charset "UTF-8";
 @import "https://rsms.me/inter/inter.css";
 
 /* src/styles/index.scss */
 .Layer__component,
+.Layer__view,
 .Layer__select__menu-portal,
 .Layer__tooltip {
   --color-black: #1a1a1a;
   --color-white: white;
-  --color-info-success: #29bc9b;
-  --color-info-warning: #f5a622;
-  --color-info-error-h: 0;
-  --color-info-error-s: 71%;
-  --color-info-error-l: 64%;
-  --color-info-error: hsl( var(--color-info-error-h) var(--color-info-error-s) var(--color-info-error-l) );
+  --color-info-success: hsl(145, 45%, 42%);
+  --color-info-success-bg: hsl(145, 59%, 86%);
+  --color-info-success-fg: hsl(145, 63%, 29%);
+  --color-info-warning: hsl(43, 100%, 44%);
+  --color-info-warning-bg: hsl(43, 100%, 84%);
+  --color-info-warning-fg: hsl(43, 88%, 26%);
+  --color-info-error: hsl(0 76% 50%);
+  --color-info-error-bg: hsl(0 83% 86%);
+  --color-info-error-fg: hsl(0 88% 32%);
   --color-dark-h: 0;
   --color-dark-s: 0%;
   --color-dark-l: 7%;
@@ -33,7 +38,8 @@
   --color-base-900: var(--color-dark);
   --color-base-1000: hsl(var(--color-dark-h) 20% 7%);
   --max-component-width: 1408px;
-  --base-transparent-1: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.01 );
+  --base-transparent-1: hsla(220, 43%, 11%, 0.01);
+  --base-transparent-2: hsla(220, 43%, 11%, 0.02);
   --base-transparent-4: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.04 );
   --base-transparent-5: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.05 );
   --base-transparent-6: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.06 );
@@ -48,7 +54,7 @@
   --color-danger-dark: hsl(349, 30%, 30%);
   --color-danger-light: hsla( var(--color-info-error-h), var(--color-info-error-s), var(--color-info-error-l), 0.4 );
   --text-color-primary: var(--color-dark);
-  --text-color-secondary: var(--color-base-700);
+  --text-color-secondary: var(--color-base-600);
   --bg-element-focus: var(--color-base-50);
   --font-family:
     "InterVariable",
@@ -72,6 +78,7 @@
   --spacing-xs: 8px;
   --spacing-sm: 12px;
   --spacing-md: 16px;
+  --spacing-lm: 20px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
   --spacing-2xl: 36px;
@@ -107,8 +114,17 @@
   --btn-bg-color-icon-hover: var(--color-accent);
   --btn-secondary-color: var(--color-black);
   --btn-secondary-bg-color: var(--color-white);
-  --badge-color: var(--color-dark);
+  --badge-color: var(--color-base-900);
   --badge-bg-color: var(--color-base-400);
+  --badge-color-success: var(--color-info-success);
+  --badge-fg-color-success: var(--color-info-success-fg);
+  --badge-bg-color-success: var(--color-info-success-bg);
+  --badge-color-warning: var(--color-info-warning);
+  --badge-fg-color-warning: var(--color-info-warning-fg);
+  --badge-bg-color-warning: var(--color-info-warning-bg);
+  --badge-color-error: var(--color-info-error);
+  --badge-fg-color-error: var(--color-info-error-fg);
+  --badge-bg-color-error: var(--color-info-error-bg);
   --badge-border-radius: var(--border-radius-sm);
   --table-bg: var(--color-white);
   --tooltip-color: var(--color-white);
@@ -185,7 +201,6 @@
   font-size: var(--text-sm);
   align-items: center;
   transition: all var(--transition-speed) ease-in-out;
-  border: 1px solid var(--base-transparent-5);
   box-sizing: border-box;
   height: 27px;
 }
@@ -198,13 +213,44 @@
   cursor: pointer;
 }
 .Layer__badge.Layer__badge--clickable:hover {
-  background-color: var(--badge-color);
+  background-color: var(--badge-fg-color);
   color: var(--badge-bg-color);
-  border-color: var(--badge-color);
 }
 .Layer__badge .Layer__badge__icon {
   margin-top: 2px;
 }
+.Layer__badge.Layer__badge--default {
+  background-color: var(--badge-bg-color);
+  color: var(--badge-fg-color);
+}
+.Layer__badge.Layer__badge--success {
+  background-color: var(--badge-bg-color-success);
+  color: var(--badge-fg-color-success);
+}
+.Layer__badge.Layer__badge--warning {
+  background-color: var(--badge-bg-color-warning);
+  color: var(--badge-fg-color-warning);
+}
+.Layer__badge.Layer__badge--error {
+  background-color: var(--badge-bg-color-error);
+  color: var(--badge-fg-color-error);
+}
+.Layer__badge.Layer__badge--with-hover:hover.Layer__badge--default {
+  background-color: var(--badge-color);
+  color: var(--badge-bg-color);
+}
+.Layer__badge.Layer__badge--with-hover:hover.Layer__badge--success {
+  background-color: var(--badge-color-success);
+  color: var(--badge-bg-color-success);
+}
+.Layer__badge.Layer__badge--with-hover:hover.Layer__badge--warning {
+  background-color: var(--badge-color-warning);
+  color: var(--badge-bg-color-warning);
+}
+.Layer__badge.Layer__badge--with-hover:hover.Layer__badge--error {
+  background-color: var(--badge-color-error);
+  color: var(--badge-bg-color-error);
+}
 .Layer__btn {
   position: relative;
   border-radius: var(--btn-border-radius);
@@ -413,6 +459,16 @@
   align-items: center;
   gap: var(--spacing-4xs);
 }
+.Layer__card {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--spacing-sm);
+  background: var(--color-base-0);
+  box-shadow:
+    0px 4px 12px 0px var(--base-transparent-8),
+    0px 2px 4px 0px var(--base-transparent-6),
+    0px 0px 0px 1px var(--base-transparent-4);
+}
 .Layer__component .recharts-responsive-container {
   padding: 4px;
   box-sizing: border-box;
@@ -458,7 +514,7 @@
   position: relative;
   display: flex;
 }
-.Layer__hover-menu.--open .Layer__hover-menu__list-wrapper {
+.Layer__hover-menu.Layer__hover-menu--open .Layer__hover-menu__list-wrapper {
   top: 100%;
   right: 0px;
   opacity: 1;
@@ -554,6 +610,12 @@
 .Layer__component-container::-webkit-scrollbar-thumb:hover {
   background: #999;
 }
+.Layer__component.Layer__component--elevated {
+  box-shadow:
+    0px 4px 12px 0px var(--base-transparent-8),
+    0px 2px 4px 0px var(--base-transparent-6),
+    0px 0px 0px 1px var(--base-transparent-4);
+}
 .Layer__component-header {
   padding: var(--spacing-md);
   display: flex;
@@ -574,6 +636,53 @@
     padding-top: var(--spacing-xl);
   }
 }
+.Layer__datetime {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.Layer__datetime__date {
+  color: var(--color-base-800);
+  min-width: 75px;
+}
+.Layer__datetime__time {
+  color: var(--color-base-600);
+}
+.Layer__details-list {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__details-list .Layer__component-header {
+  padding-bottom: 0;
+}
+.Layer__details-list__list {
+  box-sizing: border-box;
+  padding: var(--spacing-md) 0;
+  list-style: none;
+  margin: 0;
+}
+.Layer__details-list-item {
+  box-sizing: border-box;
+  padding: 0 var(--spacing-md);
+  display: flex;
+  align-items: center;
+}
+.Layer__details-list-item__label {
+  box-sizing: border-box;
+  padding: var(--spacing-xs) var(--spacing-md);
+  width: 140px;
+  min-width: 140px;
+  max-width: 140px;
+  color: var(--color-base-600);
+  font-size: 12px;
+  font-variation-settings: "wght" var(--font-weight-normal);
+  line-height: 140%;
+}
+.Layer__details-list-item__value {
+  box-sizing: border-box;
+  padding: var(--spacing-xs) var(--spacing-md);
+  flex: 1;
+}
 ::placeholder {
   color: var(--input-placeholder-color);
 }
@@ -776,7 +885,7 @@
     "cv08" on,
     "ss03" on;
   line-height: 140%;
-  width: calc(100% + 200px);
+  width: 100%;
 }
 .Layer__select .Layer__select__control {
   border-width: 0px;
@@ -1036,6 +1145,11 @@
   color: var(--text-color-primary);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
+.Layer__table-cell--primary,
+.Layer__table-cell--primary .Layer__table-cell-content {
+  color: var(--color-base-800);
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
 .Layer__table-cell {
   font-size: var(--text-md);
   text-align: left;
@@ -1061,6 +1175,7 @@
   height: 100%;
   display: flex;
   align-items: center;
+  box-sizing: border-box;
 }
 .Layer__table-row--active .Layer__table-cell:first-child .Layer__table-cell-content:before {
   content: "";
@@ -1072,6 +1187,10 @@
   top: 0;
   bottom: 0;
 }
+.Layer__table--hover-effect .Layer__table-row:hover {
+  background-color: var(--color-base-50);
+  cursor: pointer;
+}
 .Layer__table-cell--amount {
   justify-content: flex-end;
   text-align: right;
@@ -1125,6 +1244,13 @@
 .Layer__table-row.Layer__table-row--collapsed .Layer__table-cell > .Layer__table-cell-content {
   transition: height 60ms ease-out, opacity 50ms ease-in-out;
 }
+.Layer__table-row.Layer__table-row--with-show:not(.initial-load) {
+  opacity: 0.5;
+}
+.Layer__table-row.Layer__table-row--with-show:not(.initial-load).show {
+  transition: opacity 50ms ease-out;
+  opacity: 1;
+}
 .Layer__table-row.Layer__table-row--anim-starting-state {
   transform: scaleX(0.98);
   opacity: 0;
@@ -1197,6 +1323,9 @@
 .Layer__pt-2 {
   padding-top: 2px;
 }
+.Layer__border-top {
+  border-top: 1px solid var(--border-color);
+}
 @keyframes rotating {
   from {
     -ms-transform: rotate(0deg);
@@ -1236,25 +1365,69 @@
   -o-animation: rotating 2s linear infinite;
   animation: rotating 2s linear infinite;
 }
-.Layer__accounts-receivable__index {
-  position: fixed;
-  visibility: hidden;
-  top: 0;
-  left: 0;
+@container (min-width: 1024px) and (max-width: 1400px) {
+  .Layer__hidden-lg {
+    display: none;
+  }
+}
+@container (min-width: 1024px) and (max-width: 1400px) {
+  .Layer__hidden-md {
+    display: none;
+  }
+}
+@container (min-width: 500px) and (max-width: 1024px) {
+  .Layer__hidden-sm {
+    display: none;
+  }
+}
+@container (max-width: 499px) {
+  .Layer__hidden-xs {
+    display: none;
+  }
+}
+.Layer__view-main {
+  padding: var(--spacing-md) var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.Layer__view-header {
+  display: flex;
   width: 100%;
-  height: 100%;
-  z-index: 1;
+  border-bottom: 1px solid var(--color-base-200);
+}
+.Layer__view-header__content {
+  padding: var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1406px;
+}
+.Layer__view-header__controls {
+  display: flex;
+  align-items: center;
+}
+.Layer__ledger-account__index {
   background-color: var(--color-base-0);
-  transform: scale(0.5), translateY(-100);
-  opacity: 0.4;
-  transition: transform 200ms ease-out, opacity 300ms ease-out;
+  width: 100%;
 }
-.Layer__accounts-receivable__index.open {
-  visibility: visible;
-  transform: scale(1), translateY(0);
-  opacity: 1;
+.Layer__ledger-account__panel {
+  min-height: 800px;
+}
+.Layer__ledger-account-table .Layer__table-row--active {
+  background-color: var(--color-base-50);
 }
-.Layer__accounts-receivable__header {
+.Layer__ledger-account-table .Layer__table-cell-content {
+  min-height: 52px;
+}
+.Layer__ledger-account__panel .Layer__panel__sidebar {
+  background-color: var(--color-base-50);
+}
+.Layer__ledger-account__panel .Layer__panel__sidebar .Layer__ledger-account__entry-details .Layer__details-list {
+  background: var(--color-base-0);
+}
+.Layer__ledger-account__header {
   display: flex;
   flex-direction: column;
   padding: var(--spacing-xl);
@@ -1262,7 +1435,7 @@
   align-items: flex-start;
   justify-content: flex-start;
 }
-.Layer__accounts-receivable__title-container {
+.Layer__ledger-account__title-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1270,22 +1443,129 @@
   padding-top: var(--spacing-md);
   padding-bottom: var(--spacing-3xs);
 }
-.Layer__accounts-receivable__title {
+.Layer__ledger-account__title {
   font-size: 24px;
 }
-.Layer__accounts-receivable__balance-container {
+.Layer__ledger-account__balance-container {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
 }
-.Layer__accounts-receivable__balance-label {
+.Layer__ledger-account__balance-label {
+  color: var(--color-base-600);
+}
+.Layer__ledger-account__entry-details__line-items {
+  padding: var(--spacing-md);
+}
+.Layer__ledger-account__entry-details__table td {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: 12px;
   color: var(--color-base-600);
 }
+.Layer__ledger-account__entry-details__table__total-row td {
+  font-variation-settings: "wght" var(--font-weight-bold);
+  color: var(--color-base-900);
+}
+.Layer__table.Layer__ledger-account__entry-details__table th,
+.Layer__ledger-account__entry-details__table__total-row td,
+.Layer__table.Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header,
+.Layer__table.Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header {
+  padding: var(--spacing-md);
+}
+.Layer__ledger-account__entry-details__table .Layer__table-cell--amount {
+  width: 128px;
+  box-sizing: border-box;
+}
+.Layer__ledger-account__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-md);
+  padding-bottom: 0;
+}
+.Layer__ledger-account__pagination .Layer__pagination {
+  margin-bottom: 0;
+}
+.Layer__ledger-account__entry-details__back-btn {
+  display: none;
+  background: var(--color-base-0);
+  padding-top: var(--spacing-xl);
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}
+.Layer__ledger-account-table__tablet-main-col .Layer__table-cell-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+}
+.Layer__ledger-account-table__tablet-main-col .Layer__ledger-account-table__tablet-main-col__date {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.Layer__ledger_account-table__journal-id {
+  color: var(--color-base-800);
+}
+.Layer__ledger_account-table__balances-mobile {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--spacing-xs);
+}
+.Layer__ledger_account-table__balance-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.Layer__ledger_account-table__balance-item .Layer__ledger_account-table__balances-mobile__value {
+  font-variation-settings: "wght" var(--font-weight-bold);
+  color: var(--color-base-900);
+}
 @container (max-width: 1400px) {
-  .Layer__accounts-receivable__header {
+  .Layer__ledger-account__header {
     padding: var(--spacing-md);
   }
 }
+@container (max-width: 1024px) {
+  .Layer__ledger-account__panel .Layer__panel__sidebar .Layer__panel__sidebar-content {
+    width: 100%;
+  }
+  .Layer__ledger-account__entry-details__back-btn {
+    display: flex;
+  }
+}
+@container (min-width: 500px) and (max-width: 1024px) {
+  .Layer__ledger-account__panel .Layer__details-list .Layer__component-header {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+}
+@container (max-width: 499px) {
+  .Layer__ledger-account__panel .Layer__details-list .Layer__details-list-item__label,
+  .Layer__ledger-account__panel .Layer__details-list .Layer__details-list-item__value {
+    padding: var(--spacing-xs);
+  }
+  .Layer__ledger-account__panel .Layer__details-list .Layer__details-list-item {
+    padding: 0 var(--spacing-xs);
+  }
+  .Layer__ledger-account__entry-details__line-items {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+  }
+  .Layer__ledger-account__entry-details__line-items .Layer__card {
+    box-shadow: none;
+    border-radius: 0;
+  }
+  .Layer__ledger-account__panel .Layer__panel__sidebar {
+    background: var(--color-base-0);
+  }
+  .Layer__ledger-account__entry-details__back-btn {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
 .Layer__balance-sheet {
   border: 1px solid var(--border-color);
   border-radius: var(--corner-radius);
@@ -2541,44 +2821,19 @@
     border-right-color: transparent;
   }
 }
-.Layer__component-container.Layer__ledger-accounts {
+.Layer__component-container.Layer__chart-of-accounts {
   display: flex;
   align-items: stretch;
   position: relative;
 }
-.Layer__ledger-accounts__loader-container {
+.Layer__chart-of-accounts__loader-container {
   padding: var(--spacing-2xl);
 }
-.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__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__table {
+.Layer__chart-of-accounts__table {
   width: 100%;
   border-collapse: collapse;
 }
-.Layer__ledger-accounts__actions {
+.Layer__chart-of-accounts__actions {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
@@ -2600,7 +2855,7 @@
 .Layer__table-cell.Layer__coa__balance {
   font-variation-settings: "wght" var(--font-weight-bold);
 }
-.Layer__ledger-accounts__table .Layer__table-row--depth-0 .Layer__table-cell.Layer__coa__name {
+.Layer__chart-of-accounts__table .Layer__table-row--depth-0 .Layer__table-cell.Layer__coa__name {
   font-variation-settings: "wght" var(--font-weight-bold);
 }
 .Layer__coa__balance {
@@ -2608,7 +2863,7 @@
   justify-content: flex-end;
 }
 .Layer__table-cell.Layer__coa__actions {
-  width: 192px;
+  width: 160px;
 }
 .Layer__table-cell.Layer__coa__actions .Layer__table-cell-content {
   display: flex;
@@ -2624,12 +2879,20 @@
   transition: all 300ms ease-out;
   transform: scale(0.92);
 }
-.Layer__ledger-accounts__table .Layer__table-row:hover .Layer__coa__actions .Layer__btn {
+.Layer__table-cell.Layer__coa__actions .Layer__btn--icon-only {
+  width: 32px;
+  height: 32px;
+  min-height: 32px;
+  max-height: 32px;
+  padding: 0;
+  box-sizing: border-box;
+}
+.Layer__chart-of-accounts__table .Layer__table-row:hover .Layer__coa__actions .Layer__btn {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
 }
-.Layer__ledger-accounts__sidebar__header {
+.Layer__chart-of-accounts__sidebar__header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -2637,19 +2900,19 @@
   padding-bottom: var(--spacing-lg);
   gap: var(--spacing-md);
 }
-.Layer__ledger-accounts__sidebar__header .title {
+.Layer__chart-of-accounts__sidebar__header .title {
   margin: 0;
   font-size: 24px;
 }
-.Layer__ledger-accounts__sidebar__header .actions {
+.Layer__chart-of-accounts__sidebar__header .actions {
   display: flex;
   gap: var(--spacing-sm);
   align-items: center;
 }
-.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--header) {
+.Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--header) {
   cursor: pointer;
 }
-.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--header):hover {
+.Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--header):hover {
   background-color: var(--color-base-50);
 }
 .Layer__table__expand-icon {
@@ -2658,45 +2921,150 @@
   margin-left: -3px;
   margin-right: var(--spacing-sm);
 }
-.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header) {
+.Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header) {
   background-color: var(--color-base-50);
 }
-.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header):hover {
+.Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header):hover {
   background-color: var(--color-base-100);
 }
-.Layer__ledger-accounts__table .Layer__table-row--collapsed .Layer__table__expand-icon {
+.Layer__chart-of-accounts__table .Layer__table-row--collapsed .Layer__table__expand-icon {
   transform: rotate(-90deg);
 }
-.Layer__ledger-accounts__form {
+.Layer__chart-of-accounts__form {
   display: flex;
   flex-direction: column;
   padding: var(--spacing-xl);
 }
-.Layer__ledger-accounts__form .Layer__input-group.Layer__input-group--inline {
+.Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline {
   padding: var(--spacing-xs) 0;
 }
-.Layer__ledger-accounts__form .Layer__input-group.Layer__input-group--inline label {
+.Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline label {
   width: 140px;
   min-width: 140px;
   max-width: 140px;
 }
-.Layer__ledger-accounts__form-edit-entry {
+.Layer__chart-of-accounts__form-edit-entry {
   padding: var(--spacing-md) var(--spacing-xl);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-md);
 }
-.Layer__ledger-accounts__form-edit-entry .Layer__text {
+.Layer__chart-of-accounts__form-edit-entry .Layer__text {
   margin: 0;
 }
-.Layer__ledger-accounts__form__error-message {
+.Layer__chart-of-accounts__form__error-message {
   padding: var(--spacing-4xs) var(--spacing-xl);
   width: 100%;
   text-align: right;
   box-sizing: border-box;
   color: var(--color-danger);
 }
+.Layer__chart-of-accounts__form-row {
+  display: flex;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  box-sizing: border-box;
+  border-top: 1px solid var(--border-color);
+  background-color: var(--color-base-100);
+}
+.Layer__chart-of-accounts__form-row.Layer__chart-of-accounts__form-row--depth-0 {
+  background-color: var(--color-base-50);
+}
+.Layer__chart-of-accounts__form-row .Layer__btn {
+  align-self: flex-start;
+  min-width: 120px;
+}
+.Layer__chart-of-accounts__row---mobile {
+  visibility: hidden;
+  display: none;
+}
+.Layer__chart-of-accounts__row---mobile .Layer__chart-of-accounts__mobile-row-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  width: 100%;
+  padding-right: var(--spacing-md);
+  padding-top: var(--spacing-3xs);
+  padding-bottom: var(--spacing-3xs\a0);
+}
+.Layer__chart-of-accounts__mobile-row-content__top-row,
+.Layer__chart-of-accounts__mobile-row-content__bottom-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.Layer__chart-of-accounts__mobile-row-content__name {
+  color: var(--color-base-800);
+}
+.Layer__chart-of-accounts__mobile-row-content__balance {
+  color: var(--color-base-800);
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
+.Layer__chart-of-accounts__row---mobile.Layer__table-row--depth-0 .Layer__chart-of-accounts__mobile-row-content__name {
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
+.Layer__chart-of-accounts__mobile-row-content__types {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xs);
+}
+.Layer__chart-of-accounts__mobile-row-content__types .Layer__text {
+  color: var(--color-base-700);
+}
+.Layer__chart-of-accounts__mobile-row-content__separator {
+  height: 12px;
+  width: 1px;
+  background: var(--color-base-200);
+}
+.Layer__chart-of-accounts .Layer__desktop--hidden {
+  display: none;
+}
+.Layer__coa__type--mobile {
+  color: var(--color-base-800);
+}
+@container (min-width: 761px) and (max-width: 1024px) {
+  .Layer__chart-of-accounts .Layer__mobile--hidden {
+    display: none;
+  }
+  .Layer__chart-of-accounts .Layer__desktop--hidden.Layer__table-header {
+    display: table-cell;
+  }
+  .Layer__chart-of-accounts .Layer__desktop--hidden.Layer__table-cell-content {
+    display: flex;
+  }
+  .Layer__chart-of-accounts .Layer__coa__type .Layer__table-cell-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .Layer__chart-of-accounts .Layer__coa__type .Layer__table-cell-content.Layer__mobile--hidden {
+    display: none;
+  }
+  .Layer__chart-of-accounts .Layer__table-cell.Layer__coa__actions {
+    width: 64px;
+  }
+}
+@container (max-width: 760px) {
+  .Layer__table-cell.Layer__coa__actions {
+    width: 64px;
+  }
+  .Layer__chart-of-accounts__row---mobile {
+    visibility: visible;
+    display: table-row;
+  }
+  .Layer__chart-of-accounts__row---desktop {
+    visibility: hidden;
+    display: none;
+  }
+  .Layer__chart-of-accounts__form-row {
+    flex-direction: column;
+  }
+  .Layer__chart-of-accounts__form-row .Layer__chart-of-accounts__form-row__name_field {
+    flex: 1;
+    width: 100%;
+  }
+}
 .Layer__data-state {
   display: flex;
   flex-direction: column;
@@ -2748,7 +3116,6 @@
 }
 .Layer__linked-accounts {
   min-height: 150px;
-  box-shadow: 0px 2px 4px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--base-transparent-4);
   box-sizing: border-box;
 }
 .Layer__linked-accounts::-webkit-scrollbar {
@@ -2802,10 +3169,17 @@
   padding: var(--spacing-2xs);
   border-radius: var(--border-radius-sm);
   background: var(--base-transparent-1);
+  transition: all 0.15s ease-out;
 }
 .Layer__linked-accounts__new-account.--as-widget {
   min-height: 90px;
 }
+.Layer__linked-accounts__new-account:hover {
+  background: var(--base-transparent-2);
+}
+.Layer__linked-accounts__new-account:hover .Layer__linked-accounts__new-account-label {
+  color: var(--color-base-800);
+}
 @media screen and (max-width: 650px) {
   .Layer__linked-accounts__new-account {
     margin-right: var(--spacing-lg);
@@ -2819,6 +3193,7 @@
   gap: var(--spacing-xs);
   color: var(--color-base-500);
   text-align: center;
+  transition: all 0.15s ease-out;
 }
 .Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label span {
   line-height: normal;
@@ -2836,7 +3211,7 @@
 .Layer__linked-account-thumb .topbar {
   min-width: 272px;
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: space-between;
   background: var(--color-base-50);
   color: var(--color-base-900);
@@ -2957,34 +3332,6 @@
   transform: translate3d(5px, -5px, 0);
   transition: 0.15s all ease-out;
 }
-.Layer__linked-accounts__inactive {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4xs);
-  border-radius: 52px;
-  background: var(--color-danger-light);
-  color: var(--color-danger-dark);
-  padding: 1px var(--spacing-2xs) 1px 1px;
-  font-weight: 540px;
-  transition: 0.1s all ease-in-out;
-}
-.Layer__linked-accounts__inactive p {
-  line-height: normal;
-}
-.Layer__linked-accounts__inactive:hover {
-  background: var(--color-danger);
-}
-.Layer__linked-accounts__inactive .Layer__linked-accounts__inactive-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: var(--spacing-4xs);
-  border-radius: 100%;
-  background: var(--color-danger);
-  color: var(--color-base-900);
-}
 .Layer__loader {
   width: 100%;
   display: flex;
@@ -3069,6 +3416,83 @@
   background-color: transparent;
   cursor: default;
 }
+.Layer__panel {
+  flex: 1;
+  display: flex;
+  height: 100%;
+}
+.Layer__panel__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  padding-bottom: var(--spacing-lg);
+}
+.Layer__panel.Layer__panel--open .Layer__panel__content {
+  width: calc(100% - 480px);
+  border-right: 1px solid var(--color-base-300);
+}
+.Layer__panel .Layer__panel__content .Layer__component-header {
+  position: sticky;
+  top: 0;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(6px);
+  z-index: 1;
+}
+.Layer__panel__sidebar {
+  width: 480px;
+  max-width: 0;
+  position: -webkit-sticky;
+  position: sticky;
+  max-height: 0;
+  z-index: 1;
+  top: 0;
+  overflow-x: hidden;
+  transition: max-width 180ms ease-in-out;
+  background: var(--color-base-0);
+  height: 100%;
+  border-left: 1px solid var(--color-base-300);
+}
+.Layer__panel__sidebar .Layer__panel__sidebar-content {
+  width: 480px;
+  height: 100%;
+  opacity: 0.2;
+  transition: opacity 180ms ease-in-out;
+}
+.Layer__panel.Layer__panel--open .Layer__panel__sidebar {
+  max-width: 480px;
+  margin-left: -1px;
+  max-height: none;
+}
+.Layer__panel.Layer__panel--open .Layer__panel__sidebar .Layer__panel__sidebar-content {
+  opacity: 1;
+}
+@container (max-width: 1024px) {
+  .Layer__panel__sidebar {
+    position: absolute;
+    max-width: 100%;
+    width: 100%;
+    border-width: 0;
+    opacity: 0.2;
+    transform: translateY(-50px) scale(0.96);
+    transition: transform 120ms ease-in-out, opacity 120ms ease-in-out;
+  }
+  .Layer__panel.Layer__panel--open .Layer__panel__sidebar {
+    left: 0;
+    top: 0;
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    display: flex;
+    max-height: 100%;
+    justify-content: center;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  .Layer__panel.Layer__panel--open .Layer__panel__content {
+    width: 100%;
+  }
+}
 .Layer__pill {
   background-color: var(--badge-bg-color);
   color: var(--badge-color);
@@ -3083,50 +3507,14 @@
 .Layer__pill svg {
   margin-right: 0.25rem;
 }
-.Layer__profit-and-loss {
-  background-color: white;
-}
 .Layer__component-container .Layer__profit-and-loss {
   display: flex;
   align-items: stretch;
+  background-color: white;
 }
 .Layer__profit-and-loss__main-panel {
   flex: 1;
 }
-.Layer__profit-and-loss__side-panel {
-  box-sizing: border-box;
-  border-left: 1px solid var(--color-base-300);
-  max-width: 0;
-  overflow: hidden;
-  width: 480px;
-  opacity: 0.05;
-  transition: max-width 250ms ease-out, opacity 350ms ease-out;
-}
-.Layer__profit-and-loss__side-panel.open {
-  max-width: 480px;
-  opacity: 1;
-}
-@container (max-width: 1023px) {
-  .Layer__profit-and-loss__side-panel {
-    transition: transform 200ms ease-out;
-    position: absolute;
-    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 {
   font-size: 1.5rem;
   font-weight: 600;
@@ -3342,6 +3730,7 @@
   justify-content: space-evenly;
   column-gap: var(--spacing-md);
   row-gap: var(--spacing-md);
+  max-width: 1406px;
 }
 .Layer__profit-and-loss-summaries.flex-col {
   flex-direction: column;
@@ -3356,6 +3745,7 @@
   padding: var(--spacing-4xs);
   min-height: 52px;
   box-sizing: border-box;
+  background-color: var(--color-base-0);
 }
 .Layer__profit-and-loss-summaries__summary.Layer__actionable {
   cursor: pointer;
@@ -3375,10 +3765,12 @@
 }
 .Layer__profit-and-loss-summaries__summary.net-profit {
   padding-left: var(--spacing-xs);
+  min-height: 56px;
+}
+.Layer__profit-and-loss-summaries__summary.Layer__actionable.net-profit {
   background: var(--color-base-50);
   border-color: transparent;
   box-shadow: none;
-  min-height: 56px;
 }
 .Layer__profit-and-loss-summaries__loader {
   height: 17px;
@@ -3700,6 +4092,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   height: 12px;
   border-radius: 2px;
 }
+.Layer__profit-and-loss .Layer__panel__sidebar .Layer__panel__sidebar-content {
+  width: 100%;
+}
+.Layer__profit-and-loss .Layer__panel__sidebar .Layer__profit-and-loss-detailed-charts {
+  width: 100%;
+}
 .Layer__profit-and-loss-detailed-table__row {
   transition: background-color 300ms ease-out;
   background: transparent;