@layerfi/components 0.1.55 → 0.1.57

package/dist/styles/index.css

@@ -14,6 +14,9 @@
   --color-black: #1a1a1a;
   --color-white: white;
   --color-blue: hsl(217 100% 92%);
+  --color-info: #0968f8;
+  --color-info-bg: #d6e6ff;
+  --color-info-fg: #0056d7;
   --color-info-success: hsl(145, 45%, 42%);
   --color-info-success-bg: hsl(145, 59%, 86%);
   --color-info-success-fg: hsl(145, 63%, 29%);
@@ -125,6 +128,9 @@
   --badge-color: var(--color-base-900);
   --badge-fg-color: var(--color-base-900);
   --badge-bg-color: var(--color-base-400);
+  --badge-color-info: var(--color-info);
+  --badge-fg-color-info: var(--color-info-fg);
+  --badge-bg-color-info: var(--color-info-bg);
   --badge-color-success: var(--color-info-success);
   --badge-fg-color-success: var(--color-info-success-fg);
   --badge-bg-color-success: var(--color-info-success-bg);
@@ -286,6 +292,10 @@
   background-color: var(--badge-bg-color);
   color: var(--badge-fg-color);
 }
+.Layer__badge.Layer__badge--info {
+  background-color: var(--badge-bg-color-info);
+  color: var(--badge-fg-color-info);
+}
 .Layer__badge.Layer__badge--success {
   background-color: var(--badge-bg-color-success);
   color: var(--badge-fg-color-success);
@@ -621,6 +631,77 @@
   align-items: center;
   gap: var(--spacing-4xs);
 }
+.Layer__switch__container {
+  display: flex;
+  align-items: center;
+}
+.Layer__switch__container .Layer__switch__button {
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-width: 0px;
+  border-radius: var(--btn-border-radius);
+  font-family: var(--font-family);
+  cursor: pointer;
+  min-height: 36px;
+  box-sizing: border-box;
+  transition: all 100ms ease-out;
+  padding: 0 2px;
+  text-decoration: none;
+}
+.Layer__switch__container .Layer__switch__button:focus,
+.Layer__switch__container .Layer__switch__button :active {
+  box-shadow: 0px 0px 0px 1px var(--color-base-0), 0px 0px 0px 3px var(--color-base-0);
+  outline: var(--color-base-0);
+}
+.Layer__switch__container .Layer__switch__button--checked .Layer__switch__knob__wrapper {
+  background: var(--color-black);
+  border-color: var(--color-black);
+}
+.Layer__switch__container .Layer__switch__button--checked .Layer__switch__knob__wrapper .Layer__switch__knob {
+  transform: translateX(8px);
+  background: var(--color-white);
+  border-color: var(--color-white);
+}
+.Layer__switch__container .Layer__switch__button--disabled .Layer__switch__knob__wrapper {
+  color: var(--btn-color-icon-hover);
+  background: var(--color-white);
+  border-color: var(--btn-bg-color-icon-hover);
+  cursor: not-allowed;
+}
+.Layer__switch__container .Layer__switch__button--disabled .Layer__switch__knob__wrapper .Layer__switch__knob {
+  background: var(--color-white);
+  border-color: var(--btn-bg-color-icon-hover);
+}
+.Layer__switch__container .Layer__switch__button--disabled .Layer__switch__label {
+  color: var(--btn-color-icon-hover);
+}
+.Layer__switch__container .Layer__switch__knob__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: var(--color-white);
+  border: 2px solid var(--color-base-300);
+  width: 18px;
+  height: 12px;
+  padding: 0 2px;
+  border-radius: 10px;
+  transition: all 0.2s ease;
+}
+.Layer__switch__container .Layer__switch__knob__wrapper .Layer__switch__knob {
+  width: 6px;
+  height: 6px;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  border: 2px solid var(--color-base-300);
+  transition: all 0.2s ease;
+}
+.Layer__switch__container .Layer__switch__label {
+  color: var(--btn-color-icon-hover);
+  margin-right: 10px;
+}
 .Layer__card {
   display: flex;
   flex-direction: column;
@@ -645,6 +726,9 @@
 .Layer__component .recharts-responsive-container.Layer__chart-container {
   padding-top: 42px;
 }
+.Layer__chart-wrapper {
+  position: relative;
+}
 .Layer__chart-container {
   min-height: 300px;
 }
@@ -823,6 +907,11 @@
 .Layer__component-header.Layer__component-header--next-line-actions .Layer__header__actions {
   width: 100%;
 }
+.Layer__component-header__title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
 .Layer__header__actions {
   display: flex;
   align-items: center;
@@ -2065,7 +2154,7 @@
   font-size: var(--input-font-size);
   line-height: 140%;
   background-color: var(--color-base-0);
-  min-height: 39px;
+  min-height: 36px;
   align-items: center;
   cursor: pointer;
 }
@@ -2154,15 +2243,18 @@
   right: 8px;
   z-index: 1;
 }
