@layerfi/components 0.1.9 → 0.1.10

package/dist/styles/index.css

@@ -4,19 +4,22 @@
 .Layer__component,
 .Layer__select__menu-portal,
 .Layer__tooltip {
-  --color-black: #1A1A1A;
+  --color-black: #1a1a1a;
   --color-white: white;
-  --color-info-error: #E46362;
-  --color-info-success: #29BC9B;
-  --color-info-warning: #F5A622;
+  --color-info-success: #29bc9b;
+  --color-info-warning: #f5a622;
+  --color-info-error-h: 0;
+  --color-info-error-s: 71%;
+  --color-info-error-l: 64%;
+  --color-info-error: hsl( var(--color-info-error-h) var(--color-info-error-s) var(--color-info-error-l) );
   --color-dark-h: 0;
   --color-dark-s: 0%;
   --color-dark-l: 7%;
-  --color-dark: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l));
+  --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: 90%;
-  --color-light: hsl(var(--color-light-h) var(--color-light-s) var(--color-light-l));
+  --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%);
@@ -30,16 +33,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);
+  --base-transparent-1: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.01 );
+  --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-10: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.1 );
+  --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);
   --color-success: var(--color-info-success);
   --color-danger: var(--color-info-error);
+  --color-danger-dark: hsl(349, 30%, 30%);
+  --color-danger-light: hsla( var(--color-info-error-h), var(--color-info-error-s), var(--color-info-error-l), 0.4 );
   --text-color-primary: var(--color-dark);
   --text-color-secondary: var(--color-base-700);
   --bg-element-focus: var(--color-base-50);
@@ -84,12 +91,14 @@
   --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-300);
+  --input-placeholder-color: var(--color-base-500);
   --label-color: var(--color-base-700);
   --btn-font-size: var(--text-md);
   --btn-border-radius: var(--border-radius-2xs);
   --btn-color: var(--color-black);
   --btn-bg-color: var(--color-white);
+  --btn-color-primary: var(--color-white);
+  --btn-bg-color-primary: var(--color-black);
   --btn-color-hover: var(--color-white);
   --btn-bg-color-hover: var(--color-primary);
   --btn-color-icon: var(--color-black);
@@ -127,7 +136,7 @@
   --table-expanded-background-color: var(--color-alabaster);
   --text-color: var(--color-ebony);
   --text-skeleton-color: var(--color-comet);
-  --transition-speed: 0.33s;
+  --transition-speed: 0.25s;
   border: 0;
   padding: 0;
   margin: 0;
@@ -208,7 +217,6 @@
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  padding: 0;
   cursor: pointer;
   min-height: 36px;
   box-sizing: border-box;
@@ -221,6 +229,17 @@
   transition: all 100ms ease-out;
   padding: 0 var(--spacing-md);
 }
+.Layer__btn.Layer__back-btn {
+  color: var(--btn-secondary-color);
+  background: var(--btn-secondary-bg-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: all 150ms ease-out;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+}
 .Layer__btn.Layer__btn--with-primary-icon {
   padding: 0;
 }
@@ -257,6 +276,11 @@
   width: 32px;
   height: 32px;
 }
+.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 0px 0px 1px var(--color-base-300), 0px 1px 2px 0px var(--base-transparent-6, rgba(17, 17, 17, 0.06));
 }
@@ -278,13 +302,12 @@
   background: var(--btn-secondary-bg-color);
 }
 .Layer__btn--primary {
-  color: var(--btn-color);
-  background: var(--btn-bg-color);
+  color: var(--btn-color-primary);
+  background: var(--btn-bg-color-primary);
 }
