@layerfi/components 0.1.130 → 0.1.131-alpha

package/dist/index.css

@@ -2333,13 +2333,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row--expanded .Layer__table-cell {
   background-color: var(--bg-element-focus);
 }
-.Layer__expanded-bank-transaction-row {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  background-color: var(--bg-element-focus);
-  transition: background-color var(--transition-speed) ease-in-out, height var(--transition-speed) ease-in-out;
-}
 .Layer__bank-transaction-row:hover,
 .Layer__bank-transaction-row:hover .Layer__table-cell,
 .Layer__bank-transaction-list-item:hover {
@@ -2367,15 +2360,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-inactive {
   display: none;
 }
-.Layer__expanded-bank-transaction-row .Layer__expanded-bank-transaction-row__wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  overflow: hidden;
-  transition: height var(--transition-speed) ease-in-out;
-}
-.Layer__bank-transaction-list-item__content,
-.Layer__expanded-bank-transaction-row__content {
+.Layer__bank-transaction-list-item__content {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -2384,118 +2369,10 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 76rem;
 }
 @container (max-width: 768px) {
-  .Layer__bank-transaction-list-item__content,
-  .Layer__expanded-bank-transaction-row__content {
+  .Layer__bank-transaction-list-item__content {
     min-width: 30rem;
   }
 }
-.Layer__expanded-bank-transaction-row__content-panels {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-}
-.Layer__expanded-bank-transaction-row__content-panel {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  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;
-}
-.Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__content-panel-container {
-  box-sizing: border-box;
-  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;
-}
-.Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__select .Layer__select__control {
-  overflow: hidden;
-  max-width: 0;
-}
-.Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__table-cell--split-entry {
-  overflow: hidden;
-  max-width: 0;
-}
-.Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-buttons {
-  overflow: hidden;
-  max-width: 0;
-}
-.Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-total {
-  overflow: hidden;
-  max-width: 0;
-}
-.Layer__expanded-bank-transaction-row__table-cell--split-entry__right-col {
-  display: flex;
-  flex: 1;
-  gap: var(--spacing-sm);
-  align-items: center;
-}
-.Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
-  height: 36px;
-  width: 36px;
-  padding: 0;
-}
-@container (min-width: 701px) {
-  .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
-    max-width: 100%;
-    opacity: 1;
-  }
-  .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-buttons {
-    max-height: 38px;
-    white-space: nowrap;
-  }
-  .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-total {
-    max-height: 25px;
-    white-space: nowrap;
-  }
-}
-.Layer__expanded-bank-transaction-row__splits {
-  display: flex;
-  gap: var(--spacing-sm);
-}
-.Layer__expanded-bank-transaction-row__splits-inputs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  padding-top: 2px;
-}
-.Layer__expanded-bank-transaction-row__splits-total {
-  padding: var(--spacing-3xs);
-  color: var(--color-base-500);
-}
-.Layer__expanded-bank-transaction-row__splits-buttons {
-  padding-bottom: 2px;
-}
-.Layer__expanded-bank-transaction-row__total-and-btns {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-sm) 0;
-}
-.Layer__expanded-bank-transaction-row__total-and-btns:empty {
-  display: none;
-}
-.Layer__expanded-bank-transaction-row__description {
-  padding: 0 var(--spacing-md);
-}
-.Layer__expanded-bank-transaction-row__description textarea {
-  height: 100px;
-  width: 100%;
-}
-.Layer__expanded-bank-transaction-row__file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  align-items: flex-start;
-  padding: 0 var(--spacing-md);
-}
 .Layer__bank-transaction-row__actions-cell {
   width: 0%;
   border-left: 1px solid var(--border-color);
@@ -2525,41 +2402,6 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
   justify-content: flex-end;
 }
