@layerfi/components 0.1.4 → 0.1.6

package/dist/styles/index.css

@@ -1,7 +1,9 @@
 @import "https://rsms.me/inter/inter.css";
 
 /* src/styles/index.scss */
-.Layer__component {
+.Layer__component,
+.Layer__select__menu-portal,
+.Layer__tooltip {
   --color-black: #1A1A1A;
   --color-white: white;
   --color-info-error: #E46362;
@@ -13,20 +15,26 @@
   --color-dark: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l));
   --color-light-h: 0;
   --color-light-s: 0%;
-  --color-light-l: 100%;
+  --color-light-l: 90%;
   --color-light: hsl(var(--color-light-h) var(--color-light-s) var(--color-light-l));
+  --color-base-0: #fff;
   --color-base-50: hsl(var(--color-dark-h) 1% 98%);
   --color-base-100: hsl(var(--color-dark-h) 1% 96%);
   --color-base-200: hsl(var(--color-dark-h) 1% 94%);
   --color-base-300: hsl(var(--color-dark-h) 2% 92%);
   --color-base-400: var(--color-light);
-  --color-base-500: hsl(var(--color-dark-h) 5% 53%);
+  --color-base-500: hsl(var(--color-dark-h) 2% 53%);
   --color-base-600: hsl(var(--color-dark-h) 7% 40%);
   --color-base-700: hsl(var(--color-dark-h) 9% 27%);
   --color-base-800: hsl(var(--color-dark-h) 12% 20%);
   --color-base-900: var(--color-dark);
   --color-base-1000: hsl(var(--color-dark-h) 20% 7%);
   --max-component-width: 1408px;
+  --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);
+  --base-transparent-8: hsla(var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.08);
+  --base-transparent-12: hsla(var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.12);
   --color-primary: var(--color-dark);
   --color-accent: var(--color-light);
   --color-secondary: var(--color-base);
@@ -43,6 +51,7 @@
     "InterVariable",
     "Inter",
     sans-serif;
+  --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 14px;
   --text-lg: 16px;
@@ -50,24 +59,32 @@
   --text-heading-sm: 16px;
   --font-weight-normal: 460;
   --font-weight-bold: 580;
+  --spacing-4xs: 2px;
   --spacing-3xs: 4px;
   --spacing-2xs: 6px;
   --spacing-xs: 8px;
   --spacing-sm: 12px;
   --spacing-md: 16px;
+  --spacing-lg: 24px;
   --spacing-xl: 32px;
   --spacing-2xl: 36px;
+  --spacing-3xl: 40px;
+  --spacing-5xl: 52px;
   --bg-color: var(--color-white);
   --border-color: var(--color-base-200);
+  --border-radius-4xs: 2px;
+  --border-radius-3xs: 4px;
   --border-radius-2xs: 6px;
+  --border-radius-xs: 8px;
   --border-radius-sm: 12px;
   --border-radius: 16px;
+  --border-radius-5xl: 52px;
   --text-color-transaction-credit: var(--color-info-success);
   --text-color-varying-amount: var(--color-base-700);
   --input-border-radius: var(--border-radius-2xs);
   --input-font-size: var(--text-md);
   --input-border-color: var(--color-base-300);
-  --input-placeholder-color: var(--color-base-500);
+  --input-placeholder-color: var(--color-base-300);
   --label-color: var(--color-base-700);
   --btn-font-size: var(--text-md);
   --btn-border-radius: var(--border-radius-2xs);
@@ -81,12 +98,14 @@
   --btn-bg-color-icon-hover: var(--color-accent);
   --btn-secondary-color: var(--color-black);
   --btn-secondary-bg-color: var(--color-white);
-  --badge-color: var(--text-color-primary);
-  --badge-bg-color: var(--color-base-300);
+  --badge-color: var(--color-dark);
+  --badge-bg-color: var(--color-base-400);
   --badge-border-radius: var(--border-radius-sm);
   --table-bg: var(--color-white);
   --tooltip-color: var(--color-white);
   --tooltip-bg-color: var(--color-base-800);
+  --bar-color-income: var(--color-base-400);
+  --bar-color-expenses: var(--color-base-900);
   --color-alabaster: #f9f9f9;
   --color-athens-gray: #eaecf0;
   --color-blue-ribbon: #0c48e5;
@@ -99,13 +118,10 @@
   --color-mischke: #d0d5dd;
   --color-zumthor: #e0e9ff;
   --active: var(--color-zumthor);
-  --bar-color-expenses: var(--color-cornflower-blue);
-  --bar-color-income: var(--color-blue-ribbon);
   --border-color: var(--color-athens-gray);
   --buttons-border-color: var(--color-mischke);
   --button-color-dark: var(--color-fiord);
   --corner-radius: 0.5rem;
-  --error-color: var(--color-red);
   --indicator-color: var(--color-mine-shaft);
   --table-border-color: var(--color-athens-gray);
   --table-expanded-background-color: var(--color-alabaster);
@@ -125,6 +141,51 @@
     "cv08" on,
     "ss03" on;
 }
+.Layer__component *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.Layer__component *::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+.Layer__component *::-webkit-scrollbar-thumb {
+  background: #e2e2e2;
+  border-radius: 4px;
+}
+.Layer__component *::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+.Layer__badge {
+  display: inline-flex;
+  gap: var(--spacing-3xs);
+  border-radius: var(--border-radius-5xl);
+  background-color: var(--badge-bg-color);
+  color: var(--badge-color);
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  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;
+}
+.Layer__badge.Layer__badge--small {
+  font-size: var(--text-xs);
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  line-height: 1.1;
+}
+.Layer__badge.Layer__badge--clickable {
+  cursor: pointer;
+}
+.Layer__badge.Layer__badge--clickable:hover {
+  background-color: var(--badge-color);
+  color: var(--badge-bg-color);
+  border-color: var(--badge-color);
+}
+.Layer__badge .Layer__badge__icon {
+  margin-top: 2px;
+}
 .Layer__btn {
   position: relative;
   border-radius: var(--btn-border-radius);
@@ -148,30 +209,59 @@
     0px 3px 4px 0px rgba(0, 0, 0, 0.02),
     0px 4px 5px 0px rgba(0, 0, 0, 0.01);
   transition: all 100ms ease-out;
+  padding: 0 var(--spacing-md);
+}
+.Layer__btn.Layer__btn--with-primary-icon {
+  padding: 0;
+}
+.Layer__btn.Layer__btn--with-primary-icon .Layer__btn-text {
+  padding: 0 var(--spacing-md);
+}
+.Layer__btn .Layer__btn-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: var(--spacing-xs);
+}
+.Layer__btn .Layer__btn-content.Layer__justify--space-between {
+  justify-content: space-between;
+}
+.Layer__btn.Layer__btn--with-primary-icon .Layer__btn-content {
+  column-gap: 0;
 }
 .Layer__btn .Layer__btn-icon {
   color: var(--btn-color-icon);
-  background: var(--btn-bg-color-icon);
+  background: transparent;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
-  width: 32px;
-  height: 32px;
   transition: all 150ms ease-out;
 }
 .Layer__btn .Layer__btn-icon .Layer__btn-icon--on-active {
   display: none;
 }