-.Layer__btn--primary:hover:not([disabled]),
-.Layer__btn--primary.Layer__btn--active:not([disabled]) {
-  color: var(--btn-color-hover);
-  background: var(--btn-bg-color-hover);
+.Layer__btn--primary:visited,
+.Layer__btn--primary:active {
+  box-shadow: 0px 0px 0px 1px var(--color-base-800);
 }
 .Layer__btn--primary:hover:not([disabled]) .Layer__btn-icon,
 .Layer__btn--primary.Layer__btn--active:not([disabled]) .Layer__btn-icon {
@@ -307,6 +330,7 @@
   line-height: 100%;
 }
 .Layer__btn-text {
+  flex: 1;
   font-family: var(--font-family);
   font-size: var(--btn-font-size);
 }
@@ -430,6 +454,84 @@
 .Layer__chart__tooltip-list .Layer__chart__tooltip-value.negative {
   color: var(--color-danger);
 }
+.Layer__hover-menu {
+  position: relative;
+  display: flex;
+}
+.Layer__hover-menu.--open .Layer__hover-menu__list-wrapper {
+  top: 100%;
+  right: 0px;
+  opacity: 1;
+  touch-action: auto;
+  pointer-events: auto;
+}
+.Layer__hover-menu .Layer__hover-menu__children {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.Layer__hover-menu .Layer__hover-menu__list-wrapper {
+  position: absolute;
+  z-index: 99;
+  top: 80%;
+  right: -8px;
+  padding-top: var(--spacing-xs);
+  min-width: 108px;
+  touch-action: none;
+  pointer-events: none;
+  opacity: 0;
+  display: flex;
+  justify-content: stretch;
+  transition: all 0.15s ease-out;
+}
+.Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+  border-radius: var(--spacing-xs);
+  background: var(--color-base-0);
+  box-shadow:
+    0px 0px 0px 1px rgba(25, 25, 25, 0.06),
+    0px 4px 12px 0px var(--base-transparent-1, rgba(16, 24, 40, 0.01)),
+    0px 2px 4px 0px rgba(25, 25, 25, 0.06);
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--spacing-3xs);
+  list-style: none;
+}
+.Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item {
+  padding: var(--spacing-3xs);
+  padding-left: var(--spacing-xs);
+  border-radius: var(--spacing-2xs);
+  color: var(--color-base-500);
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+}
+.Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item .Layer__hover-menu__list-item-button {
+  background: none;
+  border: none;
+  outline: none;
+  color: inherit;
+  font-size: var(--text-sm);
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.06px;
+  cursor: pointer;
+}
+.Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item:hover {
+  background: var(--color-base-50);
+  color: var(--color-base-800);
+  font-weight: 540;
+}
+.Layer__component {
+  max-width: 1406px;
+  font-family: var(--font-family);
+}
 .Layer__component-container {
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--border-color);
@@ -518,13 +620,18 @@
   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:focus,
+.Layer__input:active,
+.Layer__input:focus-visible {
+  box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
+  outline: none;
+}
 .Layer__input--with-left-text {
   padding-left: 60px;
 }
@@ -731,10 +838,6 @@
   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);
@@ -817,6 +920,10 @@
   color: var(--color-base-900);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
+.Layer__select__menu.Layer__select__menu--lg {
+  width: calc(100% + 60px);
+  margin-left: -30px;
+}
 .Layer__category-menu {
   width: 15rem;
 }