-.Layer__expanded-bank-transaction-row__table-cell--split-entry {
-  display: flex;
-  gap: var(--spacing-xs);
-  align-items: flex-start;
-  min-width: 40rem;
-}
-.Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__BankTransactionCategoryComboBox__Container {
-  grid-area: category;
-  max-width: 24.5rem;
-}
-.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;
-  min-width: 12rem;
-}
-.Layer__expanded-bank-transaction-row__table-cell--split-entry__button {
-  grid-area: button;
-}
-@container (max-width: 768px) {
-  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
-    display: grid;
-    grid-template-areas: "amount category button";
-    grid-template-columns: 12rem minmax(12rem, 24.5rem) 2.25rem;
-    min-width: 27.5rem;
-    max-width: min(40rem, 100%);
-  }
-  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer), .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
-    grid-template-areas: "amount category button" "customer tags .";
-  }
-}
-.Layer__expanded-bank-transaction-row__table-cell--split-entry__tags {
-  grid-area: tags;
-}
 .Layer__bank-transactions__list {
   list-style: none;
   padding: 0;
@@ -2877,40 +2719,6 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   gap: var(--spacing-md);
 }
-@container (max-width: 600px) {
-  .Layer__expanded-bank-transaction-row__splits-inputs {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    width: 100%;
-  }
-  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
-    width: 100%;
-  }
-  .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
-    width: 100%;
-  }
-  .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
-    position: relative;
-    flex: 1;
-    max-width: 42%;
-  }
-  .Layer__expanded-bank-transaction-row__total-and-btns {
-    box-sizing: border-box;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip {
-    position: relative;
-    flex: 1;
-    width: 100%;
-    max-width: 42%;
-  }
-  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
-    max-width: 100%;
-  }
-}
 @container (max-width: 500px) {
   .Layer__bank-transaction-list-item__expanded-row input,
   .Layer__bank-transaction-list-item__expanded-row .Layer__category-menu {
@@ -2922,33 +2730,6 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__bank-transaction-list-item__expanded-row .Layer__select__indicator {
     padding: var(--spacing-3xs);
   }
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
-    height: 32px;
-    min-height: 32px;
-    width: 32px;
-  }
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn svg {
-    height: 14px;
-    width: 14px;
-  }
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn,
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn {
-    min-height: 32px;
-  }
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn-text,
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn-text {
-    font-size: var(--text-xs);
-  }
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn-icon,
-  .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn-icon {
-    height: 12px;
-    width: 12px;
-  }
-}
-.Layer__expanded-bank-transaction-row__splits-inputs + .Layer__text--error {
-  padding: var(--spacing-2xs) 0;
-  padding-bottom: var(--spacing-md);
-  margin: 0;
 }
 .Layer__bank-transaction-table__date-col,
 .Layer__bank-transactions__account-col {
@@ -2960,29 +2741,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row--expanded .Layer__bank-transactions__account-col {
   color: var(--color-base-1000);
 }
-.Layer__expanded-bank-transaction-row__splits-inputs .Layer__input {
-  text-align: right;
-}
-.Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
-  max-width: 100%;
-  text-align: right;
-}
-@container (min-width: 401px) {
-  .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: 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 {
-    width: 100%;
-  }
-}
-@container (max-width: 480px) {
-  .Layer__expanded-bank-transaction-row__total-and-btns > .Layer__input-tooltip > .Layer__input-left-text {
-    border-right-color: transparent;
-  }
-}
 .Layer__bank-transactions__mobile-list {
   display: flex;
   flex-direction: column;
@@ -4113,12 +3871,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   flex-direction: column;
   gap: var(--spacing-4xs);
 }
-.Layer__profit-and-loss-detailed-charts__head .title {
-  color: var(--color-base-800);
-}
-.Layer__profit-and-loss-detailed-charts__head .date {
-  color: var(--color-base-500);
-}
 .Layer__profit-and-loss-detailed-charts__head > .Layer__text {
   margin: 0;
 }
