@layerfi/components 0.1.102-alpha.6 → 0.1.103-alpha

package/dist/index.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @import "https://rsms.me/inter/inter.css";
 @import "react-datepicker/dist/react-datepicker.css";
 
@@ -186,10 +185,10 @@
   --outline-default: var(--color-base-300);
   --outline-active: var(--color-base-500);
   --button-bg-default: var(--color-base-1000);
-  --button-fg-default: var(--color-base-0);
+  --button-bg-disabled: var(--color-base-200);
   --button-bg-active: var(--color-base-800);
+  --button-fg-default: var(--color-base-0);
   --button-fg-disabled: var(--color-base-500);
-  --button-bg-disabled: var(--color-base-200);
   --button-fg-ghost: var(--color-base-800);
   --button-border-color-ghost: var(--color-base-300);
   --button-border-color-ghost-active: var(--color-base-800);
@@ -3752,24 +3751,28 @@
   border-collapse: collapse;
 }
 .Layer__table::-webkit-scrollbar {
-  width: 6px;
   height: 6px;
+  width: 6px;
 }
 .Layer__table::-webkit-scrollbar-track {
-  background: #f1f1f1;
   border-radius: 4px;
+  background: #f1f1f1;
 }
 .Layer__table::-webkit-scrollbar-thumb {
-  background: #e2e2e2;
   border-radius: 4px;
+  background: #e2e2e2;
 }
 .Layer__table::-webkit-scrollbar-thumb:hover {
   background: #999;
 }
 .Layer__table .Layer__table-header {
-  color: var(--text-color-secondary);
+  position: relative;
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--text-sm);
+  line-height: 140%;
   font-weight: var(--font-weight-normal);
+  text-align: left;
+  color: var(--text-color-secondary);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -3777,44 +3780,40 @@
     "cv08" on,
     "ss03" on;
   text-overflow: ellipsis;
-  line-height: 140%;
   letter-spacing: -0.06px;
-  padding: var(--spacing-sm) var(--spacing-md);
-  text-align: left;
-  position: relative;
 }
 .Layer__table .Layer__table-header .Layer__table-cell {
   border-top: none;
 }
 .Layer__table .Layer__table-header .Layer__table-cell-content {
-  color: var(--text-color-secondary);
   font-size: var(--text-sm);
+  color: var(--text-color-secondary);
 }
 .Layer__table .Layer__table-header.Layer__table-header--primary .Layer__table-cell.Layer__table-cell--primary {
-  color: var(--text-color-primary);
   font-weight: var(--font-weight-bold);
+  color: var(--text-color-primary);
 }
 .Layer__table .Layer__table-body .Layer__table-empty-row:first-child {
   display: none;
 }
 .Layer__table .Layer__table-empty-row {
-  background: var(--color-base-100);
   height: var(--spacing-2xs);
   border-top: 1px solid var(--color-base-200);
   border-bottom: 1px solid var(--color-base-200);
+  background: var(--color-base-100);
 }
 .Layer__table .Layer__table-row--selected .Layer__table-cell:first-child {
   position: relative;
 }
 .Layer__table .Layer__table-row--selected .Layer__table-cell:first-child::after {
-  content: "";
-  display: block;
   position: absolute;
-  height: 100%;
   top: 0;
   left: 0;
+  display: block;
+  height: 100%;
   width: 4px;
   background: var(--color-base-400);
+  content: "";
 }
 .Layer__table .Layer__table-row {
   position: relative;
@@ -3912,23 +3911,23 @@
   }
 }
 .Layer__table .Layer__table-cell {
+  height: var(--spacing-5xl);
+  padding: 0;
+  border-top: 1px solid var(--border-color);
   font-size: var(--text-md);
   text-align: left;
   color: var(--text-color-secondary);
-  border-top: 1px solid var(--border-color);
-  height: var(--spacing-5xl);
-  padding: 0;
 }
 .Layer__table .Layer__table-cell.Layer__table-cell--nowrap {
   white-space: nowrap;
 }
 .Layer__table .Layer__table-cell.Layer__table-cell--primary {
-  color: var(--color-base-900);
   font-weight: var(--font-weight-bold);
+  color: var(--color-base-900);
 }
 .Layer__table .Layer__table-cell.Layer__table-cell--right .Layer__table-cell-content {
-  text-align: right;
   justify-content: flex-end;
+  text-align: right;
 }
 .Layer__table .Layer__table-cell.Layer__table-cell-amount--positive .Layer__table-cell-content::before {
   content: "$";
@@ -3939,36 +3938,36 @@
   flex-shrink: 0;
 }
 .Layer__table .Layer__table-cell .Layer__table-cell-content {
+  box-sizing: border-box;
+  position: relative;
+  top: 0;
   display: flex;
   align-items: center;
   height: 100%;
-  top: 0;
   padding: var(--spacing-sm) var(--spacing-md);
-  box-sizing: border-box;
   transition: all var(--transition-speed) ease-out;
-  position: relative;
 }
 .Layer__table .Layer__table-cell .Layer__table-cell-content .Layer__table-row--expand-icon {
-  transition: transform 0.1s ease-in-out;
-  width: 16px;
   height: 16px;
+  min-width: 16px;
   margin-right: 8px;
+  transition: transform 0.1s ease-in-out;
 }
 .Layer__table-cell-content-indentation {
-  height: 100%;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  box-sizing: border-box;
+  height: 100%;
 }
 .Layer__table-row--active .Layer__table-cell:first-child .Layer__table-cell-content::before {
-  content: "";
-  background-color: var(--color-base-400);
-  height: 100%;
-  width: 4px;
   position: absolute;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
+  height: 100%;
+  width: 4px;
+  background-color: var(--color-base-400);
+  content: "";
 }
 .Layer__table-row--hidden .Layer__table-cell {
   border-top-width: 0;
@@ -3989,13 +3988,6 @@
     opacity 50ms ease-in-out,
     padding 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.with-cell-separators > tbody > tr > td:first-child .Layer__table-cell-content::after,
 .Layer__table.with-cell-separators > tbody > tr > td:last-child .Layer__table-cell-content::after,
 .Layer__table.with-cell-separators > thead > tr > th:first-child.Layer__table-header::after,
@@ -4003,22 +3995,26 @@
   display: none;
 }
 .Layer__table-state-container {
-  padding: var(--spacing-2xl) var(--spacing-sm);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%;
   height: calc(100vh - 200px);
+  width: 100%;
+  padding: var(--spacing-2xl) var(--spacing-sm);
 }
 .Layer__component--as-widget .Layer__table-state-container {
   height: calc(100% - 160px);
 }
 .Layer__table-header {
-  color: var(--text-color-secondary);
+  position: relative;
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--text-sm);
+  line-height: 140%;
   font-weight: var(--font-weight-normal);
