@layerfi/components 0.1.61 → 0.1.63

package/dist/styles/index.css

@@ -10,6 +10,8 @@
 .Layer__toasts-container,
 .Layer__drawer,
 .Layer__variables,
+.Layer__actionable-list__tooltip-content,
+.Layer__tasks-component,
 #Layer__datepicker__portal {
   --color-black: #1a1a1a;
   --color-white: white;
@@ -80,6 +82,8 @@
   --text-md: 14px;
   --text-lg: 16px;
   --text-heading: 24px;
+  --text-heading-page: var(--text-heading);
+  --text-heading-view: 20px;
   --text-heading-sm: 16px;
   --font-weight-normal: 460;
   --font-weight-bold: 540;
@@ -214,9 +218,9 @@
   padding: 0;
 }
 .Layer__actionable-list li {
-  padding: var(--spacing-xs) 0;
+  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
   gap: var(--spacing-2xs);
-  border-bottom: 1px solid var(--color-base-100);
+  border-radius: var(--spacing-xs);
   box-sizing: border-box;
   font-size: 12px;
   cursor: pointer;
@@ -224,12 +228,39 @@
   align-items: center;
   justify-content: space-between;
 }
+.Layer__actionable-list li .Layer__actionable-list__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 36ch;
+  gap: var(--spacing-2xs);
+}
+.Layer__actionable-list li .Layer__actionable-list__content .Layer__actionable-list__content-description {
+  color: var(--color-base-500);
+}
 .Layer__actionable-list li.Layer__actionable-list-item--secondary {
   color: var(--color-base-500);
 }
 .Layer__actionable-list li.Layer__actionable-list-item--secondary.Layer__actionable-list-item--as-link:hover {
   color: var(--color-base-1000);
 }
+.Layer__actionable-list li.Layer__actionable-list__item--selected {
+  background-color: var(--color-base-50);
+}
+.Layer__actionable-list .Layer__actionable-list__select {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  border-radius: 50%;
+  border: 1px solid var(--color-base-300);
+}
+.Layer__actionable-list .Layer__actionable-list__select.Layer__actionable-list__select--selected {
+  border: 1px solid var(--color-info-success);
+  color: var(--color-info-success);
+  background-color: var(--color-info-success-bg);
+  align-items: center;
+  justify-content: center;
+}
 .Layer__actionable_row {
   display: flex;
   padding: var(--spacing-md);
@@ -2160,6 +2191,11 @@
   justify-content: space-between;
   align-items: center;
 }
+.Layer__select__menu-portal .Layer__select__option-menu-content .Layer__select__option-menu--name {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
 .Layer__select__menu-portal .Layer__select__option-menu-content-check {
   margin-top: 2px;
 }
@@ -2477,37 +2513,72 @@
   background: var(--color-base-100);
 }
 .Layer__table .Layer__table-row--depth-0 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 1);
+  padding-left: calc(var(--spacing-lg) * 0 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-1 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 2);
+  padding-left: calc(var(--spacing-lg) * 1 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-2 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 3);
+  padding-left: calc(var(--spacing-lg) * 2 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-3 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 4);
+  padding-left: calc(var(--spacing-lg) * 3 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-4 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 5);
+  padding-left: calc(var(--spacing-lg) * 4 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-5 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 6);
+  padding-left: calc(var(--spacing-lg) * 5 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-6 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 7);
+  padding-left: calc(var(--spacing-lg) * 6 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-7 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 8);
+  padding-left: calc(var(--spacing-lg) * 7 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-8 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 9);
+  padding-left: calc(var(--spacing-lg) * 8 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-9 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 10);
+  padding-left: calc(var(--spacing-lg) * 9 + var(--spacing-md));
 }
 .Layer__table .Layer__table-row--depth-10 td:nth-child(1) .Layer__table-cell-content {
-  padding-left: calc(var(--spacing-lg) * 11);
+  padding-left: calc(var(--spacing-lg) * 10 + var(--spacing-md));
+}
+@container (min-width: 1400px) {
+  .Layer__table .Layer__table-row--depth-0 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 0 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-1 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 1 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-2 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 2 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-3 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 3 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-4 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 4 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-5 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 5 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-6 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 6 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-7 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 7 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-8 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 8 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-9 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 9 + var(--spacing-xl));
+  }
+  .Layer__table .Layer__table-row--depth-10 td:nth-child(1) .Layer__table-cell-content {
+    padding-left: calc(var(--spacing-lg) * 10 + var(--spacing-xl));
+  }
 }
 .Layer__table .Layer__table-cell {
   font-size: var(--text-md);
@@ -2546,15 +2617,6 @@
   height: 16px;
   margin-right: 8px;
 }