+.Layer__btn .Layer__btn-icon.Layer__btn-icon--primary {
+  background: var(--btn-bg-color-icon);
+  width: 32px;
+  height: 32px;
+}
 .Layer__btn:hover {
-  box-shadow:
-    0px 2px 4px 0px rgba(25, 25, 25, 0.06),
-    0px 4px 12px 0px var(--neutral-8, rgba(26, 26, 26, 0.08)),
-    0px 0px 0px 1px rgba(25, 25, 25, 0.06);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300), 0px 1px 2px 0px var(--base-transparent-6, rgba(17, 17, 17, 0.06));
+}
+.Layer__btn:visited,
+.Layer__btn:active {
+  box-shadow: 0px 0px 0px 1px var(--color-base-800), 0px 0px 0px 3px var(--color-base-300);
 }
 .Layer__btn:disabled {
   box-shadow: none;
+  background-color: var(--color-base-200);
+  color: var(--color-base-500);
+}
+.Layer__btn:disabled .Layer__btn-icon {
+  background-color: transparent;
+  color: var(--color-base-500);
 }
 .Layer__btn--secondary {
   color: var(--btn-secondary-color);
@@ -209,13 +299,9 @@
 .Layer__btn-text {
   font-family: var(--font-family);
   font-size: var(--btn-font-size);
-  padding: 0 14px;
-}
-.Layer__btn-icon--left {
-  margin-right: -4px;
 }
-.Layer__btn-icon--right {
-  margin-left: -4px;
+.Layer__btn--with-primary-icon .Layer__btn-text {
+  padding-right: calc(var(--spacing-md) - 4px);
 }
 .Layer__btn--icon-only .Layer__btn-icon--right {
   margin-left: 0;
@@ -223,6 +309,111 @@
 .Layer__btn--icon-only .Layer__btn-icon--left {
   margin-right: 0;
 }
+.Layer__icon-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--color-base-500);
+  border-radius: var(--btn-border-radius);
+  border-width: 0px;
+  font-family: var(--font-family);
+  font-variation-settings: "wght" var(--font-weight-normal);
+  font-variant-numeric: lining-nums proportional-nums;
+  font-feature-settings:
+    "cv10" on,
+    "cv05" on,
+    "cv08" on,
+    "ss03" on;
+  padding: 0;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all 100ms ease-out;
+}
+.Layer__icon-btn:hover {
+  background-color: var(--color-base-300);
+  color: var(--color-base-1000);
+}
+.Layer__icon-btn.Layer__icon-btn--active {
+  background-color: var(--color-base-200);
+  color: var(--color-base-1000);
+}
+.Layer__icon-btn.Layer__icon-btn--active:hover {
+  background-color: var(--color-base-300);
+}
+.Layer__text-btn {
+  outline: none;
+  box-shadow: none;
+  border-width: 0;
+  text-decoration: underline;
+  color: var(--color-base-700);
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+.Layer__text-btn:hover {
+  color: var(--color-base-1000);
+}
+.Layer__retry-btn {
+  color: var(--color-danger);
+}
+.Layer__retry-btn .Layer__btn-icon {
+  color: var(--color-danger);
+  transition: all 300ms ease-in-out;
+}
+.Layer__retry-btn:hover .Layer__btn-icon {
+  transform: rotate(-30deg);
+}
+.Layer__retry-btn.Layer__btn--processing .Layer__btn-icon {
+  -webkit-animation: rotating-ccw 2s linear infinite;
+  -moz-animation: rotating-ccw 2s linear infinite;
+  -ms-animation: rotating-ccw 2s linear infinite;
+  -o-animation: rotating-ccw 2s linear infinite;
+  animation: rotating-ccw 2s linear infinite;
+}
+.Layer__unsaved-info {
+  color: var(--color-danger);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4xs);
+}
+.Layer__component .recharts-responsive-container {
+  padding: 4px;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  border-radius: var(--border-radius-xs);
+}
+.Layer__component .recharts-responsive-container .recharts-cartesian-axis-line {
+  stroke: var(--color-base-300);
+}
+.Layer__chart-container {
+  min-height: 200px;
+}
+.Layer__chart__tooltip {
+  background-color: var(--color-base-1000);
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  color: var(--color-base-500);
+  border-radius: var(--border-radius-3xs);
+  font-size: var(--text-sm);
+}
+.Layer__chart__tooltip-list {
+  margin: 0;
+  padding: 0;
+}
+.Layer__chart__tooltip-list li {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--spacing-sm);
+}
+.Layer__chart__tooltip-list .Layer__chart__tooltip-label {
+  color: var(--color-base-500);
+}
+.Layer__chart__tooltip-list .Layer__chart__tooltip-value {
+  color: var(--color-base-300);
+}
 .Layer__component-container {
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--border-color);
@@ -246,7 +437,7 @@
   background: #999;
 }
 .Layer__component-header {
-  padding: var(--spacing-xl);
+  padding: var(--spacing-md);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -258,6 +449,13 @@
     padding: var(--spacing-md);
   }
 }
+@container (min-width: 1023px) {
+  .Layer__component-header {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    padding-top: var(--spacing-xl);
+  }
+}
 ::placeholder {
   color: var(--input-placeholder-color);
 }
@@ -271,20 +469,53 @@
 }
 .Layer__input {
   padding: 8px;
+  box-sizing: border-box;
+  position: relative;
   border: 1px solid var(--border-color);
   border-radius: var(--input-border-radius);
   border-width: 0px;
-  box-shadow: 0px 0px 0px 1px var(--input-border-color);
+  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
+  margin: 1px;
   font-family: var(--font-family);
   font-size: var(--input-font-size);
   line-height: 140%;
 }
+.Layer__input.Layer__input--error {
+  color: var(--color-danger);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300), 0px 0px 0px 2px var(--color-danger);
+}
+.Layer__input:disabled {
+  background-color: var(--color-base-100);
+  color: var(--color-base-800);
+}
+.Layer__input--with-left-text {
+  padding-left: 60px;
+}
+.Layer__input-left-text {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: var(--spacing-xs);
+  padding-right: var(--spacing-sm);
+  box-sizing: border-box;
+  border-right: 1px solid var(--input-border-color);
+  color: var(--color-base-700);
+  font-size: var(--text-sm);
+}
+.Layer__input-tooltip {
+  flex: 0;
+  position: relative;
+}
 .Layer__textarea {
   padding: 10px 14px;
   border-radius: var(--input-border-radius);
   border-width: 0px;
   box-sizing: border-box;
   box-shadow: 0px 0px 0px 1px var(--input-border-color);
+  margin: 1px;
   font-family: var(--font-family);
   font-size: var(--input-font-size);
 }
@@ -304,6 +535,7 @@
   height: 38px;
   background: var(--color-base-100);
   box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  margin: 1px;
   cursor: pointer;
   position: relative;
   isolation: isolate;
@@ -339,7 +571,8 @@
   font-family: var(--font-family);
   font-size: var(--btn-font-size);
   cursor: pointer;
-  transition: color var(--transition-speed) ease-in-out;
+  transition: color var(--transition-speed) ease-in-out, background-color 150ms ease-in-out;
+  justify-content: center;
 }
 .Layer__toggle-option input + span:hover {
   color: var(--text-color-primary);
@@ -351,12 +584,18 @@
   cursor: not-allowed;
   color: var(--text-color-secondary);
 }
+.Layer__toggle-option:hover input + span {
+  background-color: var(--color-base-200);
+}
+.Layer__toggle-option:hover input:disabled + span,
+.Layer__toggle-option:hover input:checked + span {
+  background-color: transparent;
+}
 .Layer__toggle.Layer__toggle--small .Layer__toggle-option input + span {
   height: 32px;
   border-radius: 6px;
 }
 .Layer__toggle__thumb {
-  background: red;
   position: absolute;
   width: 100px;
   left: 0;
@@ -379,7 +618,7 @@
   border-radius: 6px;
 }
 .Layer__toggle--initialized .Layer__toggle__thumb {
-  transition: left var(--transition-speed) ease-in-out, width var(--transition-speed) ease-out;
+  transition: left 150ms ease, width 150ms ease;
 }
 .Layer__select {
   border-width: 0px;
@@ -393,11 +632,13 @@
     "cv08" on,
     "ss03" on;
   line-height: 140%;
+  width: calc(100% + 200px);
 }
 .Layer__select .Layer__select__control {
   border-width: 0px;
   border-radius: var(--input-border-radius);
   box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  margin: 1px;
   min-height: 36px;
 }
 .Layer__select .Layer__select__control--is-focused {
@@ -420,31 +661,102 @@
     "cv08" on,
     "ss03" on;
 }
+.Layer__select .Layer__select__option-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
 .Layer__select__menu-portal {
   font-family: var(--font-family);
   font-size: var(--input-font-size);
   line-height: 140%;
 }
+.Layer__select__menu-portal .Layer__select__menu {
+  width: calc(100% + 60px);
+  margin-left: -30px;
+}
+.Layer__select__menu-portal .Layer__select__group-heading {
+  color: var(--color-base-500);
+  font-size: var(--text-xs);
+  padding: var(--spacing-xs) var(--spacing-md);
+}
 .Layer__select__menu-portal .Layer__select__option {
   font-family: var(--font-family);
-  font-size: 12px;
-  color: #636665;
+  font-size: var(--text-md);
+  color: var(--color-base-900);
   cursor: pointer;
   transition: all 200ms ease-out;
+  background: var(--color-white);
+  padding: var(--spacing-xs) var(--spacing-md);
 }
 .Layer__select__menu-portal .Layer__select__option.Layer__select__option--is-selected {
-  color: #1A1A1A;
-  background: #FAFCFC;
+  color: var(--text-color-primary);
 }
