@layerfi/components 0.1.103-alpha → 0.1.104-alpha

package/dist/index.css

@@ -124,19 +124,19 @@
   --btn-bg-color: var(--color-white);
   --btn-color-primary: var(--color-white);
   --btn-bg-color-primary: var(--color-black);
-  --btn-color-hover: var(--color-white);
-  --btn-bg-color-hover: var(--color-primary);
+  --btn-color-hover: var(--fg-brand-primary, var(--color-white));
+  --btn-bg-color-hover: var(--bg-brand-primary, var(--color-primary));
   --btn-color-icon: var(--color-black);
   --btn-bg-color-icon: var(--color-base-50);
-  --btn-color-icon-hover: var(--color-primary);
-  --btn-bg-color-icon-hover: var(--color-accent);
+  --btn-color-icon-hover: var(--fg-brand-accent, var(--color-primary));
+  --btn-bg-color-icon-hover: var(--bg-brand-accent, 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);
+  --badge-color: var(--fg-brand-accent, var(--color-primary));
+  --badge-fg-color: var(--fg-brand-accent, var(--color-primary));
+  --badge-bg-color: var(--bg-brand-accent, var(--color-accent));
   --badge-color-info: var(--color-info);
   --badge-fg-color-info: var(--color-info-fg);
   --badge-bg-color-info: var(--color-info-bg);
@@ -317,28 +317,28 @@
   }
 }
 .Layer__badge {
+  box-sizing: border-box;
   display: inline-flex;
   gap: var(--spacing-3xs);
+  align-items: center;
+  height: 27px;
+  padding: var(--spacing-3xs) var(--spacing-xs);
   border-radius: var(--border-radius-5xl);
   background-color: var(--badge-bg-color);
-  color: var(--badge-color);
-  padding: var(--spacing-3xs) var(--spacing-xs);
   font-size: var(--text-sm);
-  align-items: center;
+  color: var(--badge-color);
   transition: all var(--transition-speed) ease-in-out;
-  box-sizing: border-box;
-  height: 27px;
 }
 .Layer__badge.Layer__badge--small {
-  font-size: var(--text-xs);
+  height: 21px;
   padding: var(--spacing-3xs) var(--spacing-xs);
+  font-size: var(--text-xs);
   line-height: 1.1;
-  height: 21px;
 }
 .Layer__badge.Layer__badge--clickable {
-  cursor: pointer;
   min-height: 21px;
   border-width: 0;
+  cursor: pointer;
 }
 .Layer__badge .Layer__badge__icon {
   margin-top: 2px;
@@ -935,16 +935,16 @@
   container-type: inline-size;
 }
 .Layer__component-container::-webkit-scrollbar {
-  width: 6px;
   height: 6px;
+  width: 6px;
 }
 .Layer__component-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
   border-radius: 4px;
