@layerfi/components 0.1.121-alpha.1 → 0.1.121-alpha.3

package/dist/index.css

@@ -2014,13 +2014,6 @@
   justify-content: flex-end;
   text-align: right;
 }
-.Layer__bank-transaction-row--removing .Layer__table-cell-content {
-  top: 1px;
-  overflow: hidden;
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
 @container (min-width: 1400px) {
   .Layer__table tr td:first-child .Layer__table-cell-content,
   .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content,
@@ -2962,6 +2955,7 @@ tbody .Layer__table__empty-row:first-child {
   margin-left: 0;
 }
 .Layer__bank-transactions__list-loader {
+  width: 100%;
   padding: var(--spacing-lg) var(--spacing-md);
 }
 .Layer__bank-transactions__loader-row {
@@ -2979,6 +2973,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transactions__header__content {
   display: flex;
+  gap: var(--spacing-lg);
   align-items: center;
   justify-content: space-between;
   min-height: 40px;
@@ -3009,11 +3004,6 @@ tbody .Layer__table__empty-row:first-child {
   transform: scale(1);
   opacity: 1;
 }
-.Layer__bank-transaction-row.Layer__bank-transaction-row--removing .Layer__table-cell-content {
-  overflow: hidden;
-  min-height: 0;
-  padding: 0 var(--spacing-md);
-}
 .Layer__bank-transaction-row:first-child .Layer__table-cell {
   border-top-width: 0;
 }
@@ -3704,13 +3694,6 @@ tbody .Layer__table__empty-row:first-child {
     border-right-color: transparent;
   }
 }
-.Layer__bank-transaction-row--removing .Layer__table-cell-content {
-  top: 1px;
-  overflow: hidden;
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
 .Layer__bank-transactions__mobile-list {
   display: flex;
   flex-direction: column;
@@ -3741,17 +3724,6 @@ tbody .Layer__table__empty-row:first-child {
   opacity: 1;
   transform: scale(1);
 }
-.Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing {
-  opacity: 0;
-  transition: all 500ms ease-in-out, opacity 80ms ease-out;
-  overflow: hidden;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing .Layer__bank-transaction-mobile-list-item__heading {
-  transition: height 180ms ease-out;
-  height: 0 !important;
-}
 .Layer__bank-transaction-mobile-list-item .Layer__text--error {
   padding: var(--spacing-sm) 0;
   font-size: 12px;
@@ -6094,6 +6066,14 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__Spacer {
   flex: 1 1 0%;
+}.Layer__MobileListSkeleton {
+  width: 100%;
+}
+.Layer__MobileListSkeleton__Item {
+  padding: var(--spacing-sm);
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--border-color);
+  background-color: var(--color-base-0);
 }.Layer__UI__Toggle {
   box-sizing: border-box;
   position: relative;
@@ -6141,7 +6121,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   font-size: var(--text-sm);
   text-align: justify;
   color: var(--color-base-300);
-  word-break: break-all;
+  overflow-wrap: break-word;
   white-space: normal;
 }
 
@@ -6701,11 +6681,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   animation: drawer-slide 250ms reverse ease-in;
 }
 .Layer__Modal[data-variant=mobile-drawer] {
-  position: fixed;
-  bottom: 0;
+  display: contents;
   overflow: hidden;
-  block-size: 80%;
-  inline-size: 100%;
   border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
 }
 .Layer__Modal[data-variant=mobile-drawer][data-entering] {
@@ -6738,12 +6715,40 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   border-radius: 0;
 }
 .Layer__Dialog[data-variant=mobile-drawer] {
+  position: fixed;
+  bottom: 0;
+  overflow: hidden;
+  block-size: auto;
+  max-block-size: 100%;
+  inline-size: 100%;
   padding: 0;
   border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
 }
+.Layer__Dialog[data-variant=mobile-drawer][data-entering] {
+  animation: mobile-drawer-slide 250ms;
+}
+.Layer__Dialog[data-variant=mobile-drawer][data-exiting] {
+  animation: mobile-drawer-slide 250ms reverse ease-in;
+}
 .Layer__Dialog[data-variant=mobile-popover] {
   padding: 0;
 }
+.Layer__Dialog__Header {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  padding-block-start: var(--spacing-md);
+  padding-inline: var(--spacing-md);
+  background-color: white;
+}
+.Layer__Dialog__Content {
+  overflow: auto;
+  block-size: auto;
+}
+.Layer__Dialog__KeyboardSpacer {
+  flex-shrink: 0;
+  background-color: white;
+}
 
 @keyframes drawer-slide {
   from {
@@ -7036,6 +7041,16 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   font-size: var(--input-font-size);
 }
 
+.Layer__ComboBoxMultiValue {
+  max-width: calc(100% - var(--spacing-3xs));
+}
+
+.Layer__ComboBoxMultiValueLabel {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .Layer__ComboBoxIndicatorsContainer {
   padding-inline-end: var(--spacing-3xs);
 }
@@ -8039,145 +8054,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   inline-size: 12ch;
 }.Layer__InvisibleDownload {
   display: none;
-}.Layer__UI__Table-Table {
-  border-collapse: collapse;
-}
-
-.Layer__UI__Table-TableHeader {
-  height: 3.25rem;
-}
-.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-TableHeader--hidden {
-  display: none;
-}
-
-.Layer__UI__Table-Row {
-  height: 3.25rem;
-  background-color: var(--color-base-200);
-}
-.Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
-  border-bottom: 1px solid var(--color-base-300);
-}
-.Layer__UI__Table-Row[data-depth="0"] {
-  background-color: var(--color-base-0);
-}
-.Layer__UI__Table-Row[data-depth="1"] {
-  background-color: var(--color-base-50);
-}
-.Layer__UI__Table-Row[data-depth="2"] {
-  background-color: var(--color-base-100);
-}
-
-.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);
-  color: var(--color-base-600);
-}
-.Layer__UI__Table-Column:first-child {
-  padding-left: var(--spacing-md);
-}
-.Layer__UI__Table-Column:last-child {
-  padding-right: var(--spacing-md);
-}
-.Layer__UI__Table-Column[data-text-align=left] {
-  text-align: left;
-}
-.Layer__UI__Table-Column[data-text-align=center] {
-  text-align: center;
-}
-.Layer__UI__Table-Column[data-text-align=right] {
-  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);
-  color: var(--color-base-800);
-}
-.Layer__UI__Table-Cell:first-child {
-  padding-left: var(--spacing-md);
-}
-.Layer__UI__Table-Cell:last-child {
-  padding-right: var(--spacing-md);
-}.Layer__UI__VirtualizedTable__container {
-  position: relative;
-  overflow: auto;
-}
-
-.Layer__UI__VirtualizedTable__state-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.Layer__UI__VirtualizedTable {
-  display: grid;
-}
-
-.Layer__UI__VirtualizedTable__header {
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  display: grid;
-}
-
-.Layer__UI__VirtualizedTable__header-cell {
-  background-color: var(--color-base-0);
-}
-
-.Layer__UI__VirtualizedTable__row {
-  position: absolute;
-  display: grid;
-  width: 100%;
-}.Layer__AffectedTransactionsTable {
-  container-type: inline-size;
-  --affected-transactions-table-cols:
-    minmax(10rem, 25%)
-    minmax(20rem, 50%)
-    minmax(10rem, 25%);
-}
-.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable {
-  table-layout: fixed;
-}
-.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
-.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
-  display: grid;
-  grid-template-columns: var(--affected-transactions-table-cols);
-}
-.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Date,
-.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Date {
-  color: var(--color-base-600);
-}
-.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Amount,
-.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Amount {
-  justify-content: flex-end;
-}
-@container (width <= 840px) {
-  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
-  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
-    grid-template-columns: minmax(4rem, 25%) minmax(8rem, 50%) minmax(4rem, 25%); /* amount */
-  }
-}.Layer__suggested-categorization-rule-updates .Layer__UI__Button {
-  width: 100%;
-}
-
-.Layer__suggested-categorization-rule-updates-header {
-  padding-bottom: var(--spacing-sm);
 }.Layer__bankTransactionsListItemCategory__List {
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
@@ -8584,11 +8460,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__bank-transaction-row__category {
   overflow: hidden;
   width: 100%;
-}
-
-.Layer__BankTransactionRow__CategoryComboBoxMotionContent {
-  flex: 1 0 auto;
-  max-width: 17.5rem;
+}.Layer__UI__ResponsiveComponent {
+  height: 100%;
+  width: 100%;
 }.Layer__BaseDetailView {
   overflow: hidden;
 }
@@ -8598,13 +8472,22 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   height: 4.75rem;
   padding-left: 1.25rem;
   border-bottom: 1px solid var(--border-color);
-}.Layer__DataTable__EmptyState__Row {
-  height: fit-content;
+}.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__DataTable__EmptyState__Cell {
-  grid-column: 1/-1;
-  justify-content: center;
+.Layer__MobileListItem[data-selection-mode=multiple], .Layer__MobileListItem[data-selection-mode=single] {
+  grid-template-areas: "selection content";
+  grid-template-columns: auto 1fr;
+}.Layer__MobileList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
 }.Layer__pagination-container {
   justify-content: end;
   padding: var(--spacing-md);
@@ -8630,29 +8513,191 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   border: 1px solid var(--color-base-300);
   background: var(--color-base-50);
   list-style-type: none;
-}.Layer__PaginatedDataTable__Pagination {
-  border-top: 1px solid var(--border-color);
-}.Layer__CategorizationRulesTable {
-  border: none;
+}.Layer__CategorizationRulesMobileList .Layer__CategorizationRulesView__EmptyState,
+.Layer__CategorizationRulesMobileList .Layer__CategorizationRulesView__ErrorState {
+  padding: var(--spacing-sm);
+  padding-top: var(--spacing-lg);
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--color-base-0);
 }
 
