@layerfi/components 0.1.129-alpha.1 → 0.1.129

package/dist/index.css

@@ -2361,6 +2361,7 @@
 
 .Layer__UI__Table-TableHeader {
   height: 3.25rem;
+  background-color: var(--color-base-0);
 }
 .Layer__UI__Table-TableHeader:not(:last-child) .Layer__UI__Table-Column {
   border-bottom: 1px solid var(--color-base-300);
@@ -2371,18 +2372,20 @@
 
 .Layer__UI__Table-Row {
   height: 3.25rem;
-  background-color: var(--color-base-200);
 }
 .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
   border-bottom: 1px solid var(--color-base-300);
 }
-.Layer__UI__Table-Row[data-depth="0"] {
+.Layer__UI__Table-Row .Layer__UI__Table-Cell {
+  background-color: var(--color-base-200);
+}
+.Layer__UI__Table-Row[data-depth="0"] .Layer__UI__Table-Cell {
   background-color: var(--color-base-0);
 }
-.Layer__UI__Table-Row[data-depth="1"] {
+.Layer__UI__Table-Row[data-depth="1"] .Layer__UI__Table-Cell {
   background-color: var(--color-base-50);
 }
-.Layer__UI__Table-Row[data-depth="2"] {
+.Layer__UI__Table-Row[data-depth="2"] .Layer__UI__Table-Cell {
   background-color: var(--color-base-100);
 }
 
@@ -2444,6 +2447,15 @@
   background-color: inherit;
 }
 
+.Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=left],
+.Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=left] {
+  border-right: 1px solid var(--color-base-200);
+}
+.Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=right],
+.Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=right] {
+  border-left: 1px solid var(--color-base-200);
+}
+
 .Layer__UI__Table-TableHeader .Layer__UI__Table-Column[data-pinned] {
   z-index: 2;
   background-color: var(--color-base-0);
@@ -3932,6 +3944,169 @@
 }
 .Layer__GlobalDateSelection .Layer__tooltip-trigger {
   padding-top: 0;
+}.Layer__chart-of-accounts__sidebar__header {
+  display: flex;
+  gap: var(--spacing-md);
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.Layer__chart-of-accounts__sidebar__header .actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+.Layer__chart-of-accounts__form .actions {
+  display: none;
+  gap: var(--spacing-sm);
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: var(--spacing-xl);
+}
+
+.Layer__chart-of-accounts__form {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl) var(--spacing-md);
+}
+.Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline {
+  padding: var(--spacing-xs) 0;
+}
+.Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline label {
+  width: 140px;
+  min-width: 140px;
+  max-width: 140px;
+}
+
+.Layer__chart-of-accounts__form-edit-entry {
+  display: flex;
+  gap: var(--spacing-md);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md);
+}
+.Layer__chart-of-accounts__form-edit-entry .Layer__text {
+  margin: 0;
+}
+
+.Layer__chart-of-accounts__form__error-message {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-4xs) var(--spacing-xl);
+  text-align: right;
+  color: var(--color-danger);
+}
+
+@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;
+  }
+  .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 {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 600px;
+    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;
+    width: 100%;
+    max-width: calc(600px + var(--spacing-xl) * 2);
+    padding: var(--spacing-md) var(--spacing-xl);
+    margin: auto;
+  }
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
+    width: 100%;
+    max-width: calc(600px + var(--spacing-xl) * 2);
+    padding: var(--spacing-md) var(--spacing-xl);
+    margin: auto;
+  }
+  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .actions {
+    width: 100%;
+    max-width: 600px;
+    margin: auto;
+  }
+}
+@container (min-width: 761px) and (max-width: 1024px) {
+  .Layer__chart-of-accounts__form {
+    padding: var(--spacing-xl);
+  }
+}.Layer__ExpandButton {
+  height: 16px;
+  min-width: 16px;
+}
+.Layer__ExpandButton--collapsed {
+  transform: rotate(-90deg);
+}
+.Layer__ExpandButton--expanded {
+  transform: rotate(0deg);
+}.Layer__coa__actions .Layer__btn {
+  opacity: 0;
+  visibility: hidden;
+  transition: all 300ms ease-out;
+  transform: scale(0.92);
+}
+
+.Layer__UI__Table-Row:hover .Layer__coa__actions .Layer__btn {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+.Layer__UI__Table__chart-of-accounts {
+  table-layout: fixed;
+  width: 100%;
+}
+.Layer__UI__Table__chart-of-accounts .Layer__UI__Table-Row,
+.Layer__UI__Table__chart-of-accounts .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(16rem, 1fr) minmax(8rem, 10rem) minmax(12rem, 16rem) minmax(8rem, 10rem) 10rem;
+  width: 100%;
+}
+.Layer__UI__Table__chart-of-accounts:has(.Layer__UI__Table-Column__chart-of-accounts--AccountNumber) .Layer__UI__Table-Row,
+.Layer__UI__Table__chart-of-accounts:has(.Layer__UI__Table-Column__chart-of-accounts--AccountNumber) .Layer__UI__Table-TableHeader > tr {
+  grid-template-columns: 13rem minmax(16rem, 1fr) minmax(8rem, 10rem) minmax(12rem, 16rem) minmax(8rem, 10rem) 10rem;
+}
+.Layer__UI__Table__chart-of-accounts .Layer__UI__Table-Cell .Layer__Span {
+  color: var(--text-secondary);
+}
+.Layer__UI__Table__chart-of-accounts .Layer__mark {
+  background-color: #fff2cc;
+}.Layer__chart-of-accounts__actions .Layer__SearchField {
+  width: 15rem;
+}
+@container (max-width: 760px) {
+  .Layer__chart-of-accounts__actions .Layer__SearchField {
+    width: 12rem;
+  }
+}.Layer__component-container.Layer__chart-of-accounts {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.Layer__chart-of-accounts .Layer__panel {
+  max-width: 100%;
+}
+
+@container (max-width: 760px) {
+  .Layer__chart-of-accounts {
+    overflow: auto;
+  }
 }.Layer__JournalEntryForm__LineItem {
   display: flex;
   gap: var(--spacing-xs);
@@ -4806,11 +4981,6 @@
   border-bottom: 1px solid var(--color-base-300);
   cursor: pointer;
 }
-.Layer__TreeNavigation .Layer__UI__TreeItem .Layer__TreeNavigation__Check {
-  visibility: hidden;
-  height: 1rem;
-  min-width: 1rem;
-}
 .Layer__TreeNavigation .Layer__UI__TreeItem[aria-level="1"] {
   background-color: var(--color-base-0);
 }
@@ -4821,7 +4991,7 @@
   background-color: var(--color-base-100);
 }
 .Layer__TreeNavigation .Layer__UI__TreeItem[data-selected] {
-  font-weight: var(--font-weight-bold);
+  background-color: var(--color-base-100);
 }
 .Layer__TreeNavigation .Layer__UI__TreeItem[data-selected]::after {
   content: "";
@@ -4832,9 +5002,6 @@
   width: 2px;
   background: black;
 }