-.Layer__select__menu-portal .Layer__select__option:hover {
-  color: #1A1A1A;
-  background: #FAFCFC;
+.Layer__select__menu-portal .Layer__select__option.Layer__select__option--is-focused,
+.Layer__select__menu-portal .Layer__select__option.Layer__select__option--is-selected,
+.Layer__select__menu-portal .Layer__select__option:hover,
+.Layer__select__menu-portal .Layer__select__option:focus,
+.Layer__select__menu-portal .Layer__select__option:active,
+.Layer__select__menu-portal .Layer__select__option:focus-visible,
+.Layer__select__menu-portal .Layer__select__option:focus-within {
+  color: var(--text-color-primary);
+  background: var(--color-base-100);
 }
 .Layer__select__menu-portal .Layer__select__menu-notice {
   font-family: var(--font-family);
   font-size: 12px;
   color: #999999;
 }
+.Layer__select__menu-portal .Layer__select__option-menu-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Layer__select__menu-portal .Layer__select__option-menu-content-check {
+  margin-top: 2px;
+}
+.Layer__select__menu-portal .Layer__select__group-heading--main {
+  font-size: var(--text-xs);
+  color: var(--color-base-700);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-bottom: 1px solid var(--color-base-200);
+}
+.Layer__select__menu-portal .Layer__select__option--separator {
+  font-size: var(--text-xs);
+  color: var(--color-base-700);
+  padding: var(--spacing-xs);
+  padding-top: var(--spacing-md);
+}
+.Layer__select__menu-portal .Layer__select__option--hidden {
+  display: none;
+}
+.Layer__select__menu-portal .Layer__select__option-content__match {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__main-row {
+  display: flex;
+  gap: var(--spacing-3xs);
+  flex-direction: column;
+}
+.Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__date {
+  font-size: var(--text-sm);
+  color: var(--color-base-600);
+  white-space: nowrap;
+}
+.Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__description {
+  font-size: var(--text-sm);
+  color: var(--color-base-700);
+}
+.Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__amount-row {
+  display: flex;
+}
+.Layer__select__menu-portal .Layer__select__option-content__match .Layer__select__option-content__match__amount {
+  font-size: var(--text-sm);
+  color: var(--color-base-900);
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
 .Layer__category-menu {
   width: 15rem;
 }
@@ -453,6 +765,11 @@
   max-width: 100%;
   flex: 1;
 }
+@media screen and (max-width: 400px) {
+  .Layer__select__menu-portal .Layer__select__option {
+    font-size: var(--text-sm) !important;
+  }
+}
 .Layer__table {
   width: 100%;
   border-collapse: separate;
@@ -488,6 +805,7 @@
   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);
@@ -508,6 +826,24 @@
   padding: var(--spacing-sm) var(--spacing-md);
   box-sizing: border-box;
   transition: all var(--transition-speed) ease-out;
+  position: relative;
+}
+.Layer__table.with-cell-separators > tbody > tr > td .Layer__table-cell-content::after,
+.Layer__table.with-cell-separators > tbody > tr > th.Layer__table-header::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-base-200);
+  top: 50%;
+  margin-top: -10px;
+}
+.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,
+.Layer__table.with-cell-separators > thead > tr > th:last-child.Layer__table-header::after {
+  display: none;
 }
 .Layer__table-state-container {
   display: flex;
@@ -527,6 +863,15 @@
   padding-bottom: 0;
   overflow: hidden;
 }
