@layerfi/components 0.1.110 → 0.1.111

package/dist/index.css

@@ -3676,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 {
@@ -4607,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;
@@ -4616,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;
@@ -4629,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;
@@ -8147,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));
@@ -8682,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;
@@ -8697,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;
@@ -8706,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;
 }
@@ -8741,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;
@@ -8767,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 {
@@ -8813,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;
@@ -8842,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;
@@ -9216,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;
@@ -9461,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;
@@ -9483,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 {
@@ -9670,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 {