+  background: #f1f1f1;
 }
 .Layer__component-container::-webkit-scrollbar-thumb {
-  background: #e2e2e2;
   border-radius: 4px;
+  background: #e2e2e2;
 }
 .Layer__component-container::-webkit-scrollbar-thumb:hover {
   background: #999;
@@ -962,13 +962,13 @@
   background: transparent;
 }
 .Layer__component-header {
-  padding: var(--spacing-md);
+  box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
   gap: var(--spacing-md);
-  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md);
 }
 .Layer__component-header.Layer__component-header--next-line-actions {
   flex-direction: column;
@@ -981,21 +981,16 @@
   width: 100%;
 }
 .Layer__component-header__title-wrapper {
+  position: relative;
   display: flex;
-  align-items: center;
   gap: var(--spacing-sm);
-  position: relative;
+  align-items: center;
 }
 .Layer__header__actions {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
   gap: var(--spacing-sm);
-}
-.Layer__header__actions-col {
-  display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  justify-content: space-between;
 }
 @container (max-width: 760px) {
   .Layer__component-header {
@@ -1004,9 +999,9 @@
 }
 @container (min-width: 1023px) {
   .Layer__component-header {
-    padding-left: var(--spacing-xl);
-    padding-right: var(--spacing-xl);
     padding-top: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    padding-left: var(--spacing-xl);
   }
 }
 .Layer__error-boundary {
@@ -4668,16 +4663,17 @@ tbody .Layer__table__empty-row:first-child {
   border-end-start-radius: inherit;
 }
 .Layer__InputGroup {
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--spacing-3xs);
   align-items: center;
   min-block-size: 2.25rem;
-  padding-inline-start: var(--spacing-xs);
-  padding-inline-end: var(--spacing-3xs);
   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);
 }
 .Layer__InputGroup[data-focus-within] {
   border-color: var(--outline-active);
@@ -5790,28 +5786,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__TransactionsActions > [slot=download-upload] {
   grid-area: download-upload;
 }
-.Layer__TransactionsSearchField {
-  display: grid;
-  grid-template-areas: "icon search";
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  height: 2.25rem;
-  border-radius: var(--border-radius-2xs);
-  border: 1px solid var(--border-color);
-  background: var(--color-base-0);
-  padding-inline-end: var(--spacing-3xs);
-}
-.Layer__TransactionsSearchField[data-focus-within] {
-  outline: 2px solid var(--outline-subtle);
-}
-.Layer__TransactionsSearchField > [slot=icon] {
-  grid-area: icon;
-  block-size: 2rem;
-  inline-size: 2rem;
-}
-.Layer__TransactionsSearchField > [slot=search] {
-  grid-area: search;
-}
 .Layer__due-status {
   display: flex;
   flex-direction: column;
@@ -6598,47 +6572,47 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__tasks-component {
   display: flex;
   flex-direction: column;
-  height: 100%;
   overflow-y: auto;
+  height: 100%;
   border-radius: 8px;
   box-shadow: 0 0 0 1px var(--color-base-300);
   background-color: var(--color-base-0);
 }
 .Layer__tasks-pending {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-xs);
   align-items: center;
   justify-content: flex-start;
-  box-sizing: border-box;
-  border-top: 1px solid var(--color-base-300);
   padding: var(--spacing-md);
-  gap: var(--spacing-xs);
+  border-top: 1px solid var(--color-base-300);
 }
 .Layer__tasks-pending .Layer__tasks-pending-header {
+  box-sizing: border-box;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  width: 100%;
-  box-sizing: border-box;
+  justify-content: space-between;
   min-height: 36px;
+  width: 100%;
 }
 .Layer__tasks-pending .Layer__tasks-pending-main {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-2xs);
   align-items: flex-start;
   justify-content: center;
-  gap: var(--spacing-2xs);
-  box-sizing: border-box;
   width: 100%;
 }
 .Layer__tasks-pending .Layer__tasks-pending-bar {
   display: flex;
-  align-items: center;
   gap: var(--spacing-xs);
-  font-weight: 540;
+  align-items: center;
   padding: var(--spacing-3xs) var(--spacing-xs);
-  background-color: var(--color-base-50);
   border-radius: 8px;
+  background-color: var(--color-base-50);
+  font-weight: 540;
 }
 .Layer__tasks-pending .Layer__tasks-pending-bar .mini-chart {
   transform: rotate(90deg);
@@ -6650,11 +6624,11 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-warning);
 }
 .Layer__tasks-header {
-  min-height: 36px;
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-md);
+  min-height: 36px;
   padding: var(--spacing-md);
   container-type: inline-size;
 }
