@layerfi/components 0.1.104 → 0.1.106-alpha

package/dist/index.css

@@ -288,6 +288,16 @@
   border-radius: var(--XS, 8px);
   background: var(--color-base-0);
   box-shadow: 0px 0px 0px 1px var(--color-base-300);
+  container-type: inline-size;
+}
+@container (max-width: 30rem) {
+  .Layer__actionable_row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .Layer__actionable_row .Layer__actionable_row__action {
+    justify-content: flex-end;
+  }
 }
 .Layer__actionable_row__main {
   display: flex;
@@ -304,6 +314,9 @@
   justify-content: center;
   box-shadow: 0px 0px 3px 0px var(--base-transparent-4) inset;
 }
+.Layer__actionable_row__action {
+  display: flex;
+}
 .Layer__actionable_row__description {
   color: var(--color-base-500);
   font-size: var(--text-sm);
@@ -317,11 +330,12 @@
   }
 }
 .Layer__badge {
+  --size: 27px;
   box-sizing: border-box;
   display: inline-flex;
   gap: var(--spacing-3xs);
   align-items: center;
-  height: 27px;
+  height: var(--size);
   padding: var(--spacing-3xs) var(--spacing-xs);
   border-radius: var(--border-radius-5xl);
   background-color: var(--badge-bg-color);
@@ -330,19 +344,21 @@
   transition: all var(--transition-speed) ease-in-out;
 }
 .Layer__badge.Layer__badge--small {
-  height: 21px;
+  --size: 21px;
   padding: var(--spacing-3xs) var(--spacing-xs);
   font-size: var(--text-xs);
   line-height: 1.1;
 }
+.Layer__badge.Layer__badge--icon-only {
+  padding: 0;
+  justify-content: center;
+  min-width: var(--size);
+}
 .Layer__badge.Layer__badge--clickable {
   min-height: 21px;
   border-width: 0;
   cursor: pointer;
 }
-.Layer__badge .Layer__badge__icon {
-  margin-top: 2px;
-}
 .Layer__badge.Layer__badge--default {
   background-color: var(--badge-bg-color);
   color: var(--badge-fg-color);
@@ -2951,11 +2967,11 @@
   flex-direction: column;
 }
 .Layer__details-list__actions > .Layer__details-list__close-btn {
-  width: 36px;
-  height: 36px;
+  height: 2.25rem;
+  width: 2.25rem;
   padding: 0;
 }