@@ -6110,24 +5862,168 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   color: var(--color-base-500);
 }.Layer__CategorySelectDrawerWithTrigger .Layer__UI__Button {
   justify-content: space-between;
-}.Layer__csv-upload {
+}.Layer__Checkbox {
   position: relative;
-  height: 6rem;
-  padding: var(--spacing-xs);
-  border-radius: var(--spacing-3xs);
-  border: 1px dashed var(--color-base-300);
-  background: var(--color-base-100);
-  transition: border-color 0.5s, background-color 0.5s;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
 }
-.Layer__csv-upload--drag-active {
-  background: var(--color-base-200);
-  border-color: var(--color-base-500);
+.Layer__Checkbox [slot=checkbox] {
+  box-sizing: border-box;
+  display: grid;
+  height: var(--size);
+  width: var(--size);
+  border-radius: var(--checkbox-radius);
+  border: 2px solid var(--outline-default);
+  background-color: var(--color-base-50);
+  color: transparent;
+  place-items: center;
+  transition: all 100ms ease-out;
+  --size: 1rem;
+  --checkbox-radius: var(--border-radius-3xs);
 }
-
-.Layer__csv-upload__browse-link {
-  all: unset;
-  cursor: pointer;
-  text-decoration: underline;
+.Layer__Checkbox [slot=checkbox][data-pressed] {
+  border-color: var(--outline-active);
+}
+.Layer__Checkbox[data-size=md] [slot=checkbox] {
+  --size: 1.25rem;
+  --checkbox-radius: 5px;
+}
+.Layer__Checkbox[data-size=lg] [slot=checkbox] {
+  --size: 1.5rem;
+  --checkbox-radius: var(--border-radius-2xs);
+}
+.Layer__Checkbox svg {
+  transition: all 100ms ease-out;
+}
+.Layer__Checkbox[data-readonly] [slot=checkbox] {
+  background-color: var(--bg-muted);
+}
+.Layer__Checkbox[data-hovered] [slot=checkbox], .Layer__Checkbox[data-pressed] [slot=checkbox] {
+  border-color: var(--outline-active);
+}
+.Layer__Checkbox[data-focus-visible] [slot=checkbox] {
+  outline: 1px solid var(--outline-active);
+  outline-offset: 2px;
+}
+.Layer__Checkbox[data-selected] [slot=checkbox], .Layer__Checkbox[data-indeterminate] [slot=checkbox] {
+  background-color: var(--fg-default);
+  color: var(--bg-default);
+  border-color: var(--fg-default);
+}
+.Layer__Checkbox[data-selected][data-variant=success] [slot=checkbox] {
+  background-color: var(--bg-brand-accent, var(--color-accent));
+  border-color: var(--bg-brand-accent, var(--color-accent));
+  color: var(--fg-brand-accent, var(--color-primary));
+}
+.Layer__Checkbox[data-variant=error] [slot=checkbox] {
+  border-color: var(--color-info-error);
+}
+.Layer__Checkbox[data-selected][data-variant=error] [slot=checkbox] {
+  background-color: var(--color-info-error);
+}
+.Layer__Checkbox[data-variant=round] [slot=checkbox] {
+  border-radius: 50%;
+  border: 0.5px solid var(--color-base-400);
+  background-color: white;
+}
+.Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] {
+  border: 1px solid var(--color-info-success);
+  background-color: var(--color-info-success-bg);
+}
+.Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] svg {
+  color: var(--color-info-success);
+}
+.Layer__Checkbox[data-selected][data-readonly] [slot=checkbox] {
+  border-color: var(--fg-subtle);
+  background-color: var(--fg-subtle);
+}
+.Layer__Checkbox[data-disabled] {
+  cursor: not-allowed;
+}
+.Layer__Checkbox[data-disabled] [slot=checkbox] {
+  background-color: var(--color-base-200);
+}
+.Layer__Checkbox[data-labeled] {
+  gap: var(--spacing-xs);
+}.Layer__MobileListItem {
+  display: grid;
+  grid-template-areas: "content";
+  grid-template-columns: 1fr;
+  padding: var(--spacing-sm);
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--color-base-0);
+}
+.Layer__MobileListItem[data-selection-mode=multiple], .Layer__MobileListItem[data-selection-mode=single] {
+  grid-template-areas: "selection content";
+  grid-template-columns: auto 1fr;
+}
+[data-variant=compact] .Layer__MobileListItem {
+  padding-inline: 0;
+  border-radius: 0;
+  border: none;
+}.Layer__MobileListSection {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__MobileListSection__Heading {
+  padding-block-end: var(--spacing-xs);
+  padding-inline: var(--spacing-3xs);
+  outline: none;
+  background-color: transparent;
+  cursor: default;
+}
+.Layer__MobileListSection:not(:last-child) {
+  padding-block-end: var(--spacing-xs);
+}
+.Layer__MobileListSection:not(:first-child) {
+  padding-block-start: var(--spacing-md);
+  border-block-start: 1px solid var(--border-color);
+}.Layer__MobileList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.Layer__MobileList[data-variant=compact] {
+  gap: 0;
+}.Layer__MobileSelectionDrawerList__Check {
+  visibility: hidden;
+  height: 1rem;
+  min-width: 1rem;
+}
+.Layer__MobileSelectionDrawerList__Check[data-selected=true] {
+  visibility: visible;
+}.Layer__MobileSelectionDrawerWithTrigger__Trigger {
+  width: 100%;
+}
+
+.Layer__MobileSelectionDrawerWithTrigger__Drawer .Layer__SearchField {
+  inline-size: 100%;
+}
+.Layer__MobileSelectionDrawerWithTrigger__Drawer .Layer__MobileListItem {
+  transition: background-color 120ms ease;
+}
+.Layer__MobileSelectionDrawerWithTrigger__Drawer .Layer__MobileListItem[data-hovered] {
+  background-color: var(--bg-element-focus);
+}.Layer__csv-upload {
+  position: relative;
+  height: 6rem;
+  padding: var(--spacing-xs);
+  border-radius: var(--spacing-3xs);
+  border: 1px dashed var(--color-base-300);
+  background: var(--color-base-100);
+  transition: border-color 0.5s, background-color 0.5s;
+}
+.Layer__csv-upload--drag-active {
+  background: var(--color-base-200);
+  border-color: var(--color-base-500);
+}
+
+.Layer__csv-upload__browse-link {
+  all: unset;
+  cursor: pointer;
+  text-decoration: underline;
 }
 .Layer__csv-upload__browse-link:focus, .Layer__csv-upload__browse-link:active, .Layer__csv-upload__browse-link:focus-visible {
   border-radius: 2px;
@@ -6275,90 +6171,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__UI__DateInput[data-placement=first] {
   border-start-start-radius: inherit;
   border-end-start-radius: inherit;
-}.Layer__Checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
-.Layer__Checkbox [slot=checkbox] {
-  box-sizing: border-box;
-  display: grid;
-  height: var(--size);
-  width: var(--size);
-  border-radius: var(--checkbox-radius);
-  border: 2px solid var(--outline-default);
-  background-color: var(--color-base-50);
-  color: transparent;
-  place-items: center;
-  transition: all 100ms ease-out;
-  --size: 1rem;
-  --checkbox-radius: var(--border-radius-3xs);
-}
-.Layer__Checkbox [slot=checkbox][data-pressed] {
-  border-color: var(--outline-active);
-}
-.Layer__Checkbox[data-size=md] [slot=checkbox] {
-  --size: 1.25rem;
-  --checkbox-radius: 5px;
-}
-.Layer__Checkbox[data-size=lg] [slot=checkbox] {
-  --size: 1.5rem;
-  --checkbox-radius: var(--border-radius-2xs);
-}
-.Layer__Checkbox svg {
-  transition: all 100ms ease-out;
-}
-.Layer__Checkbox[data-readonly] [slot=checkbox] {
-  background-color: var(--bg-muted);
-}
-.Layer__Checkbox[data-hovered] [slot=checkbox], .Layer__Checkbox[data-pressed] [slot=checkbox] {
-  border-color: var(--outline-active);
-}
-.Layer__Checkbox[data-focus-visible] [slot=checkbox] {
-  outline: 1px solid var(--outline-active);
-  outline-offset: 2px;
-}
-.Layer__Checkbox[data-selected] [slot=checkbox], .Layer__Checkbox[data-indeterminate] [slot=checkbox] {
-  background-color: var(--fg-default);
-  color: var(--bg-default);
-  border-color: var(--fg-default);
-}
-.Layer__Checkbox[data-selected][data-variant=success] [slot=checkbox] {
-  background-color: var(--bg-brand-accent, var(--color-accent));
-  border-color: var(--bg-brand-accent, var(--color-accent));
-  color: var(--fg-brand-accent, var(--color-primary));
-}
-.Layer__Checkbox[data-variant=error] [slot=checkbox] {
-  border-color: var(--color-info-error);
-}
-.Layer__Checkbox[data-selected][data-variant=error] [slot=checkbox] {
-  background-color: var(--color-info-error);
-}
-.Layer__Checkbox[data-variant=round] [slot=checkbox] {
-  border-radius: 50%;
-  border: 0.5px solid var(--color-base-400);
-  background-color: white;
-}
-.Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] {
-  border: 1px solid var(--color-info-success);
-  background-color: var(--color-info-success-bg);
-}
-.Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] svg {
-  color: var(--color-info-success);
-}
-.Layer__Checkbox[data-selected][data-readonly] [slot=checkbox] {
-  border-color: var(--fg-subtle);
-  background-color: var(--fg-subtle);
-}
-.Layer__Checkbox[data-disabled] {
-  cursor: not-allowed;
-}
-.Layer__Checkbox[data-disabled] [slot=checkbox] {
-  background-color: var(--color-base-200);
-}
-.Layer__Checkbox[data-labeled] {
-  gap: var(--spacing-xs);
 }.Layer__FormCheckboxField {
   display: grid;
   grid-template-areas: "label" "checkbox";
@@ -7372,26 +7184,289 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     width: 100%;
     padding-inline-end: var(--spacing-md);
   }
