@layerfi/components 0.1.93 → 0.1.94-alpha

package/dist/index.css

@@ -4472,8 +4472,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 +4481,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 +4508,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] {
@@ -4680,6 +4688,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack {
   display: flex;
 }
+.Layer__Stack[data-fluid] {
+  flex: 1;
+}
 .Layer__Stack[data-direction=row] {
   flex-direction: row;
 }
@@ -4713,6 +4724,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 +4739,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 +4754,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 +4769,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 +4784,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 +4799,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 +4814,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 +4829,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 +4844,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 +4859,40 @@ 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;
+  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 {
+  -webkit-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 +4984,221 @@ 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, 1fr) minmax(0, 2fr) auto;
+    grid-template-areas: "toggle . search download";
+  }
+}
+@container (min-width: 780px) {
+  .Layer__TransactionsActions {
+    grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr) auto;
+    grid-template-areas: "toggle . search download";
+  }
+}
+@container (min-width: 1024px) {
+  .Layer__TransactionsActions {
+    grid-template-columns: auto minmax(0, 1fr) 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;
+  border-radius: var(--border-radius-xs);
+  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 +5613,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 +5645,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 +6577,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 +6588,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 +6604,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 {
@@ -6805,6 +7026,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,7 +7784,6 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transactions__mobile-list {
   padding: 0;
-  margin: 0;
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -7563,7 +7795,7 @@ tbody .Layer__table__empty-row:first-child {
   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 +7803,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 +7853,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);
@@ -10043,6 +10272,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);