@layerfi/components 0.1.109 → 0.1.111

package/dist/index.css

@@ -961,7 +961,7 @@
   gap: var(--spacing-md);
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-md);
+  padding: var(--spacing-lg);
 }
 .Layer__component-header.Layer__component-header--next-line-actions {
   flex-direction: column;
@@ -985,18 +985,6 @@
   align-items: center;
   justify-content: space-between;
 }
-@container (max-width: 760px) {
-  .Layer__component-header {
-    padding: var(--spacing-md);
-  }
-}
-@container (min-width: 1023px) {
-  .Layer__component-header {
-    padding-top: var(--spacing-xl);
-    padding-right: var(--spacing-xl);
-    padding-left: var(--spacing-xl);
-  }
-}
 .Layer__error-boundary {
   padding: var(--spacing-xl);
 }
@@ -3688,13 +3676,13 @@
   .Layer__Portal .Layer__textarea,
   .Layer__Portal .Layer__select__control,
   .Layer__Portal .Layer__input {
-    min-height: 36px;
+    height: 36px;
     font-size: 16px;
   }
   .Layer__view .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control,
   .Layer__component .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control,
   .Layer__Portal .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control {
-    min-height: 36px;
+    height: 36px;
   }
 }
 .Layer__form .Layer__form-section {
@@ -4619,7 +4607,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
-  --size: 1.75rem;
+  --size: 1.25rem;
   block-size: var(--size);
   inline-size: var(--size);
   cursor: pointer;
@@ -4628,7 +4616,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
-  --size: 1.75rem;
+  --size: 1.25rem;
   block-size: var(--size);
   inline-size: var(--size);
   cursor: default;
@@ -4641,7 +4629,7 @@ tbody .Layer__table__empty-row:first-child {
   inline-size: var(--size);
   cursor: pointer;
   color: var(--color-base-600);
-  --size: 1.75rem;
+  --size: 1.25rem;
 }
 .Layer__ComboBoxMenu {
   overflow: hidden;
@@ -6104,22 +6092,10 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-xs);
   align-items: center;
 }