+@container (min-width: 1400px) {
+  .Layer__table tr td:first-child .Layer__table-cell-content,
+  .Layer__table tr td:last-child .Layer__table-cell-content,
+  .Layer__table tr th:first-child.Layer__table-header,
+  .Layer__table tr th:last-child.Layer__table-header {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+}
 .Layer__heading {
   color: var(--text-color-primary);
   font-size: var(--text-heading);
@@ -566,6 +911,9 @@
 .Layer__text.Layer__text--bold {
   font-variation-settings: "wght" var(--font-weight-bold);
 }
+.Layer__text--error {
+  color: var(--color-danger);
+}
 .Layer__flex-1 {
   flex: 1;
 }
@@ -581,6 +929,12 @@
 .Layer__justify--space-between {
   justify-content: space-between;
 }
+.Layer__nowrap {
+  white-space: nowrap;
+}
+.Layer__pt-2 {
+  padding-top: 2px;
+}
 @keyframes rotating {
   from {
     -ms-transform: rotate(0deg);
@@ -597,6 +951,22 @@
     transform: rotate(360deg);
   }
 }
+@keyframes rotating-ccw {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
 .Layer__anim--rotating {
   -webkit-animation: rotating 2s linear infinite;
   -moz-animation: rotating 2s linear infinite;
@@ -832,12 +1202,37 @@
 .Layer__bank-transactions__loader-container {
   padding: var(--spacing-2xl);
 }
+.Layer__bank-transactions__header {
+  position: sticky;
+  left: 0;
+}
+.Layer__bank-transaction-row {
+  transition: all var(--transition-speed) ease-in-out;
+  top: 1px;
+  transform: scale(0.8);
+  opacity: 0;
+}
+.Layer__bank-transaction-row.show {
+  transform: scale(1);
+  opacity: 1;
+}
+.Layer__bank-transaction-row.Layer__bank-transaction-row--removing {
+  top: 0;
+}
+.Layer__bank-transaction-row.Layer__bank-transaction-row--removing .Layer__table-cell-content {
+  padding: 0 var(--spacing-md);
+  overflow: hidden;
+  min-height: 0;
+}
 .Layer__bank-transaction-row .Layer__table-cell {
   border-top: 1px solid var(--border-color);
 }
 .Layer__bank-transaction-row:first-child .Layer__table-cell {
   border-top-width: 0px;
 }
+.Layer__bank-transactions__table {
+  border-bottom: 1px solid var(--border-color);
+}
 .Layer__bank-transactions__table .Layer__table-header {
   background-color: var(--table-bg);
   border-bottom: 1px solid var(--border-color);
@@ -847,7 +1242,7 @@
   transition: background-color var(--transition-speed) ease-out;
 }
 .Layer__bank-transaction-row .Layer__table-cell-content {
-  min-height: 63px;
+  min-height: 64px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -857,15 +1252,23 @@
 }
 .Layer__expanded-bank-transaction-row {
   display: block;
-  background-color: transparent;
-  transition: background-color var(--transition-speed) ease-out;
+  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;
 }
 .Layer__bank-transaction-row:hover,
 .Layer__bank-transaction-row:hover .Layer__table-cell,
-.Layer__bank-transaction-list-item:hover,
-.Layer__expanded-bank-transaction-row.Layer__expanded-bank-transaction-row--expanded {
+.Layer__bank-transaction-list-item:hover {
   background-color: var(--bg-element-focus);
-  transition: background-color var(--transition-speed) ease-out;
+  transition: background-color var(--transition-speed) ease-in-out;
+}
+.Layer__bank-transaction-row:hover .Layer__bank-transaction-row__expand-button {
+  background-color: var(--color-base-200);
+  color: var(--color-base-1000);
+}
+.Layer__bank-transaction-row:hover .Layer__bank-transaction-row__expand-button:hover {
+  background-color: var(--color-base-300);
 }
 .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) {
   color: var(--btn-color-hover);
@@ -886,12 +1289,9 @@
   flex-direction: column;
   gap: var(--spacing-sm);
   overflow: hidden;
-  max-height: 0px;
-  transition: max-height var(--transition-speed) ease-out;
-}
-.Layer__expanded-bank-transaction-row--expanded .Layer__expanded-bank-transaction-row__wrapper {
-  max-height: 960px;
+  transition: height var(--transition-speed) ease-in-out;
 }
+.Layer__bank-transaction-list-item__category-text,
 .Layer__bank-transaction-row__category-text {
   flex: 1;
   color: var(--text-color-primary);
@@ -899,27 +1299,140 @@
   max-width: 350px;
   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 {
+  flex: 0;
+}
+.Layer__bank-transaction-list-item__category-text .Layer__bank-transaction-list-item__category-text__text,
+.Layer__bank-transaction-list-item__category-text .Layer__bank-transaction-row__category-text__text,
+.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;
+  text-overflow: ellipsis;
+}
+.Layer__bank-transaction-list-item__category-text__text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
+.Layer__bank-transaction-list-item__content,
 .Layer__expanded-bank-transaction-row__content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   max-width: 680px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
-.Layer__expanded-bank-transaction-row__content-toggle {
-  padding: var(--spacing-sm) var(--spacing-md);
-}
-.Layer__expanded-bank-transaction-row__splits {
+.Layer__expanded-bank-transaction-row__content-panels {
   display: flex;
-  gap: var(--spacing-md);
-  padding: 0 var(--spacing-md);
+  flex-direction: row;
+  max-width: 680px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
-.Layer__expanded-bank-transaction-row__splits-inputs {
+.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;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__content-panel-container {
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__right-col {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex: 1;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+}
+@container (min-width: 701px) {
+  .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 .Layer__expanded-bank-transaction-row__table-cell--split-entry {
+    max-height: 38px;
+  }
+  .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-buttons {
+    max-height: 38px;
+    white-space: nowrap;
+  }
+  .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-total {
+    max-height: 25px;
+    white-space: nowrap;
+  }
+}
+.Layer__expanded-bank-transaction-row__content-toggle {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+.Layer__expanded-bank-transaction-row__content-toggle .Layer__toggle-option {
+  width: 110px;
+}
+.Layer__expanded-bank-transaction-row__splits {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+.Layer__expanded-bank-transaction-row__splits-inputs {
+  flex: 1;
+  padding-top: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.Layer__expanded-bank-transaction-row__splits-total {
+  color: var(--color-base-500);
+  padding: var(--spacing-3xs);
+}
+.Layer__expanded-bank-transaction-row__splits-buttons {
+  padding-bottom: 2px;
+}
+.Layer__expanded-bank-transaction-row__total-and-btns {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) 0;
 }
-.Layer__expanded-bank-transaction-row__splits-buttons button {
-  min-width: 114px;
-}
 .Layer__bank-transaction-row__table-cell--amount-credit,
 .Layer__bank-transaction-list-item__amount-credit {
   justify-content: flex-end;
@@ -958,6 +1471,10 @@
   transition: border 5s ease-out;
   width: 0%;
 }
+.Layer__bank-transactions--to-review .Layer__bank-transactions__table .Layer__bank-transaction__submit-btn,
+.Layer__bank-transactions--to-review .Layer__bank-transactions__table .Layer__bank-transaction__retry-btn {
+  min-width: 122px;
+}
 .Layer__bank-transaction-row__actions-cell--open {
   border-left: 1px solid transparent;
 }
@@ -967,28 +1484,12 @@
   justify-content: flex-end;
   gap: 8px;
 }
-.Layer__bank-transaction-row__actions-cell .Layer__bank-transaction-row__expand-button {
-  padding-top: 5px;
-}
-.Layer__bank-transaction-row__expand-button .Layer__chevron {
-  cursor: pointer;
-}
-.Layer__bank-transaction-row__expand-button:hover .Layer__chevron {
-  color: var(--text-color-primary);
-}
 .Layer__expanded-bank-transaction-row__table-cell--split-entry {
   display: flex;
   flex-direction: row;
-  margin-bottom: 0.5rem;
   gap: var(--spacing-md);
 }
-.Layer__expanded-bank-transaction-row__split-amount--negative {
-  font-weight: bold;
-  color: var(--error-color);
-  border: 2.5px dotted var(--error-color);
-}
 .Layer__bank-transactions__list {
-  display: none;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -997,6 +1498,13 @@
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid var(--border-color);
+  transform: scale(0.92);
+  opacity: 0;
+  transition: all var(--transition-speed) ease-in-out;
+}
+.Layer__bank-transaction-list-item.show {
+  opacity: 1;
+  transform: scale(1);
 }
 .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__base-row {
   max-height: 60px;
@@ -1010,6 +1518,12 @@
   overflow: hidden;
   transition: all var(--transition-speed) ease-out;
 }
+.Layer__bank-transaction-list-item > .Layer__text--error {
+  padding: var(--spacing-md);
+  padding-top: 0;
+  margin: 0;
+  font-size: var(--text-xs);
+}
 .Layer__bank-transaction-list-item.Layer__bank-transaction-list-item--expanded {
   background: var(--bg-element-focus);
 }
@@ -1017,9 +1531,10 @@
   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: 480px;
+  max-height: unset;
 }
 .Layer__bank-transaction-list-item__base-row {
   display: flex;
@@ -1031,6 +1546,9 @@
 .Layer__bank-transaction-list-item__base-row .Layer__category-menu {
   width: 100%;
 }
+.Layer__bank-transaction-list-item__base-row .Layer__tooltip-trigger {
+  flex: 0;
+}
 .Layer__bank-transaction-list-item__heading {
   display: flex;
   align-items: center;
@@ -1039,6 +1557,7 @@
   gap: 4px;
   padding: var(--spacing-md);
   padding-bottom: var(--spacing-sm);
+  justify-content: space-between;
 }
 .Layer__bank-transaction-list-item__heading .Layer__bank-transaction-list-item__heading-separator {
   display: block;
@@ -1046,8 +1565,14 @@
   width: 1px;
   background: var(--color-base-200);
 }
+.Layer__bank-transaction-list-item__heading .Layer__bank-transaction-list-item__heading__main {
+  gap: 4px;
+  display: flex;
+  align-items: center;
+}
 .Layer__bank-transaction-list-item__body {
   display: flex;
+  justify-content: space-between;
   gap: 4px;
   color: var(--text-color-primary);
   width: 100%;
@@ -1056,6 +1581,15 @@
 }
 .Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name {
   flex: 1;
+  max-width: calc(100% - 120px);
+}
+.Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name .Layer__tooltip-trigger {
+  display: flex;
+}
+.Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name .Layer__text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .Layer__bank-transaction-list-item__body .Layer__bank-transaction-row__expand-button {
   margin: 0 var(--spacing-xs);
@@ -1064,9 +1598,8 @@
   box-sizing: border-box;
   padding: var(--spacing-md);
   padding-top: var(--spacing-sm);
-}
-.Layer__expanded-bank-transaction-row__submit-btn .Layer__bank-transaction__submit-btn {
-  width: 100%;
+  display: flex;
+  gap: var(--spacing-md);
 }
 .Layer__table.Layer__bank-transactions__table {
   overflow: auto;
@@ -1074,9 +1607,11 @@
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
   position: -webkit-sticky;
   position: sticky;
-  right: 425px;
-  width: 125px;
+  right: 449px;
+  width: 150px;
+  min-width: 150px;
   z-index: 2;
+  box-sizing: border-box;
   box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
 }
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
@@ -1088,24 +1623,37 @@
   z-index: 2;
 }
 .Layer__bank-transactions__date-col {
-  min-width: 125px;
-  max-width: 140px;
+  min-width: 130px;
+  width: 130px;
+  max-width: 130px;
   box-sizing: border-box;
 }
 .Layer__bank-transactions__tx-col {
-  min-width: 105px;
-  max-width: 300px;
+  min-width: 125px;
+  width: 180px;
+  max-width: 280px;
   box-sizing: border-box;
 }
+.Layer__bank-transactions__tx-text {
+  width: 100%;
+}
 .Layer__bank-transactions__account-col {
-  min-width: 105px;
-  max-width: 300px;
+  min-width: 125px;
+  width: 180px;
+  max-width: 180px;
   box-sizing: border-box;
 }
+@container (min-width: 1400px) {
+  .Layer__bank-transactions__date-col {
+    min-width: 160px;
+    width: 160px;
+    max-width: 160px;
+  }
+}
 .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: 300px;
+  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,
@@ -1116,14 +1664,29 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  box-sizing: border-box;
 }
 .Layer__bank-transaction-row.Layer__bank-transaction-row--expanded td {
   vertical-align: top;
 }
-@container (max-width: 1000px) and (min-width: 801px) {
-  .Layer__table.Layer__table.Layer__bank-transactions__table {
-    display: block;
+.Layer__bank-transaction-row__expanded-td {
+  padding: 0;
+}
+.Layer__bank-transactions__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-md);
+  position: sticky;
+  left: 0;
+}
+@container (min-width: 1400px) {
+  .Layer__bank-transactions__pagination {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--spacing-md) var(--spacing-xl);
   }
+}
+@container (max-width: 1108px) and (min-width: 701px) {
   .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
     border-left: 1px solid var(--border-color);
   }
@@ -1138,23 +1701,530 @@
     z-index: 0;
   }
 }
+@container (max-width: 1400px) {
+  .Layer__bank-transactions__header {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+    padding-top: var(--spacing-md);
+  }
+}
 @container (max-width: 700px) {
   .Layer__bank-transactions__header {
-    box-shadow: 0px -1px 0px 0px var(--neutral-8, rgba(23, 51, 45, 0.16)) inset;
+    box-shadow: 0px -1px 0px 0px rgba(23, 51, 45, 0.16) inset;
     background-color: var(--table-bg);
     position: sticky;
     top: 0px;
     z-index: 2;
   }
-  .Layer__table.Layer__bank-transactions__table {
+}
+.Layer__tooltip.Layer__bank-transactions__tx-tooltip {
+  max-width: 250px;
+}
+.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;
+}
+.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,
+.Layer__bank-transaction-list-item__match-tooltip .Layer__bank-transaction-row__match-tooltip__date,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__date,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__date,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__bank-transaction-row__match-tooltip__date,
+.Layer__bank-transaction-row__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__date,
+.Layer__bank-transaction-row__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__date,
+.Layer__bank-transaction-row__match-tooltip .Layer__bank-transaction-row__match-tooltip__date {
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction-list-item__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__description,
+.Layer__bank-transaction-list-item__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__description,
+.Layer__bank-transaction-list-item__match-tooltip .Layer__bank-transaction-row__match-tooltip__description,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__description,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__description,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__bank-transaction-row__match-tooltip__description,
+.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;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.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,
+.Layer__bank-transaction-list-item__match-tooltip .Layer__bank-transaction-row__match-tooltip__amount,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__amount,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__amount,
+.Layer__expanded-bank-transaction-row__match-tooltip .Layer__bank-transaction-row__match-tooltip__amount,
+.Layer__bank-transaction-row__match-tooltip .Layer__bank-transaction-list-item__match-tooltip__amount,
+.Layer__bank-transaction-row__match-tooltip .Layer__expanded-bank-transaction-row__match-tooltip__amount,
+.Layer__bank-transaction-row__match-tooltip .Layer__bank-transaction-row__match-tooltip__amount {
+  font-size: var(--text-md);
+}
+.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;
+}
+.Layer__bank-transaction-list-item__split-tooltip ul,
+.Layer__bank-transaction-row__split-tooltip ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.Layer__bank-transaction-list-item__split-tooltip li,
+.Layer__bank-transaction-row__split-tooltip li {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: space-between;
+  padding-bottom: var(--spacing-4xs);
+}
+.Layer__bank-transaction-list-item__split-tooltip .Layer__bank-transaction-list-item__split-tooltip__label,
+.Layer__bank-transaction-list-item__split-tooltip .Layer__bank-transaction-row__split-tooltip__label,
+.Layer__bank-transaction-row__split-tooltip .Layer__bank-transaction-list-item__split-tooltip__label,
+.Layer__bank-transaction-row__split-tooltip .Layer__bank-transaction-row__split-tooltip__label {
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction-list-item__split-tooltip .Layer__bank-transaction-list-item__split-tooltip__value,
+.Layer__bank-transaction-list-item__split-tooltip .Layer__bank-transaction-row__split-tooltip__value,
+.Layer__bank-transaction-row__split-tooltip .Layer__bank-transaction-list-item__split-tooltip__value,
+.Layer__bank-transaction-row__split-tooltip .Layer__bank-transaction-row__split-tooltip__value {
+  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);
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header {
+  display: flex;
+  background: transparent;
+  width: 100%;
+}
+.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);
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__date {
+  width: 120px;
+  box-sizing: border-box;
+  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);
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__status {
+  text-align: right;
+  width: 90px;
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__status.no-match {
+  width: 0;
+  padding: 0;
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc {
+  flex: 1;
+  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 {
+  display: none;
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc .Layer__tooltip-trigger {
+  display: flex;
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc .Layer__expanded-bank-transaction-row__match-table__desc-tooltip {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.Layer__expanded-bank-transaction-row__match-row {
+  cursor: pointer;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+}
+.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;
+}
+.Layer__expanded-bank-transaction-row__match-row > div {
+  border-top: 1px solid var(--color-base-300);
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__expanded-bank-transaction-row__match-row > div:first-child {
+  border-top-left-radius: var(--border-radius-2xs);
+  border-bottom-left-radius: var(--border-radius-2xs);
+  border-left: 1px solid var(--color-base-300);
+}
+.Layer__expanded-bank-transaction-row__match-row > div:nth-child(3) {
+  border-top-right-radius: var(--border-radius-2xs);
+  border-bottom-right-radius: var(--border-radius-2xs);
+  border-right: 1px solid var(--color-base-300);
+}
+.Layer__expanded-bank-transaction-row__match-row > div:last-child,
+.Layer__expanded-bank-transaction-row__match-row:hover > div:last-child {
+  border-color: transparent;
+  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);
+  color: var(--color-base-700);
+}
+.Layer__expanded-bank-transaction-row__match-row:hover > div.Layer__expanded-bank-transaction-row__match-table__amount {
+  color: var(--color-base-1000);
+}
+.Layer__expanded-bank-transaction-row__match-row:hover > div:first-child {
+  border-top-left-radius: var(--border-radius-2xs);
+  border-bottom-left-radius: var(--border-radius-2xs);
+  border-left: 1px solid var(--color-base-300);
+}
+.Layer__expanded-bank-transaction-row__match-row:hover > div:nth-child(3) {
+  border-top-right-radius: var(--border-radius-2xs);
+  border-bottom-right-radius: var(--border-radius-2xs);
+  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);
+  color: var(--color-base-700);
+}
+.Layer__expanded-bank-transaction-row__match-row--selected > div.Layer__expanded-bank-transaction-row__match-table__amount {
+  color: var(--color-base-1000);
+}
+.Layer__expanded-bank-transaction-row__match-row--selected > div:first-child {
+  border-left: 1px solid var(--color-base-800);
+}
+.Layer__expanded-bank-transaction-row__match-row--selected > div:nth-child(3) {
+  border-right: 1px solid var(--color-base-800);
+}
+.Layer__expanded-bank-transaction-row__match-row--selected > div:last-child {
+  border-color: transparent;
+  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);
+}
+.Layer__expanded-bank-transaction-row__match-row--selected:hover > div:first-child {
+  border-left: 1px solid var(--color-base-500);
+}
+.Layer__expanded-bank-transaction-row__match-row--selected:hover > div:nth-child(3) {
+  border-right: 1px solid var(--color-base-500);
+}
+.Layer__expanded-bank-transaction-row__match-row--selected:hover > div:last-child {
+  border-color: transparent;
+  background-color: transparent;
+}
+@container (max-width: 700px) {
+  .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header {
     display: none;
   }
-  .Layer__bank-transactions__list {
-    display: block;
+  .Layer__expanded-bank-transaction-row__match-row {
+    flex-direction: column;
+  }
+  .Layer__expanded-bank-transaction-row__match-row {
+    border-radius: var(--border-radius-2xs);
+    border: 1px solid transparent;
+    border: 1px solid var(--color-base-300);
+  }
+  .Layer__expanded-bank-transaction-row__match-row > div,
+  .Layer__expanded-bank-transaction-row__match-row > div:first-child,
+  .Layer__expanded-bank-transaction-row__match-row > div:nth-child(3),
+  .Layer__expanded-bank-transaction-row__match-row:hover > div,
+  .Layer__expanded-bank-transaction-row__match-row:hover > div:first-child,
+  .Layer__expanded-bank-transaction-row__match-row:hover > div:nth-child(3) {
+    border-width: 0;
+  }
+  .Layer__expanded-bank-transaction-row__match-row:hover {
+    border: 1px solid var(--color-base-500);
+    background: var(--color-base-0);
+    color: var(--color-base-700);
+  }
+  .Layer__expanded-bank-transaction-row__match-row--selected {
+    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;
+  }
+  .Layer__expanded-bank-transaction-row__match-row--selected .amount-next-to-date {
+    color: var(--color-base-800);
+  }
+  .Layer__expanded-bank-transaction-row__match-row--selected:hover {
+    border: 1px solid --var-color-base-800;
+  }
+  .Layer__expanded-bank-transaction-row__match-row--selected:hover > div {
+    border-width: 0;
+  }
+  .Layer__expanded-bank-transaction-row__match-table__date {
+    display: flex;
+    justify-content: space-between;
+    width: 100% !important;
+  }
+  .Layer__expanded-bank-transaction-row__match-table__date .amount-next-to-date {
+    display: block !important;
+  }
+  .Layer__expanded-bank-transaction-row__match-table__amount {
+    display: none !important;
+  }
+  .Layer__expanded-bank-transaction-row__match-table__desc {
+    justify-content: space-between;
+    gap: var(--spacing-sm);
+  }
+  .Layer__expanded-bank-transaction-row__match-table__desc > span:first-child {
+    width: calc(100% - 120px);
+  }
+  .Layer__expanded-bank-transaction-row__match-table__desc > span:nth-child(2) {
+    flex: 0;
+  }
+  .Layer__expanded-bank-transaction-row__match-table__desc .match-badge {
+    display: block !important;
+  }
+  .Layer__expanded-bank-transaction-row__match-table__status {
+    display: none !important;
   }
 }
-.Layer__tooltip.Layer__bank-transactions__tx-tooltip {
-  max-width: 250px;
+@container (max-width: 600px) {
+  .Layer__expanded-bank-transaction-row__splits-inputs {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    gap: var(--spacing-sm);
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
+    gap: var(--spacing-sm);
+    width: 100%;
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
+    width: 100%;
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
+    flex: 1;
+    max-width: 42%;
+    position: relative;
+  }
+  .Layer__expanded-bank-transaction-row__total-and-btns {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip {
+    flex: 1;
+    width: 100%;
+    max-width: 42%;
+    position: relative;
+  }
+  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
+    max-width: 100%;
+  }
+}
+@container (max-width: 500px) {
+  .Layer__expanded-bank-transaction-row__content-toggle .Layer__toggle-option input + span {
+    font-size: var(--text-xs);
+  }
+  .Layer__bank-transaction-list-item__expanded-row input,
+  .Layer__bank-transaction-list-item__expanded-row .Layer__category-menu {
+    font-size: var(--text-xs);
+  }
+  .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control {
+    min-height: 32px;
+  }
+  .Layer__bank-transaction-list-item__expanded-row .Layer__select__indicator {
+    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;
+  }
+  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn svg {
+    width: 14px;
+    height: 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 {
+    min-height: 32px;
+  }
+  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn-text,
+  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn-text {
+    font-size: var(--text-xs);
+  }
+  .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;
+  }
+}
+.Layer__bank-transactions__notifications {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  bottom: var(--spacing-2xs);
+  left: calc(100% - 340px - var(--spacing-2xs));
+  transition: all var(--transition-speed) ease-in-out;
+  z-index: 1;
+  min-width: 300px;
+}
+.Layer__bank-transactions__notifications .Layer__bank-transactions__notification {
+  transition: all var(--transition-speed) ease-in-out;
+  overflow: hidden;
+  padding: 12px;
+  margin: 0;
+  margin-top: -12px;
+  height: 56px;
+  cursor: pointer;
+}
+.Layer__bank-transactions__notifications .Layer__bank-transactions__notification:hover .Layer__bank-transactions__notification-content {
+  box-shadow: 0px 0px 3px 0px var(--base-transparent-12), 0px 0px 0px 1px var(--color-base-200);
+}
+.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-content {
+  padding: var(--spacing-sm);
+  display: flex;
+  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: 0px 0px 12px 0px var(--base-transparent-12), 0px 0px 0px 1px var(--color-base-200);
+}
+.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;
+  border-radius: var(--border-radius-3xs);
+  background: var(--color-base-0);
+  color: var(--color-danger);
+  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
+}
+.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-text {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-title {
+  font-size: var(--text-md);
+  color: var(--color-base-1000);
+}
+.Layer__bank-transactions__notifications .Layer__bank-transactions__notification-message {
+  font-size: var(--text-sm);
+  color: var(--color-base-700);
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+    padding-top: 12px;
+    padding-bottom: 12px;
+    height: 56px;
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+    padding-top: 6px;
+    padding-bottom: 6px;
+    height: 0;
+  }
+}
+.notification-enter {
+  animation: fadeIn var(--transition-speed) forwards;
+}
+.notification-exit {
+  animation: fadeOut 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);
+}
+.Layer__expanded-bank-transaction-row__match-table .Layer__text--error {
+  margin: 0;
+  padding: var(--spacing-2xs) 0;
+  padding-bottom: var(--spacing-md);
+}
+.Layer__bank-transaction-table__date-col,
+.Layer__bank-transactions__account-col {
+  color: var(--color-base-500);
+}
+.Layer__bank-transactions__tx-col {
+  color: var(--color-base-1000);
+}
+.Layer__bank-transaction-row:hover .Layer__bank-transaction-table__date-col,
+.Layer__bank-transaction-row:hover .Layer__bank-transactions__account-col,
+.Layer__bank-transaction-row--expanded .Layer__bank-transaction-table__date-col,
+.Layer__bank-transaction-row--expanded .Layer__bank-transactions__account-col {
+  color: var(--color-base-1000);
+}
+.Layer__expanded-bank-transaction-row__splits-inputs .Layer__input {
+  text-align: right;
+}
+.Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
+  max-width: 100%;
+  text-align: right;
+}
+@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;
+  }
+  .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 {
+    width: 100%;
+  }
+}
+@container (max-width: 480px) {
+  .Layer__expanded-bank-transaction-row__total-and-btns > .Layer__input-tooltip > .Layer__input:disabled {
+    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__chart-of-accounts {
   background-color: var(--background-color);
@@ -1347,6 +2417,100 @@
 .Layer__chevron__up--counterclockwise {
   transform: rotate(-180deg);
 }
+.Layer__linked-accounts {
+  min-height: 151px;
+  box-sizing: border-box;
+}
+.Layer__linked-accounts .Layer__data-state {
+  padding: var(--spacing-md);
+  padding-top: 0;
+}
+.Layer__linked-accounts__header {
+  padding: var(--spacing-md);
+  position: sticky;
+  left: 0;
+}
+.Layer__linked-accounts__list {
+  padding: var(--spacing-md);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.Layer__linked-accounts__header + .Layer__linked-accounts__list {
+  padding-top: 0;
+}
+@container (min-width: 1400px) {
+  .Layer__linked-accounts__loader-container {
+    min-height: 103px;
+  }
+  .Layer__linked-accounts__header {
+    padding: var(--spacing-lg);
+  }
+  .Layer__linked-accounts__list {
+    padding: var(--spacing-lg);
+  }
+}
+.Layer__linked-account-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4xs);
+  padding: var(--spacing-3xs);
+  border-radius: var(--border-radius-sm);
+  background: var(--color-base-0);
+  box-shadow: 0px 2px 4px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--base-transparent-4);
+  box-sizing: border-box;
+}
+.Layer__linked-account-thumb .topbar {
+  height: 41px;
+  min-width: 272px;
+  display: flex;
+  align-items: center;
+  background: var(--color-base-900);
+  color: var(--color-base-0);
+  border-radius: var(--border-radius-xs);
+  padding: var(--spacing-xs) var(--spacing-md);
+  box-sizing: border-box;
+}
+.Layer__linked-account-thumb .topbar .account-name {
+  flex: 1;
+}
+.Layer__linked-account-thumb .topbar .account-number {
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  border-radius: var(--border-radius-5xl);
+  background: var(--base-transparent-8);
+}
+.Layer__linked-account-thumb .bottombar {
+  box-sizing: border-box;
+  display: flex;
+  height: 28px;
+}
+.Layer__linked-account-thumb .bottombar .account-amount {
+  padding: var(--spacing-3xs) var(--spacing-md);
+}
+.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n) .topbar {
+  background: var(--color-base-900);
+  color: var(--color-base-0);
+}
+.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+1) .topbar {
+  background: var(--color-base-900);
+  color: var(--color-base-0);
+}
+.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+2) .topbar {
+  background: var(--color-base-400);
+  color: var(--color-base-900);
+}
+.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+3) .topbar {
+  background: var(--color-base-300);
+  color: var(--color-base-900);
+}
+.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+4) .topbar {
+  background: var(--color-base-500);
+  color: var(--color-base-900);
+}
+.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+5) .topbar {
+  background: var(--color-base-700);
+  color: var(--color-base-0);
+}
 .Layer__loader {
   width: 100%;
   display: flex;
@@ -1358,6 +2522,79 @@
   font-size: var(--text-sm);
   box-sizing: border-box;
 }
