@layerfi/components 0.1.105 → 0.1.106-alpha.1

package/dist/index.css

@@ -77,6 +77,7 @@
     "InterVariable",
     "Inter",
     sans-serif;
+  --text-2xs: 10px;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 14px;
@@ -288,6 +289,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 +315,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 +331,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 +345,25 @@
   transition: all var(--transition-speed) ease-in-out;
 }
 .Layer__badge.Layer__badge--small {
-  height: 21px;
-  padding: var(--spacing-3xs) var(--spacing-xs);
+  --size: 21px;
   font-size: var(--text-xs);
   line-height: 1.1;
 }
+.Layer__badge.Layer__badge--xs {
+  --size: 17px;
+  font-size: var(--text-2xs);
+  line-height: 1;
+}
+.Layer__badge.Layer__badge--icon-only {
+  justify-content: center;
+  min-width: var(--size);
+  padding: 0;
+}
 .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);
@@ -1049,16 +1070,16 @@
 }
 .Layer__datepicker__wrapper > div,
 #Layer__datepicker__portal > div {
-  max-width: 100%;
   width: 100%;
+  max-width: 100%;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__next-button,
 #Layer__datepicker__portal .Layer__datepicker__next-button {
+  padding: 0 var(--spacing-xs);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  padding: 0 var(--spacing-xs);
-  box-shadow: none;
   border-left: 1px solid var(--input-border-color);
+  box-shadow: none;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__next-button .Layer__btn-text,
 #Layer__datepicker__portal .Layer__datepicker__next-button .Layer__btn-text {
@@ -1066,10 +1087,10 @@
 }
 .Layer__datepicker__wrapper .Layer__datepicker__prev-button,
 #Layer__datepicker__portal .Layer__datepicker__prev-button {
-  border-radius: 0;
   padding: 0 var(--spacing-xs);
-  box-shadow: none;
+  border-radius: 0;
   border-left: 1px solid var(--input-border-color);
+  box-shadow: none;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__prev-button .Layer__btn-text,
 #Layer__datepicker__portal .Layer__datepicker__prev-button .Layer__btn-text {
@@ -1077,36 +1098,36 @@
 }
 .Layer__datepicker__wrapper .Layer__datepicker__nav-arrow-highlight,
 #Layer__datepicker__portal .Layer__datepicker__nav-arrow-highlight {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--color-info-warning);
-  display: flex;
   position: absolute;
   top: -4px;
   right: -5px;
+  display: flex;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: var(--color-info-warning);
 }
 .Layer__datepicker__wrapper .Layer__datepicker__current-button,
 #Layer__datepicker__portal .Layer__datepicker__current-button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  box-shadow: none;
   border-left: 1px solid var(--input-border-color);
+  box-shadow: none;
 }
 .Layer__datepicker__wrapper .react-datepicker__input-container input,
 .Layer__datepicker__wrapper .react-datepicker__input-container button,
 #Layer__datepicker__portal .react-datepicker__input-container input,
 #Layer__datepicker__portal .react-datepicker__input-container button {
-  border-radius: var(--input-border-radius);
-  padding: 8px;
   box-sizing: border-box;
   position: relative;
+  width: 13rem;
+  padding: 8px;
+  border-radius: var(--input-border-radius);
   border: none;
   margin: 1px;
-  max-width: 170px;
-  font-family: var(--font-family);
   font-size: var(--input-font-size);
   line-height: 140%;
+  font-family: var(--font-family);
 }
 .Layer__datepicker__wrapper .react-datepicker__input-container input:focus,
 .Layer__datepicker__wrapper .react-datepicker__input-container input:active,
@@ -1125,9 +1146,9 @@
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper,
 #Layer__datepicker__portal .Layer__datepicker__popper {
+  z-index: 105;
   min-width: 275px;
   max-width: 275px;
-  z-index: 105;
   border-radius: 8px;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper.Layer__datepicker__time__popper,
@@ -1149,22 +1170,22 @@
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
-  left: auto;
   right: 42px;
+  left: auto;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
 #Layer__datepicker__portal .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: 11px;
+  display: block;
+  height: 6px;
   width: 6px;
