@layerfi/components 0.1.94 → 0.1.95-alpha.1

package/dist/index.css

@@ -562,6 +562,8 @@
 .Layer__btn--secondary {
   color: var(--btn-secondary-color);
   background: var(--btn-secondary-bg-color);
+  border: 1px solid var(--border-color);
+  box-shadow: none;
 }
 .Layer__btn--tertiary {
   color: var(--btn-tertiary-color);
@@ -4472,8 +4474,6 @@ tbody .Layer__table__empty-row:first-child {
   cursor: pointer;
   display: inline-grid;
   min-inline-size: 0;
-  min-block-size: 2rem;
-  padding-inline: var(--spacing-md);
   justify-content: center;
   outline: none;
   user-select: none;
@@ -4483,7 +4483,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Button[data-icon] {
   padding-inline: 0;
   inline-size: 2rem;
-  block-size: 2rem;
 }
 .Layer__UI__Button[data-variant=solid] {
   background-color: var(--button-bg-default);
@@ -4511,8 +4510,19 @@ tbody .Layer__table__empty-row:first-child {
   outline-style: solid;
   outline-color: var(--button-outline-ghost-active);
 }
+.Layer__UI__Button[data-size=sm] {
+  min-block-size: 1.5rem;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--text-sm);
+}
+.Layer__UI__Button[data-size=md] {
+  min-block-size: 2rem;
+  padding-inline: var(--spacing-md);
+  font-size: var(--text-md);
+}
 .Layer__UI__Button[data-size=lg] {
   min-block-size: 2.25rem;
+  padding-inline: var(--spacing-lg);
   font-size: var(--text-lg);
 }
 .Layer__UI__Button[data-disabled] {
@@ -4603,6 +4613,36 @@ tbody .Layer__table__empty-row:first-child {
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
+.Layer__Menu {
+  max-block-size: inherit;
+  min-inline-size: 9rem;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+  padding: var(--spacing-3xs);
+  border: 1px solid var(--border-color);
+  border-radius: var(--spacing-xs);
+  background: white;
+  outline: none;
+}
+.Layer__MenuItem {
+  display: flex;
+  align-items: center;
+  padding-inline: var(--spacing-xs);
+  padding-block: var(--spacing-3xs);
+  border-radius: var(--spacing-2xs);
+  outline: none;
+  cursor: pointer;
+}
+.Layer__MenuItem[data-focused] {
+  background: var(--color-base-50);
+  color: var(--color-base-800);
+}
+.Layer__MenuItem[data-focus-visible] {
+  outline: 1px solid var(--color-base-100);
+  outline-offset: 1px;
+}
 .Layer__ModalOverlay {
   display: grid;
   place-items: center;
@@ -4677,9 +4717,38 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__ModalActions {
   padding-block-start: var(--spacing-lg);
 }
+.Layer__Pill {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-size: var(--text-sm);
+  background-color: var(--badge-bg-color);
+  color: var(--badge-color);
+  border-radius: var(--badge-border-radius);
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  white-space: nowrap;
+  user-select: none;
+}
+.Layer__Pill svg {
+  margin-right: 0.25rem;
+}
+.Layer__Pill[data-status=error] {
+  background-color: var(--color-info-error-bg);
+  color: var(--color-info-error-fg);
+}
+.Layer__Pill[data-status=error][data-focus-visible] {
+  outline: 1px solid var(--color-info-error-bg);
+  outline-offset: 1px;
+}
 .Layer__Stack {
   display: flex;
 }
+.Layer__Stack[data-fluid] {
+  flex: 1;
+}
 .Layer__Stack[data-direction=row] {
   flex-direction: row;
 }
@@ -4713,6 +4782,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs="3xs"] {
   padding-block-start: var(--spacing-3xs);
 }
+.Layer__Stack[data-pie="3xs"] {
+  padding-inline-end: var(--spacing-3xs);
+}
+.Layer__Stack[data-pis="3xs"] {
+  padding-inline-start: var(--spacing-3xs);
+}
 .Layer__Stack[data-gap="2xs"] {
   gap: var(--spacing-2xs);
 }
@@ -4722,6 +4797,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs="2xs"] {
   padding-block-start: var(--spacing-2xs);
 }
+.Layer__Stack[data-pie="2xs"] {
+  padding-inline-end: var(--spacing-2xs);
+}
+.Layer__Stack[data-pis="2xs"] {
+  padding-inline-start: var(--spacing-2xs);
+}
 .Layer__Stack[data-gap=xs] {
   gap: var(--spacing-xs);
 }
@@ -4731,6 +4812,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs=xs] {
   padding-block-start: var(--spacing-xs);
 }
+.Layer__Stack[data-pie=xs] {
+  padding-inline-end: var(--spacing-xs);
+}
+.Layer__Stack[data-pis=xs] {
+  padding-inline-start: var(--spacing-xs);
+}
 .Layer__Stack[data-gap=sm] {
   gap: var(--spacing-sm);
 }
@@ -4740,6 +4827,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs=sm] {
   padding-block-start: var(--spacing-sm);
 }
+.Layer__Stack[data-pie=sm] {
+  padding-inline-end: var(--spacing-sm);
+}
+.Layer__Stack[data-pis=sm] {
+  padding-inline-start: var(--spacing-sm);
+}
 .Layer__Stack[data-gap=md] {
   gap: var(--spacing-md);
 }
@@ -4749,6 +4842,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs=md] {
   padding-block-start: var(--spacing-md);
 }
