@layerfi/components 0.1.15 → 0.1.17

package/dist/styles/index.css

@@ -115,6 +115,7 @@
   --btn-secondary-color: var(--color-black);
   --btn-secondary-bg-color: var(--color-white);
   --badge-color: var(--color-base-900);
+  --badge-fg-color: var(--color-base-900);
   --badge-bg-color: var(--color-base-400);
   --badge-color-success: var(--color-info-success);
   --badge-fg-color-success: var(--color-info-success-fg);
@@ -191,6 +192,35 @@
 .Layer__sortable-col.sort--asc .Layer__sort-arrows .asc-arrow {
   stroke: var(--color-base-1000);
 }
+.Layer__actionable_row {
+  display: flex;
+  padding: var(--spacing-md);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  border-radius: var(--XS, 8px);
+  background: var(--color-base-0);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+}
+.Layer__actionable_row__main {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.Layer__actionable_row__icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  background-color: var(--color-base-100);
+  border-radius: var(--border-radius-3xs);
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 0px 3px 0px var(--base-transparent-4) inset;
+}
+.Layer__actionable_row__description {
+  color: var(--color-base-500);
+  font-size: var(--text-sm);
+}
 .Layer__badge {
   display: inline-flex;
   gap: var(--spacing-3xs);
@@ -208,9 +238,12 @@
   font-size: var(--text-xs);
   padding: var(--spacing-3xs) var(--spacing-xs);
   line-height: 1.1;
+  height: 21px;
 }
 .Layer__badge.Layer__badge--clickable {
   cursor: pointer;
+  min-height: 21px;
+  border-width: 0;
 }
 .Layer__badge.Layer__badge--clickable:hover {
   background-color: var(--badge-fg-color);
@@ -328,7 +361,7 @@
   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));
+  box-shadow: 0px 0px 0px 1px var(--color-base-300), 0px 1px 2px 0px var(--base-transparent-6);
 }
 .Layer__btn:visited,
 .Layer__btn:active {
@@ -351,6 +384,10 @@
   color: var(--btn-color-primary);
   background: var(--btn-bg-color-primary);
 }