-.Layer__UI__Table__CategorizationRulesTable {
-  table-layout: fixed;
+.Layer__CategorizationRulesMobileListItem {
   width: 100%;
+  min-width: 0;
 }
-.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row,
-.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr {
-  display: grid;
-  grid-template-columns: minmax(8rem, 45%) minmax(8rem, 45%) auto;
+
+.Layer__CategorizationRulesMobileListItem__Content {
+  min-width: 0;
+}.Layer__UI__Table-Table {
+  border-collapse: collapse;
 }
-.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Cell__CategorizationRulesTable--Delete {
-  justify-content: end;
-}.Layer__card {
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--spacing-sm);
-  box-shadow: 0 4px 12px 0 var(--base-transparent-8), 0 2px 4px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
-  background: var(--color-base-0);
+
+.Layer__UI__Table-TableHeader {
+  height: 3.25rem;
+}
+.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-TableHeader--hidden {
+  display: none;
+}
+
+.Layer__UI__Table-Row {
+  height: 3.25rem;
+  background-color: var(--color-base-200);
+}
+.Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__UI__Table-Row[data-depth="0"] {
+  background-color: var(--color-base-0);
+}
+.Layer__UI__Table-Row[data-depth="1"] {
+  background-color: var(--color-base-50);
+}
+.Layer__UI__Table-Row[data-depth="2"] {
+  background-color: var(--color-base-100);
+}
+
+.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);
+  color: var(--color-base-600);
+}
+.Layer__UI__Table-Column:first-child {
+  padding-left: var(--spacing-md);
+}
+.Layer__UI__Table-Column:last-child {
+  padding-right: var(--spacing-md);
+}
+.Layer__UI__Table-Column[data-text-align=left] {
+  text-align: left;
+}
+.Layer__UI__Table-Column[data-text-align=center] {
+  text-align: center;
+}
+.Layer__UI__Table-Column[data-text-align=right] {
+  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);
+  color: var(--color-base-800);
+}
+.Layer__UI__Table-Cell:first-child {
+  padding-left: var(--spacing-md);
+}
+.Layer__UI__Table-Cell:last-child {
+  padding-right: var(--spacing-md);
+}.Layer__DataTable__EmptyState__Row {
+  height: fit-content;
+}
+
+.Layer__DataTable__EmptyState__Cell {
+  grid-column: 1/-1;
+  justify-content: center;
+}.Layer__PaginatedDataTable__Pagination {
+  border-top: 1px solid var(--border-color);
+}.Layer__CategorizationRulesTable {
+  border: none;
+}
+
+.Layer__UI__Table__CategorizationRulesTable {
+  table-layout: fixed;
+  width: 100%;
+}
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row,
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(8rem, 45%) minmax(8rem, 45%) auto;
+}
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Cell__CategorizationRulesTable--Delete {
+  justify-content: end;
+}.Layer__UI__VirtualizedTable__container {
+  position: relative;
+  overflow: auto;
+}
+
+.Layer__UI__VirtualizedTable__state-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Layer__UI__VirtualizedTable {
+  display: grid;
+}
+
+.Layer__UI__VirtualizedTable__header {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  display: grid;
+}
+
+.Layer__UI__VirtualizedTable__header-cell {
+  background-color: var(--color-base-0);
+}
+
+.Layer__UI__VirtualizedTable__row {
+  position: absolute;
+  display: grid;
+  width: 100%;
+}.Layer__AffectedTransactionsTable {
+  container-type: inline-size;
+  --affected-transactions-table-cols:
+    minmax(10rem, 25%)
+    minmax(20rem, 50%)
+    minmax(10rem, 25%);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable {
+  table-layout: fixed;
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
+  display: grid;
+  grid-template-columns: var(--affected-transactions-table-cols);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Date,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Date {
+  color: var(--color-base-600);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Amount,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Amount {
+  justify-content: flex-end;
+}
+@container (width <= 840px) {
+  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
+  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
+    grid-template-columns: minmax(4rem, 25%) minmax(8rem, 50%) minmax(4rem, 25%); /* amount */
+  }
+}.Layer__suggested-categorization-rule-updates__buttons--mobile {
+  width: 100%;
+}
+
+.Layer__suggested-categorization-rule-updates-header {
+  padding-bottom: var(--spacing-sm);
+}.Layer__card {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--spacing-sm);
+  box-shadow: 0 4px 12px 0 var(--base-transparent-8), 0 2px 4px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
+  background: var(--color-base-0);
 }.Layer__hover-menu {
   position: relative;
   display: flex;
@@ -9949,6 +9994,48 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__InvoiceRefundForm .Layer__InvoiceRefundForm__Section {
   padding: var(--spacing-md);
   border-bottom: 1px solid var(--border-color);
+}.Layer__InvoiceDetail__Heading {
+  max-inline-size: 30rem;
+}.Layer__InvoiceDetail__SubHeader {
+  align-items: center;
+  height: 5.5rem;
+  padding-left: 2.25rem;
+  border-bottom: 1px solid var(--border-color);
+}.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__InvoiceNo,
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__PaidAt,
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__PaymentMethod,
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__ReferenceNo,
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__Memo {
+  grid-template-columns: 8rem auto;
+  min-width: 16rem;
+}
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__Amount {
+  grid-template-columns: 8rem 8rem;
+  justify-content: end;
+}
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__OutstandingBalance {
+  display: grid;
+  grid-template-columns: 8rem 7.5rem;
+  justify-content: end;
+}
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__FormError {
+  height: 4rem;
+  padding-inline: var(--spacing-md);
+  border-top: 1px solid var(--border-color);
+}
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__InvoiceNo {
+  display: grid;
+}
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Section {
+  padding: var(--spacing-md);
+  border-top: 1px solid var(--border-color);
+}
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Section:first-child {
+  padding-top: 0;
+  border-top: none;
+}
+.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Submit {
+  display: grid;
 }.Layer__CustomerForm {
   display: flex;
   flex-direction: column;
@@ -9968,32 +10055,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__CustomerForm .Layer__CustomerForm__Field__Address {
   grid-template-columns: 10rem auto;
   width: 100%;
-}.Layer__CustomerSelector {
-  display: grid;
-  grid-template-areas: "label" "input";
-  gap: var(--spacing-3xs);
-}
-.Layer__CustomerSelector--inline {
-  grid-template-areas: "label input";
-  gap: 0;
-  align-items: center;
-}.Layer__InvoiceForm {
-  min-width: 54rem;
-}
-.Layer__InvoiceForm .Layer__InvoiceForm__Field__Customer,
-.Layer__InvoiceForm .Layer__InvoiceForm__Field__Email,
-.Layer__InvoiceForm .Layer__InvoiceForm__Field__Address {
-  grid-template-columns: 8rem auto;
-  width: clamp(28rem, 100%, 44rem);
-}
-.Layer__InvoiceForm .Layer__InvoiceForm__Field__InvoiceNo,
-.Layer__InvoiceForm .Layer__InvoiceForm__Field__Terms,
-.Layer__InvoiceForm .Layer__InvoiceForm__Field__SentAt,
-.Layer__InvoiceForm .Layer__InvoiceForm__Field__DueAt {
-  grid-template-columns: 8rem auto;
-  width: clamp(16rem, 100%, 24rem);
-}
-.Layer__InvoiceForm .Layer__InvoiceForm__LineItem {
+}.Layer__InvoiceForm__FormError {
+  height: 4rem;
+  padding-inline-start: 2.25rem;
+  border-bottom: 1px solid var(--border-color);
+}.Layer__InvoiceForm__LineItem {
   display: grid;
   --grid-cols-base:
     minmax(10rem, 3fr)
@@ -10006,23 +10072,19 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   grid-template-columns: var(--grid-cols-base) auto;
   width: 100%;
 }
-.Layer__InvoiceForm .Layer__InvoiceForm__LineItem--readonly {
+.Layer__InvoiceForm__LineItem--readonly {
   grid-template-columns: var(--grid-cols-base);
-}
-
-.Layer__InvoiceForm__Terms {
-  display: grid;
-  grid-template-columns: 1.5fr 1fr;
-  max-width: 64rem;
-  padding: var(--spacing-lg) var(--spacing-2xl);
-}
-
-.Layer__InvoiceForm__LineItems {
+}.Layer__InvoiceForm__Body {
   padding: var(--spacing-lg) var(--spacing-2xl);
   background-color: var(--bg-subtle);
+}.Layer__InvoiceForm__TotalRow {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  height: 2.5rem;
 }
-
-.Layer__InvoiceForm__Metadata {
+.Layer__InvoiceForm__TotalRow--withField {
+  grid-template-columns: minmax(7.5rem, 1fr) 7.5rem minmax(6rem, 0.8fr);
+}.Layer__InvoiceForm__Metadata {
   border-top: 1px solid var(--color-base-300);
 }
 
@@ -10034,70 +10096,42 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   flex: 1;
   min-width: 20rem;
   max-width: 32rem;
-}
-
-.Layer__InvoiceForm__TotalRow {
+}.Layer__CustomerSelector {
   display: grid;
-  grid-template-columns: auto 1fr;
-  height: 2.5rem;
-}
-.Layer__InvoiceForm__TotalRow--withField {
-  grid-template-columns: minmax(7.5rem, 1fr) 7.5rem minmax(6rem, 0.8fr);
+  grid-template-areas: "label" "input";
+  gap: var(--spacing-3xs);
 }
-
-.Layer__InvoiceForm__TermsComboBox {
-  display: grid;
+.Layer__CustomerSelector--inline {
+  grid-template-areas: "label input";
+  gap: 0;
   align-items: center;
-}
-
-.Layer__InvoiceForm__FormError {
-  height: 4rem;
-  padding-left: 2.25rem;
-  border-bottom: 1px solid var(--border-color);
-}.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__InvoiceNo,
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__PaidAt,
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__PaymentMethod,
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__ReferenceNo,
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__Memo {
-  grid-template-columns: 8rem auto;
-  min-width: 16rem;
-}
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__Amount {
-  grid-template-columns: 8rem 8rem;
-  justify-content: end;
-}
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__OutstandingBalance {
+}.Layer__InvoiceForm__Terms {
   display: grid;
-  grid-template-columns: 8rem 7.5rem;
-  justify-content: end;
-}
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__FormError {
-  height: 4rem;
-  padding-inline: var(--spacing-md);
-  border-top: 1px solid var(--border-color);
+  grid-template-columns: 1.5fr 1fr;
+  max-width: 64rem;
+  padding: var(--spacing-lg) var(--spacing-2xl);
+}.Layer__InvoiceForm {
+  min-width: 54rem;
 }
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Field__InvoiceNo {
-  display: grid;
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__Customer,
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__Email,
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__Address {
+  grid-template-columns: 8rem auto;
+  width: clamp(28rem, 100%, 44rem);
 }
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Section {
-  padding: var(--spacing-md);
-  border-top: 1px solid var(--border-color);
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__InvoiceNo,
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__Terms,
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__SentAt,
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__DueAt {
+  grid-template-columns: 8rem auto;
+  width: clamp(16rem, 100%, 24rem);
 }
-.Layer__InvoicePaymentForm .Layer__InvoicePaymentForm__Submit {
+
+.Layer__InvoiceForm__TermsComboBox {
   display: grid;
+  align-items: center;
 }.Layer__InvoiceDetail {
   width: clamp(62rem, 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__Meter [slot=bar] {
   overflow: hidden;
   height: 0.75rem;
@@ -10130,6 +10164,81 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__InvoiceSummaryStats__Meter__fill {
   fill: var(--color-info-warning-bg);
+}.Layer__UI__Banner {
+  box-sizing: border-box;
+  min-height: 56px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--banner-border-color);
+  background-color: var(--banner-bg);
+}
+.Layer__UI__Banner[data-variant=default] {
+  --banner-bg: var(--color-base-100);
+  --banner-border-color: var(--color-base-800);
+  --banner-fg: var(--color-base-800);
+  --banner-fg-muted: var(--color-base-600);
+  --banner-icon-color: var(--color-base-800);
+}
+.Layer__UI__Banner[data-variant=info] {
+  --banner-bg: var(--badge-bg-color-info);
+  --banner-border-color: var(--badge-color-info);
+  --banner-fg: var(--color-base-800);
+  --banner-fg-muted: var(--color-base-600);
+  --banner-icon-color: var(--color-base-800);
+}
+.Layer__UI__Banner[data-variant=warning] {
+  --banner-bg: var(--badge-bg-color-warning);
+  --banner-border-color: var(--badge-color-warning);
+  --banner-fg: var(--color-base-800);
+  --banner-fg-muted: var(--color-base-600);
+  --banner-icon-color: var(--color-base-800);
+}
+.Layer__UI__Banner[data-variant=error] {
+  --banner-bg: var(--badge-bg-color-error);
+  --banner-border-color: var(--badge-color-error);
+  --banner-fg: var(--color-base-800);
+  --banner-fg-muted: var(--color-base-600);
+  --banner-icon-color: var(--color-base-800);
+}
+.Layer__UI__Banner[data-variant=success] {
+  --banner-bg: var(--badge-bg-color-success);
+  --banner-border-color: var(--badge-color-success);
+  --banner-fg: var(--color-base-800);
+  --banner-fg-muted: var(--color-base-600);
+  --banner-icon-color: var(--color-base-800);
+}
+
+.Layer__UI__Banner__iconContainer {
+  color: var(--banner-icon-color);
+}
+
+.Layer__UI__Banner__content {
+  flex: 1;
+  min-width: 0;
+  color: var(--banner-fg);
+}
+
+.Layer__UI__Banner__title {
+  color: var(--banner-fg);
+}
+
+.Layer__UI__Banner__description {
+  color: var(--banner-fg-muted);
+}
+
+.Layer__UI__Banner__actions {
+  flex-shrink: 0;
+}
+
+@container (max-width: 560px) {
+  .Layer__UI__Banner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}.Layer__StripeConnectBanner__wrapper {
+  box-sizing: border-box;
+  width: clamp(48rem, 100%, 1406px);
+  container-type: inline-size;
 }.Layer__ExpandButton {
   height: 16px;
   min-width: 16px;
@@ -10268,9 +10377,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-inline: var(--spacing-md);
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--border-color);
-}.Layer__UI__ResponsiveComponent {
-  height: 100%;
-  width: 100%;
 }.Layer__TripPurposeComboBox {
   display: grid;
   grid-template-areas: "label" "input";
@@ -10297,7 +10403,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-inline: var(--spacing-lg);
 }
 .Layer__TripForm .Layer__TripForm__FormError {
-  padding-block: var(--spacing-xs);
+  padding-block-end: var(--spacing-xs);
 }
 .Layer__TripForm .Layer__TripForm__Field__Vehicle,
 .Layer__TripForm .Layer__TripForm__Field__TripDate,
@@ -10312,27 +10418,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__TripForm .Layer__TripForm__Submit {
   align-items: flex-end;
   padding-block-start: 1rem;
-}.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;
-}.Layer__MobileListSkeleton__Item {
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius-2xs);
-  border: 1px solid var(--border-color);
-  background-color: var(--color-base-0);
-}.Layer__MobileList {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
 }.Layer__TripsMobileHeader__SearchField {
   flex: 1;
 }.Layer__TripsMobileList .Layer__TripsView__EmptyState,
@@ -10417,9 +10502,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__VehicleManagementGrid {
     grid-template-columns: 1fr;
   }
-}.Layer__VehicleManagementDetail__Header {
-  display: flex;
-  align-items: center;
 }.Layer__project-view .Layer__category-menu {
   max-width: 300px;
 }
@@ -10444,89 +10526,131 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__ExpandableCard__Content {
   padding-block-end: var(--spacing-md);
   padding-inline: var(--spacing-md);
-}.Layer__AdjustedGrossIncomeTable {
+}.Layer__ResponsiveDetailView {
+  container-type: inline-size;
+}.Layer__TaxTable {
   width: 100%;
   table-layout: fixed;
 }
-.Layer__AdjustedGrossIncomeTable__Header {
+.Layer__TaxTable__Header {
   display: none;
 }
-.Layer__AdjustedGrossIncomeTable .Layer__UI__Table-Row {
+.Layer__TaxTable .Layer__UI__Table-Row {
   display: grid;
-  grid-template-columns: minmax(15rem, 60%) minmax(10rem, 40%);
+  grid-template-columns: minmax(6rem, 60%) minmax(4rem, 40%);
 }
-.Layer__AdjustedGrossIncomeTable .Layer__UI__Table-Row.Layer__AdjustedGrossIncomeTable__DeductionsRow {
-  background-color: var(--color-base-50);
-}
-.Layer__AdjustedGrossIncomeTable .Layer__UI__Table-Row.Layer__AdjustedGrossIncomeTable__DeductionsRow .Layer__UI__Table-Cell:first-child {
-  padding-left: var(--spacing-lg);
+.Layer__TaxTable .Layer__UI__Table-Row--mobile {
+  height: auto;
 }
-.Layer__AdjustedGrossIncomeTable .Layer__UI__Table-Cell:nth-child(2) {
+.Layer__TaxTable .Layer__UI__Table-Cell:nth-child(2) {
   justify-content: flex-end;
   text-align: right;
 }
-.Layer__AdjustedGrossIncomeTable__TotalRow {
-  border-top: 2px solid var(--color-border);
-}.Layer__FederalTaxTable {
-  width: 100%;
-  table-layout: fixed;
-}
-.Layer__FederalTaxTable__Header {
-  display: none;
-}
-.Layer__FederalTaxTable .Layer__UI__Table-Row {
-  display: grid;
-  grid-template-columns: minmax(15rem, 60%) minmax(10rem, 40%);
-}
-.Layer__FederalTaxTable .Layer__UI__Table-Row.Layer__FederalTaxTable_NestedRow {
+
+.Layer__UI__Table-Row.Layer__TaxTable__Row--nested {
   background-color: var(--color-base-50);
 }
-.Layer__FederalTaxTable .Layer__UI__Table-Row.Layer__FederalTaxTable_NestedRow .Layer__UI__Table-Cell:first-child {
+.Layer__UI__Table-Row.Layer__TaxTable__Row--nested .Layer__UI__Table-Cell:first-child {
   padding-left: var(--spacing-lg);
 }
-.Layer__FederalTaxTable .Layer__UI__Table-Cell:nth-child(2) {
-  justify-content: flex-end;
-  text-align: right;
+.Layer__UI__Table-Row.Layer__TaxTable__Row--empty {
+  height: var(--spacing-md);
 }
-.Layer__FederalTaxTable__SectionTotal {
+.Layer__UI__Table-Row.Layer__TaxTable__Row--section-total {
   border-bottom: 1px solid var(--color-border);
 }
-.Layer__FederalTaxTable__EmptyRow {
-  height: var(--spacing-md);
-}
-.Layer__FederalTaxTable__TotalRow {
+.Layer__UI__Table-Row.Layer__TaxTable__Row--total {
   border-top: 2px solid var(--color-border);
-}.Layer__TaxDetails__CardHeading {
+}.Layer__TaxDetailsExpandableCardHeading {
   width: 100%;
-}.Layer__StateTaxTable {
+}
+
+.Layer__TaxDetailsExpandableCardHeading > .Layer__Span.Layer__MoneySpan {
+  height: fit-content;
+  margin-block: auto;
+}.Layer__TaxSummaryCard {
   width: 100%;
-  table-layout: fixed;
+  border-block-end: 1px solid var(--color-base-200);
 }
-.Layer__StateTaxTable__Header {
-  display: none;
+.Layer__TaxSummaryCard__Overview {
+  min-width: 200px;
+  padding: var(--spacing-lg);
+  border-inline-end: 1px solid var(--color-base-200);
 }
-.Layer__StateTaxTable .Layer__UI__Table-Row {
+.Layer__TaxSummaryCard__Breakdown {
+  flex: 1;
+  padding: var(--spacing-lg);
+  padding-block-end: var(--spacing-xl);
+}
+.Layer__TaxSummaryCard__Grid {
   display: grid;
-  grid-template-columns: minmax(15rem, 60%) minmax(10rem, 40%);
+  grid-template-columns: repeat(5, auto);
+  row-gap: var(--spacing-3xs);
+  column-gap: var(--spacing-md);
+  align-items: baseline;
+  width: fit-content;
 }
-.Layer__StateTaxTable .Layer__UI__Table-Row.Layer__StateTaxTable_NestedRow {
-  background-color: var(--color-base-50);
+.Layer__TaxSummaryCard__Grid > .Layer__Span {
+  text-align: right;
 }
-.Layer__StateTaxTable .Layer__UI__Table-Row.Layer__StateTaxTable_NestedRow .Layer__UI__Table-Cell:first-child {
-  padding-left: var(--spacing-lg);
+.Layer__TaxSummaryCard__Grid--mobile {
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  column-gap: var(--spacing-sm);
+  width: 100%;
 }
-.Layer__StateTaxTable .Layer__UI__Table-Cell:nth-child(2) {
-  justify-content: flex-end;
-  text-align: right;
+.Layer__TaxSummaryCard__SectionGroup {
+  display: contents;
 }
-.Layer__StateTaxTable__SectionTotal {
-  border-bottom: 1px solid var(--color-border);
+.Layer__TaxSummaryCard__SectionGroup > .Layer__Span:first-child {
+  grid-column: 1/-1;
+  text-align: left;
 }
-.Layer__StateTaxTable__EmptyRow {
-  height: var(--spacing-md);
+.Layer__TaxSummaryCard__SectionGroup:not(:first-child) > .Layer__Span:first-child {
+  padding-block-start: var(--spacing-md);
+  margin-block-start: var(--spacing-3xs);
+  border-block-start: 1px solid var(--color-base-100);
 }
-.Layer__StateTaxTable__TotalRow {
-  border-top: 2px solid var(--color-border);
+.Layer__TaxSummaryCard--mobile {
+  width: 100%;
+}
+.Layer__TaxSummaryCard__OverviewCard {
+  padding: var(--spacing-lg);
+}
+.Layer__TaxSummaryCard__BreakdownCard {
+  padding: var(--spacing-lg);
+}.Layer__FullYearProjectionComboBox__Container {
+  inline-size: 11rem;
+  max-inline-size: 11rem;
+}
+@container (max-width: 500px) {
+  .Layer__FullYearProjectionComboBox__Container {
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+}@container (max-width: 500px) {
+  .Layer__TaxEstimatesHeader.Layer__TaxEstimatesHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .Layer__TaxEstimatesHeader__ComboBoxContainer {
+    width: 100%;
+  }
+}.Layer__TaxDetails--mobile .Layer__TaxSummaryCard--mobile > .Layer__card,
+.Layer__TaxDetails--mobile .Layer__TaxDetails__ExpandableCardsWrapper {
+  border: 1px solid var(--color-base-200);
+  box-shadow: none;
+}
+
+.Layer__TaxDetails__ExpandableCardsWrapper {
+  overflow: hidden;
+  border-radius: var(--spacing-sm);
+}.Layer__TaxPaymentsMobileList .Layer__TaxPayments__ErrorState,
+.Layer__TaxPaymentsMobileList .Layer__TaxPayments__EmptyState {
+  padding: var(--spacing-sm);
+  padding-top: var(--spacing-lg);
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--color-base-0);
 }.Layer__UI__Table__TaxPaymentsTable {
   width: 100%;
   table-layout: fixed;
@@ -10578,9 +10702,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   border: 1px solid var(--border-color);
   background: var(--color-base-50);
 }
-.Layer__TaxProfileForm .Layer__TaxProfileForm__Field {
+.Layer__TaxProfileForm .Layer__TaxProfileForm__Field--desktop {
   grid-template-columns: 16rem minmax(auto, 24rem);
-  width: 100%;
 }.Layer__toasts-container {
   position: fixed;
   z-index: 1000;