@layerfi/components 0.1.75 → 0.1.76

package/dist/styles/index.css

@@ -2502,40 +2502,6 @@
   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-spacing: 0;
@@ -3334,6 +3300,43 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__view.Layer__view--panel .Layer__view-header__content {
   max-width: 1406px;
 }
+.Layer__VStack {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__VStack[data-align=start] {
+  align-items: start;
+}
+.Layer__VStack[data-gap="3xs"] {
+  gap: var(--spacing-3xs);
+}
+.Layer__VStack[data-gap="2xs"] {
+  gap: var(--spacing-2xs);
+}
+.Layer__VStack[data-gap=xs] {
+  gap: var(--spacing-xs);
+}
+.Layer__VStack[data-gap=sm] {
+  gap: var(--spacing-sm);
+}
+.Layer__VStack[data-gap=md] {
+  gap: var(--spacing-md);
+}
+.Layer__VStack[data-gap=lg] {
+  gap: var(--spacing-lg);
+}
+.Layer__VStack[data-gap=xl] {
+  gap: var(--spacing-xl);
+}
+.Layer__VStack[data-gap="2xl"] {
+  gap: var(--spacing-2xl);
+}
+.Layer__VStack[data-gap="3xl"] {
+  gap: var(--spacing-3xl);
+}
+.Layer__VStack[data-gap="5xl"] {
+  gap: var(--spacing-5xl);
+}
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
   width: 100%;
@@ -6663,6 +6666,88 @@ tbody .Layer__table__empty-row:first-child {
   background-color: var(--color-info-error-bg);
   color: var(--color-info-error-fg);
 }
+.Layer__ProfitAndLossSummariesListItem {
+  all: unset;
+  display: grid;
+  background: var(--color-base-0);
+  border-radius: var(--border-radius-xs);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  padding: var(--spacing-4xs);
+}
+.Layer__ProfitAndLossSummariesListItem[data-active] {
+  box-shadow: 0px 0px 0px 1px var(--color-base-200);
+  background: var(--color-base-50);
+}
+.Layer__ProfitAndLossSummariesListItem[data-clickable] {
+  cursor: pointer;
+}
+.Layer__ProfitAndLossSummariesListItem[data-clickable]:hover {
+  background: var(--color-base-50);
+}
+.Layer__ProfitAndLossSummariesList {
+  all: unset;
+  display: grid;
+  gap: var(--spacing-sm);
+  grid-auto-rows: minmax(0, 1fr);
+}
+@container (min-width: 48rem) {
+  .Layer__ProfitAndLossSummariesList {
+    --column-count: 3;
+    gap: var(--spacing-md);
+    grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+  }
+  .Layer__ProfitAndLossSummariesList[data-column-count="4"] {
+    --column-count: 4;
+  }
+}
+.Layer__ProfitAndLossSummariesSummary {
+  display: grid;
+  min-block-size: 3rem;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--spacing-xs);
+  row-gap: var(--spacing-3xs);
+  grid-template-areas: "chart heading" "chart amount";
+}
+.Layer__ProfitAndLossSummariesSummary[data-size=lg] {
+  min-block-size: 6rem;
+  column-gap: var(--spacing-md);
+}
+.Layer__ProfitAndLossSummariesSummaryChartArea {
+  grid-area: chart;
+  align-content: center;
+  border-radius: var(--border-radius-xs);
+  background: var(--color-base-50);
+}
+.Layer__ProfitAndLossSummariesSummaryAmount {
+  grid-area: amount;
+  font-size: var(--text-lg);
+  font-variation-settings: "wght" var(--font-weight-bold);
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+.Layer__ProfitAndLossSummariesSummaryAmount[data-size=lg] {
+  font-size: var(--text-heading);
+}
+.Layer__ProfitAndLossSummariesSummaryAmount[data-positive]::before {
+  content: "$";
+}
+.Layer__ProfitAndLossSummariesSummaryAmount[data-negative]::before {
+  content: "-$";
+}
+.Layer__ProfitAndLossSummariesSummaryHeading {
+  grid-area: heading;
+  align-self: end;
+  margin: unset;
+  color: var(--color-base-700);
+  font-size: var(--text-sm);
+}
+.Layer__ProfitAndLossSummariesSummaryHeading[data-size=lg] {
+  font-size: var(--text-lg);
+}
+.Layer__ProfitAndLossSummaries {
+  display: grid;
+  container-type: inline-size;
+}
 .Layer__component-container .Layer__profit-and-loss {
   display: flex;
   align-items: stretch;
@@ -6893,88 +6978,6 @@ tbody .Layer__table__empty-row:first-child {
   flex: 1;
   padding: var(--spacing-md);
 }
-.Layer__profit-and-loss-summaries {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-evenly;
-  column-gap: var(--spacing-md);
-  row-gap: var(--spacing-md);
-  max-width: 1406px;
-}
-.Layer__profit-and-loss-summaries.flex-col {
-  flex-direction: column;
-}
-.Layer__profit-and-loss-summaries__summary {
-  display: flex;
-  flex: 1;
-  gap: var(--spacing-xs);
-  align-items: center;
-  box-shadow: 0px 0px 0px 1px var(--color-base-300);
-  border-radius: var(--border-radius-xs);
-  padding: var(--spacing-4xs);
-  min-height: 52px;
-  box-sizing: border-box;
-  background-color: var(--color-base-0);
-}
-.Layer__profit-and-loss-summaries__summary.Layer__actionable {
-  cursor: pointer;
-}
-.Layer__profit-and-loss-summaries__summary.Layer__actionable:hover {
-  background: var(--color-base-50);
-}
-.Layer__profit-and-loss-summaries__summary.active {
-  box-shadow: 0px 0px 0px 1px var(--color-base-200);
-  background: var(--color-base-50);
-}
-.Layer__profit-and-loss-summaries__summary .mini-chart {
-  background: var(--color-base-50);
-  border-radius: 6px;
-  border-width: 0;
-  box-shadow: none;
-}
-.Layer__profit-and-loss-summaries__summary.net-profit {
-  padding-left: var(--spacing-xs);
-  min-height: 56px;
-}
-.Layer__profit-and-loss-summaries__summary.Layer__actionable.net-profit {
-  background: var(--color-base-50);
-  border-color: transparent;
-  box-shadow: none;
-}
-.Layer__profit-and-loss-summaries__loader {
-  height: 17px;
-  display: flex;
-  align-items: center;
-}
-.Layer__profit-and-loss-summaries__loader .Layer__skeleton-loader {
-  height: 14px;
-}
-.Layer__profit-and-loss-summaries__text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4xs);
-}
-.Layer__profit-and-loss-summaries__title {
-  color: var(--color-base-700);
-  font-size: var(--text-sm);
-}
-.Layer__profit-and-loss-summaries__month {
-  font-size: 1.125rem;
-  margin-bottom: 0.25rem;
-}
-.Layer__profit-and-loss-summaries__amount,
-.Layer__profit-and-loss-summaries__amount--positive {
-  color: var(--text-color-primary);
-  font-size: var(--text-md);
-}
-.Layer__profit-and-loss-summaries__amount::before,
-.Layer__profit-and-loss-summaries__amount--positive::before {
-  content: "$";
-}
-.Layer__profit-and-loss-summaries__amount--negative::before {
-  content: "-$";
-}
 .Layer__profit-and-loss-row__children--content {
   min-height: 0;
   display: grid;
@@ -7074,10 +7077,6 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 @container (max-width: 1023px) and (min-width: 760px) {
-  .Layer__profit-and-loss-summaries,
-  .Layer__profit-and-loss-summaries.flex-col {
-    flex-direction: row;
-  }
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
     margin-left: var(--spacing-md);
@@ -7086,10 +7085,6 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 @container (max-width: 759px) and (min-width: 500px) {
-  .Layer__profit-and-loss-summaries,
-  .Layer__profit-and-loss-summaries.flex-col {
-    flex-direction: column;
-  }
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
     margin-left: 0;
@@ -7099,15 +7094,6 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 @container (max-width: 500px) {
-  .Layer__profit-and-loss-summaries,
-  .Layer__profit-and-loss-summaries.flex-col {
-    flex-direction: row;
-    max-width: 100%;
-    overflow: auto;
-    box-sizing: border-box;
-    justify-content: flex-start;
-    padding: 6px 1px;
-  }
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
     margin-left: 0;
@@ -7115,9 +7101,6 @@ tbody .Layer__table__empty-row:first-child {
     margin-bottom: var(--spacing-md);
     box-shadow: none;
   }
-  .Layer__profit-and-loss-summaries__summary {
-    min-width: 150px;
-  }
 }
 .Layer__profit-and-loss-row__detailed-chart-btn {
   width: 20px;
@@ -7623,16 +7606,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     transform: translateX(50%);
   }
 }
-.Layer__accounting-overview__summaries-row {
+.Layer__TransactionsToReview {
   display: flex;
   align-items: center;
-  gap: var(--spacing-md);
-  max-width: 1406px;
-  width: 100%;
-}
-.Layer__accounting-overview__summaries-row .Layer__notification-card {
-  width: calc(25% - 12px);
-  height: 56px;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
 }
 .Layer__accounting-overview-profit-and-loss-charts {
   display: flex;
@@ -7651,16 +7630,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
 }
 @container (max-width: 796px) {
-  .Layer__accounting-overview__summaries-row {
-    flex-direction: column;
-  }
-  .Layer__accounting-overview__summaries-row .Layer__profit-and-loss-summaries {
-    width: 100%;
-    flex-direction: column;
-  }
-  .Layer__accounting-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
-    width: 100%;
-  }
   .Layer__accounting-overview-profit-and-loss-charts {
     flex-direction: column;
   }
@@ -7680,6 +7649,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     margin-top: -12px;
   }
 }
+.Layer__BookkeepingProfitAndLossSummariesContainer {
+  padding: var(--spacing-md);
+}
 .Layer__bookkeeping-overview--view .Layer__panel .Layer__panel__content .Layer__component-header {
   z-index: 1;
 }
@@ -7699,17 +7671,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     padding-right: 0;
   }
 }
-.Layer__bookkeeping-overview__summaries-row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  max-width: 1406px;
-  padding: var(--spacing-md);
-}
-.Layer__bookkeeping-overview__summaries-row .Layer__notification-card {
-  width: calc(25% - 12px);
-  height: 56px;
-}
 .Layer__bookkeeping-overview-profit-and-loss-chart {
   width: calc(50% - var(--spacing-md) / 2);
 }
@@ -7725,16 +7686,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   top: 16px !important;
 }
 @container (max-width: 796px) {
-  .Layer__bookkeeping-overview__summaries-row {
-    flex-direction: column;
-  }
-  .Layer__bookkeeping-overview__summaries-row .Layer__profit-and-loss-summaries {
-    width: 100%;
-    flex-direction: column;
-  }
-  .Layer__bookkeeping-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
-    width: 100%;
-  }
   .Layer__bookkeeping-overview-profit-and-loss-chart {
     width: 100%;
   }