+.Layer__skeleton-loader {
+  width: 100%;
+  height: 12px;
+  background-color: red;
+}
+@keyframes shine {
+  to {
+    background-position-x: -200%;
+  }
+}
+.Layer__anim--skeleton-loading {
+  background: var(--color-base-100);
+  background: linear-gradient(110deg, var(--color-base-50) 8%, var(--color-base-100) 18%, var(--color-base-50) 33%, var(--color-base-50) 50%);
+  border-radius: var(--border-radius-4xs);
+  background-size: 200% 100%;
+  animation: 1.2s shine linear infinite;
+}
+.Layer__pagination {
+  display: inline-flex;
+  list-style-type: none;
+  padding: var(--spacing-4xs);
+  background: var(--color-base-50);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  border-radius: var(--border-radius-2xs);
+  gap: 2px;
+}
+.Layer__pagination .Layer__pagination-item {
+  display: flex;
+  box-sizing: border-box;
+  height: 32px;
+  width: 32px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-3xs);
+  color: var(--color-base-700);
+  font-size: var(--text-md);
+  min-width: 32px;
+  border: 1px solid transparent;
+}
+.Layer__pagination .Layer__pagination-item.Layer__pagination-dots:hover {
+  background-color: transparent;
+  color: var(--color-base-700);
+  box-shadow: none;
+  cursor: default;
+}
+.Layer__pagination .Layer__pagination-item:hover {
+  background-color: var(--color-base-0);
+  color: var(--color-base-900);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  cursor: pointer;
+}
+.Layer__pagination .Layer__pagination-item.selected {
+  background-color: var(--color-base-400);
+  color: var(--color-base-900);
+  border-color: var(--base-transparent-6);
+}
+.Layer__pagination .Layer__pagination-item.Layer__pagination-arrow {
+  color: var(--color-base-700);
+}
+.Layer__pagination .Layer__pagination-item.Layer__pagination-arrow:hover {
+  color: var(--color-base-900);
+}
+.Layer__pagination .Layer__pagination-item.disabled {
+  pointer-events: none;
+}
+.Layer__pagination .Layer__pagination-item.disabled .Layer__pagination-arrow {
+  color: var(--color-base-500);
+}
+.Layer__pagination .Layer__pagination-item.disabled:hover {
+  background-color: transparent;
+  cursor: default;
+}
 .Layer__pill {
   background-color: var(--badge-bg-color);
   color: var(--badge-color);
@@ -1374,13 +2611,6 @@
 }
 .Layer__profit-and-loss {
   background-color: white;
-  padding: 0.25rem;
-}
-.Layer__profit-and-loss * {
-  color: var(--text-color);
-  font-family: Inter;
-  font-weight: 500;
-  font-style: normal;
 }
 .Layer__profit-and-loss__title {
   font-size: 1.5rem;
@@ -1390,12 +2620,16 @@
   margin-right: 1.5rem;
 }
 .Layer__profit-and-loss-table {
-  border: 1px solid var(--border-color);
-  border-radius: var(--corner-radius);
   display: grid;
   grid-template-columns: 1fr auto;
-  font-size: 1rem;
   overflow: hidden;
+  background-color: var(--color-base-100);
+}
+.Layer__profit-and-loss-table__loader-container {
+  padding: var(--spacing-2xl);
+}
+.Layer__profit-and-loss-table__loader-container {
+  min-height: 950px;
 }
 .Layer__profit-and-loss-table__outflows {
   margin-top: 1rem;
@@ -1405,6 +2639,14 @@
   background-color: var(--background-color);
   font-size: 1em;
 }
