@layerfi/components 0.1.22 → 0.1.24

package/dist/styles/index.css

@@ -5,7 +5,9 @@
 .Layer__component,
 .Layer__view,
 .Layer__select__menu-portal,
-.Layer__tooltip {
+.Layer__tooltip,
+.Layer__toasts-container,
+.Layer__drawer {
   --color-black: #1a1a1a;
   --color-white: white;
   --color-info-success: hsl(145, 45%, 42%);
@@ -194,6 +196,28 @@
 .Layer__sortable-col.sort--asc .Layer__sort-arrows .asc-arrow {
   stroke: var(--color-base-1000);
 }
+.Layer__actionable-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.Layer__actionable-list li {
+  padding: var(--spacing-xs) 0;
+  gap: var(--spacing-2xs);
+  border-bottom: 1px solid var(--color-base-100);
+  box-sizing: border-box;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.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_row {
   display: flex;
   padding: var(--spacing-md);
@@ -321,6 +345,9 @@
   transition: all 150ms ease-out;
   padding: var(--spacing-2xs) var(--spacing-sm);
 }
+.Layer__btn.Layer__btn--full-width {
+  width: 100%;
+}
 .Layer__btn.Layer__btn--with-primary-icon {
   padding: 0;
 }
@@ -382,6 +409,9 @@
   color: var(--btn-secondary-color);
   background: var(--btn-secondary-bg-color);
 }
+.Layer__download-retry-btn {
+  width: 122px;
+}
 .Layer__btn--primary {
   color: var(--btn-color-primary);
   background: var(--btn-bg-color-primary);
@@ -583,6 +613,26 @@
 .Layer__chart_y-axis-tick tspan {
   font-size: var(--text-sm);
 }
+.Layer__date-month-picker__wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+@media screen and (min-width: 500px) {
+  .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;
+  }
+  .Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
+    border: 1px solid var(--input-border-color);
+    border-left: none;
+    box-shadow: none;
+  }
+}
 .Layer__date-month-picker {
   width: 210px;
   font-size: 14px;
@@ -644,6 +694,35 @@
   background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
   z-index: 2;
 }
+@media screen and (max-width: 500px) {
+  .Layer__date-month-picker__wrapper .Layer__date-month-picker {
+    border: none;
+    background: none;
+    width: 175px;
+  }
+  .Layer__date-month-picker__wrapper .Layer__date-month-picker__button {
+    margin: 0 0.125rem;
+    box-shadow: 0px 1px 2px 0px var(--base-transparent-6, rgba(16, 24, 40, 0.06)), 0px 0px 0px 1px var(--color-base-300);
+    border-radius: 4px;
+  }
+  .Layer__date-month-picker__wrapper .Layer__date-month-picker__effect-blur {
+    right: 0;
+    max-width: 70px;
+    background: linear-gradient(-90deg, #f7f8fa 75%, rgba(255, 255, 255, 0) 100%);
+  }
+  .Layer__date-month-picker__wrapper .Layer__date-month-picker__button--disabled {
+    background-color: var(--color-base-200);
+  }
+  .Layer__date-month-picker__wrapper .Layer__date-month-picker__labels-container {
+    width: 550px;
+  }
+  .Layer__date-month-picker__wrapper .Layer__date-month-picker__label {
+    padding-left: 0;
+    padding-right: 75px;
+    justify-content: flex-end;
+    font-size: 12px;
+  }
+}
 .Layer__hover-menu {
   position: relative;
   display: flex;
@@ -754,6 +833,11 @@
     0px 2px 4px 0px var(--base-transparent-6),
     0px 0px 0px 1px var(--base-transparent-4);
 }
+.Layer__component--no-bg {
+  border-width: 0;
+  box-shadow: none;
+  background: transparent;
+}
 .Layer__component-header {
   padding: var(--spacing-md);
   display: flex;
@@ -1017,6 +1101,21 @@
   height: 36px;
   border-radius: 6px;
 }
+.Layer__toggle.Layer__toggle--xsmall {
+  height: 36px;
+  border-radius: 6px;
+}
+.Layer__toggle.Layer__toggle--xsmall .Layer__toggle-option input + span {
+  height: 32px;
+  border-radius: 6px;
+}
+.Layer__toggle.Layer__toggle--xsmall .Layer__toggle-option .Layer__toggle-option-content {
+  font-size: 12px;
+}
+.Layer__toggle.Layer__toggle--xsmall .Layer__toggle__thumb {
+  height: 34px;
+  border-radius: 6px;
+}
 .Layer__toggle-option {
   position: relative;
   cursor: pointer;
@@ -1548,6 +1647,84 @@
   transform: scaleX(0.98);
   opacity: 0;
 }
+.Layer__tabs {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px;
+  height: 38px;
+  margin: 1px;
+  cursor: pointer;
+  position: relative;
+  isolation: isolate;
+  gap: var(--spacing-xs);
+}
+.Layer__tabs .Layer__tabs-option-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.Layer__tabs-option__icon {
+  line-height: 11px;
+}
+.Layer__tabs-option {
+  position: relative;
+  cursor: pointer;
+  z-index: 2;
+}
+.Layer__tabs-option input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+}
+.Layer__tabs-option input + span {
+  box-sizing: border-box;
+  padding: var(--spacing-xs) var(--spacing-3xs);
+  height: 36px;
+  color: var(--text-color-secondary);
+  font-family: var(--font-family);
+  font-size: var(--btn-font-size);
+  cursor: pointer;
+  transition: color var(--transition-speed) ease-in-out, background-color 150ms ease-in-out;
+  justify-content: center;
+  border-bottom: 2px solid transparent;
+}
+.Layer__tabs-option input + span:hover {
+  color: var(--text-color-primary);
+}
+.Layer__tabs-option input:checked + span {
+  color: var(--text-color-primary);
+}
+.Layer__tabs-option input:disabled + span {
+  cursor: not-allowed;
+  color: var(--text-color-secondary);
+}
+.Layer__tabs-option:hover input + span {
+  border-bottom: 2px solid var(--color-base-200);
+}
+.Layer__tabs-option:hover input:disabled + span,
+.Layer__tabs-option:hover input:checked + span {
+  background-color: transparent;
+}
+.Layer__tabs.Layer__tabs--small .Layer__tabs-option input + span {
+  height: 32px;
+  border-radius: 6px;
+}
+.Layer__tabs__thumb {
+  position: absolute;
+  width: 100px;
+  left: 0;
+  bottom: 1px;
+  z-index: 3;
+  box-sizing: border-box;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--color-base-400);
+}
+.Layer__tabs--initialized .Layer__tabs__thumb {
+  transition: left 150ms ease, width 150ms ease;
+}
 .Layer__heading {
   color: var(--text-color-primary);
   font-size: var(--text-heading);
@@ -1654,6 +1831,26 @@
     transform: rotate(-360deg);
   }
 }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
 .Layer__anim--rotating {
   -webkit-animation: rotating 2s linear infinite;
   -moz-animation: rotating 2s linear infinite;
@@ -2105,6 +2302,26 @@
 .Layer__bank-transactions__header {
   position: sticky;
   left: 0;
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+}
+.Layer__bank-transactions__header__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.Layer__bank-transactions__header.Layer__bank-transactions__header--mobile {
+  background-color: transparent;
+}
+.Layer__bank-transactions__header.Layer__bank-transactions__header--mobile,
+.Layer__bank-transactions__header.Layer__bank-transactions__header--with-date-picker {
+  flex-direction: column;
+}
+.Layer__bank-transactions__header.Layer__bank-transactions__header--mobile .Layer__bank-transactions__header__content,
+.Layer__bank-transactions__header.Layer__bank-transactions__header--with-date-picker .Layer__bank-transactions__header__content {
+  width: 100%;
+  padding-left: var(--spacing-3xs);
 }
 .Layer__bank-transaction-row {
   top: 1px;
@@ -2613,6 +2830,7 @@
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-md);
     padding-top: var(--spacing-md);
+    row-gap: var(--spacing-sm);
   }
 }
 @container (max-width: 700px) {
@@ -2623,6 +2841,10 @@
     top: 0px;
     z-index: 2;
   }