@@ -833,13 +940,15 @@
 .Layer__profit-and-loss-date-picker {
   width: 210px;
   font-size: 14px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
   padding: 0.25rem;
   border: 1px solid var(--input-border-color);
   border-radius: var(--input-border-radius);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  z-index: 1;
 }
 .Layer__profit-and-loss-date-picker__button {
   padding: 0.25rem;
@@ -850,6 +959,8 @@
   background-color: var(--color-base-0);
   border: 0;
   border-radius: var(--input-border-radius);
+  z-index: 3;
+  position: relative;
 }
 .Layer__profit-and-loss-date-picker__button:active {
   background-color: var(--color-base-0);
@@ -865,6 +976,24 @@
   align-items: center;
   text-align: center;
   padding: 0 var(--spacing-xs);
+  transition: opacity 0.7s ease-in-out, transform 0.4s ease-in-out;
+  width: 33%;
+  position: relative;
+  padding-left: 20px;
+}
+.Layer__profit-and-loss-date-picker__labels-container {
+  display: flex;
+  width: 660px;
+  position: absolute;
+}
+.Layer__profit-and-loss-date-picker__effect-blur {
+  width: 120px;
+  height: 100%;
+  position: absolute;
+  right: -10px;
+  bottom: 1px;
+  background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
+  z-index: 2;
 }
 .Layer__table {
   width: 100%;
@@ -911,29 +1040,41 @@
   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-cell--amount {
-  justify-content: flex-end;
-  text-align: right;
+.Layer__table-row:last-child .Layer__table-cell {
+  border-bottom: 1px solid var(--border-color);
 }
 .Layer__table-cell-content {
-  display: block;
+  display: flex;
+  align-items: center;
+  height: 100%;
   top: 0px;
   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 {
+.Layer__table-cell-content-indentation {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.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;
-  width: 1px;
-  height: 20px;
-  background-color: var(--color-base-200);
-  top: 50%;
-  margin-top: -10px;
+  top: 0;
+  bottom: 0;
+}
+.Layer__table-cell--amount {
+  justify-content: flex-end;
+  text-align: right;
 }
 .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,
@@ -968,6 +1109,26 @@
     padding-right: var(--spacing-xl);
   }
 }
+.Layer__table-row--hidden .Layer__table-cell {
+  border-top-width: 0;
+}
+.Layer__table-cell {
+  height: auto;
+}
+.Layer__table-cell > .Layer__table-cell-content {
+  overflow: hidden;
+  transition: height 30ms ease-out, opacity 150ms ease-in-out;
+}
+.Layer__table-row {
+  transition: all 180ms ease-in-out;
+}
+.Layer__table-row.Layer__table-row--collapsed .Layer__table-cell > .Layer__table-cell-content {
+  transition: height 60ms ease-out, opacity 50ms ease-in-out;
+}
+.Layer__table-row.Layer__table-row--anim-starting-state {
+  transform: scaleX(0.98);
+  opacity: 0;
+}
 .Layer__heading {
   color: var(--text-color-primary);
   font-size: var(--text-heading);
@@ -1075,6 +1236,56 @@
   -o-animation: rotating 2s linear infinite;
   animation: rotating 2s linear infinite;
 }
+.Layer__accounts-receivable__index {
+  position: fixed;
+  visibility: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: var(--color-base-0);
+  transform: scale(0.5), translateY(-100);
+  opacity: 0.4;
+  transition: transform 200ms ease-out, opacity 300ms ease-out;
+}
+.Layer__accounts-receivable__index.open {
+  visibility: visible;
+  transform: scale(1), translateY(0);
+  opacity: 1;
+}
+.Layer__accounts-receivable__header {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl);
+  padding-bottom: var(--spacing-md);
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.Layer__accounts-receivable__title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-top: var(--spacing-md);
+  padding-bottom: var(--spacing-3xs);
+}
+.Layer__accounts-receivable__title {
+  font-size: 24px;
+}
+.Layer__accounts-receivable__balance-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.Layer__accounts-receivable__balance-label {
+  color: var(--color-base-600);
+}
+@container (max-width: 1400px) {
+  .Layer__accounts-receivable__header {
+    padding: var(--spacing-md);
+  }
+}
 .Layer__balance-sheet {
   border: 1px solid var(--border-color);
   border-radius: var(--corner-radius);
@@ -1308,9 +1519,12 @@
   left: 0;
 }
 .Layer__bank-transaction-row {
-  transition: all var(--transition-speed) ease-in-out;
   top: 1px;
-  transform: scale(0.8);
+  transition: all var(--transition-speed) ease-in-out;
+  opacity: 0.3;
+}
+.Layer__bank-transaction-row.initial-load {
+  transform: scale(0.9);
   opacity: 0;
 }
 .Layer__bank-transaction-row.show {
@@ -1325,9 +1539,6 @@
   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;
 }
@@ -1572,9 +1783,13 @@
   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-transactions__table .Layer__bank-transaction__submit-btn,
+.Layer__bank-transactions__table .Layer__bank-transaction__retry-btn {
+  width: 122px;
+}
+.Layer__bank-transaction-row__expand-button {
+  width: 36px;
+  min-width: 36px;
 }
 .Layer__bank-transaction-row__actions-cell--open {
   border-left: 1px solid transparent;
@@ -1708,17 +1923,19 @@
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
   position: -webkit-sticky;
   position: sticky;
-  right: 449px;
+  right: 430px;
   width: 150px;
   min-width: 150px;
-  z-index: 2;
   box-sizing: border-box;
+  z-index: 2;
   box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
 }
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
   position: -webkit-sticky;
   position: sticky;
-  min-width: 425px;
+  min-width: 430px;
+  width: 430px;
+  max-width: 430px;
   box-sizing: border-box;
   right: 0;
   z-index: 2;
@@ -1852,9 +2069,6 @@
 .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,
@@ -2360,54 +2574,57 @@
 .Layer__ledger-accounts__sidebar.Layer__ledger-accounts__sidebar.open .Layer__ledger-accounts__sidebar-content {
   opacity: 1;
 }
+.Layer__ledger-accounts__table {
+  width: 100%;
+  border-collapse: collapse;
+}
 .Layer__ledger-accounts__actions {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
 }
-.Layer__coa__type.Layer__alt-table__head-cell,
-.Layer__coa__type.Layer__alt-table__cell,
-.Layer__coa__subtype.Layer__alt-table__head-cell,
-.Layer__coa__subtype.Layer__alt-table__cell,
-.Layer__coa__balance.Layer__alt-table__head-cell,
-.Layer__coa__balance.Layer__alt-table__cell,
-.Layer__coa__actions.Layer__alt-table__head-cell,
-.Layer__coa__actions.Layer__alt-table__cell {
-  width: 18%;
-  flex: 18 18 auto;
-}
-.Layer__coa__name.Layer__alt-table__head-cell,
-.Layer__coa__name.Layer__alt-table__cell {
-  width: 28%;
-  flex: 28 28 auto;
-}
-.Layer__alt-table__cell.Layer__coa__name,
-.Layer__alt-table__cell.Layer__coa__balance {
+.Layer__table-cell.Layer__coa__name,
+.Layer__table-cell.Layer__coa__balance {
   color: var(--color-base-800);
 }
-.Layer__alt-table__cell.Layer__coa__balance {
+.Layer__table-header.Layer__coa__name {
+  padding-left: var(--spacing-xl);
+}
+.Layer__table-cell.Layer__coa__name {
+  width: calc(100% - 192px - 50%);
+}
+.Layer__table-cell.Layer__coa__type,
+.Layer__table-cell.Layer__coa__subtype {
+  width: calc(100% - 192px - 75%);
+}
+.Layer__table-cell.Layer__coa__balance {
   font-variation-settings: "wght" var(--font-weight-bold);
 }
-.Layer__alt-table-row--depth-0 .Layer__alt-table__cell.Layer__coa__name {
+.Layer__ledger-accounts__table .Layer__table-row--depth-0 .Layer__table-cell.Layer__coa__name {
   font-variation-settings: "wght" var(--font-weight-bold);
 }
 .Layer__coa__balance {
   text-align: right;
   justify-content: flex-end;
 }
-.Layer__coa__actions {
+.Layer__table-cell.Layer__coa__actions {
+  width: 192px;
+}
+.Layer__table-cell.Layer__coa__actions .Layer__table-cell-content {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  min-width: 192px;
+  padding-top: var(--spacing-3xs);
+  padding-bottom: var(--spacing-3xs);
+  gap: var(--spacing-xs);
 }
-.Layer__coa__actions > .Layer__btn {
+.Layer__table-cell.Layer__coa__actions .Layer__table-cell-content > .Layer__btn {
   opacity: 0;
   visibility: hidden;
   transition: all 300ms ease-out;
   transform: scale(0.92);
 }
-.Layer__alt-table-row:hover .Layer__coa__actions > .Layer__btn {
+.Layer__ledger-accounts__table .Layer__table-row:hover .Layer__coa__actions .Layer__btn {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
@@ -2429,13 +2646,34 @@
   gap: var(--spacing-sm);
   align-items: center;
 }
+.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--header) {
+  cursor: pointer;
+}
+.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--header):hover {
+  background-color: var(--color-base-50);
+}
+.Layer__table__expand-icon {
+  transition: transform 150ms ease-out;
+  color: var(--color-base-600);
+  margin-left: -3px;
+  margin-right: var(--spacing-sm);
+}
+.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header) {
+  background-color: var(--color-base-50);
+}
+.Layer__ledger-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header):hover {
+  background-color: var(--color-base-100);
+}
+.Layer__ledger-accounts__table .Layer__table-row--collapsed .Layer__table__expand-icon {
+  transform: rotate(-90deg);
+}
 .Layer__ledger-accounts__form {
   display: flex;
   flex-direction: column;
   padding: var(--spacing-xl);
 }
 .Layer__ledger-accounts__form .Layer__input-group.Layer__input-group--inline {
-  padding: var(--spacing-sm) 0;
+  padding: var(--spacing-xs) 0;
 }
 .Layer__ledger-accounts__form .Layer__input-group.Layer__input-group--inline label {
   width: 140px;
@@ -2452,113 +2690,12 @@
 .Layer__ledger-accounts__form-edit-entry .Layer__text {
   margin: 0;
 }
-.Layer__alt-table-row {
+.Layer__ledger-accounts__form__error-message {
+  padding: var(--spacing-4xs) var(--spacing-xl);
   width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 var(--spacing-md);
+  text-align: right;
   box-sizing: border-box;
-  box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
-  transition: background 200ms ease-in-out;
-  position: relative;
-}
-.Layer__alt-table-row:not(.Layer__alt-table-row--header) {
-  cursor: pointer;
-}
-.Layer__alt-table-row:not(.Layer__alt-table-row--header):hover {
-  background-color: var(--color-base-50);
-}
-.Layer__alt-table-row.active {
-  background-color: var(--color-base-50);
-}
-.Layer__alt-table-row.active:before {
-  content: "";
-  background-color: var(--color-base-400);
-  height: 100%;
-  width: 2px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-}
-.Layer__alt-table__head-cell,
-.Layer__alt-table__cell {
-  flex: 1;
-  padding: var(--spacing-md);
-}
-.Layer__alt-table__head-cell {
-  color: var(--color-base-600);
-  font-size: 12px;
-}
-.Layer__alt-table__cell {
-  color: var(--color-base-600);
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.Layer__alt-table__expand-icon {
-  transition: transform 150ms ease-out;
-  color: var(--color-base-600);
-}
-.Layer__alt-table-row:not(.Layer__alt-table-row--depth-0):not(.Layer__alt-table-row--header) {
-  background-color: var(--color-base-50);
-}
-.Layer__alt-table-row--collapsed .Layer__alt-table__expand-icon {
-  transform: rotate(-90deg);
-}
-.Layer__accounts-receivable__index {
-  position: fixed;
-  visibility: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  background-color: var(--color-base-0);
-  transform: scale(0.5), translateY(-100);
-  opacity: 0.4;
-  transition: transform 200ms ease-out, opacity 300ms ease-out;
-}
-.Layer__accounts-receivable__index.open {
-  visibility: visible;
-  transform: scale(1), translateY(0);
-  opacity: 1;
-}
-.Layer__accounts-receivable__header {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-xl);
-  padding-bottom: var(--spacing-md);
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.Layer__accounts-receivable__title-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding-top: var(--spacing-md);
-  padding-bottom: var(--spacing-3xs);
-}
-.Layer__accounts-receivable__title {
-  font-size: 24px;
-}
-.Layer__accounts-receivable__balance-container {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-.Layer__accounts-receivable__balance-label {
-  color: var(--color-base-600);
-}
-.Layer__accounts-receivable-table .Layer__table-cell {
-  border-top: 1px solid var(--border-color);
-}
-@container (max-width: 1400px) {
-  .Layer__accounts-receivable__header {
-    padding: var(--spacing-md);
-  }
+  color: var(--color-danger);
 }
 .Layer__data-state {
   display: flex;
@@ -2610,9 +2747,13 @@
   transform: rotate(-180deg);
 }
 .Layer__linked-accounts {
-  min-height: 151px;
+  min-height: 150px;
+  box-shadow: 0px 2px 4px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--base-transparent-4);
   box-sizing: border-box;
 }
+.Layer__linked-accounts::-webkit-scrollbar {
+  display: none;
+}
 .Layer__linked-accounts .Layer__data-state {
   padding: var(--spacing-md);
   padding-top: 0;
@@ -2625,9 +2766,17 @@
 .Layer__linked-accounts__list {
   padding: var(--spacing-md);
   display: flex;
-  align-items: center;
+  max-width: 1000px;
+  flex-wrap: wrap;
+  align-items: stretch;
   gap: var(--spacing-md);
 }
+@media screen and (max-width: 650px) {
+  .Layer__linked-accounts__list {
+    flex-wrap: nowrap;
+    max-width: none;
+  }
+}
 .Layer__linked-accounts__header + .Layer__linked-accounts__list {
   padding-top: 0;
 }
@@ -2642,66 +2791,199 @@
     padding: var(--spacing-lg);
   }
 }
+.Layer__linked-accounts__new-account {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  max-width: 272px;
+  min-height: 135px;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-sm);
+  background: var(--base-transparent-1);
+}
+.Layer__linked-accounts__new-account.--as-widget {
+  min-height: 90px;
+}
+@media screen and (max-width: 650px) {
+  .Layer__linked-accounts__new-account {
+    margin-right: var(--spacing-lg);
+  }
+}
+.Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  color: var(--color-base-500);
+  text-align: center;
+}
+.Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label span {
+  line-height: normal;
+}
 .Layer__linked-account-thumb {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4xs);
-  padding: var(--spacing-3xs);
+  padding: var(--spacing-2xs);
   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);
+  border: 1px solid var(--color-base-100);
   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);