-.Layer__TreeNavigation .Layer__UI__TreeItem[data-selected] .Layer__TreeNavigation__Check {
-  visibility: visible;
-}
 
 .Layer__TreeNavigation__Chevron {
   padding: 0;
@@ -4863,22 +5030,17 @@
   justify-content: flex-end;
   min-width: 15rem;
   max-width: 24rem;
-}.Layer__ExpandButton {
-  height: 16px;
-  min-width: 16px;
-}
-.Layer__ExpandButton--collapsed {
-  transform: rotate(-90deg);
-}
-.Layer__ExpandButton--expanded {
-  transform: rotate(0deg);
 }.Layer__UI__Table__UnifiedReport {
+  width: max-content;
   min-width: 100%;
+  border-bottom: 1px solid var(--color-base-300);
 }
 .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column,
 .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell {
   display: table-cell;
   min-width: 6rem;
+}.Layer__YearPicker {
+  inline-size: 8rem;
 }.Layer__UnifiedReport__AdditionalControls {
   display: grid;
   gap: var(--spacing-xs);
@@ -4893,10 +5055,14 @@
   grid-template-columns: repeat(3, 1fr);
 }
 .Layer__UnifiedReport__AdditionalControls[data-variant=small] > *,
-.Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container, .Layer__UnifiedReport__AdditionalControls[data-variant=medium] > *,
-.Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container {
+.Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container,
+.Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__YearPicker, .Layer__UnifiedReport__AdditionalControls[data-variant=medium] > *,
+.Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container,
+.Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__YearPicker {
   inline-size: 100%;
   max-inline-size: none;
+}.Layer__UnifiedReport__BaseHeader {
+  border-bottom: 1px solid var(--border-color);
 }.Layer__UI__Link {
   position: relative;
   display: inline;
@@ -4957,6 +5123,7 @@
   border-bottom: 1px solid var(--border-color);
 }.Layer__view.Layer__UnifiedReport {
   overflow: hidden;
+  max-height: 100vh;
   min-width: clamp(23rem, 100%, 1406px);
 }
 .Layer__view.Layer__UnifiedReport .Layer__view-main.Layer__view-main {
@@ -4966,13 +5133,19 @@
   width: max-content;
 }
 
+.Layer__UnifiedReport__Body {
+  max-height: calc(100vh - 76px);
+}
+
 .Layer__UnifiedReport__Sidebar {
   flex-shrink: 0;
-  width: 15rem;
+  overflow-y: auto;
+  width: clamp(14rem, 16vw, 24rem);
   border-right: 1px solid var(--color-base-300);
 }
 
 .Layer__UnifiedReport__Content {
+  overflow-y: auto;
   min-width: 0;
 }.Layer__UI__DateTile {
   width: 5.5rem;
@@ -5050,8 +5223,6 @@
   .Layer__CallBooking__JoinAction {
     flex: 1 1 100%;
   }
-}.Layer__YearPicker {
-  inline-size: 8rem;
 }.Layer__MileageDeductionChart .recharts-responsive-container {
   box-sizing: border-box;
   padding: 0;
@@ -6430,19 +6601,27 @@
   --button-border-color-ghost: var(--color-base-300);
   --button-border-color-ghost-active: var(--color-base-800);
 }
-.Layer__component *::-webkit-scrollbar {
+.Layer__component *,
+.Layer__view * {
+  scrollbar-width: thin;
+}
+.Layer__component *::-webkit-scrollbar,
+.Layer__view *::-webkit-scrollbar {
   height: 6px;
   width: 6px;
 }
-.Layer__component *::-webkit-scrollbar-track {
+.Layer__component *::-webkit-scrollbar-track,
+.Layer__view *::-webkit-scrollbar-track {
   border-radius: 4px;
   background: #f1f1f1;
 }
-.Layer__component *::-webkit-scrollbar-thumb {
+.Layer__component *::-webkit-scrollbar-thumb,
+.Layer__view *::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background: #e2e2e2;
 }
-.Layer__component *::-webkit-scrollbar-thumb:hover {
+.Layer__component *::-webkit-scrollbar-thumb:hover,
+.Layer__view *::-webkit-scrollbar-thumb:hover {
   background: #999;
 }
 /* stylelint-disable-next-line keyframes-name-pattern */
@@ -6689,9 +6868,6 @@
   align-items: center;
   color: var(--color-danger);
 }
-.Layer__expand-collapse-all-rows-btn {
-  min-width: 152px;
-}
 .Layer__btn.Layer__btn--with-tooltip {
   padding: 0;
 }
@@ -9254,247 +9430,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-mobile-list-item__categories_list {
   overflow-y: auto;
 }
-.Layer__component-container.Layer__chart-of-accounts {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  overflow: hidden;
-}
-.Layer__chart-of-accounts__loader-container {
-  padding: var(--spacing-2xl);
-}
-.Layer__coa__actions .Layer__btn {
-  opacity: 0;
-  visibility: hidden;
-  transition: all 300ms ease-out;
-  transform: scale(0.92);
-}
-.Layer__table-row:hover .Layer__coa__actions .Layer__btn {
-  opacity: 1;
-  visibility: visible;
-  transform: scale(1);
-}
-.Layer__chart-of-accounts .Layer__panel {
-  max-width: 100%;
-}
-.Layer__chart-of-accounts__actions .Layer__SearchField {
-  width: 15rem;
-}
-.Layer__chart-of-accounts__table {
-  table-layout: fixed;
-}
-.Layer__chart-of-accounts__table .Layer__chart-of-accounts--accountnumber {
-  width: 13rem;
-}
-.Layer__chart-of-accounts__table .Layer__chart-of-accounts--name {
-  width: auto;
-  min-width: 16rem;
-}
-.Layer__chart-of-accounts__table .Layer__chart-of-accounts--type {
-  width: 8rem;
-}
-.Layer__chart-of-accounts__table .Layer__chart-of-accounts--subtype {
-  width: 16rem;
-}
-.Layer__chart-of-accounts__table .Layer__chart-of-accounts--balance {
-  width: 8rem;
-}
-.Layer__chart-of-accounts__table .Layer__chart-of-accounts--actions {
-  width: 10rem;
-}
-.Layer__chart-of-accounts__table .Layer__table-cell-content .Layer__Span {
-  color: var(--text-secondary);
-}
-.Layer__chart-of-accounts__table .Layer__table-cell-content .Layer__mark {
-  background-color: #fff2cc;
-}
-.Layer__chart-of-accounts__sidebar__header {
-  display: flex;
-  gap: var(--spacing-md);
-  align-items: flex-start;
-  justify-content: space-between;
-}
-.Layer__chart-of-accounts__sidebar__header .actions {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-}
-.Layer__chart-of-accounts__form .actions {
-  display: none;
-  gap: var(--spacing-sm);
-  align-items: center;
-  justify-content: flex-end;
-  padding-top: var(--spacing-xl);
-}
-.Layer__chart-of-accounts__form {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-xl) var(--spacing-md);
-}
-.Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline {
-  padding: var(--spacing-xs) 0;
-}
-.Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline label {
-  width: 140px;
-  min-width: 140px;
-  max-width: 140px;
-}
-.Layer__chart-of-accounts__form-edit-entry {
-  display: flex;
-  gap: var(--spacing-md);
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-md);
-}
-.Layer__chart-of-accounts__form-edit-entry .Layer__text {
-  margin: 0;
-}
-.Layer__chart-of-accounts__form__error-message {
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--spacing-4xs) var(--spacing-xl);
-  text-align: right;
-  color: var(--color-danger);
-}
-.Layer__chart-of-accounts__form-row {
-  box-sizing: border-box;
-  display: flex;
-  gap: var(--spacing-md);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-top: 1px solid var(--border-color);
-  background-color: var(--color-base-100);
-}
-.Layer__chart-of-accounts__form-row.Layer__chart-of-accounts__form-row--depth-0 {
-  background-color: var(--color-base-50);
-}
-.Layer__chart-of-accounts__form-row .Layer__btn {
-  align-self: flex-start;
-  min-width: 120px;
-}
-.Layer__chart-of-accounts__row---mobile {
-  display: none;
-  visibility: hidden;
-}
-.Layer__chart-of-accounts__row---mobile .Layer__chart-of-accounts__mobile-row-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  width: 100%;
-  padding-top: var(--spacing-3xs);
-  padding-right: var(--spacing-md);
-  padding-bottom: var(--spacing-3xs);
-}
-.Layer__chart-of-accounts__mobile-row-content__top-row,
-.Layer__chart-of-accounts__mobile-row-content__bottom-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.Layer__chart-of-accounts__mobile-row-content__name {
-  color: var(--color-base-800);
-}
-.Layer__chart-of-accounts__mobile-row-content__balance {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-base-800);
-}
-.Layer__chart-of-accounts__row---mobile.Layer__table-row--depth-0 .Layer__chart-of-accounts__mobile-row-content__name {
-  font-weight: var(--font-weight-bold);
-}
-.Layer__chart-of-accounts__mobile-row-content__types {
-  display: flex;
-  gap: var(--spacing-3xs);
-  align-items: center;
-}
-.Layer__chart-of-accounts__mobile-row-content__types .Layer__text {
-  color: var(--color-base-700);
-}
-.Layer__chart-of-accounts__mobile-row-content__separator {
-  height: 12px;
-  width: 1px;
-  background: var(--color-base-200);
-}
-.Layer__chart-of-accounts .Layer__desktop--hidden {
-  display: none;
-}
-.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;
-  }
-  .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;
-    width: 100%;
-    max-width: 600px;
-    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;
-    width: 100%;
-    max-width: calc(600px + var(--spacing-xl) * 2);
-    padding: var(--spacing-md) var(--spacing-xl);
-    margin: auto;
-  }
-  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
-    width: 100%;
-    max-width: calc(600px + var(--spacing-xl) * 2);
-    padding: var(--spacing-md) var(--spacing-xl);
-    margin: auto;
-  }
-  .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .actions {
-    width: 100%;
-    max-width: 600px;
-    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 {
-    overflow: auto;
-  }
-  .Layer__chart-of-accounts__row---mobile {
-    display: table-row;
-    visibility: visible;
-  }
-  .Layer__chart-of-accounts__row---desktop {
-    display: none;
-    visibility: hidden;
-  }
-  .Layer__chart-of-accounts__form-row {
-    flex-direction: column;
-  }
-  .Layer__chart-of-accounts__form-row .Layer__chart-of-accounts__form-row__name_field {
-    flex: 1;
-    width: 100%;
-  }
-  .Layer__chart-of-accounts__actions.Layer__header__actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
 .Layer__component-container.Layer__journal {
   position: relative;
   display: flex;
@@ -10727,6 +10662,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     margin-top: -12px;
   }
 }
+.Layer__reports {
+  overflow: hidden;
+}
 .Layer__reports .Layer__panel__content {
   border-radius: var(--border-radius-sm);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.129-alpha.1",
+  "version": "0.1.129",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",