+  .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile {
+    box-shadow: none;
+    padding-bottom: var(--spacing-2xs);
+  }
 }
 .Layer__tooltip.Layer__bank-transactions__tx-tooltip {
   max-width: 250px;
@@ -2847,6 +3069,49 @@
   border-color: transparent;
   background-color: transparent;
 }
+.Layer__bank-transaction-mobile-list-item__match-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin: var(--spacing-md) 0;
+}
+.Layer__bank-transaction-mobile-list-item__match-item {
+  width: 100%;
+  padding: var(--spacing-xs) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-base-50);
+}
+.Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__name {
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__col-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__details {
+  display: flex;
+  justify-content: flex-end;
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction-mobile-list-item__match-item .Layer__bank-transaction-mobile-list-item__match-item__col-status {
+  width: 24px;
+  min-width: 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+.Layer__bank-transaction-mobile-list-item__match-item.Layer__bank-transaction-mobile-list-item__match-item--selected .Layer__bank-transaction-mobile-list-item__match-item__name {
+  color: var(--color-base-1000);
+}
 @container (max-width: 700px) {
   .Layer__expanded-bank-transaction-row__match-table .Layer__expanded-bank-transaction-row__match-table__header {
     display: none;
@@ -3130,6 +3395,172 @@
     border-right-color: transparent;
   }
 }
+.Layer__bank-transactions__mobile-list {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  list-style: none;
+}
+.Layer__bank-transaction-mobile-list-item {
+  padding: 0;
+  margin: 0 var(--spacing-sm);
+  background: var(--color-base-0);
+  box-shadow: 0px 2px 2px 0px var(--color-base-200), 0px 4px 4px 0px var(--color-base-100);
+  border-radius: var(--border-radius-sm);
+  opacity: 0;
+  transform: scale(0.96);
+  transition: all 180ms ease-in-out;
+  cursor: pointer;
+}
+.Layer__bank-transaction-mobile-list-item.show {
+  opacity: 1;
+  transform: scale(1);
+}
+.Layer__bank-transaction-mobile-list-item .Layer__bank-transaction-mobile-list-item__expanded-row {
+  height: 0;
+  overflow: hidden;
+  transition: all 180ms ease-in-out;
+}
+.Layer__bank-transaction-mobile-list-item .Layer__text--error {
+  padding: var(--spacing-sm) 0;
+  font-size: 12px;
+  text-align: center;
+}
+.Layer__bank-transaction-mobile-list-item__heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+}
+.Layer__bank-transaction-mobile-list-item__heading__main {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+}
+.Layer__bank-transaction-mobile-list-item__heading__account-name {
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction-mobile-list-item__categorized-name {
+  color: var(--color-base-500);
+}
+.Layer__bank-transaction-mobile-list-item__heading__amount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spacing-3xs);
+  font-size: 14px;
+}
+.Layer__bank-transaction-mobile-list-item__heading__date {
+  color: var(--color-base-500);
+  font-size: 12px;
+}
+.Layer__bank-transaction-mobile-list-item__amount-credit {
+  color: var(--color-info-success);
+}
+.Layer__bank-transaction-mobile-list-item__value {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-3xs);
+  padding: 0 var(--spacing-sm);
+  background-color: var(--base-transparent-2);
+  border-bottom-left-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
+  transition: all 180ms ease-in-out;
+  height: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  opacity: 0;
+}
+.Layer__bank-transaction-mobile-list-item__value.open {
+  height: auto;
+  padding: var(--spacing-sm);
+  opacity: 1;
+}
+.Layer__bank-transaction-mobile-list-item__value > .Layer__text {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.Layer__bank-transaction-mobile-list-item__toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3xs);
+  padding: var(--spacing-4xs) var(--spacing-sm);
+}
+.Layer__bank-transaction-mobile-list-item__form-container {
+  padding: var(--spacing-sm);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.Layer__bank-transaction-mobile-list-item__personal-form {
+  padding: var(--spacing-md) 0 var(--spacing-xs) 0;
+  width: 100%;
+}
+.Layer__bank-transaction-mobile-list-item__business-form {
+  width: 100%;
+}
+.Layer__bank-transaction-mobile-list-item__business-form .Layer__actionable-list {
+  margin-bottom: var(--spacing-md);
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form {
+  width: 100%;
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__bank-transactions__table-cell__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: var(--color-base-500);
+  padding-top: var(--spacing-xs);
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__bank-transactions__table-cell--split-entry__right-col {
+  width: 100%;
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__bank-transactions__splits-inputs {
+  padding: var(--spacing-sm) 0;
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__bank-transactions__splits-inputs .Layer__bank-transactions__table-cell--split-entry {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__split-amount-input {
+  width: 112px;
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__split-amount-input.Layer__split-amount-input--first {
+  width: 156px;
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__bank-transactions__table-cell--split-entry__merge-btn {
+  width: 36px;
+  height: 36px;
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__select__control {
+  min-width: 150px;
+  width: 100%;
+  font-size: 12px;
+}
+.Layer__bank-transaction-mobile-list-item__split-and-match-form .Layer__add-new-split {
+  color: var(--color-base-1000);
+}
+.Layer__bank-transaction-mobile-list-item__switch-form-btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm) 0;
+}
+.Layer__bank-transaction-mobile-list-item__switch-form-btns > .Layer__text-btn {
+  color: var(--color-base-1000);
+}
 .Layer__component-container.Layer__chart-of-accounts {
   display: flex;
   align-items: stretch;
@@ -3739,6 +4170,49 @@
   margin-bottom: var(--spacing-xl);
   color: var(--color-base-500);
 }
+.Layer__drawer-background {
+  position: fixed;
+  display: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  transition: background 0.3s ease-in-out;
+}
+.Layer__drawer-background.open {
+  display: block;
+  opacity: 0.4;
+  background: #242424;
+}
+.Layer__drawer {
+  position: fixed;
+  bottom: -100%;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background: var(--color-base-100);
+  width: 100%;
+  max-height: 80%;
+  overflow-y: auto;
+  padding: var(--spacing-xl) 28px 28px 28px;
+  border-radius: var(--spacing-md) var(--spacing-md) 0px 0px;
+  transition: bottom 0.2s ease-in-out;
+}
+.Layer__drawer::after {
+  position: absolute;
+  content: "";
+  width: 37px;
+  height: 5px;
+  background-color: var(--color-base-50);
+  left: 50%;
+  transform: translateX(-50%);
+  top: 16px;
+  border-radius: 80px;
+}
+.Layer__drawer.open {
+  bottom: 0;
+}
 .Layer__chevron {
   stroke: var(--text-color);
   transition: transform 0.33s;
@@ -5147,6 +5621,50 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-top: 2px;
   max-width: 100%;
 }
+.Layer__toasts-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  z-index: 1000;
+}
+.Layer__toasts-container .Layer__toast {
+  color: var(--color-base-0);
+  background: var(--color-base-1000);
+  border-radius: var(--spacing-3xs);
+  padding: var(--spacing-xs) var(--spacing-md);
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s linear, transform 0.6s linear;
+  box-shadow:
+    0px 4px 4px 0px var(--base-transparent-5, rgba(16, 24, 40, 0.05)),
+    0px 3px 3px 0px var(--base-transparent-6, rgba(16, 24, 40, 0.06)),
+    0px 2px 2px 0px var(--base-transparent-8, rgba(16, 24, 40, 0.08)),
+    0px 1px 0px 0px var(--base-transparent-12, rgba(16, 24, 40, 0.12)),
+    0px 0px 0px 1px var(--base-900, #05132f);
+}
+.Layer__toasts-container .Layer__toast p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--color-base-0);
+}
+.Layer__toast.enter {
+  opacity: 1;
+  transform: translateY(0);
+}
+.Layer__toast.exit {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.5s linear, transform 0.5s linear;
+}
+@media screen and (max-width: 400px) {
+  .Layer__toasts-container {
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
 .Layer__accounting-overview__summaries-row {
   display: flex;
   align-items: center;