-}.Layer__BusinessFormMobile {
+}
+.Layer__expanded-bank-transaction-row {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background-color: var(--bg-element-focus);
+  transition: background-color var(--transition-speed) ease-in-out, height var(--transition-speed) ease-in-out;
+}
+
+.Layer__expanded-bank-transaction-row .Layer__expanded-bank-transaction-row__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  overflow: hidden;
+  transition: height var(--transition-speed) ease-in-out;
+}
+
+.Layer__expanded-bank-transaction-row__content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  min-width: 40rem;
+  max-width: 76rem;
+}
+@container (max-width: 768px) {
+  .Layer__expanded-bank-transaction-row__content {
+    min-width: 30rem;
+  }
+}
+
+.Layer__expanded-bank-transaction-row__content-panels {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+}
+
+.Layer__expanded-bank-transaction-row__content-panel {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  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;
+}
+.Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__content-panel-container {
+  box-sizing: border-box;
+  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;
+}
+.Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__select .Layer__select__control {
+  overflow: hidden;
+  max-width: 0;
+}
+.Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__table-cell--split-entry {
+  overflow: hidden;
+  max-width: 0;
+}
+.Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-buttons {
+  overflow: hidden;
+  max-width: 0;
+}
+
+@container (min-width: 701px) {
+  .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
+    max-width: 100%;
+    opacity: 1;
+  }
+  .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-buttons {
+    max-height: 38px;
+    white-space: nowrap;
+  }
+}
+.Layer__expanded-bank-transaction-row__splits {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.Layer__expanded-bank-transaction-row__splits-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding-top: 2px;
+}
+
+.Layer__expanded-bank-transaction-row__splits-buttons {
+  padding-bottom: 2px;
+}
+
+.Layer__expanded-bank-transaction-row__total-and-btns {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) 0;
+}
+.Layer__expanded-bank-transaction-row__total-and-btns:empty {
+  display: none;
+}
+
+.Layer__expanded-bank-transaction-row__total-and-btns--ListItem {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.Layer__expanded-bank-transaction-row__file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  align-items: flex-start;
+  padding: 0 var(--spacing-md);
+}
+
+.Layer__expanded-bank-transaction-row__table-cell--split-entry {
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: flex-start;
+  min-width: 40rem;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__BankTransactionCategoryComboBox__Container {
+  grid-area: category;
+  max-width: 24.5rem;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__customer {
+  grid-area: customer;
+  min-width: 12rem;
+}
+.Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__Stack.Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container {
+  flex: 0 0 12rem;
+  grid-area: tax-code;
+  min-width: 12rem;
+}
+@container (max-width: 768px) {
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
+    display: grid;
+    grid-template-areas: "amount category button";
+    grid-template-columns: 12rem minmax(12rem, 24.5rem) 2.25rem;
+    min-width: 27.5rem;
+    max-width: min(40rem, 100%);
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer) {
+    grid-template-areas: "amount category button" ". customer .";
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container) {
+    grid-template-areas: "amount category button" ". tax-code .";
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
+    grid-template-areas: "amount category button" "tags tags .";
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container) {
+    grid-template-areas: "amount category button" "customer tax-code .";
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
+    grid-template-areas: "amount category button" "customer tags .";
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
+    grid-template-areas: "amount category button" "tax-code tags .";
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
+    grid-template-areas: "amount category button" "customer tax-code ." "tags tags .";
+  }
+}
+
+.Layer__expanded-bank-transaction-row__table-cell--split-entry__tags {
+  grid-area: tags;
+}
+
+@container (max-width: 600px) {
+  .Layer__expanded-bank-transaction-row__splits-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    width: 100%;
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
+    width: 100%;
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
+    width: 100%;
+  }
+  .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
+    position: relative;
+    flex: 1;
+    max-width: 42%;
+  }
+  .Layer__expanded-bank-transaction-row__total-and-btns {
+    box-sizing: border-box;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    max-width: 42%;
+  }
+  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
+    max-width: 100%;
+  }
+}
+.Layer__expanded-bank-transaction-row__splits-inputs + .Layer__text--error {
+  padding: var(--spacing-2xs) 0;
+  padding-bottom: var(--spacing-md);
+  margin: 0;
+}
+
+.Layer__expanded-bank-transaction-row__splits-inputs .Layer__input {
+  text-align: right;
+}
+
+.Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
+  max-width: 100%;
+  text-align: right;
+}
+
+@container (min-width: 401px) {
+  .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: 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 {
+    width: 100%;
+  }
+}
+@container (max-width: 480px) {
+  .Layer__expanded-bank-transaction-row__total-and-btns > .Layer__input-tooltip > .Layer__input-left-text {
+    border-right-color: transparent;
+  }
+}.Layer__BankTransactionsMobileCategorySelection {
+  overflow: hidden;
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--color-base-300);
-}.Layer__BusinessFormMobileItem[data-selected] {
+}.Layer__BankTransactionsMobileCategorySelectionItem[data-selected] {
   background: var(--color-base-100);
 }.Layer__MatchFormMobileItem__Checkbox {
   padding-inline-end: var(--spacing-md);
 }.Layer__MatchFormMobile {
+  overflow: hidden;
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--color-base-300);
 }
 .Layer__MatchFormMobile [data-selected] {
   background: var(--color-base-100);
 }.Layer__BankTransactionsMobileSplitForm__SplitRow {
+  display: grid;
+  grid-template-areas: "amount category button";
+  grid-template-columns: 6rem minmax(0, 1fr) 2.25rem;
   max-inline-size: 100%;
 }