+  border-width: 1px 1px 0 0;
+  border-color: var(--color-base-800);
+  border-style: solid;
+  content: "";
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container {
@@ -1181,41 +1202,41 @@
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__header {
   padding: var(--spacing-sm) 0 0;
-  background: white;
   border: none;
+  background: white;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker-year-header,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker-year-header {
-  background-color: var(--color-base-0);
   padding: var(--spacing-sm);
-  text-align: left;
-  font-weight: 460;
+  border-bottom: 1px solid var(--color-base-200);
+  background-color: var(--color-base-0);
+  font-size: 14px;
   font-family: var(--font-family);
+  font-weight: 460;
+  text-align: left;
   font-feature-settings:
     "cv10" on,
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  font-size: 14px;
-  border-bottom: 1px solid var(--color-base-200);
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month {
   padding: 0 var(--spacing-md) var(--spacing-sm);
-  text-align: left;
-  font-weight: 460;
+  border-bottom: 1px solid var(--color-base-200);
+  font-size: 14px;
   font-family: var(--font-family);
+  font-weight: 460;
+  text-align: left;
   font-feature-settings:
     "cv10" on,
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  font-size: 14px;
-  border-bottom: 1px solid var(--color-base-200);
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
@@ -1223,11 +1244,11 @@
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
-  width: 32px;
   height: 32px;
-  color: var(--color-base-500);
+  width: 32px;
   font-size: 12px;
   line-height: 1.7rem;
+  color: var(--color-base-500);
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper,
@@ -1472,8 +1493,8 @@
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__day--disabled,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--disabled,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--disabled {
-  color: var(--color-base-300);
   cursor: not-allowed;
+  color: var(--color-base-300);
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
@@ -1661,8 +1682,8 @@
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--selected,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--selected {
   background-color: var(--color-base-800);
-  color: var(--color-base-100);
   font-weight: 460;
+  color: var(--color-base-100);
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
@@ -2114,8 +2135,8 @@
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__week .react-datepicker__day,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__day,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__day {
-  width: 32px;
   height: 32px;
+  width: 32px;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
 .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__year-text,
@@ -2141,36 +2162,36 @@
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__year-text,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__month-text,
 #Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text {
-  width: 100%;
   height: 32px;
+  width: 100%;
 }
 .Layer__datepicker__wrapper .react-datepicker__children-container,
 #Layer__datepicker__portal .react-datepicker__children-container {
   width: 100%;
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer,
 #Layer__datepicker__portal .Layer__datepicker__popper__custom-footer {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: flex-start;
+  justify-content: flex-start;
   padding: var(--spacing-md) var(--spacing-xs);
   border-top: 1px solid var(--color-base-200);
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer .Layer__text-btn,
 #Layer__datepicker__portal .Layer__datepicker__popper__custom-footer .Layer__text-btn {
   padding: var(--spacing-xs) var(--spacing-xs);
-  color: var(--color-base-800);
   font-weight: 460;
+  color: var(--color-base-800);
   text-decoration: none;
 }
 .Layer__datepicker__wrapper .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
 #Layer__datepicker__portal .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;
+  color: var(--color-base-100);
 }
 .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item,
 #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
@@ -2187,14 +2208,14 @@
 .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected,
 #Layer__datepicker__portal .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;
+  color: var(--color-base-100);
 }
 .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header,
 #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
   padding: var(--spacing-sm) 0 0;
-  background: white;
   border: none;
+  background: white;
 }
 .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only,
 #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only {
@@ -2204,16 +2225,16 @@
 #Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
   display: none;
   padding: 0 var(--spacing-md) var(--spacing-sm);
-  text-align: left;
-  font-weight: 460;
+  border-bottom: 1px solid var(--color-base-200);
+  font-size: 14px;
   font-family: var(--font-family);
+  font-weight: 460;
+  text-align: left;
   font-feature-settings:
     "cv10" on,
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  font-size: 14px;
-  border-bottom: 1px solid var(--color-base-200);
 }
 .Layer__datepicker__time__wrapper {
   max-width: 98px;
@@ -2249,23 +2270,23 @@
     box-shadow: none;
   }
   .Layer__datepicker__wrapper.Layer__datepicker__wrapper--arrows .react-datepicker__input-container input {
-    box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
-    border-radius: 8px;
-    margin-right: 8px;
     max-width: 90px;
+    border-radius: 8px;
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
+    box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
+    margin-right: 8px;
   }
   .Layer__datepicker__wrapper .Layer__datepicker__next-button {
-    border-radius: 8px;
     padding: 0 var(--spacing-xs);
+    border-radius: 8px;
     border: none;
-    margin-left: 8px;
     box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
+    margin-left: 8px;
   }
   .Layer__datepicker__wrapper .Layer__datepicker__prev-button {
-    border-radius: 8px;
     padding: 0 var(--spacing-xs);
+    border-radius: 8px;
     border: none;
     box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
   }
@@ -2286,8 +2307,8 @@
     bottom: -100%;
   }
   #Layer__datepicker__portal .react-datepicker__portal {
-    align-items: flex-end;
     z-index: 105;
+    align-items: flex-end;
     background-color: rgba(36, 36, 36, 0);
     transition: all 180ms ease-in-out;
   }