+  align-items: start;
+  justify-content: space-between;
+  background: var(--color-base-50);
+  color: var(--color-base-900);
+  border-top-left-radius: var(--border-radius-xs);
+  border-top-right-radius: var(--border-radius-xs);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  padding: var(--spacing-xs);
   box-sizing: border-box;
 }
+.Layer__linked-account-thumb .topbar .account-institution {
+  color: var(--color-base-500);
+}
+.Layer__linked-account-thumb .topbar .topbar-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4xs);
+  justify-content: stretch;
+}
+.Layer__linked-account-thumb .topbar .topbar-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 28px;
+  padding: var(--spacing-3xs) 0;
+  background: var(--color-base-0);
+  color: var(--color-base-200);
+  border-radius: var(--border-radius-3xs);
+}
 .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 .middlebar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-base-50);
+  padding: var(--spacing-xs);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
+}
+.Layer__linked-account-thumb .middlebar .account-balance-text {
+  color: var(--color-base-500);
 }
 .Layer__linked-account-thumb .bottombar {
   box-sizing: border-box;
   display: flex;
-  height: 28px;
+  align-items: center;
+  justify-content: space-between;
+  height: 20px;
+  padding: var(--spacing-3xs) var(--spacing-xs) 0;
 }
-.Layer__linked-account-thumb .bottombar .account-amount {
-  padding: var(--spacing-3xs) var(--spacing-md);
+.Layer__linked-account-thumb .bottombar .account-balance-text {
+  color: var(--color-base-500);
 }
-.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n) .topbar {
-  background: var(--color-base-900);
-  color: var(--color-base-0);
+.Layer__linked-account-thumb.--as-widget {
+  gap: var(--spacing-2xs);
 }
-.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+1) .topbar {
-  background: var(--color-base-900);
-  color: var(--color-base-0);
+.Layer__linked-account-thumb.--as-widget .topbar {
+  border-bottom-left-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
 }
-.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+2) .topbar {
-  background: var(--color-base-400);
-  color: var(--color-base-900);
+.Layer__linked-account-thumb.--as-widget .account-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  background: var(--color-base-50);
+  color: var(--color-base-500);
+  border-radius: var(--border-radius-xs);
+  height: 20px;
 }