+.Layer__Stack[data-pie=md] {
+  padding-inline-end: var(--spacing-md);
+}
+.Layer__Stack[data-pis=md] {
+  padding-inline-start: var(--spacing-md);
+}
 .Layer__Stack[data-gap=lg] {
   gap: var(--spacing-lg);
 }
@@ -4758,6 +4857,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs=lg] {
   padding-block-start: var(--spacing-lg);
 }
+.Layer__Stack[data-pie=lg] {
+  padding-inline-end: var(--spacing-lg);
+}
+.Layer__Stack[data-pis=lg] {
+  padding-inline-start: var(--spacing-lg);
+}
 .Layer__Stack[data-gap=xl] {
   gap: var(--spacing-xl);
 }
@@ -4767,6 +4872,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs=xl] {
   padding-block-start: var(--spacing-xl);
 }
+.Layer__Stack[data-pie=xl] {
+  padding-inline-end: var(--spacing-xl);
+}
+.Layer__Stack[data-pis=xl] {
+  padding-inline-start: var(--spacing-xl);
+}
 .Layer__Stack[data-gap="2xl"] {
   gap: var(--spacing-2xl);
 }
@@ -4776,6 +4887,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs="2xl"] {
   padding-block-start: var(--spacing-2xl);
 }
+.Layer__Stack[data-pie="2xl"] {
+  padding-inline-end: var(--spacing-2xl);
+}
+.Layer__Stack[data-pis="2xl"] {
+  padding-inline-start: var(--spacing-2xl);
+}
 .Layer__Stack[data-gap="3xl"] {
   gap: var(--spacing-3xl);
 }
@@ -4785,6 +4902,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs="3xl"] {
   padding-block-start: var(--spacing-3xl);
 }
+.Layer__Stack[data-pie="3xl"] {
+  padding-inline-end: var(--spacing-3xl);
+}
+.Layer__Stack[data-pis="3xl"] {
+  padding-inline-start: var(--spacing-3xl);
+}
 .Layer__Stack[data-gap="5xl"] {
   gap: var(--spacing-5xl);
 }
@@ -4794,6 +4917,41 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-pbs="5xl"] {
   padding-block-start: var(--spacing-5xl);
 }
