@layerfi/components 0.1.108-alpha → 0.1.108-alpha.1

package/dist/index.css

@@ -5029,6 +5029,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Modal[data-size=lg] {
   inline-size: min(42rem, 90%);
 }
+.Layer__Modal[data-size=xl] {
+  inline-size: min(70rem, 100%);
+}
 .Layer__Modal[data-variant=drawer] {
   block-size: 100%;
 }
@@ -7162,14 +7165,11 @@ tbody .Layer__table__empty-row:first-child {
   place-items: center;
   min-block-size: 20rem;
 }
-.Layer__tasks-component {
+.Layer__tasks {
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
-  height: 100%;
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px var(--color-base-300);
-  background-color: var(--color-base-0);
+  overflow: hidden auto;
+  max-height: calc(100vh - 2 * var(--spacing-lg));
 }
 .Layer__tasks-pending {
   box-sizing: border-box;
@@ -7226,17 +7226,12 @@ tbody .Layer__table__empty-row:first-child {
   container-type: inline-size;
 }
 .Layer__tasks__content {
-  max-height: 1000px;
+  min-height: 0;
   opacity: 1;
-  transition: max-height 0.18s ease-out, opacity 0.2s ease-out;
-}
-.Layer__tasks__content.Layer__tasks__content--collapsed {
-  opacity: 0.3;
-  max-height: 0;
+  transition: opacity 0.2s ease-out;
 }
 .Layer__tasks-list {
-  box-shadow: 0 0 0 1px var(--color-base-300);
-  background-color: var(--color-base-0);
+  border-top: 1px solid var(--border-color);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper {
   padding: var(--spacing-2xs);
@@ -7324,7 +7319,6 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item__body--expanded {
   height: auto;
-  padding-bottom: var(--spacing-sm);
   opacity: 1;
 }
 .Layer__tasks-list .Layer__tasks-empty-state {
@@ -7342,6 +7336,7 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-xs);
   align-items: center;
   justify-content: flex-end;
+  padding-bottom: var(--spacing-sm);
 }
 .Layer__tasks-icon {
   display: flex;
@@ -7492,6 +7487,7 @@ tbody .Layer__table__empty-row:first-child {
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-xs);
   padding: var(--spacing-md);
+  padding-top: 10px;
   container-type: inline-size;
 }
 @container (min-width: 680px) {
@@ -7510,24 +7506,24 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__tasks-month-selector__month {
-  min-height: 32px;
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: space-between;
-  cursor: pointer;
-  border-radius: var(--border-radius-xs);
+  min-height: 32px;
   padding: 0 var(--spacing-sm);
-  background: var(--color-base-0);
+  border-radius: var(--border-radius-xs);
   box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
+  background: var(--color-base-0);
+  cursor: pointer;
   container-type: inline-size;
 }
 .Layer__tasks-month-selector__month[data-active] {
   box-shadow: 0 0 0 1px var(--color-base-800), 0 0 0 3px var(--color-base-300);
 }
 .Layer__tasks-month-selector__month[data-disabled] {
-  color: var(--color-base-500);
   cursor: not-allowed;
+  color: var(--color-base-500);
 }
 .Layer__tasks-month-selector__month:hover {
   box-shadow: 0 0 0 1px var(--color-base-500), 0 0 0 3px var(--color-base-300);
@@ -7889,6 +7885,42 @@ tbody .Layer__table__empty-row:first-child {
   grid-column: 5;
   justify-content: flex-end;
 }
+@media (max-width: 768px) {
+  .Layer__ProfitAndLossDetailReport {
+    --pnl-detail-table-cols: minmax(4rem, 25%) minmax(8rem, 55%) minmax(4rem, 20%);
+  }
+  .Layer__ProfitAndLossDetailReport .Layer__UI__VirtualizedTable__row,
+  .Layer__ProfitAndLossDetailReport .Layer__UI__VirtualizedTable__header > tr {
+    grid-template-columns: var(--pnl-detail-table-cols);
+  }
+  .Layer__ProfitAndLossDetailReport .Layer__UI__Table-Column__ProfitAndLossDetailReport--Type,
+  .Layer__ProfitAndLossDetailReport .Layer__UI__Table-Column__ProfitAndLossDetailReport--Account,
+  .Layer__ProfitAndLossDetailReport .Layer__UI__Table-Column__ProfitAndLossDetailReport--Balance,
+  .Layer__ProfitAndLossDetailReport .Layer__UI__Table-Cell__ProfitAndLossDetailReport--Type,
+  .Layer__ProfitAndLossDetailReport .Layer__UI__Table-Cell__ProfitAndLossDetailReport--Account,
+  .Layer__ProfitAndLossDetailReport .Layer__UI__Table-Cell__ProfitAndLossDetailReport--Balance {
+    display: none;
+  }
+  .Layer__ProfitAndLossDetailReport .Layer__profit-and-loss-detail-report__total-row {
+    grid-template-columns: var(--pnl-detail-table-cols);
+  }
+  .Layer__ProfitAndLossDetailReport .Layer__profit-and-loss-detail-report__total-label {
+    grid-column: 1/3;
+  }
+  .Layer__ProfitAndLossDetailReport .Layer__profit-and-loss-detail-report__total-amount {
+    grid-column: 3;
+  }
+}
+.Layer__ProfitAndLossReport__Modal--drawer .Layer__ProfitAndLossDetailReport .Layer__UI__VirtualizedTable__container {
+  max-height: calc(var(--visual-viewport-height) - (4.75rem + 42px));
+}
+.Layer__ProfitAndLossReport__Modal--mobile .Layer__BaseDetailView {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__ProfitAndLossReport__Modal--mobile .Layer__ProfitAndLossDetailReport {
+  min-height: 0;
+}
 .Layer__profit-and-loss-header__bookkeeping-status {
   position: absolute;
   bottom: -20px;
@@ -7938,53 +7970,38 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-info-error-bg);
 }
 .Layer__tabs__container {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-base-200) var(--color-base-50);
-  max-width: 100%;
   overflow: auto hidden;
-}
-.Layer__tabs__container::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
-}
-.Layer__tabs__container::-webkit-scrollbar-track {
-  background: var(--color-base-50);
-}
-.Layer__tabs__container::-webkit-scrollbar-thumb {
-  background: var(--color-base-200);
-  border-radius: 2px;
-}
-.Layer__tabs__container::-webkit-scrollbar-thumb:hover {
-  background: var(--color-base-300);
+  min-height: 50px;
 }
 .Layer__tabs {
+  box-sizing: border-box;
+  position: relative;
   display: flex;
-  width: 100%;
+  gap: var(--spacing-xs);
   align-items: center;
-  box-sizing: border-box;
-  padding: 0 var(--spacing-sm);
   height: 42px;
+  width: fit-content;
+  min-width: 100%;
+  padding: 0 var(--spacing-sm);
+  border-bottom: 2px solid var(--color-base-100);
   cursor: pointer;
-  position: relative;
+  user-select: none;
   isolation: isolate;
-  gap: var(--spacing-xs);
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
-  user-select: none;
-  border-bottom: 2px solid var(--color-base-100);
 }
 .Layer__tabs .Layer__tabs-option-content {
   display: flex;
-  align-items: center;
   gap: var(--spacing-xs);
+  align-items: center;
 }
 .Layer__tabs-option__icon {
   line-height: 11px;
 }
 .Layer__tabs-option {
   position: relative;
-  cursor: pointer;
   z-index: 2;
+  cursor: pointer;
 }
 .Layer__tabs-option input {
   position: absolute;
@@ -7993,34 +8010,23 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__tabs-option input + span {
   box-sizing: border-box;
-  padding: var(--spacing-xs);
-  min-width: 40px;
+  position: relative;
+  justify-content: center;
   height: 36px;
-  color: var(--text-color-secondary);
-  font-family: var(--font-family);
+  min-width: 40px;
+  padding: var(--spacing-xs);
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
   font-size: var(--btn-font-size);
+  font-family: var(--font-family);
   font-weight: var(--font-weight-bold);
+  color: var(--text-color-secondary);
   font-variation-settings: "wght" 460;
-  cursor: pointer;
   transition: color var(--transition-speed) ease-in-out, background-color 150ms ease-in-out;
-  justify-content: center;
-  border-bottom: 2px solid transparent;
-  position: relative;
 }
 .Layer__tabs-option input + span:hover {
   color: var(--text-color-primary);
 }
-.Layer__tabs-option input + span::after {
-  content: "";
-  position: absolute;
-  bottom: -6px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  opacity: 0;
-  background-color: var(--color-base-300);
-  transition: opacity 120ms ease-out;
-}
 .Layer__tabs-option input:checked + span {
   color: var(--text-color-primary);
 }
@@ -8028,29 +8034,22 @@ tbody .Layer__table__empty-row:first-child {
   cursor: not-allowed;
   color: var(--text-color-secondary);
 }
-.Layer__tabs-option:hover input + span::after {
-  opacity: 1;
-}
 .Layer__tabs-option:hover input:disabled + span,
 .Layer__tabs-option:hover input:checked + span {
   background-color: transparent;
 }
-.Layer__tabs-option:hover input:disabled + span::after,
-.Layer__tabs-option:hover input:checked + span::after {
-  display: none;
-}
 .Layer__tabs.Layer__tabs--small .Layer__tabs-option input + span {
   height: 32px;
   border-radius: 6px;
 }
 .Layer__tabs__thumb {
+  box-sizing: border-box;
   position: absolute;
-  width: 100px;
-  left: 0;
-  bottom: -2px;
   z-index: 3;
-  box-sizing: border-box;
+  bottom: -2px;
+  left: 0;
   height: 2px;
+  width: 100px;
   border-radius: 2px;
   background: var(--color-base-900);
 }
@@ -9280,10 +9279,10 @@ tbody .Layer__table__empty-row:first-child {
   background: transparent;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header > div {
+  overflow: hidden;
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--text-sm);
   color: var(--color-base-500);
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -9292,9 +9291,6 @@ tbody .Layer__table__empty-row:first-child {
   width: 120px;
   padding: var(--spacing-xs) var(--spacing-sm);
 }
-.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__date .amount-next-to-date {
-  display: none;
-}
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__amount {
   width: 100px;
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -9308,8 +9304,7 @@ tbody .Layer__table__empty-row:first-child {
   text-align: right;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__status.no-match {
-  width: 0;
-  padding: 0;
+  display: none;
 }
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc {
   flex: 1;
@@ -9318,9 +9313,6 @@ tbody .Layer__table__empty-row:first-child {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc .match-badge {
-  display: none;
-}
 .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__desc .Layer__tooltip-trigger {
   display: flex;
 }
@@ -9342,12 +9334,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__expanded-bank-transaction-row__match-row > div {
   display: flex;
   align-items: center;
+  overflow: hidden;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-top: 1px solid var(--color-base-300);
   border-bottom: 1px solid var(--color-base-300);
   font-size: var(--text-md);
   color: var(--color-base-500);
-  overflow: hidden;
 }
 .Layer__expanded-bank-transaction-row__match-row > div:first-child {
   border-top-left-radius: var(--border-radius-2xs);
@@ -9457,8 +9449,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__details {
   display: flex;
   justify-content: space-between;
-  color: var(--color-base-500);
   width: 100%;
+  color: var(--color-base-500);
 }
 .Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__col-status {
   display: flex;
@@ -9488,7 +9480,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   gap: var(--spacing-sm);
 }
-@container (max-width: 760px) {
+@container (max-width: 714px) {
   .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header {
     display: none;
   }
@@ -9497,16 +9489,6 @@ tbody .Layer__table__empty-row:first-child {
     border-radius: var(--border-radius-2xs);
     border: 1px solid var(--color-base-300);
   }
-  .Layer__expanded-bank-transaction-row__match-row > div,
-  .Layer__expanded-bank-transaction-row__match-row > div:first-child,
-  .Layer__expanded-bank-transaction-row__match-row > div:nth-child(3):last-of-type,
-  .Layer__expanded-bank-transaction-row__match-row > div:nth-child(4),
-  .Layer__expanded-bank-transaction-row__match-row:hover > div,
-  .Layer__expanded-bank-transaction-row__match-row:hover > div:first-child,
-  .Layer__expanded-bank-transaction-row__match-row:hover > div:nth-child(3):last-of-type,
-  .Layer__expanded-bank-transaction-row__match-row:hover > div:nth-child(4) {
-    border-width: 0;
-  }
   .Layer__expanded-bank-transaction-row__match-row:hover {
     border: 1px solid var(--color-base-500);
     background: var(--color-base-0);
@@ -9517,26 +9499,14 @@ tbody .Layer__table__empty-row:first-child {
     background: var(--color-base-0);
     color: var(--color-base-700);
   }
-  .Layer__expanded-bank-transaction-row__match-row--selected > div {
-    border-width: 0;
-  }
-  .Layer__expanded-bank-transaction-row__match-row--selected .amount-next-to-date {
-    color: var(--color-base-800);
-  }
   .Layer__expanded-bank-transaction-row__match-row--selected:hover {
     border: 1px solid --var-color-base-800;
   }
-  .Layer__expanded-bank-transaction-row__match-row--selected:hover > div {
-    border-width: 0;
-  }
   .Layer__expanded-bank-transaction-row__match-table__date {
     display: flex;
     justify-content: space-between;
     width: 100% !important;
   }
-  .Layer__expanded-bank-transaction-row__match-table__date .amount-next-to-date {
-    display: block !important;
-  }
   .Layer__expanded-bank-transaction-row__match-table__amount {
     display: none !important;
   }
@@ -9553,9 +9523,6 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__expanded-bank-transaction-row__match-table__desc .match-badge {
     display: block !important;
   }
-  .Layer__expanded-bank-transaction-row__match-table__status {
-    display: none !important;
-  }
 }
 @container (max-width: 600px) {
   .Layer__expanded-bank-transaction-row__splits-inputs {