+.Layer__compare__options .Layer__select {
+  width: max-content;
+}
 @media screen and (-webkit-min-device-pixel-ratio: 2) {
   .Layer__component .Layer__textarea,
   .Layer__component .Layer__select__control,
   .Layer__component .Layer__input {
     font-size: 16px;
-    min-height: 39px;
+    min-height: 36px;
   }
   .Layer__component .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control {
-    min-height: 39px;
+    min-height: 36px;
   }
 }
 .Layer__onboarding {
@@ -2274,6 +2366,19 @@
   border-top: 1px solid var(--color-base-200);
   border-bottom: 1px solid var(--color-base-200);
 }
+.Layer__table .Layer__table-row--selected .Layer__table-cell:first-child {
+  position: relative;
+}
+.Layer__table .Layer__table-row--selected .Layer__table-cell:first-child::after {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 0;
+  width: 4px;
+  background: var(--color-base-400);
+}
 .Layer__table .Layer__table-row {
   position: relative;
   height: var(--spacing-5xl);
@@ -2922,6 +3027,7 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
   gap: var(--spacing-sm);
   flex-wrap: wrap;
+  flex-grow: 1;
 }
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
@@ -4593,66 +4699,13 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__chart-of-accounts__loader-container {
   padding: var(--spacing-2xl);
 }