-@container (min-width: 640px) {
-  .Layer__TransactionsActions {
-    grid-template-areas: "toggle . search download-upload";
-    grid-template-columns: auto minmax(0, 2fr) minmax(15rem, 3fr) auto;
-  }
-}
-@container (min-width: 780px) {
-  .Layer__TransactionsActions {
-    grid-template-areas: "toggle . search download-upload";
-    grid-template-columns: auto minmax(0, 3fr) minmax(15rem, 2fr) auto;
-  }
-}
-@container (min-width: 1024px) {
+@container (min-width: 768px) {
   .Layer__TransactionsActions {
     grid-template-areas: "toggle . search download-upload";
-    grid-template-columns: auto minmax(0, 3fr) minmax(15rem, 1fr) auto;
+    grid-template-columns: auto minmax(0, 2fr) 15rem auto;
   }
 }
 .Layer__TransactionsActions > [slot=toggle] {
@@ -8171,6 +8147,69 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__SearchField > [slot=search] {
   grid-area: search;
 }
+.Layer__JournalEntryForm {
+  padding-top: var(--spacing-xl);
+}
+.Layer__JournalEntryForm .Layer__JournalEntryForm__Row {
+  padding: 0 var(--spacing-xl);
+  display: flex;
+  gap: var(--spacing-md);
+}
+.Layer__JournalEntryForm .Layer__JournalEntryForm__Row > * {
+  flex: 0 0 clamp(16rem, 100%, 24rem);
+}
+@container (max-width: 760px) {
+  .Layer__JournalEntryForm .Layer__JournalEntryForm__Row {
+    flex-direction: column;
+  }
+  .Layer__JournalEntryForm .Layer__JournalEntryForm__Row > * {
+    flex: 1;
+    max-width: clamp(12rem, 100%, 16rem);
+  }
+}
+.Layer__JournalEntryForm .Layer__JournalEntryForm__Metadata {
+  border-top: 1px solid var(--color-base-300);
+  background-color: var(--color-base-50);
+}
+.Layer__JournalEntryForm .Layer__JournalEntryForm__AdditionalTextFields {
+  flex: 1;
+  min-width: 20rem;
+  max-width: 32rem;
+}
+.Layer__JournalEntryForm__LineItem {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-xs);
+}
+.Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--accountName {
+  flex: 1 1 12rem;
+  max-width: 20rem;
+}
+.Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--amount {
+  flex: 0 1 12rem;
+  max-width: 12rem;
+}
+.Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--tag {
+  flex: 0 0 auto;
+  min-width: 12rem;
+}
+.Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--memo {
+  flex: 2 1 12rem;
+}
+.Layer__JournalEntryForm__LineItem--readonly .Layer__JournalEntryForm__Field--removeButton {
+  display: none;
+}
+@media (max-width: 768px) {
+  .Layer__JournalEntryForm__LineItem {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-sm);
+  }
+  .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field {
+    flex: 1 1 auto;
+    max-width: 16rem;
+  }
+}
 .Layer__TagSelectorLayoutGroup {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -8706,13 +8745,19 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  max-width: 680px;
+  min-width: 40rem;
+  max-width: 64rem;
 }
 .Layer__expanded-bank-transaction-row__content-panels {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  max-width: 680px;
+}
+.Layer__bank-transaction-form-fields .Layer__ComboBoxContainer {
+  max-width: 20rem;
+}
+.Layer__bank-transaction-form-fields .Layer__bank-transaction-memo-input-group {
+  max-width: 40rem;
 }
 .Layer__expanded-bank-transaction-row__content-panel {
   box-sizing: border-box;
@@ -8721,6 +8766,7 @@ tbody .Layer__table__empty-row:first-child {
   flex-direction: column;
   gap: var(--spacing-sm);
   overflow: hidden;
+  height: 0;
   max-width: 0;
   opacity: 0;
   transition: max-width 150ms ease-out, opacity 300ms ease-out;
@@ -8730,6 +8776,7 @@ tbody .Layer__table__empty-row:first-child {
   padding: 0 var(--spacing-md);
 }
 .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
+  height: auto;
   max-width: 100%;
   opacity: 1;
 }
@@ -8765,9 +8812,6 @@ tbody .Layer__table__empty-row:first-child {
     max-width: 100%;
     opacity: 1;
   }
-  .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__table-cell--split-entry {
-    max-height: 38px;
-  }
   .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-buttons {
     max-height: 38px;
     white-space: nowrap;
@@ -8791,7 +8835,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-xs);
   padding-top: 2px;
 }
 .Layer__expanded-bank-transaction-row__splits-total {
@@ -8837,7 +8881,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__expanded-bank-transaction-row__description textarea {
   height: 100px;
   width: 100%;
-  max-width: 680px;
 }
 .Layer__expanded-bank-transaction-row__file-upload {
   display: flex;
@@ -8866,9 +8909,33 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
 }
 .Layer__expanded-bank-transaction-row__table-cell--split-entry {
+  display: grid;
+  grid-template-areas: "amount category category button" "customer tags tags .";
+  grid-template-columns: minmax(8rem, 12rem) minmax(12rem, 16rem) 1fr auto;
+  gap: var(--spacing-xs);
+  align-items: start;
+  max-width: 40rem;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__category-menu--full {
+  grid-area: category;
+  width: 100%;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__amount {
+  grid-area: amount;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__customer {
+  grid-area: customer;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__button {
+  grid-area: button;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__tags {
   display: flex;
-  flex-direction: row;
-  gap: var(--spacing-md);
+  grid-area: tags;
+  gap: var(--spacing-sm);
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__tags .Layer__JournalEntryForm__Field--tag {
+  width: 12rem;
 }
 .Layer__bank-transactions__list {
   list-style: none;
@@ -9240,14 +9307,15 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__expanded-bank-transaction-row__match-table {
   display: grid;
   grid-template-columns: 120px minmax(0, 1fr) 100px max-content;
-  gap: 0;
+  gap: var(--spacing-xs) 0;
+  max-width: 40rem;
   margin-bottom: var(--spacing-sm);
 }
 .Layer__expanded-bank-transaction-row__match-table:has(.Layer__expanded-bank-transaction-row__match-table__status) {
   grid-template-columns: 120px minmax(0, 1fr) 100px max-content min-content;
 }
 .Layer__expanded-bank-transaction-row__match-table:not(:has(.Layer__expanded-bank-transaction-row__match-table__link)) {
-  grid-template-columns: 120px 1fr 100px;
+  grid-template-columns: 120px minmax(0, 1fr) 100px;
 }
 .Layer__expanded-bank-transaction-row__match-table:not(:has(.Layer__expanded-bank-transaction-row__match-table__link)):has(.Layer__expanded-bank-transaction-row__match-table__status) {
   grid-template-columns: 120px minmax(0, 1fr) 100px min-content;
@@ -9485,15 +9553,12 @@ tbody .Layer__table__empty-row:first-child {
     justify-content: space-between;
     width: 100% !important;
   }
-  .Layer__expanded-bank-transaction-row__match-table__amount {
-    display: none !important;
-  }
   .Layer__expanded-bank-transaction-row__match-table__desc {
     gap: var(--spacing-sm);
     justify-content: space-between;
   }
   .Layer__expanded-bank-transaction-row__match-table__desc > span:first-child {
-    width: calc(100% - 120px);
+    width: calc(100% - 220px);
   }
   .Layer__expanded-bank-transaction-row__match-table__desc > span:nth-child(2) {
     flex: 0;
@@ -9507,11 +9572,10 @@ tbody .Layer__table__empty-row:first-child {
     display: flex;
     flex: 1;
     flex-direction: column;
-    gap: var(--spacing-sm);
+    gap: var(--spacing-xs);
     width: 100%;
   }
   .Layer__expanded-bank-transaction-row__table-cell--split-entry {
-    gap: var(--spacing-sm);
     width: 100%;
   }
   .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
@@ -9694,7 +9758,7 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip,
   .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
     flex: 1;
-    max-width: 200px;
+    max-width: 12rem;
   }
   .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip .Layer__input,
   .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip .Layer__input {
@@ -11429,10 +11493,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: stretch;
   border-radius: var(--border-radius-sm);
-  box-shadow:
-    0 0 0 1px rgba(16, 24, 40, 0.04),
-    0 2px 4px 0 rgba(16, 24, 40, 0.06),
-    0 4px 12px 0 rgba(16, 24, 40, 0.08);
+  border: 1px solid var(--border-color);
   margin-right: var(--spacing-xl);
   margin-bottom: var(--spacing-xl);
   margin-left: var(--spacing-xl);
@@ -11558,7 +11619,6 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 759px) and (min-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
     margin-left: 0;
@@ -11567,7 +11627,6 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
     margin-left: 0;
@@ -11642,24 +11701,24 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-detailed-charts__header--tablet,
 .Layer__profit-and-loss-detailed-charts__header {
   display: flex;
-  justify-content: space-between;
   align-items: flex-start;
-  padding: var(--spacing-xl);
+  justify-content: space-between;
+  padding: var(--spacing-lg);
   padding-bottom: var(--spacing-lg);
   box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
 }
 .Layer__profit-and-loss-detailed-charts__header--tablet button.Layer__btn.Layer__btn--icon-only,
 .Layer__profit-and-loss-detailed-charts__header button.Layer__btn.Layer__btn--icon-only {
-  width: 32px;
   height: 32px;
   min-height: 32px;
+  width: 32px;
   padding: 0;
 }
 header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: none;
-  justify-content: flex-start;
   gap: var(--spacing-md);
   align-items: center;
+  justify-content: flex-start;
 }
 @container (max-width: 1023px) and (min-width: 768px) {
   header.Layer__profit-and-loss-detailed-charts__header {
@@ -11688,20 +11747,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-charts {
   width: 100%;
-  background: var(--color-base-0);
   border-radius: var(--border-radius-sm);
+  background: var(--color-base-0);
 }
 .Layer__profit-and-loss-detailed-charts .chart-field {
   width: 100%;
 }
 .Layer__profit-and-loss-detailed-charts .chart-container {
-  width: 100%;
+  box-sizing: border-box;
   height: 280px;
+  width: 100%;
   padding-top: var(--spacing-2xl);
+  padding-right: var(--spacing-md);
   padding-bottom: var(--spacing-lg);
   padding-left: var(--spacing-md);
-  padding-right: var(--spacing-md);
-  box-sizing: border-box;
 }
 @container (max-width: 280px) {
   .Layer__profit-and-loss-detailed-charts .chart-container {
@@ -11727,35 +11786,35 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .filters {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--spacing-xs);
   align-items: center;
-  margin: 0 var(--spacing-md);
   padding: var(--spacing-2xs) var(--spacing-xs);
-  gap: var(--spacing-xs);
   border-bottom: 1px solid var(--color-base-300);
+  margin: 0 var(--spacing-md);
 }
 .Layer__profit-and-loss-detailed-charts .type-select {
-  border-color: transparent;
+  display: inline-flex;
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
+  border-color: transparent;
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  display: inline-flex;
 }
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__control {
-  border-color: transparent;
+  box-shadow: none;
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
+  border-color: transparent;
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  box-shadow: none;
 }
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__placeholder {
   font-size: 12px;
@@ -11772,17 +11831,17 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: none;
 }
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu {
+  z-index: 2;
   width: min-content;
   max-width: 300px;
-  z-index: 2;
 }
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option {
+  z-index: 999;
+  overflow: hidden;
   width: 100%;
   font-size: 12px;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
-  z-index: 999;
 }
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-focused,
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-selected,
@@ -11791,8 +11850,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:active,
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-visible,
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-within {
-  color: var(--text-color-primary);
   background: var(--color-base-100);
+  color: var(--text-color-primary);
 }
 .Layer__profit-and-loss-detailed-charts .details-container {
   padding: var(--spacing-md);
@@ -11804,9 +11863,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th,
 .Layer__profit-and-loss-detailed-charts .details-container table td {
-  text-align: left;
-  font-size: 12px;
   padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: 12px;
+  text-align: left;
   transition: color 150ms ease-out;
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th:last-child,
@@ -11816,11 +11875,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   text-align: right;
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th {
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-base-300);
   cursor: pointer;
   color: var(--color-base-500);
-  border-bottom: 1px solid var(--color-base-300);
   transition: color 150ms ease-out;
-  padding-bottom: var(--spacing-sm);
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th:hover {
   color: var(--color-base-800);
@@ -11835,13 +11894,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-charts .details-container .share-cell-content {
   display: flex;
+  gap: var(--spacing-2xs);
   align-items: center;
   justify-content: flex-end;
-  gap: var(--spacing-2xs);
 }
 .Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .share-icon {
-  width: 12px;
   height: 12px;
+  width: 12px;
   border-radius: 2px;
 }
 .Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .Layer__value-icon--uncategorized {
@@ -11862,9 +11921,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   width: 100%;
 }
 .Layer__profit-and-loss-detailed-table__row {
-  transition: background-color 300ms ease-out;
-  background: transparent;
   border-radius: 2px;
+  background: transparent;
+  transition: background-color 300ms ease-out;
 }
 .Layer__profit-and-loss-detailed-table__row .category-col,
 .Layer__profit-and-loss-detailed-table__row .value-col {
@@ -11894,8 +11953,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 @container (max-width: 1023px) {
   .Layer__profit-and-loss-detailed-charts {
-    width: 100%;
     height: 100%;
+    width: 100%;
   }
 }
 @container (max-width: 1023px) and (min-width: 768px) {
@@ -11914,14 +11973,14 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
   }
   .Layer__profit-and-loss-detailed-charts .header--tablet {
     display: flex;
     flex-direction: column;
-    padding-left: var(--spacing-xl);
     padding-top: var(--spacing-lg);
+    padding-left: var(--spacing-xl);
   }
   .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__text {
     margin: 0;