@@ -2295,8 +2316,8 @@
     outline-color: var(--color-base-800);
   }
   #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
-    border-radius: var(--spacing-md);
     overflow: clip;
+    border-radius: var(--spacing-md);
   }
   #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container {
     width: 100%;
@@ -2310,10 +2331,10 @@
   #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
     gap: var(--spacing-2xs);
-    padding: var(--spacing-md) var(--spacing-xs);
+    justify-content: space-between;
     width: 100%;
+    padding: var(--spacing-md) var(--spacing-xs);
     border-radius: var(--spacing-md);
   }
   #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list .react-datepicker__time-list-item {
@@ -2329,86 +2350,86 @@
     display: none;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
-    transition: bottom 0.2s ease-in-out;
     position: relative;
     bottom: -100px;
-    margin: 0 var(--spacing-md) 32px var(--spacing-md);
     width: 100%;
     max-width: 414px;
-    border: none;
     border-radius: var(--spacing-md);
+    border: none;
     box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
+    margin: 0 var(--spacing-md) 32px var(--spacing-md);
+    transition: bottom 0.2s ease-in-out;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous {
-    left: auto;
     right: 42px;
+    left: auto;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
   #Layer__datepicker__portal .react-datepicker__portal .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: 11px;
+    display: block;
+    height: 6px;
     width: 6px;
+    border-width: 1px 1px 0 0;
+    border-color: var(--color-base-800);
+    border-style: solid;
+    content: "";
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container {
-    min-width: 275px;
     width: 100%;
+    min-width: 275px;
     max-width: 100%;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__header {
     padding: var(--spacing-sm) 0 0;
-    background: white;
     border: none;
+    background: white;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker-year-header {
-    background-color: var(--color-base-0);
     padding: var(--spacing-sm);
-    text-align: left;
-    font-weight: 460;
-    font-family: var(--font-family);
     border-radius: var(--spacing-md) var(--spacing-md) 0 0;
+    border-bottom: 1px solid var(--color-base-200);
+    background-color: var(--color-base-0);
+    font-size: 14px;
+    font-family: var(--font-family);
+    font-weight: 460;
+    text-align: left;
     font-feature-settings:
       "cv10" on,
       "cv05" on,
       "cv08" on,
       "ss03" on;
-    font-size: 14px;
-    border-bottom: 1px solid var(--color-base-200);
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month {
     padding: 0 var(--spacing-md) var(--spacing-sm);
-    text-align: left;
-    font-weight: 460;
+    border-bottom: 1px solid var(--color-base-200);
+    font-size: 14px;
     font-family: var(--font-family);
+    font-weight: 460;
+    text-align: left;
     font-feature-settings:
       "cv10" on,
       "cv05" on,
       "cv08" on,
       "ss03" on;
-    font-size: 14px;
-    border-bottom: 1px solid var(--color-base-200);
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     padding: var(--spacing-xs) var(--spacing-xs) 0;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
-    width: 100%;
     height: 32px;
-    color: var(--color-base-500);
+    width: 100%;
     font-size: 12px;
     line-height: 1.7rem;
+    color: var(--color-base-500);
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year {
@@ -2543,8 +2564,8 @@
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__day--disabled,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--disabled,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--disabled {
-    color: var(--color-base-300);
     cursor: not-allowed;
+    color: var(--color-base-300);
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
@@ -2660,8 +2681,8 @@
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--selected,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--selected {
     background-color: var(--color-base-800);
-    color: var(--color-base-100);
     font-weight: 460;
+    color: var(--color-base-100);
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
@@ -2891,8 +2912,8 @@
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__week .react-datepicker__day,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__day,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__day {
-    width: 100%;
     height: 32px;
+    width: 100%;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__year-text,
@@ -2906,8 +2927,8 @@
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__year-text,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__month-text,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text {
-    width: 100%;
     height: 32px;
+    width: 100%;
   }
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__year-wrapper,
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper {
@@ -2916,8 +2937,8 @@
 }
 @media screen and (width <= 500px) {
   #Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
-    margin: 0;
     border-radius: var(--spacing-md) var(--spacing-md) 0 0;
+    margin: 0;
   }
   #Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
     border-radius: var(--spacing-md) var(--spacing-md) 0 0;
@@ -2928,9 +2949,9 @@
 }
 @media screen and (resolution >= 2dppx) {
   .Layer__component .react-datepicker__input-container input {
-    font-size: 16px;
     min-height: 36px;
     max-height: 36px;
+    font-size: 16px;
   }
 }
 .Layer__datepicker__year-content {
@@ -2938,12 +2959,12 @@
 }
 .Layer__datepicker__date-dot {
   position: absolute;
-  width: 8px;
+  top: 50%;
+  right: -16px;
   height: 8px;
+  width: 8px;
   border-radius: 50%;
   background-color: var(--color-info-warning);
-  right: -16px;
-  top: 50%;
   transform: translateY(-50%);
 }
 .Layer__details-list {
@@ -2951,11 +2972,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 +2984,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 +3000,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;
+  display: flex;
   padding: var(--spacing-xs) var(--spacing-md);
-  flex: 1;
 }
 .Layer__file-thumb {
   display: flex;
@@ -4436,7 +4458,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 +4609,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;
 }
@@ -4644,6 +4779,25 @@ tbody .Layer__table__empty-row:first-child {
   padding: var(--spacing-xs) var(--spacing-md);
   color: var(--text-color-secondary);
 }
+.Layer__UI__FieldError {
+  padding-block-start: var(--spacing-3xs);
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}
+.Layer__UI__TextField {
+  display: grid;
+  grid-template-areas: "label" "input" "errorMessage";
+}
+.Layer__UI__TextField[data-inline] {
+  grid-template-areas: "label input" ". errorMessage";
+  align-items: center;
+}
+.Layer__UI__TextField[data-inline][data-textarea] {
+  align-items: start;
+}
+.Layer__UI__TextField > [slot=errorMessage] {
+  grid-area: errorMessage;
+}
 .Layer__UI__Input {
   min-inline-size: 0;
   padding-inline: var(--spacing-xs);
@@ -4669,17 +4823,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;
@@ -4687,6 +4840,41 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__InputGroup[data-disabled] {
   cursor: not-allowed;
 }
+.Layer__UI__TextArea {
+  box-sizing: border-box;
+  min-block-size: 5rem;
+  padding-block: var(--spacing-xs);
+  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);
+  font-size: var(--input-font-size);
+  line-height: 140%;
+  font-family: var(--font-family);
+}
+.Layer__UI__TextArea::-webkit-scrollbar-track {
+  margin-block: 2px;
+}
+.Layer__UI__TextArea[data-resize=both] {
+  resize: both;
+}
+.Layer__UI__TextArea[data-resize=horizontal] {
+  resize: horizontal;
+}
+.Layer__UI__TextArea[data-resize=vertical] {
+  resize: vertical;
+}
+.Layer__UI__TextArea[data-resize=none] {
+  resize: none;
+}
+.Layer__UI__TextArea[data-focused] {
+  border-color: var(--color-base-800);
+  outline: 2px solid var(--outline-default);
+}
+.Layer__UI__TextArea[data-disabled] {
+  cursor: not-allowed;
+}
 .Layer__ListBox {
   display: flex;
   flex-direction: column;
@@ -4890,6 +5078,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 +5355,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 +5427,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 +5444,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 +5588,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],
@@ -5833,6 +6079,15 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-base-0);
   color: var(--color-base-200);
 }
+.Layer__BaseDetailView {
+  overflow: hidden;
+}
+.Layer__BaseDetailView__Header {
+  align-items: center;
+  height: 4.75rem;
+  padding-left: 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+}
 .Layer__bills__view .Layer__bills__main-datepicker input {
   min-width: 180px;
 }
@@ -6432,6 +6687,72 @@ 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__InvoiceDetail__SubHeader {
+  align-items: center;
+  height: 5.5rem;
+  padding-left: 2.25rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.Layer__InvoiceForm {
+  min-width: 32rem;
+}
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__Customer,
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__Email,
+.Layer__InvoiceForm .Layer__InvoiceForm__Field__Address {
+  grid-template-columns: 8rem 24rem;
+}
+.Layer__InvoiceForm .Layer__InvoiceForm__LineItem {
+  display: grid;
+  grid-template-columns: minmax(10rem, 1.5fr) minmax(12rem, 2fr) minmax(5rem, 0.75fr) minmax(5rem, 0.75fr) minmax(5rem, 0.75fr) auto;
+  width: 100%;
+  min-width: 40rem;
+}
+.Layer__InvoiceForm__Metadata {
+  padding: var(--spacing-lg) var(--spacing-2xl);
+}
+.Layer__InvoiceForm__LineItems {
+  padding: var(--spacing-lg) var(--spacing-2xl);
+  background-color: var(--color-base-50);
+}
+.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,8 +7883,15 @@ 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__CustomerSelector {
+  display: grid;
+  grid-template-areas: "label" "input";
+  gap: var(--spacing-3xs);
+}
+.Layer__CustomerSelector--inline {
+  grid-template-areas: "label input";
+  gap: 0;
+  align-items: center;
 }
 .Layer__Public,
 .Layer__Public::before,
@@ -9302,6 +9630,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,75 +10811,30 @@ 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 {
   display: flex;