-.Layer__chart-of-accounts__table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.Layer__chart-of-accounts__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-.Layer__table-cell.Layer__coa__name,
-.Layer__table-cell.Layer__coa__balance {
-  color: var(--color-base-800);
-}
-.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__chart-of-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__table-cell.Layer__coa__actions {
-  width: 160px;
-}
-.Layer__table-cell.Layer__coa__actions .Layer__table-cell-content {
-  display: flex;
-  justify-content: flex-end;
-  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 {
+.Layer__coa__actions .Layer__btn {
   opacity: 0;
   visibility: hidden;
   transition: all 300ms ease-out;
   transform: scale(0.92);
 }
-.Layer__table-cell.Layer__coa__actions .Layer__btn--icon-only {
-  width: 32px;
-  height: 32px;
-  min-height: 32px;
-  max-height: 32px;
-  padding: 0;
-  box-sizing: border-box;
-}
-.Layer__chart-of-accounts__table .Layer__table-row:hover .Layer__coa__actions .Layer__btn {
+.Layer__table-row:hover .Layer__coa__actions .Layer__btn {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
@@ -4681,27 +4734,6 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
   padding-top: var(--spacing-xl);
 }
-.Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--header) {
-  cursor: pointer;
-}
-.Layer__chart-of-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: -15px;
-  padding: var(--spacing-sm);
-}
-.Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header) {
-  background-color: var(--color-base-50);
-}
-.Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header):hover {
-  background-color: var(--color-base-100);
-}
-.Layer__chart-of-accounts__table .Layer__table-row--collapsed .Layer__table__expand-icon {
-  transform: rotate(-90deg);
-}
 .Layer__chart-of-accounts__form {
   display: flex;
   flex-direction: column;
@@ -4796,9 +4828,6 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-800);
 }
 @container (max-width: 1024px) {
-  .Layer__table-cell.Layer__coa__actions .Layer__table-cell-content {
-    padding-right: var(--spacing-md);
-  }
   .Layer__chart-of-accounts__sidebar__header .actions {
     display: none;
   }
@@ -4810,27 +4839,10 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__chart-of-accounts .Layer__mobile--hidden {
     display: none;
   }
-  .Layer__chart-of-accounts .Layer__desktop--hidden.Layer__table-header {
-    display: table-cell;
-  }
-  .Layer__chart-of-accounts .Layer__desktop--hidden.Layer__table-cell-content {
-    display: flex;
-  }
-  .Layer__chart-of-accounts .Layer__coa__type .Layer__table-cell-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .Layer__chart-of-accounts .Layer__coa__type .Layer__table-cell-content.Layer__mobile--hidden {
-    display: none;
-  }
-  .Layer__chart-of-accounts .Layer__table-cell.Layer__coa__actions {
-    width: 64px;
-  }
 }
 @container (max-width: 760px) {
-  .Layer__table-cell.Layer__coa__actions {
-    width: 64px;
+  .Layer__chart-of-accounts {
+    overflow: auto;
   }
   .Layer__chart-of-accounts__row---mobile {
     visibility: visible;
@@ -6197,6 +6209,22 @@ tbody .Layer__table__empty-row:first-child {
   align-items: stretch;
   background-color: white;
 }
+.Layer__compare__options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+.Layer__compare__options .Layer__input-tooltip {
+  flex: 1;
+}
+.Layer__compare__options .Layer__compare__switch__options {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+}
 .Layer__profit-and-loss__main-panel {
   flex: 1;
 }
@@ -6498,6 +6526,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-chart__bar--loading {
   fill: var(--color-base-50);
+}
+.Layer__profit-and-loss-chart__bar--loading-anim {
   animation: layer_chart_bar_loading_anim 2s linear infinite;
 }
 .Layer__profit-and-loss-chart__bar--income {
@@ -6648,6 +6678,55 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-base-200);
   color: var(--color-base-900);
 }
+.Layer__profit-and-loss-chart__state-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  background: #fff;
+  padding: var(--spacing-lg) var(--spacing-4xs);
+  width: 260px;
+  max-width: 70%;
+  height: 120px;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, -60px);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0px 0px 0px 1px var(--base-transparent-4);
+  gap: var(--spacing-md);
+}
+.Layer__profit-and-loss-chart__state-card .Layer__icon-box {
+  background-color: var(--color-base-100);
+}
+.Layer__profit-and-loss-chart__state-card__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4xs);
+}
+.Layer__profit-and-loss-chart__state-card__description {
+  color: var(--text-color-secondary);
+  text-align: center;
+}
+.Layer__compare__controls__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  flex-grow: 1;
+  flex-wrap: wrap;
+}
+.Layer__compare__table__wrapper .Layer__table__wrapper {
+  overflow: auto;
+  max-width: 100%;
+}
+.Layer__compare__table__wrapper .Layer__table tr td:last-child .Layer__table-cell-content,
+.Layer__compare__table__wrapper .Layer__table tr th:last-child .Layer__table-cell-content {
+  justify-content: flex-start;
+  padding-right: var(--spacing-lg);
+}
 .Layer__profit-and-loss-detailed-charts__header--tablet,
 .Layer__profit-and-loss-detailed-charts__header {
   display: flex;
@@ -7110,6 +7189,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     display: none;
   }
 }
+.Layer__accounting-overview-profit-and-loss-chart {
+  width: 100%;
+  box-sizing: border-box;
+}
 @container (max-width: 460px) {
   .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
     margin-top: -12px;