@layerfi/components 0.1.27 → 0.1.29

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;
@@ -931,6 +931,135 @@
 .Layer__datepicker__time input {
   max-width: 100px;
 }
+.Layer__datepicker__popper * {
+  outline-color: var(--color-base-800);
+}
+.Layer__datepicker__popper {
+  border-radius: 8px;
+}
+.Layer__datepicker__popper .react-datepicker__triangle {
+  display: none;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar {
+  border: none;
+  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
+  left: auto;
+  right: 42px;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
+  border-color: var(--color-base-800);
+  border-style: solid;
+  border-width: 1px 1px 0 0;
+  content: "";
+  display: block;
+  height: 6px;
+  position: absolute;
+  top: 10px;
+  width: 6px;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
+  padding: var(--spacing-sm) 0 0;
+  background: white;
+  border: none;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
+  padding: 0 var(--spacing-md) var(--spacing-sm);
+  text-align: left;
+  font-weight: 460;
+  font-family: var(--font-family);
+  font-feature-settings:
+    "cv10" on,
+    "cv05" on,
+    "cv08" on,
+    "ss03" on;
+  font-size: 14px;
+  border-bottom: 1px solid var(--color-base-200);
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
+  padding: var(--spacing-xs) var(--spacing-xs) 0;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
+  width: 32px;
+  height: 32px;
+  color: var(--color-base-500);
+  font-size: 12px;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover {
+  background-color: var(--color-base-400);
+  color: var(--color-base-800);
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected {
+  background-color: var(--color-base-800);
+  color: var(--color-base-100);
+  font-weight: 460;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month {
+  color: var(--color-base-500);
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled {
+  color: var(--color-base-300);
+  cursor: not-allowed;
+}
+.Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected {
+  background-color: var(--color-base-400);
+  color: var(--color-base-800);
+  border-color: var(--color-base-800);
+  outline-color: var(--color-base-800);
+}
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
+  background-color: var(--color-base-800);
+  color: var(--color-base-100);
+  font-weight: 460;
+}
+.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+}
+.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover {
+  background-color: var(--color-base-400);
+  color: var(--color-base-800);
+}
+.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
+  background-color: var(--color-base-800);
+  color: var(--color-base-100);
+  font-weight: 460;
+}
+.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
+  padding: var(--spacing-sm) 0 0;
+  background: white;
+  border: none;
+}
+.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
+  padding: 0 var(--spacing-md) var(--spacing-sm);
+  text-align: left;
+  font-weight: 460;
+  font-family: var(--font-family);
+  font-feature-settings:
+    "cv10" on,
+    "cv05" on,
+    "cv08" on,
+    "ss03" on;
+  font-size: 14px;
+  border-bottom: 1px solid var(--color-base-200);
+}
 .Layer__details-list {
   display: flex;
   flex-direction: column;
@@ -1379,6 +1508,39 @@
   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;
@@ -1996,7 +2158,7 @@
 }
 .Layer__ledger-account__entry-details__table__total-row td {
   font-variation-settings: "wght" var(--font-weight-bold);
-  color: var(--color-base-900);
+  color: var(--text-color-primary);
 }
 .Layer__table.Layer__ledger-account__entry-details__table th,
 .Layer__ledger-account__entry-details__table__total-row td,
@@ -2340,6 +2502,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 {
@@ -2610,6 +2774,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);
@@ -2655,6 +2822,9 @@
   opacity: 1;
   transform: scale(1);
 }
+.Layer__bank-transaction-list-item.Layer__bank-transaction-row--removing {
+  display: none;
+}
 .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__base-row {
   max-height: 60px;
   opacity: 1;
@@ -3430,6 +3600,8 @@
   gap: var(--spacing-sm);
   list-style: none;
   overflow: hidden;
+  max-width: 414px;
+  margin: auto;
 }
 .Layer__bank-transaction-mobile-list-item {
   padding: 0;
@@ -3455,7 +3627,7 @@
   transform: scale(1);
 }
 .Layer__bank-transaction-mobile-list-item.show.Layer__bank-transaction-row--removing {
-  opacity: 0.99999;
+  opacity: 0.99;
 }
 .Layer__bank-transaction-mobile-list-item .Layer__bank-transaction-mobile-list-item__expanded-row {
   height: 0;
@@ -3612,6 +3784,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;
@@ -4228,8 +4403,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;
@@ -4238,6 +4417,7 @@
 }
 .Layer__drawer {
   position: fixed;
+  display: flex;
   bottom: -100%;
   left: 0;
   right: 0;
@@ -4246,9 +4426,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;
@@ -4258,12 +4442,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;
@@ -4334,7 +4530,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);
@@ -4343,6 +4539,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);
 }
@@ -4383,7 +4582,7 @@
   align-items: flex-start;
   justify-content: space-between;
   background: var(--color-base-50);
-  color: var(--color-base-900);
+  color: var(--text-color-primary);
   border-top-left-radius: var(--border-radius-xs);
   border-top-right-radius: var(--border-radius-xs);
   border-bottom-left-radius: 0;
@@ -5164,7 +5363,7 @@
 }
 .Layer__profit-and-loss-summaries__amount,
 .Layer__profit-and-loss-summaries__amount--positive {
-  color: var(--color-base-900);
+  color: var(--text-color-primary);
   font-size: var(--text-md);
 }
 .Layer__profit-and-loss-summaries__amount::before,
@@ -5385,7 +5584,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   font-size: 12px;
 }
 .Layer__profit-and-loss-detailed-charts .pie-center-label__value {
-  fill: var(--color-base-900);
+  fill: var(--text-color-primary);
   font-size: 14px;
 }
 .Layer__profit-and-loss-detailed-charts .filters {
@@ -5518,7 +5717,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__profit-and-loss-detailed-table__row .category-col,
 .Layer__profit-and-loss-detailed-table__row .value-col {
-  color: var(--color-base-900);
+  color: var(--text-color-primary);
 }
 .Layer__profit-and-loss-detailed-table__row .type-col,
 .Layer__profit-and-loss-detailed-table__row .share-col {