+.Layer__BankTransactionsMobileSplitForm__SplitRow:has(> .Layer__BankTransactionsMobileSplitForm__TaxCode) {
+  grid-template-areas: "amount category button" ". tax-code .";
+}
+.Layer__BankTransactionsMobileSplitForm__SplitRow .Layer__CategorySelectDrawerWithTrigger {
+  grid-area: category;
+}
+.Layer__BankTransactionsMobileSplitForm__SplitRow > .Layer__UI__Button {
+  grid-area: button;
+}
 
-.Layer__BankTransactionsMobileSplitForm__AmountInput {
+.Layer__BankTransactionsMobileSplitForm__AmountInput.Layer__input {
   flex-shrink: 0;
+  grid-area: amount;
+  inline-size: 6rem;
+  font-size: var(--text-md);
+}
+
+.Layer__BankTransactionsMobileSplitForm__TotalAmountInput.Layer__input {
   inline-size: 6rem;
+  font-size: var(--text-md);
+}
+
+.Layer__BankTransactionsMobileSplitForm__TaxCode {
+  grid-area: tax-code;
 }.Layer__BankTransactionsMobileListItem__CategorizedValue {
   color: var(--color-base-500);
 }
@@ -7422,47 +7497,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   height: 4.75rem;
   padding-left: 1.25rem;
   border-bottom: 1px solid var(--border-color);
-}.Layer__MobileListItem {
-  display: grid;
-  grid-template-areas: "content";
-  grid-template-columns: 1fr;
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius-sm);
-  border: 1px solid var(--border-color);
-  background-color: var(--color-base-0);
-}
-.Layer__MobileListItem[data-selection-mode=multiple], .Layer__MobileListItem[data-selection-mode=single] {
-  grid-template-areas: "selection content";
-  grid-template-columns: auto 1fr;
-}
-[data-variant=compact] .Layer__MobileListItem {
-  padding-inline: 0;
-  border-radius: 0;
-  border: none;
-}.Layer__MobileListSection {
-  display: flex;
-  flex-direction: column;
-}
-.Layer__MobileListSection__Heading {
-  padding-block-end: var(--spacing-xs);
-  padding-inline: var(--spacing-3xs);
-  outline: none;
-  background-color: transparent;
-  cursor: default;
-}
-.Layer__MobileListSection:not(:last-child) {
-  padding-block-end: var(--spacing-xs);
-}
-.Layer__MobileListSection:not(:first-child) {
-  padding-block-start: var(--spacing-md);
-  border-block-start: 1px solid var(--border-color);
-}.Layer__MobileList {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-.Layer__MobileList[data-variant=compact] {
-  gap: 0;
 }.Layer__pagination-container {
   justify-content: end;
   padding: var(--spacing-md);
@@ -8101,21 +8135,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__ProfitAndLossCompareOptions__Container[data-compact=true] .Layer__CompareTagsMultiSelect__Container {
   inline-size: 100%;
   max-inline-size: none;
-}.Layer__MobileSelectionDrawerList__Check {
-  visibility: hidden;
-  height: 1rem;
-  min-width: 1rem;
-}
-.Layer__MobileSelectionDrawerList__Check[data-selected=true] {
-  visibility: visible;
-}.Layer__MobileSelectionDrawerWithTrigger .Layer__SearchField {
-  inline-size: 100%;
-}
-.Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem {
-  transition: background-color 120ms ease;
-}
-.Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem[data-hovered] {
-  background-color: var(--bg-element-focus);
 }.Layer__panel {
   display: flex;
   flex: 1;