@layerfi/components 0.1.28 → 0.1.30

package/dist/styles/index.css

@@ -635,7 +635,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-@media screen and (min-width: 760px) {
+@container (min-width: 760px) {
   .Layer__date-month-picker__wrapper.Layer__date-month-picker__wrapper--current-date-option .Layer__date-month-picker {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -707,7 +707,7 @@
   background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
   z-index: 2;
 }
-@media screen and (max-width: 760px) {
+@container (max-width: 760px) {
   .Layer__date-month-picker__wrapper .Layer__date-month-picker {
     border: none;
     background: none;
@@ -1500,14 +1500,44 @@
   width: calc(100% + 60px);
   margin-left: -30px;
 }
-.Layer__category-menu {
-  width: 17rem;
-}
 .Layer__category-menu.Layer__category-menu--full {
   width: 100%;
   max-width: 100%;
   flex: 1;
 }
+.Layer__category-menu__drawer-btn {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  color: var(--color-base-500);
+  padding: 8px;
+  box-sizing: border-box;
+  position: relative;
+  border: 1px solid var(--border-color);
+  border-radius: var(--input-border-radius);
+  border-width: 0px;
+  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
+  margin: 1px;
+  font-family: var(--font-family);
+  font-size: var(--input-font-size);
+  line-height: 140%;
+  background-color: var(--color-base-0);
+  min-height: 39px;
+  align-items: center;
+  cursor: pointer;
+}
+.Layer__category-menu__drawer-btn:hover {
+  color: var(--text-color-primary);
+  background-color: var(--color-base-50);
+}
+.Layer__category-menu__drawer-btn.Layer__category-menu__drawer-btn--selected {
+  color: var(--text-color-primary);
+}
+.Layer__category-menu__drawer-btn .Layer__category-menu__drawer-btn__arrow {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+}
 @media screen and (max-width: 400px) {
   .Layer__select__menu-portal .Layer__select__option {
     font-size: var(--text-sm) !important;
@@ -1796,6 +1826,12 @@
   transform: scaleX(0.98);
   opacity: 0;
 }
+.Layer__table__empty-row {
+  background: var(--color-base-100);
+  height: var(--spacing-2xs);
+  border-top: 1px solid var(--color-base-200);
+  border-bottom: 1px solid var(--color-base-200);
+}
 .Layer__tabs {
   display: flex;
   width: max-content;
@@ -2069,6 +2105,41 @@
     align-self: flex-start;
   }
 }
+.Layer__panel_view-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  container-type: inline-size;
+}
+.Layer__panel_view-header {
+  display: flex;
+  width: 100%;
+  border-bottom: 1px solid var(--color-base-200);
+  container-type: inline-size;
+}
+.Layer__panel_view-header__content {
+  padding: var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1406px;
+}
+.Layer__panel_view-header__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+@container (max-width: 760px) {
+  .Layer__panel_view-header__content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+  .Layer__panel_view-header__content .Layer__heading {
+    align-self: flex-start;
+  }
+}
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
   width: 100%;
@@ -2233,221 +2304,153 @@
   background-color: var(--background-color);
 }
 .Layer__balance-sheet * {
-  color: var(--text-color);
-  stroke: var(--text-color);
-  font-family: Inter;
-  font-weight: 500;
-  font-style: normal;
-}
-.Layer__balance-sheet__table {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 1px 0;
-  font-size: 1rem;
+  font-family: var(--font-family);
+  font-feature-settings:
+    "cv10" on,
+    "cv01" on,
+    "cv05" on,
+    "cv08" on,
+    "ss03" on;
 }
-.Layer__balance-sheet__header {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  padding: 0 1rem;
+.Layer__balance-sheet tbody .Layer__table__empty-row:first-child {
+  display: none;
 }
-.Layer__balance-sheet__title {
+.Layer__balance-sheet .Layer__balance-sheet__title {
   display: inline;
   flex: 1;
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  font-size: var(--text-heading);
+  margin: 0;
 }
-.Layer__balance-sheet__date {
-  font-size: 0.75em;
+@container (max-width: 800px) {
+  .Layer__balance-sheet .Layer__balance-sheet__header {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+  }
+}
+@container (max-width: 540px) {
+  .Layer__balance-sheet .Layer__balance-sheet__header {
+    flex-direction: row;
+    gap: var(--spacing-sm);
+    flex-wrap: wrap;
+  }
+  .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions {
+    flex-wrap: wrap;
+  }
+  .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions__date-picker {
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
 }
-.Layer__balance-sheet__date::before {
-  content: " - as of ";
+@container (min-width: 1400px) {
+  .Layer__balance-sheet .Layer__table tr td:first-child .Layer__table-cell-content,
+  .Layer__balance-sheet .Layer__table tr td:last-child .Layer__table-cell-content,
+  .Layer__balance-sheet .Layer__table tr th:first-child.Layer__table-header,
+  .Layer__balance-sheet .Layer__table tr th:last-child.Layer__table-header {
+    padding-left: 0;
+  }
 }
-.Layer__balance-sheet__download-button {
-  align-self: center;
-  border: 2px solid var(--border-color);
-  background-color: var(--background-color);
-  padding: 0.5rem;
-  border-radius: var(--corner-radius);
-  margin-left: 0.5rem;
+.Layer__balance-sheet__header {
   display: flex;
+  flex: 1;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.Layer__balance-sheet__download-button:active {
-  background-color: var(--active);
+  padding: var(--spacing-sm) var(--spacing-md);
 }
-.Layer__balance-sheet__download-button svg {
-  margin-right: 0.5rem;
+.Layer__balance-sheet__header.Layer__balance-sheet__header--no-title .Layer__balance-sheet__actions {
+  flex: 1;
 }
-.Layer__balance-sheet-date-picker {
-  align-items: center;
-  justify-content: center;
+.Layer__balance-sheet__header .Layer__balance-sheet__actions {
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
 }
-.Layer__balance-sheet-date-picker button {
-  position: relative;
-  border: 2px solid var(--border-color);
-  background-color: var(--background-color);
-  padding: 0.5rem;
-  border-radius: var(--corner-radius);
+.Layer__balance-sheet__header .Layer__balance-sheet__actions .Layer__balance-sheet__actions__date-picker {
   display: flex;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.Layer__balance-sheet-date-picker button:active {
-  background-color: var(--active);
-}
-.Layer__balance-sheet-date-picker button svg {
-  margin-right: 0.5rem;
+  gap: var(--spacing-xs);
 }
-.Layer__balance-sheet-date-picker button input {
-  position: absolute;
-  z-index: -1;
-  bottom: 0;
-  left: 0;
-  width: 1px;
-  height: 100%;
-  opacity: 0;
+.Layer__balance-sheet__table {
+  width: 100%;
+  border-collapse: collapse;
 }
-.Layer__balance-sheet-row {
-  padding: 1em;
-  background-color: var(--background-color);
+.Layer__balance-sheet__table .Layer__balance-sheet-row {
   font-size: 1em;
+  height: 52px;
 }
-.Layer__balance-sheet-row * {
-  min-height: 0;
-}
-.Layer__balance-sheet-row__children {
-  display: grid;
-  grid-column: span 2;
-  grid-template-columns: subgrid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  transition: grid-template-rows var(--transition-speed);
-}
-.Layer__balance-sheet-row__children--expanded {
-  grid-template-rows: 1fr;
-}
-.Layer__balance-sheet-row__children--content {
-  min-height: 0;
-  display: grid;
-  grid-column: span 2;
-  grid-template-columns: subgrid;
-}
-.Layer__balance-sheet-row__label {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.Layer__balance-sheet-row__label svg {
-  stroke: var(--text-color);
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-right: 0.25rem;
-  transition: transform var(--transition-speed);
-  transform: rotate(-90deg);
-}
-.Layer__balance-sheet-row__label--expanded svg {
-  transform: rotate(0deg);
-}
-.Layer__balance-sheet-row__value {
-  display: flex;
+.Layer__balance-sheet__table .Layer__balance-sheet-row .Layer__balance-sheet-cell__value .Layer__table-cell-content {
   justify-content: flex-end;
-  align-items: center;
-}
-.Layer__balance-sheet-row__value svg {
-  stroke: var(--text-color);
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-right: 0.25rem;
-}
-.Layer__balance-sheet-row__value--amount-positive::before {
-  content: "$";
 }
-.Layer__balance-sheet-row__value--amount-negative::before {
-  content: "-$";
-}
-.Layer__balance-sheet-row__label--depth-0 {
-  font-weight: 700;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-0 .Layer__balance-sheet-cell__label .Layer__table-cell-content {
+  font-size: var(--text-lg);
+  font-weight: 540;
+  color: var(--text-color-primary);
 }
-.Layer__balance-sheet-row__value--depth-0 {
-  font-weight: 700;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1:not(.Layer__balance-sheet-row--display-children-true) {
+  background-color: var(--color-base-50);
 }
-.Layer__balance-sheet-row__label--depth-1 {
-  padding-right: 2em;
-  padding-left: 2em;
-  font-size: 0.8em;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__balance-sheet-cell__label {
+  padding-left: calc(40px - var(--spacing-sm));
 }
-.Layer__balance-sheet-row__value--depth-1 {
-  font-size: 0.8em;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__table-cell-content {
+  font-size: var(--text-md);
+  font-variation-settings: "wght" var(--font-weight-bold);
+  color: var(--color-base-700);
 }
-.Layer__balance-sheet-row__label--depth-2 {
-  padding-right: 2em;
-  padding-left: 4em;
-  font-size: 0.8em;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2:not(.Layer__balance-sheet-row--display-children-true) {
+  background-color: var(--color-base-50);
 }
-.Layer__balance-sheet-row__value--depth-2 {
-  font-size: 0.8em;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__balance-sheet-cell__label {
+  padding-left: calc(80px - var(--spacing-sm));
 }
-.Layer__balance-sheet-row__label--display-children-true {
-  font-weight: bold;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__table-cell-content {
+  font-size: var(--text-md);
+  font-weight: 460;
+  color: var(--text-color-secondary);
 }
-.Layer__balance-sheet-row__value--display-children-true {
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-true {
   font-weight: bold;
+  cursor: pointer;
 }
-.Layer__balance-sheet-row__label--display-children-false {
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-false {
   font-weight: normal;
 }
-.Layer__balance-sheet-row__label--display-children-false svg {
-  display: none;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation {
+  background: var(--color-base-100);
 }
-.Layer__balance-sheet-row__label--display-children-false {
-  font-weight: normal;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation .Layer__table-cell-content {
+  font-size: var(--text-md);
+  font-variation-settings: "wght" var(--font-weight-bold);
+  color: var(--text-color-primary);
 }
-.Layer__balance-sheet-row__label--display-children-false svg {
-  display: none;
+.Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--expanded svg {
+  transform: rotate(0deg);
 }
-.Layer__balance-sheet-row__label--variant-summation {
-  font-weight: bold;
+.Layer__balance-sheet__table .Layer__table-cell--last {
+  text-align: right;
 }
-.Layer__balance-sheet-row__value--variant-summation {
-  font-weight: bold;
+.Layer__balance-sheet__table .Layer__table-cell__content-wrapper {
+  display: flex;
+  align-items: center;
 }
-.Layer__balance-sheet-row__value--expanded {
-  color: transparent;
-  user-select: none;
+.Layer__balance-sheet__table .Layer__table-cell__content-wrapper .Layer__table__expand-icon {
+  margin: 0;
+  transition: transform var(--transition-speed);
+  transform: rotate(-90deg);
 }
-@keyframes pulse {
-  from {
-    opacity: 100%;
-  }
-  to {
-    opacity: 20%;
-  }
+.Layer__balance-sheet__table .Layer__balance-sheet-row {
+  border-left: 4px solid transparent;
 }
-.Layer__balance-sheet-row__skeleton-text {
-  width: 4rem;
-  background-color: var(--text-skeleton-color);
-  height: 1rem;
-  border-radius: var(--corner-radius);
+.Layer__balance-sheet__table .Layer__balance-sheet-row:not(.Layer__balance-sheet-row--display-children-true) {
+  border-left: 4px solid var(--color-base-400);
 }
-.Layer__balance-sheet-row__children--skeleton {
-  background-color: var(--background-color);
-  padding-left: 1rem;
+.Layer__balance-sheet__table .Layer__balance-sheet-cell__label .Layer__table-cell-content {
+  padding-left: 0;
 }
-.Layer__balance-sheet-row__value--skeleton,
-.Layer__balance-sheet-row__label--skeleton {
-  animation: 1s pulse ease-in-out alternate infinite;
+.Layer__balance-sheet__table .Layer__balance-sheet-cell__value--positive .Layer__table-cell-content::before {
+  content: "$";
 }
-.Layer__balance-sheet-row__value--skeleton svg,
-.Layer__balance-sheet-row__label--skeleton svg {
-  stroke: var(--text-skeleton-color);
+.Layer__balance-sheet__table .Layer__balance-sheet-cell__value--negative .Layer__table-cell-content::before {
+  content: "-$";
 }
 .Layer__bank-transactions {
   max-width: var(--max-component-width);
@@ -2469,6 +2472,8 @@
 }
 .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 {
@@ -2569,7 +2574,7 @@
   flex: 1;
   color: var(--text-color-primary);
   white-space: nowrap;
-  max-width: 350px;
+  padding-left: 10px;
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-flex;
@@ -2739,6 +2744,9 @@
 .Layer__expanded-bank-transaction-row__file-upload {
   padding: 0 var(--spacing-md);
   padding-bottom: var(--spacing-sm);
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 .Layer__bank-transaction-row__actions-cell {
   border-left: 1px solid var(--border-color);
@@ -3562,6 +3570,8 @@
   gap: var(--spacing-sm);
   list-style: none;
   overflow: hidden;
+  max-width: 414px;
+  margin: auto;
 }
 .Layer__bank-transaction-mobile-list-item {
   padding: 0;
@@ -3744,6 +3754,9 @@
   padding-bottom: var(--spacing-lg);
   font-size: 18px;
 }
+.Layer__bank-transaction-mobile-list-item__categories_list-container {
+  width: 100%;
+}
 .Layer__component-container.Layer__chart-of-accounts {
   display: flex;
   align-items: stretch;
@@ -4360,8 +4373,12 @@
   left: 0;
   right: 0;
   bottom: 0;
+  opacity: 0;
   z-index: 1000;
-  transition: background 0.3s ease-in-out;
+  transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.Layer__drawer-background.open.closing {
+  opacity: 0;
 }
 .Layer__drawer-background.open {
   display: block;
@@ -4370,6 +4387,7 @@
 }
 .Layer__drawer {
   position: fixed;
+  display: flex;
   bottom: -100%;
   left: 0;
   right: 0;
@@ -4378,9 +4396,13 @@
   width: 100%;
   max-height: 80%;
   overflow-y: auto;
-  padding: var(--spacing-xl) 28px 28px 28px;
+  padding: 0 14px;
   border-radius: var(--spacing-md) var(--spacing-md) 0px 0px;
   transition: bottom 0.2s ease-in-out;
+  border: 28px solid var(--color-base-0);
+  border-left: 14px solid var(--color-base-0);
+  border-right: 14px solid var(--color-base-0);
+  box-sizing: border-box;
 }
 .Layer__drawer::after {
   position: absolute;
@@ -4390,12 +4412,24 @@
   background-color: var(--color-base-50);
   left: 50%;
   transform: translateX(-50%);
-  top: 16px;
+  top: 0px;
   border-radius: 80px;
 }
-.Layer__drawer.open {
+.Layer__drawer.open:not(.closing) {
   bottom: 0;
 }
+@media (min-width: 414px) {
+  .Layer__drawer {
+    max-height: calc(82% - 32px);
+    max-width: 414px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: var(--spacing-md);
+  }
+  .Layer__drawer.open:not(.closing) {
+    bottom: 32px;
+  }
+}
 .Layer__chevron {
   stroke: var(--text-color);
   transition: transform 0.33s;
@@ -4466,7 +4500,7 @@
   justify-content: center;
   flex: 1;
   max-width: 272px;
-  min-height: 135px;
+  min-height: 115px;
   padding: var(--spacing-2xs);
   border-radius: var(--border-radius-sm);
   background: var(--base-transparent-1);
@@ -4475,6 +4509,9 @@
 .Layer__linked-accounts__new-account.--as-widget {
   min-height: 90px;
 }
+.Layer__linked-accounts__new-account.--show-ledger-balance {
+  min-height: 135px;
+}
 .Layer__linked-accounts__new-account:hover {
   background: var(--base-transparent-2);
 }