-.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+3) .topbar {
-  background: var(--color-base-300);
-  color: var(--color-base-900);
+.Layer__linked-account-thumb.--as-widget .bottombar {
+  padding: 0 var(--spacing-xs) 0 0;
 }
-.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__options {
+  position: relative;
+  display: flex;
 }
-.Layer__linked-accounts .Layer__linked-account-thumb:nth-child(5n+5) .topbar {
-  background: var(--color-base-700);
-  color: var(--color-base-0);
+.Layer__linked-accounts__options:hover .Layer__linked-accounts__options-overlay {
+  opacity: 1;
+  touch-action: auto;
+}
+.Layer__linked-accounts__options:hover .Layer__linked-accounts__options-overlay .Layer__linked-accounts__options-overlay-button {
+  transform: translate3d(0, 0, 0);
+}
+.Layer__linked-accounts__options .Layer__linked-accounts__options-overlay {
+  opacity: 0;
+  touch-action: none;
+  position: absolute;
+  z-index: 99;
+  top: var(--spacing-2xs);
+  right: var(--spacing-2xs);
+  width: 74px;
+  height: 54px;
+  display: flex;
+  justify-content: flex-end;
+  transition: 0.15s all ease-out;
+  border-top-right-radius: var(--border-radius-sm);
+  background: linear-gradient(270deg, #f8f8fa 1.52%, rgba(248, 248, 250, 0) 99.75%);
+}
+.Layer__linked-accounts__options .Layer__linked-accounts__options-overlay .Layer__linked-accounts__options-overlay-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: var(--spacing-xs);
+  background: var(--color-base-0);
+  border: none;
+  box-shadow: 0px 0px 8px 0px var(--base-transparent-12, rgba(16, 24, 40, 0.12));
+  border-radius: var(--spacing-2xs);
+  cursor: pointer;
+  transform: translate3d(5px, -5px, 0);
+  transition: 0.15s all ease-out;
+}
+.Layer__linked-accounts__inactive {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4xs);
+  border-radius: 52px;
+  background: var(--color-danger-light);
+  color: var(--color-danger-dark);
+  padding: 1px var(--spacing-2xs) 1px 1px;
+  font-weight: 540px;
+  transition: 0.1s all ease-in-out;
+}
+.Layer__linked-accounts__inactive p {
+  line-height: normal;
+}
+.Layer__linked-accounts__inactive:hover {
+  background: var(--color-danger);
+}
+.Layer__linked-accounts__inactive .Layer__linked-accounts__inactive-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: var(--spacing-4xs);
+  border-radius: 100%;
+  background: var(--color-danger);
+  color: var(--color-base-900);
 }
 .Layer__loader {
   width: 100%;
@@ -3303,6 +3585,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-charts .filters {
   display: flex;
+  align-items: center;
   margin: 0 var(--spacing-md);
   padding: var(--spacing-2xs) var(--spacing-xs);
   gap: var(--spacing-xs);