+  text-align: left;
+  color: var(--text-color-secondary);
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
@@ -4026,30 +4022,26 @@
     "cv08" on,
     "ss03" on;
   text-overflow: ellipsis;
-  line-height: 140%;
   letter-spacing: -0.06px;
-  padding: var(--spacing-sm) var(--spacing-md);
-  text-align: left;
-  position: relative;
 }
 .Layer__table-header.Layer__table-header--primary {
-  color: var(--text-color-primary);
   font-weight: var(--font-weight-bold);
+  color: var(--text-color-primary);
 }
 .Layer__table-cell--primary,
 .Layer__table-cell--primary .Layer__table-cell-content {
-  color: var(--color-base-700);
   font-weight: var(--font-weight-bold);
+  color: var(--color-base-700);
 }
 .Layer__table-cell-content {
+  box-sizing: border-box;
+  position: relative;
+  top: 0;
   display: flex;
   align-items: center;
   height: 100%;
-  top: 0;
   padding: var(--spacing-sm) var(--spacing-md);
-  box-sizing: border-box;
   transition: all var(--transition-speed) ease-out;
-  position: relative;
 }
 .Layer__table--hover-effect .Layer__table-row:hover {
   background-color: var(--color-base-50);
@@ -4061,18 +4053,19 @@
   text-align: right;
 }
 .Layer__bank-transaction-row--removing .Layer__table-cell-content {
-  max-height: 0;
   top: 1px;
+  overflow: hidden;
+  max-height: 0;
   padding-top: 0;
   padding-bottom: 0;
-  overflow: hidden;
 }
 @container (min-width: 1400px) {
   .Layer__table tr td:first-child .Layer__table-cell-content,
+  .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content {
+    padding-left: var(--spacing-xl);
+  }
   .Layer__table tr td:last-child .Layer__table-cell-content,
-  .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content,
   .Layer__table tr th:last-child.Layer__table-cell .Layer__table-cell-content {
-    padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
   }
 }
@@ -4081,31 +4074,23 @@
   height: 0;
 }
 .Layer__table-row.Layer__table-row--anim-starting-state td .Layer__table-cell-content {
-  opacity: 0;
+  height: 0%;
   padding-top: 0;
   padding-bottom: 0;
-  height: 0%;
+  opacity: 0;
 }
 .Layer__table__empty-row {
-  background: var(--color-base-100);
   height: var(--spacing-2xs);
   border-top: 1px solid var(--color-base-200);
   border-bottom: 1px solid var(--color-base-200);
+  background: var(--color-base-100);
 }
 tbody .Layer__table__empty-row:first-child {
   display: none;
 }