@@ -6668,8 +6642,8 @@ tbody .Layer__table__empty-row:first-child {
   max-height: 0;
 }
 .Layer__tasks-list {
-  background-color: var(--color-base-0);
   box-shadow: 0 0 0 1px var(--color-base-300);
+  background-color: var(--color-base-0);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper {
   padding: var(--spacing-2xs);
@@ -6684,21 +6658,21 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item:hover,
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item.Layer__tasks-list-item__expanded {
-  background: var(--color-base-50);
   border-radius: 6px;
+  background: var(--color-base-50);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
   display: flex;
+  gap: var(--spacing-xs);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-xs);
   padding: var(--spacing-md);
   cursor: pointer;
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info {
   display: flex;
-  align-items: center;
   gap: var(--spacing-xs);
+  align-items: center;
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info .Layer__tasks-list-item__head-info__status {
   display: flex;
@@ -6715,17 +6689,17 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-info-success);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--pending .Layer__tasks-list-item__head-info__status {
-  color: var(--color-info-warning-fg);
   background: var(--color-info-warning-bg);
+  color: var(--color-info-warning-fg);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
+  overflow: hidden;
+  height: 0;
   padding-right: var(--spacing-md);
+  padding-bottom: 0;
   padding-left: var(--spacing-3xl);
   margin-left: var(--spacing-3xs);
-  padding-bottom: 0;
-  height: 0;
   opacity: 0;
-  overflow: hidden;
   transition: all 0.2s ease-out;
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info {
@@ -6745,29 +6719,29 @@ tbody .Layer__table__empty-row:first-child {
   font-size: var(--text-sm);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list-item__link {
-  color: var(--color-primary);
   font-size: var(--text-sm);
+  color: var(--color-base-900);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list__links-list {
-  margin: 0;
   padding: var(--spacing-3xs) 0 var(--spacing-sm) var(--spacing-md);
+  margin: 0;
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item--completed {
   color: var(--color-base-500);
 }
 .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item__body--expanded {
-  padding-bottom: var(--spacing-sm);
   height: auto;
+  padding-bottom: var(--spacing-sm);
   opacity: 1;
 }
 .Layer__tasks-list .Layer__tasks-empty-state {
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-md);
-  text-align: center;
   padding: var(--spacing-md);
+  text-align: center;
   color: var(--color-base-500);
 }
 .Layer__tasks-list-item__actions {
@@ -6780,22 +6754,22 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
   height: 32px;
+  width: 32px;
   border-radius: 4px;
-  background-color: var(--color-base-50);
   box-shadow: 0 0 0 1px var(--color-base-300);
+  background-color: var(--color-base-50);
 }
 .Layer__tasks__expand-icon {
-  transition: transform 150ms ease-out;
-  color: var(--color-base-600);
   margin-left: -15px;
+  color: var(--color-base-600);
+  transition: transform 150ms ease-out;
 }
 @container (width <= 400px) {
   .Layer__tasks-component .Layer__tasks-pending {
     flex-direction: column;
-    align-items: stretch;
     gap: var(--spacing-xs);
+    align-items: stretch;
   }
   .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
     justify-content: space-between;
@@ -6814,9 +6788,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__tasks-header__notification {
   display: flex;
   flex-wrap: wrap;
+  gap: var(--spacing-xs);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-xs);
   padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs) var(--spacing-md);
   background:
     linear-gradient(
@@ -6836,24 +6810,24 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__tasks-header__notification__text {
   display: flex;
+  gap: var(--spacing-xs);
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-xs);
   white-space: nowrap;
 }
 .Layer__tasks-header__notification__button {
-  background: var(--color-info-warning-fg);
-  color: var(--color-info-warning-bg);
-  border: none;
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
   padding: var(--spacing-3xs) var(--spacing-xs);
   border-radius: 4px;
+  border: none;
+  background: var(--color-info-warning-fg);
   cursor: pointer;
   font-size: var(--text-sm);
   font-weight: var(--font-weight-bold);
+  color: var(--color-info-warning-bg);
   font-variation-settings: "wght" var(--font-weight-bold);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
   transition: all 0.12s ease-in-out;
   white-space: nowrap;
 }
@@ -6866,13 +6840,13 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__tasks__badge {
   display: flex;
+  gap: var(--spacing-3xs);
   align-items: center;
-  font-size: var(--text-xs);
-  background: var(--color-info-warning);
-  color: var(--color-info-warning-bg);
   padding: var(--spacing-3xs) var(--border-radius-2xs);
   border-radius: var(--border-radius-3xs);
-  gap: var(--spacing-3xs);
+  background: var(--color-info-warning);
+  font-size: var(--text-xs);
+  color: var(--color-info-warning-bg);
   white-space: nowrap;
 }
 .Layer__tasks__badge .Layer__tasks__badge__label-short {
@@ -6887,38 +6861,38 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__tasks__badge[data-icononly] {
-  border-radius: 50%;
   gap: 0;
-  padding: 0;
-  width: 16px;
   height: 16px;
+  width: 16px;
+  padding: 0;
+  border-radius: 50%;
 }
 .Layer__tasks__badge .Layer__text {
   line-height: 10px;
 }
 .Layer__tasks__badge .Layer__tasks__badge__icon-wrapper {
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
 }
 .Layer__tasks__badge[data-status=info] {
-  color: var(--color-info-fg);
   background: var(--color-info-bg);
+  color: var(--color-info-fg);
 }
 .Layer__tasks__badge[data-status=warning] {
-  color: var(--color-info-warning-bg);
   background: var(--color-info-warning);
+  color: var(--color-info-warning-bg);
 }
 .Layer__tasks__badge[data-status=success] {
-  color: var(--color-info-success-fg);
   background: var(--color-info-success-bg);
+  color: var(--color-info-success-fg);
 }
 .Layer__tasks__badge[data-status=error] {
-  color: var(--color-info-error);
   background: var(--color-info-error-bg);
+  color: var(--color-info-error);
 }
 .Layer__tasks-month-selector {
   display: grid;
@@ -7567,6 +7541,22 @@ tbody .Layer__table__empty-row:first-child {
   flex: 3 1 0;
   min-width: 12rem;
 }
+.Layer__SearchField {
+  display: grid;
+  grid-template-areas: "icon search";
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0;
+  padding-inline-start: 0;
+  padding-inline-end: var(--spacing-3xs);
+}
+.Layer__SearchField > [slot=icon] {
+  grid-area: icon;
+  block-size: 2rem;
+  inline-size: 2rem;
+}
+.Layer__SearchField > [slot=search] {
+  grid-area: search;
+}
 .Layer__TagSelectorLayoutGroup {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -7958,7 +7948,7 @@ tbody .Layer__table__empty-row:first-child {
   position: sticky;
   z-index: 2;
   right: 0;
-  --width: 520px;
+  --width: 56ch;
   width: var(--width);
   min-width: var(--width);
   max-width: var(--width);
@@ -8373,7 +8363,7 @@ tbody .Layer__table__empty-row:first-child {
   box-sizing: border-box;
   position: sticky;
   z-index: 2;
-  --right-adjust: 520px;
+  --right-adjust: 56ch;
   right: var(--right-adjust);
   width: 130px;
   min-width: 130px;
@@ -8395,7 +8385,7 @@ tbody .Layer__table__empty-row:first-child {
   box-sizing: border-box;
   position: sticky;
   z-index: 2;
-  right: 520px;
+  right: 56ch;
   width: 0;
   min-width: 0;
   max-width: 0;
@@ -8412,7 +8402,7 @@ tbody .Layer__table__empty-row:first-child {
   position: sticky;
   z-index: 2;
   right: 0;
-  --width: 520px;
+  --width: 56ch;
   width: var(--width);
   min-width: var(--width);
   max-width: var(--width);
@@ -8428,13 +8418,13 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-1000);
 }
 .Layer__bank-transactions__tx-text {
-  width: 100%;
+  max-width: 32ch;
 }
 .Layer__bank-transactions__account-col {
   box-sizing: border-box;
-  width: 180px;
-  min-width: 125px;
-  max-width: 180px;
+  width: 30ch;
+  min-width: 10ch;
+  max-width: 30ch;
 }
 .Layer__bank-transactions__documents-col {
   box-sizing: border-box;
@@ -8474,7 +8464,6 @@ tbody .Layer__table__empty-row:first-child {
   box-sizing: border-box;
   display: block;
   overflow: hidden;
-  max-width: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -9331,6 +9320,9 @@ tbody .Layer__table__empty-row:first-child {
 .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;
 }
@@ -9350,6 +9342,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__chart-of-accounts__table .Layer__chart-of-accounts--actions {
   width: 8rem;
 }
+.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);
@@ -9896,8 +9894,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__data-state {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 .Layer__data-state.Layer__data-state--spacing {
   padding: var(--spacing-xl);
@@ -9906,18 +9904,18 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
   height: 32px;
-  box-shadow: 0 0 0 1px var(--color-base-300);
+  width: 32px;
   border-radius: var(--spacing-3xs);
-  background: transparent;
-  color: var(--text-color-primary);
+  box-shadow: 0 0 0 1px var(--color-base-300);
   margin-bottom: var(--spacing-md);
+  background: transparent;
+  color: var(--fg-default);
 }
 .Layer__data-state__icon--neutral {
   box-shadow: 0 0 3px 0 rgba(23, 51, 45, 0.04) inset;
-  background: var(--color-base-100);
-  color: var(--text-color-primary);
+  background: var(--bg-muted);
+  color: var(--fg-default);
 }
 .Layer__data-state__icon--success {
   box-shadow: 0 0 3px 0 rgba(23, 51, 45, 0.04) inset;
@@ -9931,13 +9929,13 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__data-state__title {
   display: block;
   margin-bottom: var(--spacing-2xs);
-  color: var(--color-base-700);
   text-align: center;
+  color: var(--color-base-700);
 }
 .Layer__data-state__description {
   display: block;
-  text-align: center;
   margin-bottom: var(--spacing-xl);
+  text-align: center;
   color: var(--color-base-500);
 }
 .Layer__data-state--inline {
@@ -9946,8 +9944,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__data-state--inline .Layer__data-state__title,
 .Layer__data-state--inline .Layer__data-state__description {
-  text-align: left;
   margin-bottom: 0;
+  text-align: left;
 }
 .Layer__data-state--inline .Layer__data-state__icon {
   margin-bottom: 0;
@@ -10484,11 +10482,11 @@ tbody .Layer__table__empty-row:first-child {
   margin-left: 0;
 }
 .Layer__pagination-container {
+  position: sticky;
+  left: 0;
   display: flex;
   justify-content: flex-end;
   padding: var(--spacing-md);
-  position: sticky;
-  left: 0;
 }
 @container (min-width: 1400px) {
   .Layer__pagination-container {
@@ -10499,43 +10497,43 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__pagination {
   display: inline-flex;
-  list-style-type: none;
+  gap: 2px;
   padding: var(--spacing-4xs);
-  background: var(--color-base-50);
-  box-shadow: 0 0 0 1px var(--color-base-300);
   border-radius: var(--border-radius-2xs);
-  gap: 2px;
+  box-shadow: 0 0 0 1px var(--color-base-300);
   margin: 0;
+  background: var(--color-base-50);
+  list-style-type: none;
 }
 .Layer__pagination .Layer__pagination-item {
-  display: flex;
   box-sizing: border-box;
-  height: 32px;
-  width: 32px;
-  text-align: center;
+  display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--border-radius-3xs);
-  color: var(--color-base-700);
-  font-size: var(--text-md);
+  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 {
-  background-color: transparent;
-  color: var(--color-base-700);
   box-shadow: none;
+  background-color: transparent;
   cursor: default;
+  color: var(--color-base-700);
 }
 .Layer__pagination .Layer__pagination-item:hover {
-  background-color: var(--color-base-0);
-  color: var(--color-base-900);
   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 {
-  background-color: var(--color-base-400);
-  color: var(--color-base-900);
+  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 {