@layerfi/components 0.1.14 → 0.1.16

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;
@@ -509,6 +575,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;
@@ -622,6 +746,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 {
@@ -1048,63 +1194,56 @@
     font-size: var(--text-sm) !important;
   }
 }
-.Layer__profit-and-loss-date-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__onboarding {
+  transition:
+    max-height 500ms ease-out,
+    opacity 550ms ease-out,
+    transform 500ms ease-out;
 }
-.Layer__profit-and-loss-date-picker__button {
-  padding: 0.25rem;
+.Layer__onboarding__content {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   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;
+  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-3xl);
+  box-sizing: border-box;
 }
-.Layer__profit-and-loss-date-picker__button:active {
-  background-color: var(--color-base-0);
+.Layer__onboarding .Layer__actionable_row {
+  max-width: 90%;
+  width: 640px;
 }
-.Layer__profit-and-loss-date-picker__button-icon path {
-  stroke: var(--text-color);
-}
-.Layer__profit-and-loss-date-picker__label {
-  flex: 1;
-  font-size: 14px;
+.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;
-  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;
+  justify-content: space-between;
+}
+.Layer__notification-card .Layer__skeleton-loader {
+  margin-top: 3px;
+  margin-bottom: 2px;
 }
-.Layer__profit-and-loss-date-picker__labels-container {
+.Layer__notification-card__main {
   display: flex;
-  width: 660px;
-  position: absolute;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+  align-items: flex-start;
 }
-.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__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%;
@@ -1204,6 +1343,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;
@@ -1307,6 +1448,9 @@
 .Layer__flex-1 {
   flex: 1;
 }
+.Layer__flex-col {
+  flex-direction: column;
+}
 .Layer__justify--center {
   justify-content: center;
 }
@@ -2873,6 +3017,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 {
@@ -3025,6 +3170,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;
@@ -3066,6 +3216,214 @@
     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__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__name,
+.Layer__table-cell.Layer__journal__balance {
+  color: var(--color-base-800);
+}
+.Layer__table-header.Layer__journal__name {
+  padding-left: var(--spacing-xl);
+}
+.Layer__table-cell.Layer__journal__name {
+  width: calc(100% - 192px - 50%);
+}
+.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__name {
+  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__table .Layer__journal-entry-table-row:not(.Layer__table-row--header):hover {
+  background-color: var(--color-base-100);
+}
+.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__back-btn {
+  background: var(--color-base-0);
+  padding-top: var(--spacing-xl);
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
 }
 .Layer__data-state {
   display: flex;
@@ -3090,6 +3448,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);
@@ -3097,11 +3460,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);
@@ -3123,6 +3487,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;
@@ -3297,6 +3665,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;
@@ -3345,6 +3717,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;
@@ -3965,7 +4344,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 {
@@ -4186,10 +4565,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;
   }
 }
@@ -4205,10 +4584,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;
   }
 }
@@ -4275,4 +4654,14 @@ 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;
+}
 /*# sourceMappingURL=index.css.map */