+.Layer__Stack[data-pie="5xl"] {
+  padding-inline-end: var(--spacing-5xl);
+}
+.Layer__Stack[data-pis="5xl"] {
+  padding-inline-start: var(--spacing-5xl);
+}
+.Layer__MinimalSearchField {
+  display: grid;
+  grid-template-areas: "input clear-button";
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  border: none;
+}
+.Layer__MinimalSearchField > [slot=input] {
+  grid-area: input;
+  font-family: var(--font-family);
+  border: none;
+  outline: none;
+  background: none;
+  min-block-size: 1.5rem;
+  padding-inline: var(--spacing-3xs);
+}
+.Layer__MinimalSearchField > [slot=input]::-webkit-search-cancel-button,
+.Layer__MinimalSearchField > [slot=input]::-webkit-search-decoration {
+  appearance: none;
+}
+.Layer__MinimalSearchField[data-empty] > [slot=input] {
+  grid-column: 1/-1;
+}
+.Layer__MinimalSearchField > [slot=clear-button] {
+  grid-area: clear-button;
+}
+.Layer__MinimalSearchField[data-empty] > [slot=clear-button] {
+  display: none;
+}
 .Layer__UI__Heading {
   all: unset;
   color: var(--color-base-700);
@@ -4885,103 +5043,222 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__MoneyText[data-negative]::before {
   content: "-$";
 }
-.Layer__P {
+.Layer__Label,
+.Layer__P,
+.Layer__Span {
   margin: 0;
   color: var(--color-base-700);
   font-size: var(--text-md);
   max-inline-size: min(80ch, 60rem);
   text-wrap: pretty;
 }
-.Layer__P[data-variant=subtle] {
+.Layer__Label[data-variant=subtle],
+.Layer__P[data-variant=subtle],
+.Layer__Span[data-variant=subtle] {
   color: var(--fg-subtle);
 }
-.Layer__P[data-size=xs] {
+.Layer__Label[data-no-wrap],
+.Layer__P[data-no-wrap],
+.Layer__Span[data-no-wrap] {
+  white-space: nowrap;
+}
+.Layer__Label[data-size=xs],
+.Layer__P[data-size=xs],
+.Layer__Span[data-size=xs] {
   font-size: var(--text-xs);
 }
-.Layer__P[data-size=sm] {
+.Layer__Label[data-size=sm],
+.Layer__P[data-size=sm],
+.Layer__Span[data-size=sm] {
   font-size: var(--text-sm);
 }
-.Layer__P[data-size=md] {
+.Layer__Label[data-size=md],
+.Layer__P[data-size=md],
+.Layer__Span[data-size=md] {
   font-size: var(--text-md);
 }
-.Layer__P[data-size=lg] {
+.Layer__Label[data-size=lg],
+.Layer__P[data-size=lg],
+.Layer__Span[data-size=lg] {
   font-size: var(--text-lg);
 }
-.Layer__P[data-pbe="3xs"] {
+.Layer__Label[data-pbe="3xs"],
+.Layer__P[data-pbe="3xs"],
+.Layer__Span[data-pbe="3xs"] {
   padding-block-end: var(--spacing-3xs);
 }
-.Layer__P[data-pbs="3xs"] {
+.Layer__Label[data-pbs="3xs"],
+.Layer__P[data-pbs="3xs"],
+.Layer__Span[data-pbs="3xs"] {
   padding-block-start: var(--spacing-3xs);
 }
-.Layer__P[data-pbe="2xs"] {
+.Layer__Label[data-pbe="2xs"],
+.Layer__P[data-pbe="2xs"],
+.Layer__Span[data-pbe="2xs"] {
   padding-block-end: var(--spacing-2xs);
 }
-.Layer__P[data-pbs="2xs"] {
+.Layer__Label[data-pbs="2xs"],
+.Layer__P[data-pbs="2xs"],
+.Layer__Span[data-pbs="2xs"] {
   padding-block-start: var(--spacing-2xs);
 }
-.Layer__P[data-pbe=xs] {
+.Layer__Label[data-pbe=xs],
+.Layer__P[data-pbe=xs],
+.Layer__Span[data-pbe=xs] {
   padding-block-end: var(--spacing-xs);
 }
-.Layer__P[data-pbs=xs] {
+.Layer__Label[data-pbs=xs],
+.Layer__P[data-pbs=xs],
+.Layer__Span[data-pbs=xs] {
   padding-block-start: var(--spacing-xs);
 }
-.Layer__P[data-pbe=sm] {
+.Layer__Label[data-pbe=sm],
+.Layer__P[data-pbe=sm],
+.Layer__Span[data-pbe=sm] {
   padding-block-end: var(--spacing-sm);
 }
-.Layer__P[data-pbs=sm] {
+.Layer__Label[data-pbs=sm],
+.Layer__P[data-pbs=sm],
+.Layer__Span[data-pbs=sm] {
   padding-block-start: var(--spacing-sm);
 }
-.Layer__P[data-pbe=md] {
+.Layer__Label[data-pbe=md],
+.Layer__P[data-pbe=md],
+.Layer__Span[data-pbe=md] {
   padding-block-end: var(--spacing-md);
 }
-.Layer__P[data-pbs=md] {
+.Layer__Label[data-pbs=md],
+.Layer__P[data-pbs=md],
+.Layer__Span[data-pbs=md] {
   padding-block-start: var(--spacing-md);
 }
-.Layer__P[data-pbe=lg] {
+.Layer__Label[data-pbe=lg],
+.Layer__P[data-pbe=lg],
+.Layer__Span[data-pbe=lg] {
   padding-block-end: var(--spacing-lg);
 }
-.Layer__P[data-pbs=lg] {
+.Layer__Label[data-pbs=lg],
+.Layer__P[data-pbs=lg],
+.Layer__Span[data-pbs=lg] {
   padding-block-start: var(--spacing-lg);
 }
-.Layer__P[data-pbe=xl] {
+.Layer__Label[data-pbe=xl],
+.Layer__P[data-pbe=xl],
+.Layer__Span[data-pbe=xl] {
   padding-block-end: var(--spacing-xl);
 }
-.Layer__P[data-pbs=xl] {
+.Layer__Label[data-pbs=xl],
+.Layer__P[data-pbs=xl],
+.Layer__Span[data-pbs=xl] {
   padding-block-start: var(--spacing-xl);
 }
-.Layer__P[data-pbe="2xl"] {
+.Layer__Label[data-pbe="2xl"],
+.Layer__P[data-pbe="2xl"],
+.Layer__Span[data-pbe="2xl"] {
   padding-block-end: var(--spacing-2xl);
 }
-.Layer__P[data-pbs="2xl"] {
+.Layer__Label[data-pbs="2xl"],
+.Layer__P[data-pbs="2xl"],
+.Layer__Span[data-pbs="2xl"] {
   padding-block-start: var(--spacing-2xl);
 }
-.Layer__P[data-pbe="3xl"] {
+.Layer__Label[data-pbe="3xl"],
+.Layer__P[data-pbe="3xl"],
+.Layer__Span[data-pbe="3xl"] {
   padding-block-end: var(--spacing-3xl);
 }
-.Layer__P[data-pbs="3xl"] {
+.Layer__Label[data-pbs="3xl"],
+.Layer__P[data-pbs="3xl"],
+.Layer__Span[data-pbs="3xl"] {
   padding-block-start: var(--spacing-3xl);
 }
-.Layer__P[data-pbe="5xl"] {
+.Layer__Label[data-pbe="5xl"],
+.Layer__P[data-pbe="5xl"],
+.Layer__Span[data-pbe="5xl"] {
   padding-block-end: var(--spacing-5xl);
 }
-.Layer__P[data-pbs="5xl"] {
+.Layer__Label[data-pbs="5xl"],
+.Layer__P[data-pbs="5xl"],
+.Layer__Span[data-pbs="5xl"] {
   padding-block-start: var(--spacing-5xl);
 }
-.Layer__P[data-align=left] {
+.Layer__Label[data-align=left],
+.Layer__P[data-align=left],
+.Layer__Span[data-align=left] {
   text-align: left;
 }
-.Layer__P[data-align=center] {
+.Layer__Label[data-align=center],
+.Layer__P[data-align=center],
+.Layer__Span[data-align=center] {
   text-align: center;
 }
-.Layer__P[data-align=right] {
+.Layer__Label[data-align=right],
+.Layer__P[data-align=right],
+.Layer__Span[data-align=right] {
   text-align: right;
 }
-.Layer__P[data-align=justify] {
+.Layer__Label[data-align=justify],
+.Layer__P[data-align=justify],
+.Layer__Span[data-align=justify] {
   text-align: justify;
 }
 .Layer__InvisibleDownload {
   display: none;
 }
+.Layer__TransactionsActions {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--spacing-xs);
+  grid-template-areas: "toggle . download" "search search search";
+}
+@container (min-width: 640px) {
+  .Layer__TransactionsActions {
+    grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr) auto;
+    grid-template-areas: "toggle . search download";
+  }
+}
+@container (min-width: 780px) {
+  .Layer__TransactionsActions {
+    grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr) auto;
+    grid-template-areas: "toggle . search download";
+  }
+}
+@container (min-width: 1024px) {
+  .Layer__TransactionsActions {
+    grid-template-columns: auto minmax(0, 3fr) minmax(0, 1fr) auto;
+    grid-template-areas: "toggle . search download";
+  }
+}
+.Layer__TransactionsActions > [slot=toggle] {
+  grid-area: toggle;
+}
+.Layer__TransactionsActions > [slot=search] {
+  grid-area: search;
+}
+.Layer__TransactionsActions > [slot=download] {
+  grid-area: download;
+}
+.Layer__TransactionsSearchField {
+  display: grid;
+  grid-template-areas: "icon search";
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  background: var(--color-base-0);
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--border-color);
+  padding-inline-end: var(--spacing-3xs);
+}
+.Layer__TransactionsSearchField[data-focus-within] {
+  outline: 2px solid var(--outline-subtle);
+}
+.Layer__TransactionsSearchField > [slot=icon] {
+  grid-area: icon;
+  inline-size: 2rem;
+  block-size: 2rem;
+}
+.Layer__TransactionsSearchField > [slot=search] {
+  grid-area: search;
+}
 .Layer__due-status {
   display: flex;
   flex-direction: column;
@@ -5396,6 +5673,15 @@ tbody .Layer__table__empty-row:first-child {
       var(--base-transparent-10) 100%),
     var(--color-info-warning);
 }
+.Layer__tasks-header__notification[data-status=error] {
+  background:
+    linear-gradient(
+      0deg,
+      var(--base-transparent-10) 0%,
+      var(--base-transparent-10) 100%),
+    var(--color-info-error);
+  color: var(--color-info-error-bg);
+}
 .Layer__tasks-header__notification__text {
   display: flex;
   align-items: center;
@@ -5419,6 +5705,10 @@ tbody .Layer__table__empty-row:first-child {
   transition: all 0.12s ease-in-out;
   white-space: nowrap;
 }
+.Layer__tasks-header__notification[data-status=error] .Layer__tasks-header__notification__button {
+  background: var(--color-info-error-fg);
+  color: var(--color-info-error-bg);
+}
 .Layer__tasks-header__notification__button:hover {
   background: var(--color-base-1000);
 }
@@ -6347,14 +6637,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__syncing__info__text span:first-child {
   color: var(--color-base-800);
 }
-.Layer__header__actions-wrapper {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-.Layer__header__actions {
-  width: 100%;
-}
 .Layer__bank-transactions__list-loader {
   padding: var(--spacing-lg) var(--spacing-md);
 }
@@ -6366,8 +6648,9 @@ tbody .Layer__table__empty-row:first-child {
   z-index: 1;
   left: 0;
   display: flex;
+  flex-direction: column;
   width: 100%;
-  align-items: flex-start;
+  align-items: stretch;
 }
 .Layer__bank-transactions__header__content {
   display: flex;
@@ -6381,8 +6664,6 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile {
   background-color: transparent;
-  max-width: 414px;
-  margin: auto;
 }
 .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile,
 .Layer__bank-transactions__header.Layer__bank-transactions__header--with-date-picker {
@@ -6390,7 +6671,6 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile .Layer__bank-transactions__header__content,
 .Layer__bank-transactions__header.Layer__bank-transactions__header--with-date-picker .Layer__bank-transactions__header__content {
-  width: 100%;
   padding-left: var(--spacing-3xs);
 }
 .Layer__bank-transactions__header--with-date-picker.Layer__bank-transactions__header--mobile .Layer__datepicker__wrapper {
@@ -6639,6 +6919,9 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) 0;
 }
+.Layer__expanded-bank-transaction-row__total-and-btns:empty {
+  display: none;
+}
 .Layer__bank-transaction-row__table-cell--amount-credit,
 .Layer__bank-transaction-list-item__amount-credit {
   justify-content: flex-end;
@@ -6805,6 +7088,18 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-list-item__body .Layer__bank-transaction-row__expand-button {
   margin: 0 var(--spacing-xs);
 }
+.Layer__bank-transaction-list-item__processing-info {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+  color: var(--text-color-primary);
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  box-sizing: border-box;
+}
+.Layer__bank-transaction-list-item__processing-info .Layer__tooltip-trigger {
+  flex: 0 auto;
+}
 .Layer__expanded-bank-transaction-row__submit-btn {
   box-sizing: border-box;
   padding: var(--spacing-md);
@@ -7551,19 +7846,17 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transactions__mobile-list {
   padding: 0;
-  margin: 0;
   display: flex;
   flex-direction: column;
   list-style: none;
   overflow: hidden;
-  max-width: 414px;
   margin: auto;
 }
 .Layer__bank-transaction-mobile-list-item {
   padding: 0;
   margin: var(--spacing-2xs) var(--spacing-md);
   background: var(--color-base-0);
-  box-shadow: 0px 2px 2px 0px var(--color-base-200), 0px 4px 4px 0px var(--color-base-100);
+  box-shadow: 0 2px 2px 0 var(--color-base-200), 0 4px 4px 0 var(--color-base-100);
   border-radius: var(--border-radius-sm);
   opacity: 0;
   transform: scale(0.96);
@@ -7571,10 +7864,6 @@ tbody .Layer__table__empty-row:first-child {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   box-sizing: border-box;
 }
@@ -7625,6 +7914,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   flex-direction: column;
   max-width: 100%;
+  gap: var(--spacing-4xs);
 }
 .Layer__bank-transaction-mobile-list-item__heading__account-name {
   color: var(--color-base-500);
@@ -8634,6 +8924,7 @@ tbody .Layer__table__empty-row:first-child {
   flex-direction: column;
   gap: var(--spacing-4xs);
   justify-content: stretch;
+  min-width: 0;
 }
 .Layer__linked-account-thumb .topbar .topbar-logo {
   display: flex;
@@ -9158,36 +9449,6 @@ tbody .Layer__table__empty-row:first-child {
   padding: 0 0 var(--spacing-sm) var(--spacing-xs);
   position: relative;
 }
-.Layer__pill {
-  position: relative;
-  background-color: var(--badge-bg-color);
-  color: var(--badge-color);
-  border-radius: var(--badge-border-radius);
-  font-size: var(--text-sm);
-  padding: var(--spacing-2xs) var(--spacing-sm);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  white-space: nowrap;
-  user-select: none;
-}
-.Layer__pill svg {
-  margin-right: 0.25rem;
-}
-.Layer__pill--error {
-  background-color: var(--color-info-error-bg);
-  color: var(--color-info-error-fg);
-}
-.Layer__pill--info {
-  background-color: var(--color-info-bg);
-  color: var(--color-info-fg);
-}
-.Layer__pill--actionable {
-  cursor: pointer;
-}
-.Layer__pill--actionable:hover {
-  opacity: 0.7;
-}
 .Layer__ProfitAndLossSummariesListItem {
   all: unset;
   display: grid;
@@ -10043,6 +10304,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   max-width: calc(100vw - 10px);
   z-index: 100;
 }
+.Layer__tooltip[data-width=md] {
+  max-width: 256px;
+}
 .Layer__tooltip .Layer__tooltip-content {
   background: var(--color-base-1000);
   color: var(--color-base-300);