@layerfi/components 0.1.58 → 0.1.60

package/dist/styles/index.css

@@ -125,6 +125,8 @@
   --btn-bg-color-icon-hover: var(--color-accent);
   --btn-secondary-color: var(--color-black);
   --btn-secondary-bg-color: var(--color-white);
+  --btn-tertiary-color: var(--color-black);
+  --btn-tertiary-bg-color: var(--color-white);
   --badge-color: var(--color-base-900);
   --badge-fg-color: var(--color-base-900);
   --badge-bg-color: var(--color-base-400);
@@ -395,6 +397,7 @@
   padding: 0;
   width: 36px;
   height: 36px;
+  min-width: 36px;
 }
 .Layer__btn.Layer__expand-btn {
   color: var(--btn-secondary-color);
@@ -480,6 +483,12 @@
   color: var(--btn-secondary-color);
   background: var(--btn-secondary-bg-color);
 }
+.Layer__btn--tertiary {
+  color: var(--btn-tertiary-color);
+  background: var(--btn-tertiary-bg-color);
+  border-color: transparent;
+  box-shadow: none;
+}
 .Layer__download-retry-btn {
   width: 122px;
 }
@@ -534,6 +543,13 @@
 .Layer__btn--with-primary-icon .Layer__btn-text {
   padding-right: calc(var(--spacing-md) - 4px);
 }
+.Layer__btn--icon-only {
+  width: 36px;
+  height: 36px;
+}
+.Layer__btn--icon-only.Layer__btn--secondary .Layer__btn-icon {
+  background-color: transparent;
+}
 .Layer__btn--icon-only .Layer__btn-icon--right {
   margin-left: 0;
 }
@@ -631,6 +647,9 @@
   align-items: center;
   gap: var(--spacing-4xs);
 }
+.Layer__expand-collpase-all-rows-btn {
+  min-width: 152px;
+}
 .Layer__switch__container {
   display: flex;
   align-items: center;
@@ -971,6 +990,10 @@
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+.Layer__datepicker__wrapper > div,
+#Layer__datepicker__portal > div {
+  max-width: 100%;
+}
 .Layer__datepicker__wrapper .Layer__datepicker__next-button,
 #Layer__datepicker__portal .Layer__datepicker__next-button {
   border-top-left-radius: 0;
@@ -1374,6 +1397,9 @@
   font-size: 14px;
   border-bottom: 1px solid var(--color-base-200);
 }
+.Layer__datepicker__time__wrapper {
+  max-width: 98px;
+}
 .Layer__datepicker__time__wrapper .react-datepicker__header {
   padding: 0 !important;
 }
@@ -1391,6 +1417,12 @@
   min-width: auto;
   max-width: auto;
 }
+.Layer__datepicker__time__wrapper .react-datepicker__input-container {
+  margin-right: 1px;
+}
+.Layer__datepicker__time__wrapper .react-datepicker__input-container > input {
+  max-width: 84px;
+}
 @media screen and (max-width: 760px) {
   .Layer__datepicker__wrapper .Layer__datepicker__current-button {
     display: none;
@@ -1696,6 +1728,14 @@
     display: none;
   }
 }
+.Layer__journal__entry-details__mobile-header {
+  display: none;
+}
+@container (max-width: 1024px) {
+  .Layer__journal__entry-details__mobile-header {
+    display: flex;
+  }
+}
 .Layer__details-list .Layer__component-header {
   padding-bottom: 0;
 }
@@ -1727,6 +1767,43 @@
   padding: var(--spacing-xs) var(--spacing-md);
   flex: 1;
 }
+.Layer__header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.Layer__header--sticky {
+  position: sticky;
+  top: 0;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(6px);
+  z-index: 10;
+}
+.Layer__header--top-rounded {
+  border-top-left-radius: var(--border-radius-sm);
+  border-top-right-radius: var(--border-radius-sm);
+}
+.Layer__header__row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  border-bottom: 1px solid var(--border-color);
+}
+.Layer__header__col {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  min-height: 68px;
+  box-sizing: border-box;
+}
+@container (min-width: 1400px) {
+  .Layer__header__col {
+    padding: var(--spacing-md) var(--spacing-xl);
+  }
+}
 ::placeholder {
   color: var(--input-placeholder-color);
 }
@@ -2443,6 +2520,10 @@
   color: var(--color-base-800);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
+.Layer__table .Layer__table-cell.Layer__table-cell--right .Layer__table-cell-content {
+  text-align: right;
+  justify-content: flex-end;
+}
 .Layer__table .Layer__table-cell.Layer__table-cell-amount--positive .Layer__table-cell-content::before {
   content: "$";
 }
@@ -2465,12 +2546,12 @@
   height: 16px;
   margin-right: 8px;
 }