-@container (max-width: 1024px) {
+@container (max-width: 64rem) {
   .Layer__details-list__actions > .Layer__details-list__close-btn {
     display: none;
   }
@@ -2963,7 +2979,7 @@
 .Layer__journal__entry-details__mobile-header {
   display: none;
 }
-@container (max-width: 1024px) {
+@container (max-width: 64rem) {
   .Layer__journal__entry-details__mobile-header {
     display: flex;
   }
@@ -2979,25 +2995,26 @@
 }
 .Layer__details-list-item {
   box-sizing: border-box;
-  padding: 0 var(--spacing-md);
   display: flex;
   align-items: center;
+  height: 2.25rem;
+  padding: 0 var(--spacing-md);
 }
 .Layer__details-list-item__label {
   box-sizing: border-box;
-  padding: var(--spacing-xs) var(--spacing-md);
   width: 140px;
   min-width: 140px;
   max-width: 140px;
-  color: var(--color-base-600);
-  font-size: 12px;
-  font-weight: var(--font-weight-normal);
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--text-sm);
   line-height: 140%;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-base-600);
 }
 .Layer__details-list-item__value {
   box-sizing: border-box;
-  padding: var(--spacing-xs) var(--spacing-md);
   flex: 1;
+  padding: var(--spacing-xs) var(--spacing-md);
 }
 .Layer__file-thumb {
   display: flex;
@@ -4436,7 +4453,7 @@ tbody .Layer__table__empty-row:first-child {
   --size: 2.25rem;
 }
 .Layer__UI__Button[data-inset] {
-  --size: 1.75rem;
+  --size: 2rem;
 }
 .Layer__UI__Button[data-icon] {
   min-inline-size: var(--size);
@@ -4587,6 +4604,119 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Checkbox[data-labeled] {
   gap: var(--spacing-xs);
 }
+.Layer__ComboBoxContainer {
+  display: grid;
+}
+.Layer__ComboBoxControl {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  --block-size: 2.25rem;
+  block-size: var(--block-size);
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--color-base-300);
+  background-color: var(--color-base-0);
+}
+.Layer__ComboBoxControl--focused {
+  border-color: var(--outline-active);
+}
+.Layer__ComboBoxControl--disabled {
+  cursor: not-allowed;
+}
+.Layer__ComboBoxContainer > .Layer__ComboBoxControl {
+  block-size: var(--block-size);
+  min-block-size: var(--block-size);
+}
+.Layer__ComboBoxContainer > .Layer__ComboBoxControl--focused {
+  outline: 2px solid var(--outline-default) !important;
+}
+.Layer__ComboBoxValueContainer {
+  padding-inline-start: var(--spacing-xs);
+  cursor: text;
+  font-size: var(--input-font-size);
+}
+.Layer__ComboBoxIndicatorsContainer {
+  padding-inline-end: var(--spacing-3xs);
+}
+.Layer__ComboBoxClearIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --size: 1.75rem;
+  block-size: var(--size);
+  inline-size: var(--size);
+  cursor: pointer;
+}
+.Layer__ComboBoxLoadingIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --size: 1.75rem;
+  block-size: var(--size);
+  inline-size: var(--size);
+  cursor: default;
+}
+.Layer__ComboBoxDropdownIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--size);
+  inline-size: var(--size);
+  cursor: pointer;
+  color: var(--color-base-600);
+  --size: 1.75rem;
+}
+.Layer__ComboBoxMenu {
+  overflow: hidden;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  margin-block-start: var(--spacing-2xs);
+  background-color: var(--color-base-0);
+}
+.Layer__ComboBoxMenuList {
+  overflow-y: auto;
+}
+.Layer__ComboBoxMenuList .Layer__ComboBoxOption {
+  cursor: pointer;
+}
+.Layer__ComboBoxMenuList .Layer__ComboBoxOption--disabled {
+  cursor: not-allowed;
+}
+.Layer__ComboBoxGroup {
+  padding-block: var(--spacing-xs);
+}
+.Layer__ComboBoxGroup:not(:last-of-type) {
+  border-bottom: 1px solid var(--border-color);
+}
+.Layer__ComboBoxGroup > .Layer__ComboBoxGroupHeading {
+  padding-block: var(--spacing-3xs);
+  padding-inline: var(--spacing-sm);
+}
+.Layer__ComboBoxGroup > div > .Layer__ComboBoxOption {
+  padding-inline: var(--spacing-sm);
+}
+.Layer__ComboBoxOption {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-3xs);
+  border: 2px solid transparent;
+}
+.Layer__ComboBoxOption--focused {
+  background-color: var(--color-base-100);
+}
+.Layer__ComboBoxOption .Layer__ComboBoxOptionCheckIcon {
+  visibility: hidden;
+}
+.Layer__ComboBoxOption--selected {
+  background-color: var(--color-base-100);
+}
+.Layer__ComboBoxOption--selected .Layer__ComboBoxOptionCheckIcon {
+  visibility: visible;
+}
+.Layer__ComboBoxOption--disabled {
+  opacity: 0.5;
+}
+.Layer__ComboBoxNoOptionsMessage {
+  padding-block: var(--spacing-sm);
+}
 .Layer__dropdown-menu__popover {
   outline: none;
 }
@@ -4669,17 +4799,16 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-3xs);
   align-items: center;
   min-block-size: 2.25rem;
-  border-radius: var(--input-border-radius);
-  border: 1px solid var(--outline-default);
-  background-color: var(--color-base-0);
   padding-inline-start: var(--spacing-xs);
   padding-inline-end: var(--spacing-3xs);
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--color-base-300);
+  background-color: var(--color-base-0);
 }