+.Layer__btn--primary:hover .Layer__btn-icon {
+  color: var(--btn-color-primary);
+  background: transparent;
+}
 .Layer__btn--primary:visited,
 .Layer__btn--primary:active {
   box-shadow: 0px 0px 0px 1px var(--color-base-800);
@@ -368,6 +405,14 @@
 .Layer__btn--primary.Layer__btn--active:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-inactive {
   display: none;
 }
+.Layer__btn--primary:not(.Layer__btn--with-primary-icon) .Layer__btn-icon {
+  color: var(--btn-color-primary);
+}
+.Layer__btn--primary:not(.Layer__btn--with-primary-icon):hover:not([disabled]) .Layer__btn-icon,
+.Layer__btn--primary:not(.Layer__btn--with-primary-icon).Layer__btn--active:not([disabled]) .Layer__btn-icon {
+  color: var(--btn-color-primary);
+  background: transparent;
+}
 .Layer__btn-content {
   padding: 2px;
   display: flex;
@@ -416,6 +461,19 @@
   background-color: var(--color-base-300);
   color: var(--color-base-1000);
 }
+.Layer__icon-btn.Layer__icon-btn--border {
+  color: var(--color-base-800);
+  box-shadow:
+    0px 0px 0px 1px var(--color-base-300),
+    0px 1px 1px 0px var(--base-transparent-4),
+    0px 2px 3px 0px var(--base-transparent-4),
+    0px 3px 4px 0px var(--base-transparent-2),
+    0px 4px 5px 0px var(--base-transparent-1);
+}
+.Layer__icon-btn.Layer__icon-btn--border:hover {
+  background-color: var(--color-base-0);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300), 0px 1px 2px 0px var(--base-transparent-6);
+}
 .Layer__icon-btn.Layer__icon-btn--active {
   background-color: var(--color-base-200);
   color: var(--color-base-1000);
@@ -423,6 +481,14 @@
 .Layer__icon-btn.Layer__icon-btn--active:hover {
   background-color: var(--color-base-300);
 }
+.Layer__icon-btn.Layer__icon-btn--border {
+  box-shadow:
+    0px 4px 5px 0px var(--base-transparent-1),
+    0px 3px 4px 0px var(--base-transparent-2),
+    0px 2px 3px 0px var(--base-transparent-4),
+    0px 1px 1px 0px var(--base-transparent-4),
+    0px 0px 0px 1px var(--color-base-300);
+}
 .Layer__text-btn {
   outline: none;
   box-shadow: none;
@@ -472,14 +538,16 @@
 .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__component .recharts-responsive-container.Layer__chart-container {
+  padding-top: 42px;
+}
 .Layer__chart-container {
-  min-height: 200px;
+  min-height: 250px;
 }
 .Layer__chart__tooltip {
   background-color: var(--color-base-1000);
@@ -510,6 +578,64 @@
 .Layer__chart__tooltip-list .Layer__chart__tooltip-value.negative {
   color: var(--color-danger);
 }
+.Layer__date-month-picker {
+  width: 210px;
+  font-size: 14px;
+  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__date-month-picker__button {
+  padding: 0.25rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background-color: var(--color-base-0);
+  border: 0;
+  border-radius: var(--input-border-radius);
+  z-index: 3;
+  position: relative;
+}
+.Layer__date-month-picker__button:active {
+  background-color: var(--color-base-0);
+}
+.Layer__date-month-picker__button-icon path {
+  stroke: var(--text-color);
+}
+.Layer__date-month-picker__label {
+  flex: 1;
+  font-size: 14px;
+  display: flex;
+  justify-content: flex-start;
+  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__date-month-picker__labels-container {
+  display: flex;
+  width: 660px;
+  position: absolute;
+}
+.Layer__date-month-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__hover-menu {
   position: relative;
   display: flex;
@@ -623,6 +749,28 @@
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-md);
+  box-sizing: border-box;
+}
+.Layer__component-header.Layer__component-header--next-line-actions {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.Layer__component-header.Layer__component-header--next-line-actions .Layer__heading {
+  align-self: flex-start;
+}
+.Layer__component-header.Layer__component-header--next-line-actions .Layer__header__actions {
+  width: 100%;
+}
+.Layer__header__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+.Layer__header__actions-col {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 @container (max-width: 700px) {
   .Layer__component-header {
@@ -648,6 +796,32 @@
 .Layer__datetime__time {
   color: var(--color-base-600);
 }
+.Layer__datepicker 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), 0px 0px 0px 2px rgba(0, 0, 0, 0);
+  margin: 1px;
+  max-width: 150px;
+  font-family: var(--font-family);
+  font-size: var(--input-font-size);
+  line-height: 140%;
+}
+.Layer__datepicker input:focus,
+.Layer__datepicker input:active,
+.Layer__datepicker 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;
+}
+.react-datepicker__tab-loop {
+  z-index: 99;
+}
+.Layer__datepicker__time input {
+  max-width: 100px;
+}
 .Layer__details-list {
   display: flex;
   flex-direction: column;
@@ -715,6 +889,32 @@
   padding: var(--spacing-2xs);
   color: var(--label-color);
 }
+.Layer__textarea {
+  width: 100%;
+  resize: none;
+  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
+  border: 1px solid var(--border-color);
+  border-radius: var(--input-border-radius);
+  border-width: 0px;
+  min-height: 100px;
+  padding: var(--spacing-xs);
+  font-family: var(--font-family);
+  font-size: var(--input-font-size);
+  line-height: 140%;
+}
+.Layer__textarea.Layer__textarea--error {
+  box-shadow: 0px 0px 0px 1px var(--color-base-300), 0px 0px 0px 2px var(--color-danger);
+}
+.Layer__textarea:disabled {
+  background-color: var(--color-base-100);
+  color: var(--color-base-800);
+}
+.Layer__textarea:focus,
+.Layer__textarea:active,
+.Layer__textarea: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 {
   padding: 8px;
   box-sizing: border-box;
@@ -1107,6 +1307,67 @@
   background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
   z-index: 2;
 }
+.Layer__input-with-badge {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.Layer__input-with-badge .Layer__badge {
+  position: absolute;
+  right: 8px;
+  z-index: 1;
+}
+.Layer__onboarding {
+  transition:
+    max-height 500ms ease-out,
+    opacity 550ms ease-out,
+    transform 500ms ease-out;
+}
+.Layer__onboarding__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-3xl);
+  box-sizing: border-box;
+}
+.Layer__onboarding .Layer__actionable_row {
+  max-width: 90%;
+  width: 640px;
+}
+.Layer__notification-card {
+  box-sizing: border-box;
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  border-radius: var(--border-radius-xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  min-height: 52px;
+  background-color: var(--color-base-0);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.Layer__notification-card .Layer__skeleton-loader {
+  margin-top: 3px;
+  margin-bottom: 2px;
+}
+.Layer__notification-card__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+  align-items: flex-start;
+}
+.Layer__notification-card__main > .Layer__text {
+  color: var(--color-base-700);
+}
+.Layer__txs-to-review .Layer__badge--error {
+  color: var(--color-info-error-fg);
+  background-color: var(--color-base-50);
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
+.Layer__txs-to-review .Layer__badge--success {
+  color: var(--color-info-success-fg);
+  background-color: var(--color-base-50);
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
 .Layer__table {
   width: 100%;
   border-collapse: separate;
@@ -1205,6 +1466,8 @@
   display: none;
 }
 .Layer__table-state-container {
+  padding: var(--spacing-2xl) var(--spacing-sm);
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1239,7 +1502,7 @@
 }
 .Layer__table-cell > .Layer__table-cell-content {
   overflow: hidden;
-  transition: height 30ms ease-out, opacity 150ms ease-in-out;
+  transition: all 100ms ease-out;
 }
 .Layer__table-row {
   transition: all 180ms ease-in-out;
@@ -1308,6 +1571,9 @@
 .Layer__flex-1 {
   flex: 1;
 }
+.Layer__flex-col {
+  flex-direction: column;
+}
 .Layer__justify--center {
   justify-content: center;
 }
@@ -2874,6 +3140,7 @@
   align-items: center;
   padding-top: var(--spacing-3xs);
   padding-bottom: var(--spacing-3xs);
+  padding-right: var(--spacing-xl);
   gap: var(--spacing-xs);
 }
 .Layer__table-cell.Layer__coa__actions .Layer__table-cell-content > .Layer__btn {
@@ -3026,6 +3293,11 @@
 .Layer__coa__type--mobile {
   color: var(--color-base-800);
 }
+@container (max-width: 1024px) {
+  .Layer__table-cell.Layer__coa__actions .Layer__table-cell-content {
+    padding-right: var(--spacing-md);
+  }
+}
 @container (min-width: 761px) and (max-width: 1024px) {
   .Layer__chart-of-accounts .Layer__mobile--hidden {
     display: none;
@@ -3067,6 +3339,332 @@
     flex: 1;
     width: 100%;
   }
+  .Layer__chart-of-accounts__actions.Layer__header__actions {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+.Layer__component-container.Layer__journal {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+}
+.Layer__journal-table .Layer__table-cell-content::before {
+  background: var(--color-base-400);
+}
+.Layer__journal__arrow .Layer__table-cell-content {
+  padding-right: 0 !important;
+}
+.Layer__journal__table .Layer__table-cell .Layer__table-cell-content .Layer__table-cell-content::before {
+  height: 52px;
+}
+.Layer__journal__loader-container {
+  padding: var(--spacing-2xl);
+}
+.Layer__table-cell-hidden {
+  visibility: hidden;
+}
+.Layer__journal__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.Layer__journal__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.Layer__table-cell.Layer__journal__arrow,
+.Layer__table-cell.Layer__journal__balance {
+  color: var(--color-base-800);
+}
+.Layer__table-header.Layer__journal__arrow {
+  padding-left: var(--spacing-xl);
+}
+.Layer__table-cell.Layer__journal__arrow {
+  width: 25px;
+}
+.Layer__table-cell.Layer__journal__type,
+.Layer__table-cell.Layer__journal__subtype {
+  width: calc(100% - 192px - 75%);
+}
+.Layer__table-cell.Layer__journal__balance {
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
+.Layer__journal__table .Layer__table-row--depth-0 .Layer__table-cell.Layer__journal__arrow {
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
+.Layer__journal__balance {
+  text-align: right;
+  justify-content: flex-end;
+}
+.Layer__table-cell.Layer__journal__actions {
+  width: 160px;
+}
+.Layer__table-cell.Layer__journal__actions .Layer__table-cell-content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: var(--spacing-3xs);
+  padding-bottom: var(--spacing-3xs);
+  gap: var(--spacing-xs);
+}
+.Layer__table-cell.Layer__journal__actions .Layer__table-cell-content > .Layer__btn {
+  opacity: 0;
+  visibility: hidden;
+  transition: all 300ms ease-out;
+  transform: scale(0.92);
+}
+.Layer__table-cell.Layer__journal__actions .Layer__btn--icon-only {
+  width: 32px;
+  height: 32px;
+  min-height: 32px;
+  max-height: 32px;
+  padding: 0;
+  box-sizing: border-box;
+}
+.Layer__journal-line__table-row {
+  background-color: var(--color-base-50);
+}
+.Layer__journal__table .Layer__table-row:hover .Layer__journal__actions .Layer__btn {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+.Layer__journal__sidebar__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--spacing-xl);
+  padding-bottom: var(--spacing-lg);
+  gap: var(--spacing-md);
+}
+.Layer__journal__sidebar__header .title {
+  margin: 0;
+  font-size: 24px;
+}
+.Layer__journal__sidebar__header .actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+.Layer__journal__table .Layer__journal-table-row:not(.Layer__table-row--header):hover {
+  background-color: var(--color-base-50);
+}
+.Layer__journal-entry-table-row .Layer__table-cell,
+.Layer__journal-table-row .Layer__table-cell {
+  transition: all 150ms ease-out;
+  height: var(--spacing-5xl);
+}
+.Layer__table-row--hidden .Layer__table-cell {
+  height: 0px;
+}
+.Layer__row--expanded .Layer__table-cell {
+  background-color: var(--bg-element-focus);
+}
+.Layer__table__expand-icon {
+  transition: transform 150ms ease-out;
+  color: var(--color-base-600);
+  margin-left: -3px;
+  margin-right: var(--spacing-sm);
+}
+.Layer__journal__table .Layer__table-row--collapsed .Layer__table__expand-icon {
+  transform: rotate(-90deg);
+}
+.Layer__journal__form {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl);
+}
+.Layer__journal__form .Layer__input-group.Layer__input-group--inline {
+  padding: var(--spacing-xs) 0;
+}
+.Layer__journal__form .Layer__input-group.Layer__input-group--inline label {
+  width: 140px;
+  min-width: 140px;
+  max-width: 140px;
+}
+.Layer__journal__form-edit-entry {
+  padding: var(--spacing-md) var(--spacing-xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+.Layer__journal__form-edit-entry .Layer__text {
+  margin: 0;
+}
+.Layer__journal .Layer__desktop--hidden {
+  display: none;
+}
+.Layer__journal__type--mobile {
+  color: var(--color-base-800);
+}
+@container (min-width: 761px) and (max-width: 1024px) {
+  .Layer__journal .Layer__mobile--hidden {
+    display: none;
+  }
+  .Layer__journal .Layer__desktop--hidden.Layer__table-header {
+    display: table-cell;
+  }
+  .Layer__journal .Layer__desktop--hidden.Layer__table-cell-content {
+    display: flex;
+  }
+  .Layer__journal .Layer__journal__type .Layer__table-cell-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .Layer__journal .Layer__journal__type .Layer__table-cell-content.Layer__mobile--hidden {
+    display: none;
+  }
+  .Layer__journal .Layer__table-cell.Layer__journal__actions {
+    width: 64px;
+  }
+}
+@container (max-width: 760px) {
+  .Layer__table-cell.Layer__journal__actions {
+    width: 64px;
+  }
+  .Layer__journal__row---mobile {
+    visibility: visible;
+    display: table-row;
+  }
+  .Layer__journal__row---desktop {
+    visibility: hidden;
+    display: none;
+  }
+  .Layer__journal__form-row {
+    flex-direction: column;
+  }
+  .Layer__journal__form-row .Layer__journal__form-row__name_field {
+    flex: 1;
+    width: 100%;
+  }
+}
+.Layer__journal__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-md);
+  padding-bottom: 0;
+}
+.Layer__journal__pagination .Layer__pagination {
+  margin-bottom: 0;
+}
+.Layer__journal__entry-details__title .Layer__component-header {
+  padding-bottom: var(--spacing-3xs);
+}
+.Layer__journal__entry-details__title .Layer__journal__entry-details__back-btn {
+  display: flex;
+  background: var(--color-base-0);
+}
+@container (max-width: 1024px) {
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content {
+    width: 100%;
+  }
+}
+@container (min-width: 500px) and (max-width: 1024px) {
+  .Layer__journal__panel .Layer__details-list .Layer__component-header {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+}
+@container (max-width: 499px) {
+  .Layer__journal__panel .Layer__details-list .Layer__details-list-item__label,
+  .Layer__journal__panel .Layer__details-list .Layer__details-list-item__value {
+    padding: var(--spacing-xs);
+  }
+  .Layer__journal__panel .Layer__details-list .Layer__details-list-item {
+    padding: 0 var(--spacing-xs);
+  }
+  .Layer__journal__entry-details__line-items {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+  }
+  .Layer__journal__entry-details__line-items .Layer__card {
+    box-shadow: none;
+    border-radius: 0;
+  }
+  .Layer__journal__panel .Layer__panel__sidebar {
+    background: var(--color-base-0);
+  }
+  .Layer__journal__entry-details__back-btn {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+.Layer__journal__form__input-group__line-item {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-md) 0;
+  gap: var(--spacing-2xs);
+}
+.Layer__journal__form__input-group__line-item:not(:first-of-type) {
+  border-top: 1px solid var(--color-base-300);
+}
+.Layer__remove__button {
+  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
+  padding: 8px;
+  margin-left: 8px;
+}
+.Layer__journal__form__input-group {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl);
+  gap: var(--spacing-3xs);
+}
+.Layer__journal__form__input-group__textarea {
+  background: var(--color-base-50);
+}
+.Layer__journal__form__input-group__textarea textarea {
+  margin: var(--spacing-sm) 0;
+}
+.Layer__journal__form__input-group__border {
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__journal__form__input-group .Layer__input-group .Layer__journal__datepicker__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.Layer__journal__form__input-group .Layer__datepicker__time {
+  margin-left: var(--spacing-sm);
+}
+.Layer__journal__form__input-group .Layer__input-label {
+  padding: 0;
+}
+.Layer__journal__form__input-group .Layer__journal__form__input-group__title {
+  padding-bottom: var(--spacing-xl);
+}
+.Layer__journal__sidebar__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--spacing-xl);
+  padding-bottom: var(--spacing-lg);
+  gap: var(--spacing-md);
+}
+.Layer__journal__sidebar__header .title {
+  margin: 0;
+  font-size: 24px;
+}
+.Layer__journal__sidebar__header .actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+.Layer__journal__form__error-message {
+  padding: var(--spacing-4xs) var(--spacing-xl);
+  width: 100%;
+  text-align: right;
+  box-sizing: border-box;
+  color: var(--color-danger);
+}
+.Layer__journal__add-entry-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) 0 0;
 }
 .Layer__data-state {
   display: flex;
@@ -3091,6 +3689,11 @@
   background: var(--color-base-100);
   color: var(--text-color-primary);
 }
+.Layer__data-state__icon--success {
+  box-shadow: 0px 0px 3px 0px rgba(23, 51, 45, 0.04) inset;
+  background: var(--color-info-success-bg);
+  color: var(--color-info-success-fg);
+}
 .Layer__data-state__icon--error {
   background: transparent;
   color: var(--color-danger);
@@ -3098,11 +3701,12 @@
 .Layer__data-state__title {
   display: block;
   margin-bottom: var(--spacing-2xs);
+  color: var(--color-base-700);
 }
 .Layer__data-state__description {
   display: block;
   margin-bottom: var(--spacing-xl);
-  color: var(--color-base-700);
+  color: var(--color-base-500);
 }
 .Layer__chevron {
   stroke: var(--text-color);
@@ -3124,6 +3728,10 @@
 .Layer__linked-accounts::-webkit-scrollbar {
   display: none;
 }
+.Layer__linked-accounts .Layer__linked-accounts__options.--hide-ledger-balance {
+  position: relative;
+  display: block;
+}
 .Layer__linked-accounts .Layer__data-state {
   padding: var(--spacing-md);
   padding-top: 0;
@@ -3298,6 +3906,10 @@
   position: relative;
   display: flex;
 }
+.Layer__linked-accounts__options.--hide-ledger-balance {
+  position: relative;
+  display: block;
+}
 .Layer__linked-accounts__options:hover .Layer__linked-accounts__options-overlay {
   opacity: 1;
   touch-action: auto;
@@ -3346,6 +3958,13 @@
   font-size: var(--text-sm);
   box-sizing: border-box;
 }
+.Layer__loader--as-badge {
+  padding: 0;
+  width: 21px;
+  height: 21px;
+  background-color: var(--color-base-100);
+  border-radius: 50%;
+}
 .Layer__skeleton-loader {
   width: 100%;
   height: 12px;
@@ -3679,7 +4298,7 @@
   font-size: 0.75rem;
 }
 .Layer__profit-and-loss-chart .recharts-legend-wrapper {
-  margin-top: 1.75rem;
+  margin-top: -46px;
 }
 .Layer__profit-and-loss-chart .recharts-legend-item-text {
   font-size: 12px;
@@ -3699,7 +4318,7 @@
 .Layer__profit-and-loss-chart__selection-indicator {
   stroke: var(--chart-indicator-color);
   fill: none;
-  transition: x 0.35s ease-in-out;
+  transition: opacity 0.1s linear;
 }
 .Layer__profit-and-loss__chart_with_summaries {
   display: flex;
@@ -3821,6 +4440,25 @@
 .Layer__profit-and-loss-chart__bar--expenses {
   fill: var(--bar-color-expenses);
 }
+.Layer__chart-container--loading .Layer__profit-and-loss-chart__bar--expenses {
+  fill: var(--color-base-50);
+  animation: layer_chart_bar_loading_anim 2s linear infinite;
+}
+.Layer__chart-container--loading .Layer__profit-and-loss-chart__bar--income {
+  fill: var(--color-base-100);
+  animation: layer_chart_bar_loading_anim 2s linear infinite;
+}
+@keyframes layer_chart_bar_loading_anim {
+  0% {
+    fill: var(--color-base-50);
+  }
+  50% {
+    fill: var(--color-base-200);
+  }
+  100% {
+    fill: var(--color-base-50);
+  }
+}
 .Layer__profit-and-loss-row__label--depth-0.Layer__profit-and-loss-row__label--display-children-false {
   padding-left: 22px;
 }
@@ -3947,7 +4585,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts__head > .Layer__text {
   margin: 0;
 }
-.Layer__profit-and-loss-detailed-charts__head .Layer__profit-and-loss-date-picker {
+.Layer__profit-and-loss-detailed-charts__head .Layer__date-month-picker {
   display: none;
 }
 .Layer__profit-and-loss-detailed-charts {
@@ -4168,10 +4806,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__profit-and-loss-detailed-charts .header--tablet .title {
     font-size: 24px;
   }
-  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__profit-and-loss-date-picker {
+  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__date-month-picker {
     margin-top: var(--spacing-sm);
   }
-  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__profit-and-loss-date-picker .Layer__profit-and-loss-date-picker__label {
+  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__date-month-picker .Layer__date-month-picker__label {
     font-size: 14px;
   }
 }
@@ -4187,10 +4825,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .date {
     display: none;
   }
-  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__profit-and-loss-date-picker {
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__date-month-picker {
     display: flex;
   }
-  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__profit-and-loss-date-picker .Layer__profit-and-loss-date-picker__label {
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__date-month-picker .Layer__date-month-picker__label {
     font-size: 14px;
   }
 }
@@ -4257,4 +4895,17 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-top: 2px;
   max-width: 100%;
 }
+.Layer__accounting-overview__summaries-row {
+  display: flex;
+  align-items: center;
+  column-gap: var(--spacing-md);
+  max-width: 1406px;
+}
+.Layer__accounting-overview__summaries-row .Layer__notification-card {
+  width: calc(25% - 12px);
+  height: 56px;
+}
+.Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
+  margin-top: -42px;
+}
 /*# sourceMappingURL=index.css.map */