-.Layer__table tr th:nth-child(1) .Layer__table-cell-content,
+.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-cell-content {
+.Layer__table tr th:last-child.Layer__table-header {
   justify-content: flex-end;
   padding-right: var(--spacing-lg);
 }
@@ -2633,6 +2714,7 @@
   background-color: var(--color-base-50);
   cursor: pointer;
 }
+.Layer__table-header.Layer__table-cell--amount,
 .Layer__table-cell--amount {
   justify-content: flex-end;
   text-align: right;
@@ -2725,6 +2807,10 @@ tbody .Layer__table__empty-row:first-child {
   padding-top: var(--spacing-sm);
   padding-bottom: var(--spacing-sm);
 }
+.Layer__table-wrapper {
+  max-width: 100%;
+  overflow: auto;
+}
 .Layer__table-wrapper--bottom-spacing {
   padding-bottom: var(--spacing-lg);
 }
@@ -2892,6 +2978,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__border-top {
   border-top: 1px solid var(--border-color);
 }
+.Layer__show-lg {
+  display: none;
+}
 @keyframes rotating {
   from {
     -ms-transform: rotate(0deg);
@@ -2951,10 +3040,21 @@ tbody .Layer__table__empty-row:first-child {
   -o-animation: rotating 2s linear infinite;
   animation: rotating 2s linear infinite;
 }
+@container (min-width: 1401px) {
+  .Layer__hidden-xl {
+    display: none;
+  }
+  .Layer__show-xl {
+    display: flex;
+  }
+}
 @container (min-width: 1024px) and (max-width: 1400px) {
   .Layer__hidden-lg {
     display: none;
   }
+  .Layer__show-lg {
+    display: flex;
+  }
 }
 @container (min-width: 1024px) and (max-width: 1400px) {
   .Layer__hidden-md {
@@ -3050,14 +3150,10 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__ledger-account__panel .Layer__panel__sidebar .Layer__ledger-account__entry-details .Layer__details-list {
   background: var(--color-base-0);
 }
-.Layer__ledger-account__header {
-  display: flex;
-  flex-direction: row;
-  padding: var(--spacing-xl);
-  padding-bottom: var(--spacing-md);
-  gap: var(--spacing-md);
-  align-items: flex-start;
-  justify-content: flex-start;
+.Layer__ledger-account__entry-details__header {
+  background: var(--color-base-0);
+  border-top-left-radius: var(--border-radius-sm);
+  border-top-right-radius: var(--border-radius-sm);
 }
 .Layer__ledger-account__title-container {
   display: flex;
@@ -3132,11 +3228,6 @@ tbody .Layer__table__empty-row:first-child {
   font-variation-settings: "wght" var(--font-weight-bold);
   color: var(--color-base-900);
 }
-@container (max-width: 1400px) {
-  .Layer__ledger-account__header {
-    padding: var(--spacing-md);
-  }
-}
 @container (max-width: 1024px) {
   .Layer__ledger-account__panel .Layer__panel__sidebar .Layer__panel__sidebar-content {
     width: 100%;
@@ -3192,6 +3283,18 @@ tbody .Layer__table__empty-row:first-child {
     padding-right: var(--spacing-lg);
   }
 }
+@container (max-width: 1023px) and (min-width: 700px) {
+  .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-default,
+  .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-summation {
+    background-color: var(--color-base-0);
+  }
+  .Layer__ledger-account__entry-details__table tr td {
+    width: 30%;
+  }
+  .Layer__ledger-account__entry-details__table tr td:first-child {
+    width: 40%;
+  }
+}
 .Layer__balance-sheet {
   border: 1px solid var(--border-color);
   border-radius: var(--corner-radius);
@@ -4712,18 +4815,15 @@ tbody .Layer__table__empty-row:first-child {
   visibility: visible;
   transform: scale(1);
 }
+.Layer__chart-of-accounts .Layer__panel {
+  max-width: 100%;
+}
 .Layer__chart-of-accounts__sidebar__header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding: var(--spacing-xl);
-  padding-bottom: var(--spacing-lg);
   gap: var(--spacing-md);
 }
-.Layer__chart-of-accounts__sidebar__header .title {
-  margin: 0;
-  font-size: 24px;
-}
 .Layer__chart-of-accounts__sidebar__header .actions {
   display: flex;
   gap: var(--spacing-sm);
@@ -4739,7 +4839,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__chart-of-accounts__form {
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-xl);
+  padding: var(--spacing-xl) var(--spacing-md);
 }
 .Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline {
   padding: var(--spacing-xs) 0;
@@ -4750,7 +4850,7 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 140px;
 }
 .Layer__chart-of-accounts__form-edit-entry {
-  padding: var(--spacing-md) var(--spacing-xl);
+  padding: var(--spacing-md);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4829,6 +4929,14 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__coa__type--mobile {
   color: var(--color-base-800);
 }
+@container (min-width: 1401px) {
+  .Layer__chart-of-accounts .Layer__panel__sidebar .Layer__chart-of-accounts__form {
+    padding: var(--spacing-xl);
+  }
+  .Layer__chart-of-accounts__form-edit-entry {
+    padding: var(--spacing-md) var(--spacing-xl);
+  }
+}
 @container (max-width: 1024px) {
   .Layer__chart-of-accounts__sidebar__header .actions {
     display: none;
@@ -4836,11 +4944,42 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__chart-of-accounts__form .actions {
     display: flex;
   }
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content {
+    width: 100%;
+  }
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__input-group,
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__chart-of-accounts__form__input-group__title {
+    box-sizing: border-box;
+    max-width: 600px;
+    width: 100%;
+    margin: auto;
+  }
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__chart-of-accounts__form-edit-entry {
+    box-sizing: border-box;
+    max-width: calc(600px + var(--spacing-xl) * 2);
+    padding: var(--spacing-md) var(--spacing-xl);
+    width: 100%;
+    margin: auto;
+  }
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
+    width: 100%;
+    margin: auto;
+    padding: var(--spacing-md) var(--spacing-xl);
+    max-width: calc(600px + var(--spacing-xl) * 2);
+  }
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .actions {
+    max-width: 600px;
+    width: 100%;
+    margin: auto;
+  }
 }
 @container (min-width: 761px) and (max-width: 1024px) {
   .Layer__chart-of-accounts .Layer__mobile--hidden {
     display: none;
   }
+  .Layer__chart-of-accounts__form {
+    padding: var(--spacing-xl);
+  }
 }
 @container (max-width: 760px) {
   .Layer__chart-of-accounts {
@@ -4887,6 +5026,13 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
   padding: var(--spacing-xl);
 }
+.Layer__journal .Layer__panel {
+  max-width: 100%;
+}
+.Layer__journal__table-container {
+  max-width: 100%;
+  overflow: auto;
+}
 .Layer__journal-table .Layer__table-cell-content::before {
   background: var(--color-base-400);
 }
@@ -4905,6 +5051,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__journal__table {
   width: 100%;
   border-collapse: collapse;
+  max-width: 100%;
 }
 .Layer__journal__actions {
   display: flex;
@@ -4968,23 +5115,6 @@ tbody .Layer__table__empty-row:first-child {
   visibility: visible;
   transform: scale(1);
 }
-.Layer__journal__sidebar__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: var(--spacing-xl);
-  padding-bottom: var(--spacing-lg);
-  gap: var(--spacing-md);
-}
-.Layer__journal__sidebar__header .title {
-  margin: 0;
-  font-size: 24px;
-}
-.Layer__journal__sidebar__header .actions {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-}
 .Layer__journal__table .Layer__journal-table-row:not(.Layer__table-row--header):hover {
   background-color: var(--color-base-50);
 }
@@ -4999,18 +5129,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__row--expanded .Layer__table-cell {
   background-color: var(--bg-element-focus);
 }
-.Layer__journal__form {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-xl);
-}
-.Layer__journal__form .Layer__input-group.Layer__input-group--inline {
-  padding: var(--spacing-xs) 0;
-}
-.Layer__journal__form .Layer__input-group.Layer__input-group--inline label {
-  width: 140px;
-  min-width: 140px;
-  max-width: 140px;
+.Layer__journal .Layer__panel__sidebar-content .Layer__form {
+  max-width: 480px;
+  margin: auto;
 }
 .Layer__journal__form-edit-entry {
   padding: var(--spacing-md) var(--spacing-xl);
@@ -5086,57 +5207,6 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   background: var(--color-base-0);
 }
-@container (max-width: 1024px) {
-  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content {
-    width: 100%;
-  }
-  .Layer__journal .Layer__journal__sidebar__header .actions {
-    display: none;
-  }
-  .Layer__journal .Layer__journal__sidebar__header .actions {
-    display: none;
-  }
-  .Layer__journal .Layer__journal__bottom-actions {
-    display: flex;
-  }
-  .Layer__journal .Layer__panel.Layer__panel--open {
-    overflow: hidden;
-  }
-  .Layer__journal__form__input-group.Layer__journal__form__input-group__textarea {
-    background: transparent;
-  }
-}
-@container (min-width: 500px) and (max-width: 1024px) {
-  .Layer__journal__panel .Layer__details-list .Layer__component-header {
-    padding-left: var(--spacing-xl);
-    padding-right: var(--spacing-xl);
-  }
-}
-@container (max-width: 499px) {
-  .Layer__journal__panel .Layer__details-list .Layer__details-list-item__label,
-  .Layer__journal__panel .Layer__details-list .Layer__details-list-item__value {
-    padding: var(--spacing-xs);
-  }
-  .Layer__journal__panel .Layer__details-list .Layer__details-list-item {
-    padding: 0 var(--spacing-xs);
-  }
-  .Layer__journal__entry-details__line-items {
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-  }
-  .Layer__journal__entry-details__line-items .Layer__card {
-    box-shadow: none;
-    border-radius: 0;
-  }
-  .Layer__journal__panel .Layer__panel__sidebar {
-    background: var(--color-base-0);
-  }
-  .Layer__journal__entry-details__back-btn {
-    padding-left: var(--spacing-md);
-    padding-right: var(--spacing-md);
-  }
-}
 .Layer__journal__form__input-group__line-item {
   display: flex;
   flex-direction: column;
@@ -5176,24 +5246,10 @@ tbody .Layer__table__empty-row:first-child {
   padding: 0;
 }
 .Layer__journal__form__input-group .Layer__journal__form__input-group__title {
-  padding-bottom: var(--spacing-xl);
+  padding-bottom: var(--spacing-xs);
 }
 .Layer__journal__sidebar__header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: var(--spacing-xl);
-  padding-bottom: var(--spacing-lg);
-  gap: var(--spacing-md);
-}
-.Layer__journal__sidebar__header .title {
-  margin: 0;
-  font-size: 24px;
-}
-.Layer__journal__sidebar__header .actions {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
 }
 .Layer__journal__form__error-message {
   padding: var(--spacing-4xs) var(--spacing-xl);
@@ -5208,6 +5264,103 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: space-between;
   padding: var(--spacing-md) 0 0;
 }
+.Layer__journal .Layer__panel__sidebar .Layer__panel__sidebar-content {
+  width: 100%;
+}
+.Layer__journal__entry-details__line-items {
+  padding: var(--spacing-md);
+}
+.Layer__journal__entry-details__line-items .Layer__table .Layer__table-row.Layer__table-row--variant-summation {
+  background: var(--color-base-0);
+}
+@container (max-width: 1400px) {
+  .Layer__journal__form__input-group {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
+}
+@container (max-width: 1024px) {
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__details-list-item {
+    padding-left: 0;
+  }
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__ledger-account__entry-details__line-items {
+    max-width: 600px;
+  }
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__input-group,
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__journal__form__input-group__title,
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__journal__add-entry-line {
+    max-width: 600px;
+    width: 100%;
+    margin: auto;
+  }
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
+    width: 100%;
+    margin: auto;
+    padding: var(--spacing-md) var(--spacing-xl);
+    max-width: calc(600px + var(--spacing-xl) * 2);
+  }
+  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__journal__bottom-actions {
+    max-width: 600px;
+    margin: auto;
+  }
+  .Layer__journal .Layer__journal__sidebar__header .actions {
+    display: none;
+  }
+  .Layer__journal .Layer__journal__sidebar__header .actions {
+    display: none;
+  }
+  .Layer__journal .Layer__journal__bottom-actions {
+    display: flex;
+  }
+  .Layer__journal .Layer__panel.Layer__panel--open {
+    overflow: hidden;
+  }
+  .Layer__journal__form__input-group.Layer__journal__form__input-group__textarea {
+    background: transparent;
+  }
+  .Layer__journal__debit-credit-col {
+    width: 25%;
+  }
+}
+@container (min-width: 500px) and (max-width: 1024px) {
+  .Layer__journal__panel .Layer__details-list .Layer__component-header {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+}
+@container (max-width: 499px) {
+  .Layer__journal__panel .Layer__details-list .Layer__details-list-item__label,
+  .Layer__journal__panel .Layer__details-list .Layer__details-list-item__value {
+    padding: var(--spacing-xs);
+  }
+  .Layer__journal__panel .Layer__details-list .Layer__details-list-item {
+    padding: 0 var(--spacing-xs);
+  }
+  .Layer__journal__entry-details__line-items {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+  }
+  .Layer__journal__entry-details__line-items .Layer__card {
+    box-shadow: none;
+    border-radius: 0;
+  }
+  .Layer__journal__panel .Layer__panel__sidebar {
+    background: var(--color-base-0);
+  }
+  .Layer__journal__entry-details__back-btn {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .Layer__input-group.Layer__input-group--inline {
+    flex-direction: column;
+    gap: var(--spacing-2xs);
+    align-items: flex-start;
+    padding-top: var(--spacing-sm);
+  }
+  .Layer__input-group.Layer__input-group--inline > label {
+    width: 100%;
+  }
+}
 .Layer__data-state {
   display: flex;
   flex-direction: column;
@@ -6039,6 +6192,7 @@ tbody .Layer__table__empty-row:first-child {
   height: 100%;
   border-left: 1px solid var(--color-base-300);
   border-top-right-radius: var(--border-radius-sm);
+  z-index: 100;
 }
 .Layer__panel__sidebar .Layer__panel__sidebar-content {
   width: 480px;