+.Layer__profit-and-loss-row.Layer__profit-and-loss-row__value--depth-0,
+.Layer__profit-and-loss-row.Layer__profit-and-loss-row__label--depth-0 {
+  background-color: var(--color-base-0);
+}
+.Layer__profit-and-loss-row:not(.Layer__profit-and-loss-row__value--depth-0),
+.Layer__profit-and-loss-row:not(.Layer__profit-and-loss-row__label--depth-0) {
+  box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
+}
 .Layer__profit-and-loss-row__children {
   display: grid;
   grid-column: span 2;
@@ -1428,18 +2670,23 @@
   align-items: center;
 }
 .Layer__profit-and-loss-row__label svg {
-  stroke: var(--text-color);
+  color: var(--color-base-600);
   width: 1.25rem;
   height: 1.25rem;
   margin-right: 0.25rem;
   transition: transform var(--transition-speed);
   transform: rotate(-90deg);
 }
+.Layer__profit-and-loss-row__label.Layer__profit-and-loss-row__label--display-children-true:hover,
+.Layer__profit-and-loss-row__label.Layer__profit-and-loss-row__label--display-children-true:hover + .Layer__profit-and-loss-row__value,
+.Layer__profit-and-loss-row__value.Layer__profit-and-loss-row__value--display-children-true:hover,
+.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 {
   transform: rotate(0deg);
 }
 .Layer__profit-and-loss-row__value--expanded {
-  color: transparent;
   user-select: none;
 }
 .Layer__profit-and-loss-row__value {
@@ -1448,59 +2695,83 @@
   align-items: center;
 }
 .Layer__profit-and-loss-row__label--display-children-true {
-  font-weight: bold;
+  cursor: pointer;
+  transition: opacity var(--transition-speed);
 }