-.Layer__InputGroup[data-focus-within] {
-  border-color: var(--outline-active);
-}
+.Layer__InputGroup[data-focus-within],
 .Layer__InputGroup[data-focus-visible] {
-  outline: 1px solid var(--outline-default);
+  border-color: var(--color-base-800);
+  outline: 2px solid var(--outline-default);
 }
 .Layer__InputGroup[data-action-count="2"] {
   grid-template-columns: minmax(0, 1fr) auto auto;
@@ -4890,6 +5019,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Stack[data-align=end] {
   align-items: end;
 }
+.Layer__Stack[data-align=baseline] {
+  align-items: baseline;
+}
 .Layer__Stack[data-justify=start] {
   justify-content: start;
 }
@@ -5164,10 +5296,58 @@ tbody .Layer__table__empty-row:first-child {
   aspect-ratio: 1/1;
 }
 .Layer__Square[data-inset] {
-  --min-size: 1.75rem;
+  --min-size: 2rem;
   min-block-size: var(--min-size);
   min-inline-size: var(--min-size);
 }
+.Layer__UI__Table-Table {
+  border-collapse: collapse;
+}
+.Layer__UI__Table-TableHeader {
+  height: 3.25rem;
+}
+.Layer__UI__Table-TableHeader:not(:last-child) .Layer__UI__Table-Column {
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__UI__Table-Row {
+  height: 3.25rem;
+}
+.Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__UI__Table-Column {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-base-600);
+}
+.Layer__UI__Table-Column:first-child {
+  padding-left: var(--spacing-md);
+}
+.Layer__UI__Table-Column:last-child {
+  padding-right: var(--spacing-md);
+}
+.Layer__UI__Table-Column[data-text-align=left] {
+  text-align: left;
+}
+.Layer__UI__Table-Column[data-text-align=center] {
+  text-align: center;
+}
+.Layer__UI__Table-Column[data-text-align=right] {
+  text-align: right;
+}
+.Layer__UI__Table-Cell {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-base-800);
+}
+.Layer__UI__Table-Cell:first-child {
+  padding-left: var(--spacing-md);
+}
+.Layer__UI__Table-Cell:last-child {
+  padding-right: var(--spacing-md);
+}
 .Layer__TagGroup {
   display: grid;
 }
@@ -5188,11 +5368,12 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
   block-size: 2.25rem;
   min-inline-size: 0;
-  padding-inline: var(--spacing-xs);
+  padding-inline-start: var(--spacing-xs);
+  padding-inline-end: var(--spacing-3xs);
   border-radius: var(--border-radius-2xs);
-  border: 1px solid var(--outline-default);
+  border: 1px solid var(--color-base-300);
   background-color: var(--color-base-100);
