@layerfi/components 0.1.109 → 0.1.110

package/dist/index.css

@@ -961,7 +961,7 @@
   gap: var(--spacing-md);
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-md);
+  padding: var(--spacing-lg);
 }
 .Layer__component-header.Layer__component-header--next-line-actions {
   flex-direction: column;
@@ -985,18 +985,6 @@
   align-items: center;
   justify-content: space-between;
 }
-@container (max-width: 760px) {
-  .Layer__component-header {
-    padding: var(--spacing-md);
-  }
-}
-@container (min-width: 1023px) {
-  .Layer__component-header {
-    padding-top: var(--spacing-xl);
-    padding-right: var(--spacing-xl);
-    padding-left: var(--spacing-xl);
-  }
-}
 .Layer__error-boundary {
   padding: var(--spacing-xl);
 }
@@ -6104,22 +6092,10 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-xs);
   align-items: center;
 }
-@container (min-width: 640px) {
+@container (min-width: 768px) {
   .Layer__TransactionsActions {
     grid-template-areas: "toggle . search download-upload";
-    grid-template-columns: auto minmax(0, 2fr) minmax(15rem, 3fr) auto;
-  }
-}
-@container (min-width: 780px) {
-  .Layer__TransactionsActions {
-    grid-template-areas: "toggle . search download-upload";
-    grid-template-columns: auto minmax(0, 3fr) minmax(15rem, 2fr) auto;
-  }
-}
-@container (min-width: 1024px) {
-  .Layer__TransactionsActions {
-    grid-template-areas: "toggle . search download-upload";
-    grid-template-columns: auto minmax(0, 3fr) minmax(15rem, 1fr) auto;
+    grid-template-columns: auto minmax(0, 2fr) 15rem auto;
   }
 }
 .Layer__TransactionsActions > [slot=toggle] {
@@ -11429,10 +11405,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: stretch;
   border-radius: var(--border-radius-sm);
-  box-shadow:
-    0 0 0 1px rgba(16, 24, 40, 0.04),
-    0 2px 4px 0 rgba(16, 24, 40, 0.06),
-    0 4px 12px 0 rgba(16, 24, 40, 0.08);
+  border: 1px solid var(--border-color);
   margin-right: var(--spacing-xl);
   margin-bottom: var(--spacing-xl);
   margin-left: var(--spacing-xl);
@@ -11558,7 +11531,6 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 759px) and (min-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
     margin-left: 0;
@@ -11567,7 +11539,6 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
     margin-left: 0;
@@ -11642,24 +11613,24 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-detailed-charts__header--tablet,
 .Layer__profit-and-loss-detailed-charts__header {
   display: flex;
-  justify-content: space-between;
   align-items: flex-start;
-  padding: var(--spacing-xl);
+  justify-content: space-between;
+  padding: var(--spacing-lg);
   padding-bottom: var(--spacing-lg);
   box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
 }
 .Layer__profit-and-loss-detailed-charts__header--tablet button.Layer__btn.Layer__btn--icon-only,
 .Layer__profit-and-loss-detailed-charts__header button.Layer__btn.Layer__btn--icon-only {
-  width: 32px;
   height: 32px;
   min-height: 32px;
+  width: 32px;
   padding: 0;
 }
 header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: none;
-  justify-content: flex-start;
   gap: var(--spacing-md);
   align-items: center;
+  justify-content: flex-start;
 }
 @container (max-width: 1023px) and (min-width: 768px) {
   header.Layer__profit-and-loss-detailed-charts__header {
@@ -11688,20 +11659,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-charts {
   width: 100%;
-  background: var(--color-base-0);
   border-radius: var(--border-radius-sm);
+  background: var(--color-base-0);
 }
 .Layer__profit-and-loss-detailed-charts .chart-field {
   width: 100%;
 }
 .Layer__profit-and-loss-detailed-charts .chart-container {
-  width: 100%;
+  box-sizing: border-box;
   height: 280px;
+  width: 100%;
   padding-top: var(--spacing-2xl);
+  padding-right: var(--spacing-md);
   padding-bottom: var(--spacing-lg);
   padding-left: var(--spacing-md);
-  padding-right: var(--spacing-md);
-  box-sizing: border-box;
 }
 @container (max-width: 280px) {
   .Layer__profit-and-loss-detailed-charts .chart-container {
@@ -11727,35 +11698,35 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .filters {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--spacing-xs);
   align-items: center;
-  margin: 0 var(--spacing-md);
   padding: var(--spacing-2xs) var(--spacing-xs);
-  gap: var(--spacing-xs);
   border-bottom: 1px solid var(--color-base-300);
+  margin: 0 var(--spacing-md);
 }
 .Layer__profit-and-loss-detailed-charts .type-select {
-  border-color: transparent;
+  display: inline-flex;
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
+  border-color: transparent;
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  display: inline-flex;
 }
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__control {
-  border-color: transparent;
+  box-shadow: none;
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
+  border-color: transparent;
   font-variant-numeric: lining-nums proportional-nums;
   font-feature-settings:
     "cv10" on,
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  box-shadow: none;
 }
 .Layer__profit-and-loss-detailed-charts .type-select .Layer__select__placeholder {
   font-size: 12px;
@@ -11772,17 +11743,17 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: none;
 }
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu {
+  z-index: 2;
   width: min-content;
   max-width: 300px;
-  z-index: 2;
 }
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option {
+  z-index: 999;
+  overflow: hidden;
   width: 100%;
   font-size: 12px;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
-  z-index: 999;
 }
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-focused,
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-selected,
@@ -11791,8 +11762,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:active,
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-visible,
 .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-within {
-  color: var(--text-color-primary);
   background: var(--color-base-100);
+  color: var(--text-color-primary);
 }
 .Layer__profit-and-loss-detailed-charts .details-container {
   padding: var(--spacing-md);
@@ -11804,9 +11775,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th,
 .Layer__profit-and-loss-detailed-charts .details-container table td {
-  text-align: left;
-  font-size: 12px;
   padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: 12px;
+  text-align: left;
   transition: color 150ms ease-out;
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th:last-child,
@@ -11816,11 +11787,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   text-align: right;
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th {
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-base-300);
   cursor: pointer;
   color: var(--color-base-500);
-  border-bottom: 1px solid var(--color-base-300);
   transition: color 150ms ease-out;
-  padding-bottom: var(--spacing-sm);
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th:hover {
   color: var(--color-base-800);
@@ -11835,13 +11806,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-charts .details-container .share-cell-content {
   display: flex;
+  gap: var(--spacing-2xs);
   align-items: center;
   justify-content: flex-end;
-  gap: var(--spacing-2xs);
 }
 .Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .share-icon {
-  width: 12px;
   height: 12px;
+  width: 12px;
   border-radius: 2px;
 }
 .Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .Layer__value-icon--uncategorized {
@@ -11862,9 +11833,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   width: 100%;
 }
 .Layer__profit-and-loss-detailed-table__row {
-  transition: background-color 300ms ease-out;
-  background: transparent;
   border-radius: 2px;
+  background: transparent;
+  transition: background-color 300ms ease-out;
 }
 .Layer__profit-and-loss-detailed-table__row .category-col,
 .Layer__profit-and-loss-detailed-table__row .value-col {
@@ -11894,8 +11865,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 @container (max-width: 1023px) {
   .Layer__profit-and-loss-detailed-charts {
-    width: 100%;
     height: 100%;
+    width: 100%;
   }
 }
 @container (max-width: 1023px) and (min-width: 768px) {
@@ -11914,14 +11885,14 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
   }
   .Layer__profit-and-loss-detailed-charts .header--tablet {
     display: flex;
     flex-direction: column;
-    padding-left: var(--spacing-xl);
     padding-top: var(--spacing-lg);
+    padding-left: var(--spacing-xl);
   }
   .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__text {
     margin: 0;