-.Layer__profit-and-loss-row__value--display-children-true {
-  font-weight: bold;
+.Layer__profit-and-loss-row__label--display-children-true:hover {
+  opacity: 0.82;
 }
 .Layer__profit-and-loss-row__label--display-children-false {
   font-weight: normal;
 }
 .Layer__profit-and-loss-row__label--display-children-false svg {
   visibility: hidden;
+  display: none;
 }
-.Layer__profit-and-loss-row__label--display-children-false {
-  font-weight: normal;
+.Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value + .Layer__profit-and-loss-row__label,
+.Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value + .Layer__profit-and-loss-row__label + .Layer__profit-and-loss-row__value {
+  border-top: 1px solid var(--color-base-300);
 }
-.Layer__profit-and-loss-row__label--display-children-false svg {
-  visibility: hidden;
+.Layer__profit-and-loss-row__label--variant-summation.Layer__profit-and-loss-row__label--depth-0,
+.Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value--depth-0 {
+  margin-bottom: var(--spacing-2xs);
 }
-.Layer__profit-and-loss-row__label--variant-summation {
-  font-weight: bold;
-  border-top: 1px solid var(--border-color);
+.Layer__profit-and-loss-row__label--variant-summation.Layer__profit-and-loss-row__label--depth-0:last-child,
+.Layer__profit-and-loss-row__label--variant-summation.Layer__profit-and-loss-row__label--depth-0:nth-last-child(-n+2),
+.Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value--depth-0:last-child,
+.Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value--depth-0:nth-last-child(-n+2) {
+  margin-bottom: 0;
 }
-.Layer__profit-and-loss-row__value--variant-summation {
-  font-weight: bold;
-  border-top: 1px solid var(--border-color);
+.Layer__profit-and-loss-row__label--variant-summation.Layer__profit-and-loss-row__label--depth-0 .Layer__text,
+.Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value--depth-0 .Layer__text {
+  color: var(--color-base-1000);
+}
+.Layer__profit-and-loss-row__label--variant-summation.Layer__profit-and-loss-row__label--depth-0 {
+  padding-left: 22px;
+}
+.Layer__profit-and-loss-row__label--variant-summation.Layer__profit-and-loss-row__label--depth-0 .Layer__text,
+.Layer__profit-and-loss-row__label--variant-summation.Layer__profit-and-loss-row__label--depth-0 .Layer__text.Layer__text--md {
+  font-size: var(--text-lg);
 }
-.Layer__profit-and-loss-row__value--amount-positive::before {
+.Layer__profit-and-loss-row__value--amount-positive .Layer__text::before {
   content: "$";
 }
-.Layer__profit-and-loss-row__value--amount-negative::before {
+.Layer__profit-and-loss-row__value--amount-negative .Layer__text::before {
   content: "-$";
 }
-.Layer__profit-and-loss-row__label--depth-0 {
-  font-weight: 700;
+.Layer__profit-and-loss-row__label--depth-0 .Layer__text {
+  color: var(--color-base-800);
+  font-variation-settings: "wght" var(--font-weight-bold);
+  margin: 0;
 }
-.Layer__profit-and-loss-row__value--depth-0 {
-  font-weight: 700;
+.Layer__profit-and-loss-row__value--depth-0 .Layer__text {
+  color: var(--color-base-800);
+  font-variation-settings: "wght" var(--font-weight-bold);
+  margin: 0;
 }
 .Layer__profit-and-loss-row__label--depth-1 {
-  padding-right: 2em;
-  padding-left: 2em;
-  font-size: 0.9em;
+  padding-right: var(--spacing-md);
+  padding-left: calc(var(--spacing-5xl) + var(--spacing-md));
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
 }
-.Layer__profit-and-loss-row__value--depth-1 {
-  font-size: 0.9em;
+.Layer__profit-and-loss-row__label--depth-1 .Layer__text {
+  color: var(--color-base-700);
+  font-variation-settings: "wght" var(--font-weight-normal);
+  margin: 0;
+}
+.Layer__profit-and-loss-row__value--depth-1 .Layer__text {
+  color: var(--color-base-700);
+  font-variation-settings: "wght" var(--font-weight-normal);
+  margin: 0;
 }
 .Layer__profit-and-loss-date-picker {
-  width: 20rem;
+  width: 270px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 0.25rem;
-  margin: 0.5rem;
   border: 1px solid var(--border-color);
   border-radius: var(--corner-radius);
 }
@@ -1528,12 +2799,6 @@
   align-items: center;
   text-align: center;
 }
-.Layer__profit-and-loss-chart__bar--income {
-  fill: var(--bar-color-income);
-}
-.Layer__profit-and-loss-chart__bar--expenses {
-  fill: var(--bar-color-expenses);
-}
 .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
   font-size: 0.75rem;
 }
@@ -1555,41 +2820,80 @@
   fill: var(--bar-color-expenses);
 }
 .Layer__profit-and-loss-chart__selection-indicator {
-  height: 0.25rem;
-  fill: var(--indicator-color);
+  stroke: var(--indicator-color);
+  fill: none;
   transition: x 0.5s;
 }
+.Layer__profit-and-loss__chart_with_summaries {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--border-radius-sm);
+  box-shadow:
+    0px 0px 0px 1px rgba(16, 24, 40, 0.04),
+    0px 2px 4px 0px rgba(16, 24, 40, 0.06),
+    0px 4px 12px 0px rgba(16, 24, 40, 0.08);
+  margin-left: var(--spacing-xl);
+  margin-right: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+}
+.Layer__profit-and-loss__chart_with_summaries__summary-col {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-md);
+  column-gap: var(--spacing-md);
+  row-gap: var(--spacing-md);
+}
+.Layer__profit-and-loss__chart_with_summaries__chart-col {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: var(--spacing-md);
+  padding-top: 68px;
+}
 .Layer__profit-and-loss-summaries {
   display: flex;
   flex: 1;
   flex-direction: row;
   justify-content: space-evenly;
+  column-gap: var(--spacing-md);
+  row-gap: var(--spacing-md);
+}
+.Layer__profit-and-loss-summaries.flex-col {
+  flex-direction: column;
 }
 .Layer__profit-and-loss-summaries__summary {
   display: flex;
   flex: 1;
   flex-direction: column;
-  border: 1px solid var(--border-color);
-  border-radius: var(--corner-radius);
-  padding: 1.5rem;
-  margin-right: 1.5rem;
+  gap: var(--spacing-4xs);
+  justify-content: center;
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  border-radius: var(--border-radius-xs);
+  padding: var(--spacing-md);
+  min-height: 72px;
+  box-sizing: border-box;
 }
-.Layer__profit-and-loss-summaries__summary:first-child {
-  margin-left: 1.5rem;
+.Layer__profit-and-loss-summaries__loader {
+  height: 17px;
+  display: flex;
+  align-items: center;
+}
+.Layer__profit-and-loss-summaries__loader .Layer__skeleton-loader {
+  height: 14px;
 }
 .Layer__profit-and-loss-summaries__title {
-  font-weight: 600;
-  font-size: 1.375rem;
-  margin-bottom: 0.75rem;
+  color: var(--text-color-primary);
+  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 {
-  font-weight: 600;
-  font-size: 1.5rem;
+  color: var(--text-color-primary);
+  font-size: var(--text-md);
 }
 .Layer__profit-and-loss-summaries__amount::before,
 .Layer__profit-and-loss-summaries__amount--positive::before {
@@ -1598,6 +2902,88 @@
 .Layer__profit-and-loss-summaries__amount--negative::before {
   content: "-$";
 }
+.Layer__profit-and-loss-row__children--content {
+  min-height: 0;
+  display: grid;
+  grid-column: span 2;
+  grid-template-columns: subgrid;
+  background-color: var(--color-base-50);
+}
+.Layer__profit-and-loss-chart__bar--income {
+  fill: var(--bar-color-income);
+}
+.Layer__profit-and-loss-chart__bar--expenses {
+  fill: var(--bar-color-expenses);
+}
+.Layer__profit-and-loss-row__label--depth-0.Layer__profit-and-loss-row__label--display-children-false {
+  padding-left: 22px;
+}
+@container (min-width: 1024px) {
+  .Layer__profit-and-loss-row__label--depth-0 {
+    padding-left: var(--spacing-xl);
+  }
+  .Layer__profit-and-loss-row__label--depth-0.Layer__profit-and-loss-row__label--display-children-false {
+    padding-left: calc(var(--spacing-xl) + 6px);
+  }
+  .Layer__component-container .Layer__profit-and-loss-row__label--depth-0.Layer__profit-and-loss-row__label--variant-summation {
+    padding-left: calc(var(--spacing-xl) + 6px);
+  }
+  .Layer__profit-and-loss-row__value {
+    padding-right: var(--spacing-xl);
+  }
+  .Layer__profit-and-loss__chart_with_summaries__summary-col {
+    padding-right: var(--spacing-xs);
+  }
+  .Layer__profit-and-loss__chart_with_summaries__chart-col {
+    padding-left: var(--spacing-xs);
+  }
+}
+@container (max-width: 1023px) and (min-width: 760px) {
+  .Layer__profit-and-loss-summaries,
+  .Layer__profit-and-loss-summaries.flex-col {
+    flex-direction: row;
+  }
+  .Layer__profit-and-loss__chart_with_summaries {
+    flex-direction: column;
+    margin-left: var(--spacing-md);
+    margin-right: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+  }
+}
+@container (max-width: 759px) and (min-width: 500px) {
+  .Layer__profit-and-loss-summaries,
+  .Layer__profit-and-loss-summaries.flex-col {
+    flex-direction: column;
+  }
+  .Layer__profit-and-loss__chart_with_summaries {
+    flex-direction: column;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: var(--spacing-md);
+    box-shadow: none;
+  }
+}
+@container (max-width: 500px) {
+  .Layer__profit-and-loss-summaries,
+  .Layer__profit-and-loss-summaries.flex-col {
+    flex-direction: row;
+    max-width: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+    justify-content: flex-start;
+    padding: 6px 1px;
+  }
+  .Layer__profit-and-loss__chart_with_summaries {
+    flex-direction: column;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: var(--spacing-md);
+    box-shadow: none;
+  }
+  .Layer__profit-and-loss-summaries__summary {
+    min-width: 150px;
+  }
+}
 .Layer__radio-button-group {
   display: flex;
   font-size: 1rem;
@@ -1643,15 +3029,20 @@
   background: var(--active);
 }
 .Layer__tooltip {
-  background: #333333;
-  color: #fff;
-  padding: 6px;
-  border-radius: 6px;
   box-sizing: border-box;
   width: max-content;
   max-width: calc(100vw - 10px);
 }
+.Layer__tooltip .Layer__tooltip-content {
+  background: var(--color-base-1000);
+  color: var(--color-base-300);
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border-radius: var(--border-radius-2xs);
+  box-sizing: border-box;
+  font-size: var(--text-sm);
+}
 .Layer__tooltip-trigger {
+  display: flex;
   flex: 1;
   padding-top: 2px;
   max-width: 100%;