-.Layer__table-row.Layer__table-row--anim-complete-state {
-  height: var(--spacing-5xl);
-}
-.Layer__table-row.Layer__table-row--anim-complete-state td .Layer__table-cell-content {
-  opacity: 1;
-  padding-top: var(--spacing-sm);
-  padding-bottom: var(--spacing-sm);
-}
 .Layer__table-wrapper {
-  max-width: 100%;
   overflow: auto;
+  max-width: 100%;
 }
 .Layer__table-wrapper--bottom-spacing {
   padding-bottom: var(--spacing-lg);
@@ -4462,6 +4447,12 @@ tbody .Layer__table__empty-row:first-child {
   min-inline-size: var(--size);
   padding-inline: 0;
 }
+.Layer__UI__Button[data-ellipsis] {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .Layer__UI__Button[data-focus-visible] {
   outline: 1px auto -webkit-focus-ring-color;
 }
@@ -4518,6 +4509,19 @@ tbody .Layer__table__empty-row:first-child {
   outline: 2px solid var(--outline-default);
   background-color: var(--button-bg-active);
 }
+.Layer__UI__Button[data-variant=text] {
+  --size: 1.75rem;
+  padding-inline: var(--spacing-xs);
+  border: none;
+  background-color: transparent;
+}
+.Layer__UI__Button[data-variant=text][data-hovered]:not([data-disabled], [data-pressed]) {
+  outline: none;
+  text-decoration: underline;
+}
+.Layer__UI__Button[data-variant=text][data-pressed]:not([data-focus-visible]) {
+  text-decoration: none;
+}
 .Layer__ButtonTransparentContent {
   opacity: 0;
   grid-row: 1/-1;
@@ -4902,6 +4906,21 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-justify=space-between] {
   justify-content: space-between;
 }
+.Layer__Stack[data-overflow=scroll] {
+  overflow: scroll;
+}
+.Layer__Stack[data-overflow=hidden] {
+  overflow: hidden;
+}
+.Layer__Stack[data-overflow=auto] {
+  overflow: auto;
+}
+.Layer__Stack[data-overflow=clip] {
+  overflow: clip;
+}
+.Layer__Stack[data-overflow=visible] {
+  overflow: visible;
+}
 .Layer__Stack[data-gap="3xs"] {
   gap: var(--spacing-3xs);
 }
@@ -7815,18 +7834,18 @@ tbody .Layer__table__empty-row:first-child {
   padding-bottom: var(--spacing-lg);
 }
 .Layer__bank-transactions .Layer__bank-transactions__table-wrapper {
-  max-width: var(--max-component-width);
   overflow: auto;
+  max-width: var(--max-component-width);
   margin-bottom: var(--spacing-lg);
 }
 .Layer__syncing__info {
   display: flex;
-  align-items: center;
   gap: var(--spacing-md);
+  align-items: center;
   padding: 0 var(--spacing-md);
+  border-left: 1px solid var(--border-color);
   margin-left: var(--spacing-md);
   font-size: var(--text-sm);
-  border-left: 1px solid var(--border-color);
 }
 .Layer__bank-transaction-row__expand-button:disabled {
   cursor: default;
@@ -7853,15 +7872,15 @@ tbody .Layer__table__empty-row:first-child {
   background-color: var(--color-base-100);
 }
 .Layer__bank-transactions__header--mobile .Layer__syncing-component {
-  border-width: 0;
   padding: 0 var(--spacing-xs);
+  border-width: 0;
   margin-left: 0;
 }
 .Layer__syncing__info__text {
   display: flex;
   flex-direction: column;
-  color: var(--color-base-500);
   gap: var(--spacing-4xs);
+  color: var(--color-base-500);
 }
 .Layer__syncing__info__text span:first-child {
   color: var(--color-base-800);
@@ -7878,8 +7897,8 @@ tbody .Layer__table__empty-row:first-child {
   left: 0;
   display: flex;
   flex-direction: column;
-  width: 100%;
   align-items: stretch;
+  width: 100%;
 }
 .Layer__bank-transactions__header__content {
   display: flex;
@@ -7906,10 +7925,10 @@ tbody .Layer__table__empty-row:first-child {
   margin-right: 4px;
 }
 .Layer__bank-transactions__header-menu__upload-transactions-icon {
-  color: var(--color-base-500);
-  background: var(--color-base-200);
-  border-radius: var(--spacing-3xs);
   padding: var(--spacing-3xs);
+  border-radius: var(--spacing-3xs);
+  background: var(--color-base-200);
+  color: var(--color-base-500);
 }
 .Layer__bank-transaction-row {
   transition: all var(--transition-speed) ease-in-out;
@@ -7924,9 +7943,9 @@ tbody .Layer__table__empty-row:first-child {
   opacity: 1;
 }
 .Layer__bank-transaction-row.Layer__bank-transaction-row--removing .Layer__table-cell-content {
-  padding: 0 var(--spacing-md);
   overflow: hidden;
   min-height: 0;
+  padding: 0 var(--spacing-md);
 }
 .Layer__bank-transaction-row:first-child .Layer__table-cell {
   border-top-width: 0;
@@ -7935,13 +7954,14 @@ tbody .Layer__table__empty-row:first-child {
   border-bottom: 1px solid var(--border-color);
 }
 .Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child {
-  position: sticky;
-  min-width: 430px;
-  width: 430px;
-  max-width: 430px;
   box-sizing: border-box;
-  right: 0;
+  position: sticky;
   z-index: 2;
+  right: 0;
+  --width: 520px;
+  width: var(--width);
+  min-width: var(--width);
+  max-width: var(--width);
   border-left: 1px solid var(--border-color);
   background-color: var(--color-base-0);
 }
@@ -7954,32 +7974,32 @@ tbody .Layer__table__empty-row:first-child {
   cursor: default;
 }
 .Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child .Layer__bank-transaction-row__actions-disabled .Layer__select--is-disabled .Layer__select__control--is-disabled {
-  background-color: var(--color-base-50);
   border: none;
   box-shadow: none;
+  background-color: var(--color-base-50);
   cursor: default;
 }
 .Layer__bank-transactions__table .Layer__table-header {
-  background-color: var(--table-bg);
   border-bottom: 1px solid var(--border-color);
+  background-color: var(--table-bg);
 }
 .Layer__bank-transaction-row .Layer__table-cell {
   background-color: var(--table-bg);
   transition: background-color var(--transition-speed) ease-out;
 }
 .Layer__bank-transaction-row .Layer__table-cell-content {
-  min-height: 64px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
+  min-height: 64px;
 }
 .Layer__bank-transaction-row--expanded .Layer__table-cell {
   background-color: var(--bg-element-focus);
 }
 .Layer__expanded-bank-transaction-row {
+  position: relative;
   display: block;
   overflow: hidden;
-  position: relative;
   background-color: var(--bg-element-focus);
   transition: background-color var(--transition-speed) ease-in-out, height var(--transition-speed) ease-in-out;
 }
@@ -7997,12 +8017,12 @@ tbody .Layer__table__empty-row:first-child {
   background-color: var(--color-base-300);
 }
 .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) {
-  color: var(--btn-color-hover);
   background: var(--btn-bg-color-hover);
+  color: var(--btn-color-hover);
 }
 .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) .Layer__btn-icon {
-  color: var(--btn-color-icon-hover);
   background: var(--btn-bg-color-icon-hover);
+  color: var(--btn-color-icon-hover);
 }
 .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-active {
   display: block;
@@ -8019,15 +8039,15 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-list-item__category-text,
 .Layer__bank-transaction-row__category-text {
+  display: inline-flex;
   flex: 1;
+  gap: var(--spacing-xs);
+  align-items: center;
+  overflow: hidden;
+  padding-left: 10px;
   color: var(--text-color-primary);
   white-space: nowrap;
-  padding-left: 10px;
   text-overflow: ellipsis;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
 }
 .Layer__bank-transaction-list-item__category-text .Layer__tooltip-trigger,
 .Layer__bank-transaction-row__category-text .Layer__tooltip-trigger {
@@ -8038,8 +8058,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row__category-text .Layer__bank-transaction-list-item__category-text__text,
 .Layer__bank-transaction-row__category-text .Layer__bank-transaction-row__category-text__text {
   flex: 1;
-  max-width: 100%;
   overflow: hidden;
+  max-width: 100%;
   text-overflow: ellipsis;
 }
 .Layer__bank-transaction-list-item__category-text__text {
@@ -8049,62 +8069,62 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-list-item__content,
 .Layer__expanded-bank-transaction-row__content {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   max-width: 680px;
-  box-sizing: border-box;
 }
 .Layer__expanded-bank-transaction-row__content-panels {
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
   max-width: 680px;
-  box-sizing: border-box;
 }
 .Layer__expanded-bank-transaction-row__content-panel {
-  max-width: 0;
-  opacity: 0;
-  transition: max-width 150ms ease-out, opacity 300ms ease-out;
-  overflow: hidden;
-  flex: 1;
+  box-sizing: border-box;
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: var(--spacing-sm);
-  box-sizing: border-box;
+  overflow: hidden;
+  max-width: 0;
+  opacity: 0;
+  transition: max-width 150ms ease-out, opacity 300ms ease-out;
 }
 .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__content-panel-container {
-  padding: 0 var(--spacing-md);
   box-sizing: border-box;
+  padding: 0 var(--spacing-md);
 }
 .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
   max-width: 100%;
   opacity: 1;
 }
 .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__select .Layer__select__control {
-  max-width: 0;
   overflow: hidden;
+  max-width: 0;
 }
 .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__table-cell--split-entry {
-  max-width: 0;
   overflow: hidden;
+  max-width: 0;
 }
 .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-buttons {
-  max-width: 0;
   overflow: hidden;
+  max-width: 0;
 }
 .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-total {
-  max-width: 0;
   overflow: hidden;
+  max-width: 0;
 }
 .Layer__expanded-bank-transaction-row__table-cell--split-entry__right-col {
   display: flex;
-  gap: var(--spacing-sm);
   flex: 1;
+  gap: var(--spacing-sm);
   align-items: center;
 }
 .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
-  width: 36px;
   height: 36px;
+  width: 36px;
   padding: 0;
 }
 @container (min-width: 701px) {
@@ -8135,15 +8155,15 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-sm);
 }
 .Layer__expanded-bank-transaction-row__splits-inputs {
-  flex: 1;
-  padding-top: 2px;
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: var(--spacing-sm);
+  padding-top: 2px;
 }
 .Layer__expanded-bank-transaction-row__splits-total {
-  color: var(--color-base-500);
   padding: var(--spacing-3xs);
+  color: var(--color-base-500);
 }
 .Layer__expanded-bank-transaction-row__splits-buttons {
   padding-bottom: 2px;
@@ -8182,22 +8202,22 @@ tbody .Layer__table__empty-row:first-child {
   padding: 0 var(--spacing-md);
 }
 .Layer__expanded-bank-transaction-row__description textarea {
+  height: 100px;
   width: 100%;
   max-width: 680px;
-  height: 100px;
 }
 .Layer__expanded-bank-transaction-row__file-upload {
-  padding: 0 var(--spacing-md);
-  padding-bottom: var(--spacing-sm);
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: var(--spacing-md);
+  align-items: flex-start;
+  padding: 0 var(--spacing-md);
+  padding-bottom: var(--spacing-sm);
 }
 .Layer__bank-transaction-row__actions-cell {
+  width: 0%;
   border-left: 1px solid var(--border-color);
   transition: border 5s ease-out;
-  width: 0%;
 }
 .Layer__bank-transaction-row__expand-button {
   width: 36px;
@@ -8208,9 +8228,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-row__actions-container {
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: flex-end;
-  gap: 8px;
 }
 .Layer__expanded-bank-transaction-row__table-cell--split-entry {
   display: flex;
@@ -8236,15 +8256,15 @@ tbody .Layer__table__empty-row:first-child {
   transform: scale(1);
 }
 .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__base-row {
+  justify-content: flex-end;
   max-height: 60px;
   opacity: 1;
   transition: max-height 350ms ease-out, opacity 200ms ease-out;
-  justify-content: flex-end;
 }
 .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__expanded-row {
+  overflow: hidden;
   max-height: 0;
   padding: 0;
-  overflow: hidden;
   transition: all var(--transition-speed) ease-out;
 }
 .Layer__bank-transaction-list-item > .Layer__text--error {
@@ -8257,19 +8277,19 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--bg-element-focus);
 }
 .Layer__bank-transaction-list-item.Layer__bank-transaction-list-item--expanded .Layer__bank-transaction-list-item__base-row {
+  z-index: -1;
   max-height: 0;
   padding: 0;
   opacity: 0;
-  z-index: -1;
 }
 .Layer__bank-transaction-list-item.Layer__bank-transaction-list-item--expanded .Layer__bank-transaction-list-item__expanded-row {
   max-height: unset;
 }
 .Layer__bank-transaction-list-item__base-row {
-  display: flex;
-  align-items: center;
   box-sizing: border-box;
+  display: flex;
   gap: var(--spacing-sm);
+  align-items: center;
   padding: var(--spacing-md);
 }
 .Layer__bank-transaction-list-item__base-row .Layer__category-menu {
@@ -8280,13 +8300,13 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-list-item__heading {
   display: flex;
-  align-items: center;
-  color: var(--color-base-700);
-  font-size: var(--text-sm);
   gap: 4px;
+  align-items: center;
+  justify-content: space-between;
   padding: var(--spacing-md);
   padding-bottom: var(--spacing-sm);
-  justify-content: space-between;
+  font-size: var(--text-sm);
+  color: var(--color-base-700);
 }
 .Layer__bank-transaction-list-item__heading .Layer__bank-transaction-list-item__heading-separator {
   display: block;
@@ -8295,18 +8315,18 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-base-200);
 }
 .Layer__bank-transaction-list-item__heading .Layer__bank-transaction-list-item__heading__main {
-  gap: 4px;
   display: flex;
+  gap: 4px;
   align-items: center;
 }
 .Layer__bank-transaction-list-item__body {
+  box-sizing: border-box;
   display: flex;
-  justify-content: space-between;
   gap: 4px;
-  color: var(--text-color-primary);
+  justify-content: space-between;
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
-  box-sizing: border-box;
+  color: var(--text-color-primary);
 }
 .Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name {
   flex: 1;
@@ -8324,23 +8344,23 @@ tbody .Layer__table__empty-row:first-child {
   margin: 0 var(--spacing-xs);
 }
 .Layer__bank-transaction-list-item__processing-info {
+  box-sizing: border-box;
   display: flex;
-  justify-content: flex-end;
   gap: 4px;
-  color: var(--text-color-primary);
+  justify-content: flex-end;
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
-  box-sizing: border-box;
+  color: var(--text-color-primary);
 }
 .Layer__bank-transaction-list-item__processing-info .Layer__tooltip-trigger {
   flex: 0 auto;
 }
 .Layer__expanded-bank-transaction-row__submit-btn {
   box-sizing: border-box;
-  padding: var(--spacing-md);
-  padding-top: var(--spacing-sm);
   display: flex;
   gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  padding-top: var(--spacing-sm);
 }
 .Layer__table.Layer__bank-transactions__table {
   overflow: auto;
@@ -8350,36 +8370,37 @@ tbody .Layer__table__empty-row:first-child {
   width: 122px;
 }
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
-  position: sticky;
-  width: 150px;
-  min-width: 50px;
   box-sizing: border-box;
+  position: sticky;
   z-index: 2;
-  text-align: right;
+  --right-adjust: 520px;
+  right: var(--right-adjust);
+  width: 130px;
+  min-width: 130px;
   box-shadow: -8px 0 20px -2px rgba(255, 255, 255, 0.64);
-  right: 430px;
+  text-align: right;
 }
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col[data-show-receipt-upload-column] {
-  right: 494px;
+  right: calc(var(--right-adjust) + 64px);
 }
 .Layer__table-header.Layer__bank-transactions__documents-col {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 .Layer__table-header.Layer__bank-transactions__documents-col[data-show-receipt-upload-column] {
-  padding-left: 16px;
   padding-right: 16px;
+  padding-left: 16px;
 }
 .Layer__table.Layer__bank-transactions__table .Layer__bank-transactions__documents-col {
-  position: sticky;
-  right: 430px;
   box-sizing: border-box;
+  position: sticky;
   z-index: 2;
-  text-align: center;
-  box-shadow: -8px 0 20px -2px rgba(255, 255, 255, 0.64);
+  right: 520px;
   width: 0;
   min-width: 0;
   max-width: 0;
+  box-shadow: -8px 0 20px -2px rgba(255, 255, 255, 0.64);
+  text-align: center;
 }
 .Layer__table.Layer__bank-transactions__table .Layer__bank-transactions__documents-col[data-show-receipt-upload-column] {
   width: 64px;
@@ -8387,19 +8408,20 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 64px;
 }
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
-  position: sticky;
-  min-width: 430px;
-  width: 430px;
-  max-width: 430px;
   box-sizing: border-box;
-  right: 0;
+  position: sticky;
   z-index: 2;
+  right: 0;
+  --width: 520px;
+  width: var(--width);
+  min-width: var(--width);
+  max-width: var(--width);
 }
 .Layer__bank-transactions__date-col {
-  min-width: 140px;
+  box-sizing: border-box;
   width: 140px;
+  min-width: 140px;
   max-width: 140px;
-  box-sizing: border-box;
 }
 .Layer__bank-transactions__tx-col {
   box-sizing: border-box;
@@ -8409,16 +8431,16 @@ tbody .Layer__table__empty-row:first-child {
   width: 100%;
 }
 .Layer__bank-transactions__account-col {
-  min-width: 125px;
+  box-sizing: border-box;
   width: 180px;
+  min-width: 125px;
   max-width: 180px;
-  box-sizing: border-box;
 }
 .Layer__bank-transactions__documents-col {
-  min-width: 64px;
+  box-sizing: border-box;
   width: 64px;
+  min-width: 64px;
   max-width: 64px;
-  box-sizing: border-box;
   text-align: center;
 }
 .Layer__bank-transactions__documents-col .Layer__icon-box {
@@ -8426,15 +8448,15 @@ tbody .Layer__table__empty-row:first-child {
 }
 @container (min-width: 1400px) {
   .Layer__table.Layer__bank-transactions__table .Layer__table-header.Layer__bank-transactions__date-col {
-    min-width: 160px;
-    width: 160px;
-    max-width: 160px;
+    width: 150px;
+    min-width: 150px;
+    max-width: 150px;
+    padding-right: var(--spacing-md);
     padding-left: var(--spacing-xl);
-    padding-right: var(--spacing-xl);
   }
   .Layer__table.Layer__bank-transactions__table .Layer__table-header.Layer__table-cell__category-col {
-    padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
+    padding-left: var(--spacing-md);
   }
   .Layer__bank-transactions__table .Layer__skeleton-table-body__loader td:last-child .Layer__bank-transaction-row__actions-disabled {
     padding-right: var(--spacing-md);
@@ -8444,18 +8466,17 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col,
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col {
   text-overflow: ellipsis;
-  max-width: 280px;
 }
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__tx-text,
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__tx-text {
+  box-sizing: border-box;
   display: block;
-  max-width: 100%;
   overflow: hidden;
+  max-width: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
-  box-sizing: border-box;
 }
 .Layer__bank-transaction-row.Layer__bank-transaction-row--expanded td {
   vertical-align: top;
@@ -8468,41 +8489,41 @@ tbody .Layer__table__empty-row:first-child {
     border-left: 1px solid var(--border-color);
   }
   .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col::after {
-    content: "";
-    width: 50px;
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: -51px;
     height: 100%;
+    width: 50px;
     background:
       linear-gradient(
         90deg,
         rgba(255, 255, 255, 0) 0%,
         rgb(255, 255, 255) 120%);
-    position: absolute;
-    left: -51px;
-    top: 0;
-    z-index: 0;
+    content: "";
   }
 }
 @container (max-width: 1400px) {
   .Layer__bank-transactions__header {
-    padding-left: var(--spacing-md);
-    padding-right: var(--spacing-md);
-    padding-top: var(--spacing-md);
     row-gap: var(--spacing-sm);
+    padding-top: var(--spacing-md);
+    padding-right: var(--spacing-md);
+    padding-left: var(--spacing-md);
   }
 }
 @container (max-width: 760px) {
   .Layer__bank-transactions__header {
-    box-shadow: 0 -1px 0 0 rgba(23, 51, 45, 0.16) inset;
-    background-color: var(--table-bg);
     position: sticky;
-    top: 0;
     z-index: 2;
+    top: 0;
     border-top-left-radius: var(--border-radius-sm);
     border-top-right-radius: var(--border-radius-sm);
+    box-shadow: 0 -1px 0 0 rgba(23, 51, 45, 0.16) inset;
+    background-color: var(--table-bg);
   }
   .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile {
-    box-shadow: none;
     padding-bottom: var(--spacing-2xs);
+    box-shadow: none;
   }
 }
 .Layer__tooltip.Layer__bank-transactions__tx-tooltip {
@@ -8511,11 +8532,11 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-list-item__match-tooltip,
 .Layer__expanded-bank-transaction-row__match-tooltip,
 .Layer__bank-transaction-row__match-tooltip {
-  font-size: var(--text-sm);
   display: flex;
   flex-direction: column;
   row-gap: var(--spacing-2xs);
   min-width: 200px;
+  font-size: var(--text-sm);
 }
 .Layer__bank-transaction-list-item__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__date,
 .Layer__bank-transaction-list-item__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__date,
@@ -8537,8 +8558,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__description,
 .Layer__bank-transaction-row__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__description,
 .Layer__bank-transaction-row__match-tooltip .Layer__bank-transaction-row__match-tooltip__description {
-  color: var(--color-base-500);
   max-width: 230px;
+  color: var(--color-base-500);
 }
 .Layer__bank-transaction-list-item__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__amount,
 .Layer__bank-transaction-list-item__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__amount,
@@ -8553,17 +8574,17 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-list-item__split-tooltip,
 .Layer__bank-transaction-row__split-tooltip {
-  font-size: var(--text-sm);
   display: flex;
   flex-direction: column;
   row-gap: var(--spacing-2xs);
   min-width: 200px;
+  font-size: var(--text-sm);
 }
 .Layer__bank-transaction-list-item__split-tooltip ul,
 .Layer__bank-transaction-row__split-tooltip ul {
-  list-style: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style: none;
 }
 .Layer__bank-transaction-list-item__split-tooltip li,
 .Layer__bank-transaction-row__split-tooltip li {
@@ -8585,36 +8606,36 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-300);
 }
 .Layer__expanded-bank-transaction-row__match-table {
-  margin-bottom: var(--spacing-sm);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2xs);
+  margin-bottom: var(--spacing-sm);
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header {
   display: flex;
-  background: transparent;
   width: 100%;
+  background: transparent;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header > div {
   padding: var(--spacing-xs) var(--spacing-sm);
-  color: var(--color-base-500);
   font-size: var(--text-sm);
+  color: var(--color-base-500);
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__date {
-  width: 120px;
   box-sizing: border-box;
+  width: 120px;
   padding: var(--spacing-xs) var(--spacing-sm);
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__date .amount-next-to-date {
   display: none;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__amount {
-  text-align: right;
   padding: var(--spacing-xs) var(--spacing-sm);
+  text-align: right;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__status {
-  text-align: right;
   width: 90px;
+  text-align: right;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__status.no-match {
   width: 0;
@@ -8622,9 +8643,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc {
   flex: 1;
+  overflow: hidden;
   padding: var(--spacing-xs) var(--spacing-sm);
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc .match-badge {
@@ -8640,22 +8661,22 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 100%;
 }
 .Layer__expanded-bank-transaction-row__match-row {
-  cursor: pointer;
   display: flex;
   align-items: stretch;
   overflow: hidden;
+  cursor: pointer;
 }
 .Layer__expanded-bank-transaction-row__match-row .Layer__tooltip-trigger {
   padding-top: 0;
 }
 .Layer__expanded-bank-transaction-row__match-row > div {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  color: var(--color-base-500);
-  font-size: var(--text-md);
   display: flex;
   align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
   border-top: 1px solid var(--color-base-300);
   border-bottom: 1px solid var(--color-base-300);
+  font-size: var(--text-md);
+  color: var(--color-base-500);
 }
 .Layer__expanded-bank-transaction-row__match-row > div:first-child {
   border-top-left-radius: var(--border-radius-2xs);
@@ -8673,9 +8694,9 @@ tbody .Layer__table__empty-row:first-child {
   background-color: transparent;
 }
 .Layer__expanded-bank-transaction-row__match-row:hover > div {
-  background: var(--color-base-0);
   border-top: 1px solid var(--color-base-300);
   border-bottom: 1px solid var(--color-base-300);
+  background: var(--color-base-0);
   color: var(--color-base-700);
 }
 .Layer__expanded-bank-transaction-row__match-row:hover > div.Layer__expanded-bank-transaction-row__match-table__amount {
@@ -8692,9 +8713,9 @@ tbody .Layer__table__empty-row:first-child {
   border-right: 1px solid var(--color-base-300);
 }
 .Layer__expanded-bank-transaction-row__match-row--selected > div {
-  background: var(--color-base-0);
   border-top: 1px solid var(--color-base-800);
   border-bottom: 1px solid var(--color-base-800);
+  background: var(--color-base-0);
   color: var(--color-base-700);
 }
 .Layer__expanded-bank-transaction-row__match-row--selected > div.Layer__expanded-bank-transaction-row__match-table__amount {
@@ -8711,10 +8732,10 @@ tbody .Layer__table__empty-row:first-child {
   background-color: transparent;
 }
 .Layer__expanded-bank-transaction-row__match-row--selected:hover > div {
-  background: var(--color-base-0);
-  color: var(--color-base-700);
   border-top: 1px solid var(--color-base-500);
   border-bottom: 1px solid var(--color-base-500);
+  background: var(--color-base-0);
+  color: var(--color-base-700);
 }
 .Layer__expanded-bank-transaction-row__match-row--selected:hover > div:first-child {
   border-left: 1px solid var(--color-base-500);
@@ -8734,8 +8755,8 @@ tbody .Layer__table__empty-row:first-child {
   min-height: 72px;
 }
 .Layer__bank-transaction-mobile-list-item__description__label {
-  color: var(--color-base-500);
   margin-bottom: var(--spacing-2xs);
+  color: var(--color-base-500);
 }
 .Layer__bank-transaction-mobile-list-item__match-list {
   display: flex;
@@ -8745,19 +8766,19 @@ tbody .Layer__table__empty-row:first-child {
   margin: var(--spacing-md) 0;
 }
 .Layer__bank-transaction-mobile-list-item__match-item {
-  width: 100%;
-  padding: var(--spacing-xs) 0;
   display: flex;
-  align-items: center;
   gap: var(--spacing-sm);
+  align-items: center;
+  width: 100%;
+  padding: var(--spacing-xs) 0;
   border-bottom: 1px solid var(--color-base-50);
 }
 .Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__name {
   color: var(--color-base-500);
 }
 .Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__col-details {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
 }
 .Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__heading {
@@ -8772,10 +8793,10 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-500);
 }
 .Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__col-status {
-  width: 24px;
-  min-width: 24px;
   display: flex;
   justify-content: flex-end;
+  width: 24px;
+  min-width: 24px;
 }
 .Layer__bank-transaction-mobile-list-item__match-item.Layer__bank-transaction-mobile-list-item__match-item--selected .Layer__bank-transaction-mobile-list-item__match-item__name {
   color: var(--color-base-1000);
@@ -8819,9 +8840,9 @@ tbody .Layer__table__empty-row:first-child {
     color: var(--color-base-700);
   }
   .Layer__expanded-bank-transaction-row__match-row--selected {
+    border: 1px solid var(--color-base-800);
     background: var(--color-base-0);
     color: var(--color-base-700);
-    border: 1px solid var(--color-base-800);
   }
   .Layer__expanded-bank-transaction-row__match-row--selected > div {
     border-width: 0;
@@ -8847,8 +8868,8 @@ tbody .Layer__table__empty-row:first-child {
     display: none !important;
   }
   .Layer__expanded-bank-transaction-row__match-table__desc {
-    justify-content: space-between;
     gap: var(--spacing-sm);
+    justify-content: space-between;
   }
   .Layer__expanded-bank-transaction-row__match-table__desc > span:first-child {
     width: calc(100% - 120px);
@@ -8866,10 +8887,10 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 600px) {
   .Layer__expanded-bank-transaction-row__splits-inputs {
     display: flex;
-    flex-direction: column;
     flex: 1;
-    width: 100%;
+    flex-direction: column;
     gap: var(--spacing-sm);
+    width: 100%;
   }
   .Layer__expanded-bank-transaction-row__table-cell--split-entry {
     gap: var(--spacing-sm);
@@ -8879,21 +8900,21 @@ tbody .Layer__table__empty-row:first-child {
     width: 100%;
   }
   .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
+    position: relative;
     flex: 1;
     max-width: 42%;
-    position: relative;
   }
   .Layer__expanded-bank-transaction-row__total-and-btns {
+    box-sizing: border-box;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
-    box-sizing: border-box;
+    justify-content: space-between;
   }
   .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip {
+    position: relative;
     flex: 1;
     width: 100%;
     max-width: 42%;
-    position: relative;
   }
   .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
     max-width: 100%;
@@ -8914,13 +8935,13 @@ tbody .Layer__table__empty-row:first-child {
     padding: var(--spacing-3xs);
   }
   .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
-    width: 32px;
     height: 32px;
     min-height: 32px;
+    width: 32px;
   }
   .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn svg {
-    width: 14px;
     height: 14px;
+    width: 14px;
   }
   .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn,
   .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn {
@@ -8932,53 +8953,53 @@ tbody .Layer__table__empty-row:first-child {
   }
   .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn-icon,
   .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn-icon {
-    width: 12px;
     height: 12px;
+    width: 12px;
   }
 }
 .Layer__bank-transactions__notifications {
   position: absolute;
-  display: flex;
-  flex-direction: column;
+  z-index: 1;
   bottom: var(--spacing-2xs);
   left: calc(100% - 340px - var(--spacing-2xs));
-  transition: all var(--transition-speed) ease-in-out;
-  z-index: 1;
+  display: flex;
+  flex-direction: column;
   min-width: 300px;
+  transition: all var(--transition-speed) ease-in-out;
 }
 .Layer__bank-transactions__notifications .Layer__bank-transactions__notification {
-  transition: all var(--transition-speed) ease-in-out;
   overflow: hidden;
+  height: 56px;
   padding: 12px;
   margin: 0;
   margin-top: -12px;
-  height: 56px;
   cursor: pointer;
+  transition: all var(--transition-speed) ease-in-out;
 }
 .Layer__bank-transactions__notifications .Layer__bank-transactions__notification:hover .Layer__bank-transactions__notification-content {
   box-shadow: 0 0 3px 0 var(--base-transparent-12), 0 0 0 1px var(--color-base-200);
 }
 .Layer__bank-transactions__notifications .Layer__bank-transactions__notification-content {
   display: flex;
+  gap: var(--spacing-sm);
   align-items: center;
   padding: var(--spacing-xs);
   padding-right: var(--spacing-md);
-  gap: var(--spacing-sm);
   border-radius: var(--border-radius-3xs);
-  background: var(--color-base-0);
   box-shadow: 0 0 12px 0 var(--base-transparent-12), 0 0 0 1px var(--color-base-200);
+  background: var(--color-base-0);
 }
 .Layer__bank-transactions__notifications .Layer__bank-transactions__notification-icon {
-  width: var(--spacing-3xl);
-  height: var(--spacing-3xl);
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  height: var(--spacing-3xl);
+  width: var(--spacing-3xl);
   border-radius: var(--border-radius-3xs);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
   background: var(--color-base-0);
   color: var(--color-danger);
-  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
 }
 .Layer__bank-transactions__notifications .Layer__bank-transactions__notification-text {
   display: flex;
@@ -9004,18 +9025,18 @@ tbody .Layer__table__empty-row:first-child {
 }
 @keyframes fade-out {
   from {
-    opacity: 1;
-    transform: scale(1);
+    height: 56px;
     padding-top: 12px;
     padding-bottom: 12px;
-    height: 56px;
+    opacity: 1;
+    transform: scale(1);
   }
   to {
-    opacity: 0;
-    transform: scale(0.8);
+    height: 0;
     padding-top: 6px;
     padding-bottom: 6px;
-    height: 0;
+    opacity: 0;
+    transform: scale(0.8);
   }
 }
 .notification-enter {
@@ -9025,14 +9046,14 @@ tbody .Layer__table__empty-row:first-child {
   animation: fade-out var(--transition-speed) forwards;
 }
 .Layer__expanded-bank-transaction-row__splits-inputs + .Layer__text--error {
-  margin: 0;
   padding: var(--spacing-2xs) 0;
   padding-bottom: var(--spacing-md);
+  margin: 0;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__text--error {
-  margin: 0;
   padding: var(--spacing-2xs) 0;
   padding-bottom: var(--spacing-md);
+  margin: 0;
 }
 .Layer__bank-transaction-table__date-col,
 .Layer__bank-transactions__account-col {
@@ -9054,8 +9075,8 @@ tbody .Layer__table__empty-row:first-child {
 @container (min-width: 401px) {
   .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip,
   .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
-    max-width: 200px;
     flex: 1;
+    max-width: 200px;
   }
   .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip .Layer__input,
   .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip .Layer__input {
@@ -9064,20 +9085,20 @@ tbody .Layer__table__empty-row:first-child {
 }
 @container (max-width: 480px) {
   .Layer__expanded-bank-transaction-row__total-and-btns > .Layer__input-tooltip > .Layer__input:disabled {
+    box-shadow: none;
     background-color: transparent;
     border-color: transparent;
-    box-shadow: none;
   }
   .Layer__expanded-bank-transaction-row__total-and-btns > .Layer__input-tooltip > .Layer__input-left-text {
     border-right-color: transparent;
   }
 }
 .Layer__bank-transaction-row--removing .Layer__table-cell-content {
-  max-height: 0;
   top: 1px;
+  overflow: hidden;
+  max-height: 0;
   padding-top: 0;
   padding-bottom: 0;
-  overflow: hidden;
 }
 .Layer__bank-transactions__mobile-list {
   padding: 0;
@@ -9289,9 +9310,9 @@ tbody .Layer__table__empty-row:first-child {
   width: 100%;
 }
 .Layer__component-container.Layer__chart-of-accounts {
+  position: relative;
   display: flex;
   align-items: stretch;
-  position: relative;
 }
 .Layer__chart-of-accounts__loader-container {
   padding: var(--spacing-2xl);
@@ -9310,11 +9331,30 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__chart-of-accounts .Layer__panel {
   max-width: 100%;
 }
+.Layer__chart-of-accounts__table {
+  table-layout: fixed;
+}
+.Layer__chart-of-accounts__table .Layer__chart-of-accounts--name {
+  width: auto;
+  min-width: 16rem;
+}
+.Layer__chart-of-accounts__table .Layer__chart-of-accounts--type {
+  width: 8rem;
+}
+.Layer__chart-of-accounts__table .Layer__chart-of-accounts--subtype {
+  width: 16rem;
+}
+.Layer__chart-of-accounts__table .Layer__chart-of-accounts--balance {
+  width: 8rem;
+}
+.Layer__chart-of-accounts__table .Layer__chart-of-accounts--actions {
+  width: 8rem;
+}
 .Layer__chart-of-accounts__sidebar__header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
   gap: var(--spacing-md);
+  align-items: flex-start;
+  justify-content: space-between;
 }
 .Layer__chart-of-accounts__sidebar__header .actions {
   display: flex;
@@ -9342,27 +9382,27 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 140px;
 }
 .Layer__chart-of-accounts__form-edit-entry {
-  padding: var(--spacing-md);
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-md);
+  padding: var(--spacing-md);
 }
 .Layer__chart-of-accounts__form-edit-entry .Layer__text {
   margin: 0;
 }
 .Layer__chart-of-accounts__form__error-message {
-  padding: var(--spacing-4xs) var(--spacing-xl);
+  box-sizing: border-box;
   width: 100%;
+  padding: var(--spacing-4xs) var(--spacing-xl);
   text-align: right;
-  box-sizing: border-box;
   color: var(--color-danger);
 }
 .Layer__chart-of-accounts__form-row {
+  box-sizing: border-box;
   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);
 }
@@ -9374,17 +9414,17 @@ tbody .Layer__table__empty-row:first-child {
   min-width: 120px;
 }
 .Layer__chart-of-accounts__row---mobile {
-  visibility: hidden;
   display: none;
+  visibility: hidden;
 }
 .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);
+  padding-right: var(--spacing-md);
+  padding-bottom: var(--spacing-3xs);
 }
 .Layer__chart-of-accounts__mobile-row-content__top-row,
 .Layer__chart-of-accounts__mobile-row-content__bottom-row {
@@ -9396,16 +9436,16 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-800);
 }
 .Layer__chart-of-accounts__mobile-row-content__balance {
-  color: var(--color-base-800);
   font-weight: var(--font-weight-bold);
+  color: var(--color-base-800);
 }
 .Layer__chart-of-accounts__row---mobile.Layer__table-row--depth-0 .Layer__chart-of-accounts__mobile-row-content__name {
   font-weight: var(--font-weight-bold);
 }
 .Layer__chart-of-accounts__mobile-row-content__types {
   display: flex;
-  align-items: center;
   gap: var(--spacing-3xs);
+  align-items: center;
 }
 .Layer__chart-of-accounts__mobile-row-content__types .Layer__text {
   color: var(--color-base-700);
@@ -9442,26 +9482,26 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__input-group,
   .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__chart-of-accounts__form__input-group__title {
     box-sizing: border-box;
-    max-width: 600px;
     width: 100%;
+    max-width: 600px;
     margin: auto;
   }
   .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__chart-of-accounts__form-edit-entry {
     box-sizing: border-box;
+    width: 100%;
     max-width: calc(600px + var(--spacing-xl) * 2);
     padding: var(--spacing-md) var(--spacing-xl);
-    width: 100%;
     margin: auto;
   }
   .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
     width: 100%;
-    margin: auto;
-    padding: var(--spacing-md) var(--spacing-xl);
     max-width: calc(600px + var(--spacing-xl) * 2);
+    padding: var(--spacing-md) var(--spacing-xl);
+    margin: auto;
   }
   .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .actions {
-    max-width: 600px;
     width: 100%;
+    max-width: 600px;
     margin: auto;
   }
 }
@@ -9478,12 +9518,12 @@ tbody .Layer__table__empty-row:first-child {
     overflow: auto;
   }
   .Layer__chart-of-accounts__row---mobile {
-    visibility: visible;
     display: table-row;
+    visibility: visible;
   }
   .Layer__chart-of-accounts__row---desktop {
-    visibility: hidden;
     display: none;
+    visibility: hidden;
   }
   .Layer__chart-of-accounts__form-row {
     flex-direction: column;
@@ -9525,9 +9565,6 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 100%;
   overflow: auto;
 }
-.Layer__journal-table .Layer__table-cell-content::before {
-  background: var(--color-base-400);
-}
 .Layer__journal__arrow .Layer__table-cell-content {
   padding-right: 0 !important;
 }