@layerfi/components 0.1.108-alpha → 0.1.108

package/dist/index.css

@@ -4513,6 +4513,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__UI__Button[data-variant=text] {
   --size: inherit;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
   padding-inline: 0;
   border: none;
   background-color: transparent;
@@ -5029,6 +5032,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%;
 }
@@ -5472,6 +5478,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Table-TableHeader:not(:last-child) .Layer__UI__Table-Column {
   border-bottom: 1px solid var(--color-base-300);
 }
+.Layer__UI__Table-TableHeader > tr {
+  height: inherit;
+}
 .Layer__UI__Table-Row {
   height: 3.25rem;
 }
@@ -5480,6 +5489,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__UI__Table-Column {
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: inherit;
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-weight-normal);
@@ -5501,6 +5513,10 @@ tbody .Layer__table__empty-row:first-child {
   text-align: right;
 }
 .Layer__UI__Table-Cell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: inherit;
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--text-md);
   font-weight: var(--font-weight-normal);
@@ -5564,6 +5580,11 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-variant=subtle] {
   color: var(--fg-subtle);
 }
+.Layer__UI__Heading[data-ellipsis] {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .Layer__UI__Heading[data-pbe="3xs"] {
   padding-block-end: var(--spacing-3xs);
 }
@@ -6803,41 +6824,33 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__UI__Table__InvoiceTable {
   table-layout: fixed;
+  width: 100%;
 }
-.Layer__UI__Table__InvoiceTable .Layer__UI__Table-Column__InvoiceTable--SentAt {
-  width: 15%;
-  min-width: 8rem;
-}
-.Layer__UI__Table__InvoiceTable .Layer__UI__Table-Column__InvoiceTable--InvoiceNo {
-  width: 10%;
-  min-width: 6.75rem;
-}
-.Layer__UI__Table__InvoiceTable .Layer__UI__Table-Column__InvoiceTable--Customer {
-  width: 35%;
-  min-width: 11.75rem;
-}
-.Layer__UI__Table__InvoiceTable .Layer__UI__Table-Column__InvoiceTable--Total {
-  width: 15%;
-  min-width: 7.75rem;
-  border-right: 1px solid var(--color-base-300);
-  text-align: end;
-}
-.Layer__UI__Table__InvoiceTable .Layer__UI__Table-Column__InvoiceTable--Status {
-  width: 25%;
-  min-width: 10rem;
+.Layer__UI__Table__InvoiceTable .Layer__UI__Table-Row,
+.Layer__UI__Table__InvoiceTable .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(8rem, 10%) minmax(6.75rem, 15%) minmax(11.75rem, 35%) minmax(7.75rem, 15%) minmax(10rem, 25%) 3.75rem;
 }
+.Layer__UI__Table__InvoiceTable .Layer__UI__Table-Column__InvoiceTable--Total,
 .Layer__UI__Table__InvoiceTable .Layer__UI__Table-Cell__InvoiceTable--Total {
+  justify-content: flex-end;
   border-right: 1px solid var(--color-base-300);
 }
 .Layer__InvoiceTable__StatusFilter {
   width: 11rem;
 }
+.Layer__InvoiceDetail {
+  width: clamp(56rem, 100%, 1406px);
+}
 .Layer__InvoiceDetail__SubHeader {
   align-items: center;
   height: 5.5rem;
   padding-left: 2.25rem;
   border-bottom: 1px solid var(--border-color);
 }
+.Layer__InvoiceDetail__Heading {
+  max-inline-size: 30rem;
+}
 .Layer__InvoiceForm {
   min-width: 54rem;
 }
@@ -6993,6 +7006,13 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__PaginatedDataTable__Pagination {
   border-top: 1px solid var(--border-color);
 }
+.Layer__DataTable__EmptyState__Row {
+  height: fit-content;
+}
+.Layer__DataTable__EmptyState__Cell {
+  grid-column: 1/-1;
+  justify-content: center;
+}
 .Layer__UI__VirtualizedTable__container {
   position: relative;
   overflow: auto;
@@ -7011,12 +7031,6 @@ tbody .Layer__table__empty-row:first-child {
   top: 0;
   display: grid;
 }
-.Layer__UI__VirtualizedTable__cell,
-.Layer__UI__VirtualizedTable__header-cell {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-}
 .Layer__UI__VirtualizedTable__header-cell {
   background-color: var(--color-base-0);
 }
@@ -7162,14 +7176,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 +7237,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 +7330,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 +7347,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 +7498,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 +7517,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);
@@ -7854,7 +7861,7 @@ tbody .Layer__table__empty-row:first-child {
   margin-block-start: var(--spacing-5xl);
 }
 .Layer__ProfitAndLossDetailReport {
-  --pnl-detail-table-cols: minmax(7rem, 12%) minmax(7rem, 12%) minmax(10rem, 18%) minmax(12rem, 38%) minmax(7.5rem, 10%) minmax(7.5rem, 10%);
+  --pnl-detail-table-cols: minmax(7.5rem, 8%) minmax(7rem, 18%) minmax(10rem, 18%) minmax(12rem, 36%) minmax(7.5rem, 10%) minmax(7.5rem, 10%);
 }
 .Layer__ProfitAndLossDetailReport .Layer__UI__Table__ProfitAndLossDetailReport {
   table-layout: fixed;
@@ -7889,6 +7896,42 @@ tbody .Layer__table__empty-row:first-child {
   grid-column: 5;
   justify-content: flex-end;
 }
+@container (width <= 840px) {
+  .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 +7981,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 +8021,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 +8045,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 +9290,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 +9302,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 +9315,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 +9324,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 +9345,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 +9460,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 +9491,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 +9500,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 +9510,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 +9534,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 {