-  color: var(--color-base-700);
+  color: var(--color-base-800);
 }
 .Layer__Tag[slot=dimension] {
   grid-area: dimension;
@@ -5204,8 +5385,8 @@ tbody .Layer__table__empty-row:first-child {
   grid-area: remove;
 }
 .Layer__Tag[data-focus-visible] {
-  border-color: var(--outline-active);
-  outline: 1px solid var(--outline-default);
+  border-color: var(--color-base-800);
+  outline: 2px solid var(--outline-default);
 }
 .Layer__UI__Heading {
   max-inline-size: 60rem;
@@ -5348,14 +5529,20 @@ tbody .Layer__table__empty-row:first-child {
   margin: 0;
   font-size: var(--text-md);
   font-family: var(--font-family);
-  color: var(--color-base-700);
+  color: var(--color-base-900);
   text-wrap: pretty;
 }
+.Layer__Header[data-variant=placeholder],
+.Layer__Label[data-variant=placeholder],
+.Layer__P[data-variant=placeholder],
+.Layer__Span[data-variant=placeholder] {
+  color: var(--color-base-500);
+}
 .Layer__Header[data-variant=subtle],
 .Layer__Label[data-variant=subtle],
 .Layer__P[data-variant=subtle],
 .Layer__Span[data-variant=subtle] {
-  color: var(--fg-subtle);
+  color: var(--color-base-600);
 }
 .Layer__Header[data-status=error],
 .Layer__Label[data-status=error],
@@ -6432,6 +6619,45 @@ tbody .Layer__table__empty-row:first-child {
     font-size: var(--text-md);
   }
 }
+.Layer__UI__Table__InvoicesTable {
+  table-layout: fixed;
+}
+.Layer__UI__Table__InvoicesTable .Layer__UI__Table-Column__InvoicesTable--SentAt {
+  width: 15%;
+  min-width: 6.25rem;
+}
+.Layer__UI__Table__InvoicesTable .Layer__UI__Table-Column__InvoicesTable--InvoiceNo {
+  width: 10%;
+  min-width: 4rem;
+}
+.Layer__UI__Table__InvoicesTable .Layer__UI__Table-Column__InvoicesTable--Customer {
+  width: 35%;
+  min-width: 10rem;
+}
+.Layer__UI__Table__InvoicesTable .Layer__UI__Table-Column__InvoicesTable--Total {
+  width: 15%;
+  min-width: 6rem;
+  border-right: 1px solid var(--color-base-300);
+  text-align: end;
+}
+.Layer__UI__Table__InvoicesTable .Layer__UI__Table-Column__InvoicesTable--Status {
+  width: 25%;
+  min-width: 8.25rem;
+}
+.Layer__UI__Table__InvoicesTable .Layer__UI__Table-Cell__InvoicesTable--Total {
+  border-right: 1px solid var(--color-base-300);
+}
+.Layer__InvoicesTable__StatusFilter {
+  width: 11rem;
+}
+.Layer__DataTableHeader__Filters {
+  height: 4.25rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.Layer__DataTableHeader__Header {
+  height: 4.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
 .Layer__caobfb {
   padding-inline: var(--spacing-md);
   padding-block: var(--spacing-sm);
@@ -7562,9 +7788,6 @@ tbody .Layer__table__empty-row:first-child {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--spacing-xs);
 }
-.Layer__ListBoxItem:not([data-disabled]) .Layer__TagSelectorCheckIcon {
-  visibility: hidden;
-}
 .Layer__Public,
 .Layer__Public::before,
 .Layer__Public::after,
@@ -9302,6 +9525,7 @@ tbody .Layer__table__empty-row:first-child {
   position: relative;
   display: flex;
   align-items: stretch;
+  overflow: hidden;
 }
 .Layer__chart-of-accounts__loader-container {
   padding: var(--spacing-2xl);
@@ -10482,86 +10706,41 @@ tbody .Layer__table__empty-row:first-child {
   margin-left: 0;
 }
 .Layer__pagination-container {
-  position: sticky;
-  left: 0;
-  display: flex;
-  justify-content: flex-end;
+  align-self: end;
   padding: var(--spacing-md);
 }
 @container (min-width: 1400px) {
   .Layer__pagination-container {
-    display: flex;
-    justify-content: flex-end;
     padding: var(--spacing-md) var(--spacing-xl);
   }
 }
 .Layer__pagination {
   display: inline-flex;
-  gap: 2px;
-  padding: var(--spacing-4xs);
+  gap: var(--spacing-4xs);
+  align-items: center;
+  height: 2.25rem;
   border-radius: var(--border-radius-2xs);
-  box-shadow: 0 0 0 1px var(--color-base-300);
-  margin: 0;
+  border: 1px solid var(--color-base-300);
   background: var(--color-base-50);
   list-style-type: none;
+  padding-inline-start: var(--spacing-4xs);
+  padding-inline-end: var(--spacing-4xs);
 }
-.Layer__pagination .Layer__pagination-item {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  min-width: 32px;
-  border-radius: var(--border-radius-3xs);
-  border: 1px solid transparent;
-  font-size: var(--text-md);
-  text-align: center;
-  color: var(--color-base-700);
-}
-.Layer__pagination .Layer__pagination-item.Layer__pagination-dots:hover {
-  box-shadow: none;
-  background-color: transparent;
-  cursor: default;
-  color: var(--color-base-700);
-}
-.Layer__pagination .Layer__pagination-item:hover {
-  box-shadow: 0 0 0 1px var(--color-base-300);
-  background-color: var(--color-base-0);
-  cursor: pointer;
-  color: var(--color-base-900);
-}
-.Layer__pagination .Layer__pagination-item.selected {
+.Layer__pagination .Layer__pagination__selected-item .Layer__UI__Button {
+  box-shadow: inset 0 0 0 1px var(--base-transparent-6);
   background-color: var(--bg-brand-accent, var(--color-accent));
   color: var(--fg-brand-accent, var(--color-primary));
-  border-color: var(--base-transparent-6);
-}
-.Layer__pagination .Layer__pagination-item.Layer__pagination-arrow {
-  color: var(--color-base-700);
-}
-.Layer__pagination .Layer__pagination-item.Layer__pagination-arrow:hover {
-  color: var(--color-base-900);
-}
-.Layer__pagination .Layer__pagination-item.disabled {
-  pointer-events: none;
-}
-.Layer__pagination .Layer__pagination-item.disabled .Layer__pagination-arrow {
-  color: var(--color-base-500);
-}
-.Layer__pagination .Layer__pagination-item.disabled:hover {
-  background-color: transparent;
-  cursor: default;
 }
 .Layer__panel {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: flex-start;
   height: 100%;
 }
 .Layer__panel__content {
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
   width: 100%;
   padding-bottom: var(--spacing-lg);
 }
@@ -10570,47 +10749,47 @@ tbody .Layer__table__empty-row:first-child {
   border-right: 1px solid var(--color-base-300);
 }
 .Layer__panel .Layer__panel__content .Layer__component-header {
-  top: 0;
   z-index: auto;
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(6px);
+  top: 0;
   border-top-left-radius: var(--border-radius-sm);
   border-top-right-radius: var(--border-radius-sm);
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(6px);
 }
 .Layer__panel__sidebar {
-  width: 480px;
-  max-width: 0;
   position: sticky;
-  max-height: 0;
+  z-index: 50;
   top: 0;
   overflow-x: hidden;
-  transition: max-width 180ms ease-in-out;
-  background: var(--color-base-0);
   height: 100%;
-  border-left: 1px solid var(--color-base-300);
+  max-height: 0;
+  width: 480px;
+  max-width: 0;
   border-top-right-radius: var(--border-radius-sm);
-  z-index: 102;
+  border-left: 1px solid var(--color-base-300);
+  background: var(--color-base-0);
+  transition: max-width 180ms ease-in-out;
 }
 .Layer__panel__sidebar .Layer__panel__sidebar-content {
+  height: 100%;
   width: 480px;
   min-width: 480px;
-  height: 100%;
+  background: var(--color-base-0);
   opacity: 0.2;
   transition: opacity 180ms ease-in-out;
-  background: var(--color-base-0);
 }
 .Layer__panel__sidebar--default {
-  max-width: none;
-  width: 100%;
   flex: 1;
+  width: 100%;
+  max-width: none;
 }
 .Layer__panel__sidebar--default .Layer__panel__sidebar-content {
   width: 100%;
 }
 .Layer__panel.Layer__panel--open .Layer__panel__sidebar {
+  max-height: none;
   max-width: 480px;
   margin-left: -1px;
-  max-height: none;
 }
 .Layer__panel.Layer__panel--open .Layer__panel__sidebar .Layer__panel__sidebar-content {
   opacity: 1;
@@ -10625,10 +10804,10 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 1024px) {
   .Layer__panel__sidebar {
     position: absolute;
-    max-width: 100%;
     width: 100%;
-    border-width: 0;
+    max-width: 100%;
     border-radius: var(--border-radius-sm);
+    border-width: 0;
     opacity: 0.2;
     transform: translateY(-50px) scale(0.96);
     transition: transform 120ms ease-in-out, opacity 120ms ease-in-out;
@@ -10642,14 +10821,14 @@ tbody .Layer__table__empty-row:first-child {
     overflow: unset;
   }
   .Layer__panel.Layer__panel--open .Layer__panel__sidebar {
-    left: 0;
     top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    max-height: 100%;
     width: 100%;
     max-width: 100%;
     margin-left: 0;
-    display: flex;
-    max-height: 100%;
-    justify-content: center;
     opacity: 1;
     transform: translateY(0) scale(1);
   }