-.Layer__table tr th:nth-child(1).Layer__table-header,
-.Layer__table tr td:nth-child(1) .Layer__table-cell-content {
-  padding-left: var(--spacing-lg);
-}
-.Layer__table tr td:last-child .Layer__table-cell-content,
-.Layer__table tr th:last-child.Layer__table-header {
-  justify-content: flex-end;
-  padding-right: var(--spacing-lg);
-}
 .Layer__table-cell-content-indentation {
   height: 100%;
   display: flex;
@@ -2749,7 +2811,9 @@
   .Layer__table tr td:first-child .Layer__table-cell-content,
   .Layer__table tr td:last-child .Layer__table-cell-content,
   .Layer__table tr th:first-child.Layer__table-header,
-  .Layer__table tr th:last-child.Layer__table-header {
+  .Layer__table tr th:last-child.Layer__table-header,
+  .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content,
+  .Layer__table tr th:last-child.Layer__table-cell .Layer__table-cell-content {
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
   }
@@ -2917,6 +2981,18 @@ tbody .Layer__table__empty-row:first-child {
   font-size: var(--text-heading-sm);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
+.Layer__heading--view,
+.Layer__heading.Layer__heading--view {
+  color: var(--text-color-primary);
+  font-size: var(--text-heading-view);
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
+.Layer__heading--page,
+.Layer__heading.Layer__heading--page {
+  color: var(--text-color-primary);
+  font-size: var(--text-heading-page);
+  font-variation-settings: "wght" var(--font-weight-bold);
+}
 .Layer__text {
   font-family: var(--font-family);
   font-variation-settings: "wght" var(--font-weight-normal);
@@ -3072,11 +3148,12 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__view .Layer__view-main {
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-lg);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
   container-type: inline-size;
+  box-sizing: border-box;
 }
 .Layer__view .Layer__view-main .Layer__toggle {
   border-radius: 6px;
@@ -3090,32 +3167,44 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__view .Layer__view-header {
   display: flex;
   width: 100%;
-  border-bottom: 1px solid var(--color-base-200);
+  max-width: 100%;
+  overflow: auto;
   container-type: inline-size;
   position: relative;
   z-index: 1;
+  border-bottom: 1px solid var(--border-color);
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+}
+.Layer__view .Layer__view-header .Layer__header__row:last-child {
+  border-width: 0;
+}
+.Layer__view .Layer__view-header__title + .Layer__view-header__children {
+  width: min-content;
+}
+.Layer__view .Layer__view-header__title {
+  padding: var(--spacing-md) var(--spacing-sm);
+  width: 100%;
+  min-height: 44px;
+  align-items: center;
+  display: flex;
 }
 .Layer__view .Layer__view-header__content {
-  padding: var(--spacing-lg);
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  max-width: 1406px;
+  max-width: 1460px;
 }
-.Layer__view .Layer__view-header__controls {
-  display: flex;
-  align-items: center;
+.Layer__view .Layer__view-header--paddings .Layer__view-header__content {
+  padding: var(--spacing-md);
 }
-@container (max-width: 760px) {
-  .Layer__view .Layer__view-header__content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-sm);
-  }
-  .Layer__view .Layer__view-header__content .Layer__heading {
-    align-self: flex-start;
-  }
+.Layer__view .Layer__view-header--paddings .Layer__view-header__content .Layer__view-header__children {
+  gap: var(--spacing-md);
+}
+.Layer__view .Layer__view-header__children {
+  width: 100%;
+  display: flex;
 }
 .Layer__view.Layer__view--panel .Layer__view-main {
   padding: 0;
@@ -3123,13 +3212,10 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__view.Layer__view--panel .Layer__view-header {
   position: relative;
   z-index: 1;
+  padding: 0;
 }
-.Layer__view.Layer__view--panel .Layer__view-header__controls {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  flex-wrap: wrap;
-  flex-grow: 1;
+.Layer__view.Layer__view--panel .Layer__view-header__content {
+  max-width: 1406px;
 }
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
@@ -4791,6 +4877,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-mobile-list-item__categories_list-title {
   padding-top: var(--spacing-2xs);
   padding-bottom: var(--spacing-lg);
+  padding-left: var(--spacing-md);
   font-size: 18px;
 }
 .Layer__bank-transaction-mobile-list-item__categories_list-container {
@@ -6373,7 +6460,6 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
   justify-content: flex-start;
   gap: var(--spacing-md);
-  flex-wrap: wrap;
 }
 .Layer__compare__options .Layer__input-tooltip {
   flex: 1;
@@ -7256,6 +7342,21 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-top: 2px;
   max-width: 100%;
 }
+.Layer__actionable-list__tooltip-content {
+  z-index: 99999;
+  top: 100px !important;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.Layer__actionable-list__tooltip-content .Layer__tooltip-content {
+  margin-right: auto;
+  max-width: 220px;
+  border-radius: var(--border-radius-3xs);
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  background-color: var(--color-base-800);
+  color: var(--color-base-0);
+}
 .Layer__toasts-container {
   position: fixed;
   bottom: 20px;