@empathyco/x-components 6.0.0-alpha.27 → 6.0.0-alpha.28

package/design-system/deprecated-full-theme.css

@@ -1,5 +1,20 @@
 
 
+.x-uppercase {
+  text-transform: uppercase;
+}
+
+.x-lowercase {
+  text-transform: lowercase;
+}
+
+.x-capitalize {
+  text-transform: capitalize;
+}
+
+.x-normal-case {
+  text-transform: none;
+}
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -964,21 +979,6 @@
 .x-line-height--loose {
   line-height: 2 !important;
 }
-.x-uppercase {
-  text-transform: uppercase;
-}
-
-.x-lowercase {
-  text-transform: lowercase;
-}
-
-.x-capitalize {
-  text-transform: capitalize;
-}
-
-.x-normal-case {
-  text-transform: none;
-}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -1013,15 +1013,6 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
-.x-font-weight--light {
-  font-weight: var(--x-number-font-weight-base-light) !important;
-}
-.x-font-weight--regular {
-  font-weight: var(--x-number-font-weight-base-regular) !important;
-}
-.x-font-weight--bold {
-  font-weight: var(--x-number-font-weight-base-bold) !important;
-}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -3274,6 +3265,15 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
+.x-font-weight--light {
+  font-weight: var(--x-number-font-weight-base-light) !important;
+}
+.x-font-weight--regular {
+  font-weight: var(--x-number-font-weight-base-regular) !important;
+}
+.x-font-weight--bold {
+  font-weight: var(--x-number-font-weight-base-bold) !important;
+}
 .x-border-color--lead {
   border-color: var(--x-color-base-lead) !important;
 }
@@ -3378,9 +3378,6 @@
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
-.x-text--secondary {
-  --x-color-text-default: var(--x-color-text-secondary);
-}
 .x-text--light.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
@@ -3396,6 +3393,9 @@
 .x-text--light.x-small {
   --x-number-font-weight-small: var(--x-number-font-weight-base-light);
 }
+.x-text--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
+}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -3436,21 +3436,6 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none;
 }
-.x-text--bold.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
-}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -3553,6 +3538,21 @@
   overflow: hidden;
   white-space: nowrap;
 }
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+}
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
@@ -3566,6 +3566,48 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
+:root {
+  --x-color-background-tag-ghost: transparent;
+  --x-color-border-tag-ghost: transparent;
+  --x-color-background-tag-selected-ghost: transparent;
+  --x-color-border-tag-selected-ghost: transparent;
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+}
+:root {
+  --x-color-background-tag-ghost: transparent;
+  --x-color-border-tag-ghost: transparent;
+  --x-color-background-tag-selected-ghost: transparent;
+  --x-color-border-tag-selected-ghost: transparent;
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+}
+
+.x-tag--ghost.x-tag,
+.x-tag--ghost .x-tag {
+  --x-color-background-tag-default: var(--x-color-background-tag-ghost);
+  --x-color-border-tag-default: var(--x-color-border-tag-ghost);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
+  --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
+  --x-color-background-tag-default-curated-selected: var(
+    --x-color-background-tag-curated-selected-ghost
+  );
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-curated-selected-ghost
+  );
+}
 :root {
   --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3585,16 +3627,11 @@
   --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
 }
 :root {
-  --x-color-background-tag-ghost: transparent;
-  --x-color-border-tag-ghost: transparent;
-  --x-color-background-tag-selected-ghost: transparent;
-  --x-color-border-tag-selected-ghost: transparent;
-  --x-color-background-tag-curated-ghost: transparent;
-  --x-color-border-tag-curated-ghost: transparent;
-  --x-color-background-tag-curated-selected-ghost: transparent;
-  --x-color-border-tag-curated-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
 }
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
@@ -3642,36 +3679,6 @@
     --x-number-font-weight-tag-default-selected
   );
 }
-:root {
-  --x-color-background-tag-ghost: transparent;
-  --x-color-border-tag-ghost: transparent;
-  --x-color-background-tag-selected-ghost: transparent;
-  --x-color-border-tag-selected-ghost: transparent;
-  --x-color-background-tag-curated-ghost: transparent;
-  --x-color-border-tag-curated-ghost: transparent;
-  --x-color-background-tag-curated-selected-ghost: transparent;
-  --x-color-border-tag-curated-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
-}
-
-.x-tag--ghost.x-tag,
-.x-tag--ghost .x-tag {
-  --x-color-background-tag-default: var(--x-color-background-tag-ghost);
-  --x-color-border-tag-default: var(--x-color-border-tag-ghost);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
-  --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
-  --x-color-background-tag-default-curated-selected: var(
-    --x-color-background-tag-curated-selected-ghost
-  );
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
-  --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-curated-selected-ghost
-  );
-}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3893,31 +3900,6 @@
   );
   --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
 }
-:root {
-  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
-}
-:root {
-  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
-}
-
-.x-tag--card.x-tag,
-.x-tag--card .x-tag {
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
-  --x-size-border-radius-bottom-right-tag-default: var(
-    --x-size-border-radius-bottom-right-tag-card
-  );
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
-}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -3959,6 +3941,24 @@
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
 }
+:root {
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+}
+
+.x-tag--card.x-tag,
+.x-tag--card .x-tag {
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
+  --x-size-border-radius-bottom-right-tag-default: var(
+    --x-size-border-radius-bottom-right-tag-card
+  );
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -4393,6 +4393,13 @@
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
   --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
 }
+:root {
+  --x-string-overflow-scroll: auto;
+  --x-color-background-scroll-bar: transparent;
+  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
+  --x-color-background-scroll-bar-hover: transparent;
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);
@@ -4454,21 +4461,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
-:root {
-  --x-string-overflow-scroll: auto;
-  --x-color-background-scroll-bar: transparent;
-  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
-  --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
-}
 
 .x-scroll {
   overflow-y: var(--x-string-overflow-scroll);
@@ -4508,6 +4500,14 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4806,23 +4806,6 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 
 .x-result {
   display: grid;
@@ -4877,15 +4860,21 @@
   }
 }
 :root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
-
-.x-result.x-result--card {
-  overflow: hidden;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
-}
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
+  --x-size-border-width-result-picture-default: 0;
 }
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
@@ -4896,6 +4885,17 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
+
+.x-result.x-result--card {
+  overflow: hidden;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
+}
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -5172,51 +5172,6 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
-}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5454,6 +5409,51 @@
     --x-number-font-weight-base-regular
   );
 }
+:root {
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
 
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
@@ -5544,15 +5544,6 @@
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
 }
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
-}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -5645,6 +5636,15 @@
 .x-message > p {
   margin: 0;
 }
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+
+.x-modal__overlay {
+  background-color: var(--x-modal-overlay-color) !important;
+  opacity: var(--x-modal-overlay-opacity) !important;
+}
 /* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
@@ -5661,6 +5661,28 @@
   --x-size-padding-list-12: var(--x-size-base-12);
   --x-size-padding-list-13: var(--x-size-base-13);
 }
+:root {
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
+}
 /* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
@@ -6523,28 +6545,6 @@
     margin-bottom: var(--x-size-gap-list-20);
   }
 }
-:root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --x-size-gap-list-03: var(--x-size-base-03);
-  --x-size-gap-list-04: var(--x-size-base-04);
-  --x-size-gap-list-05: var(--x-size-base-05);
-  --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07);
-  --x-size-gap-list-08: var(--x-size-base-08);
-  --x-size-gap-list-09: var(--x-size-base-09);
-  --x-size-gap-list-10: var(--x-size-base-10);
-  --x-size-gap-list-11: var(--x-size-base-11);
-  --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13);
-  --x-size-gap-list-14: var(--x-size-base-14);
-  --x-size-gap-list-15: var(--x-size-base-15);
-  --x-size-gap-list-16: var(--x-size-base-16);
-  --x-size-gap-list-17: var(--x-size-base-17);
-  --x-size-gap-list-18: var(--x-size-base-18);
-  --x-size-gap-list-19: var(--x-size-base-19);
-  --x-size-gap-list-20: var(--x-size-base-20);
-}
 :root {
   --x-string-flow-list: column nowrap;
   --x-size-padding-list: 0;
@@ -6745,15 +6745,6 @@
   --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
   --x-size-border-width-left-input-group-line: 0;
 }
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
-}
 
 .x-input-group--line .x-input-group,
 .x-input-group--line.x-input-group {
@@ -6792,6 +6783,15 @@
   margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
   margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
 }
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7021,6 +7021,13 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7064,13 +7071,6 @@
   --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
   --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
 }
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
-}
 
 .x-input--pill.x-input,
 .x-input--pill .x-input {
@@ -7090,34 +7090,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-:root {
-  --x-color-background-input-default: var(--x-color-base-neutral-100);
-  --x-color-border-input-default: var(--x-color-base-neutral-70);
-  --x-color-border-input-default-focus: var(--x-color-base-lead);
-  --x-color-text-input-default: var(--x-color-text-default);
-  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
-  --x-size-border-width-input-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-height-input-default: var(--x-size-base-07);
-  --x-size-padding-right-input-default: var(--x-size-base-04);
-  --x-size-padding-left-input-default: var(--x-size-base-04);
-  --x-font-family-input-default: var(--x-font-family-text);
-  --x-size-font-input-default: var(--x-size-font-text);
-  --x-size-line-height-input-default: var(--x-size-line-height-text);
-  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
-  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
-  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
-}
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7249,10 +7221,38 @@
   line-height: var(--x-size-line-height-input-placeholder-default);
 }
 :root {
-  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
+  --x-color-background-input-default: var(--x-color-base-neutral-100);
+  --x-color-border-input-default: var(--x-color-base-neutral-70);
+  --x-color-border-input-default-focus: var(--x-color-base-lead);
+  --x-color-text-input-default: var(--x-color-text-default);
+  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
+  --x-size-border-width-input-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-height-input-default: var(--x-size-base-07);
+  --x-size-padding-right-input-default: var(--x-size-base-04);
+  --x-size-padding-left-input-default: var(--x-size-base-04);
+  --x-font-family-input-default: var(--x-font-family-text);
+  --x-size-font-input-default: var(--x-size-font-text);
+  --x-size-line-height-input-default: var(--x-size-line-height-text);
+  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
+  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
+  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
+:root {
+  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
   --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
 }
 :root {
@@ -7305,6 +7305,10 @@
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
 }
+:root {
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
+}
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7323,10 +7327,6 @@
   --x-size-width-icon-default: var(--x-size-width-icon-l);
   --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
-:root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
-}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7371,11 +7371,6 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 
 .x-grid-list {
   margin: 0;
@@ -7398,11 +7393,9 @@
   min-width: var(--x-size-min-width-grid-item);
 }
 :root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
 }
 .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
@@ -7417,6 +7410,13 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
 
 .x-hierarchical-filter-container {
   list-style: none;
@@ -7600,19 +7600,6 @@
   --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
 }
-:root {
-  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
 
 .x-facet--outlined.x-facet,
 .x-facet--outlined .x-facet {
@@ -7628,6 +7615,19 @@
   --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
 }
+:root {
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
 :root {
   --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
   --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7693,6 +7693,18 @@
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
   --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
+:root {
+  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-padding-facet-header-card: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7832,18 +7844,6 @@
   --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
   --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
 }
-:root {
-  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-padding-facet-header-card: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
-}
 
 .x-facet--card.x-facet,
 .x-facet--card .x-facet {
@@ -7886,14 +7886,6 @@
   --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
 }
-:root {
-  --x-size-gap-dropdown-pill: var(--x-size-base-03);
-  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-}
 
 .x-dropdown--pill {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -7929,6 +7921,14 @@
     --x-size-border-width-left-dropdown-list-pill
   );
 }
+:root {
+  --x-size-gap-dropdown-pill: var(--x-size-base-03);
+  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+}
 :root {
   --x-size-width-dropdown-m: 130px;
 }
@@ -7963,6 +7963,9 @@
   --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
   --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8033,9 +8036,6 @@
 .x-dropdown.x-dropdown--l {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8364,19 +8364,6 @@
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
-:root {
-  --x-size-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
 
 .x-dropdown--card {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8408,14 +8395,17 @@
   );
 }
 :root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-gap-dropdown-card: var(--x-size-base-03);
+  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
@@ -8438,6 +8428,16 @@
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8476,6 +8476,13 @@
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
+:root {
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -8494,13 +8501,6 @@
   --x-size-padding-left-button-default: 0;
   --x-size-padding-right-button-default: 0;
 }
-:root {
-  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8539,13 +8539,6 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
-}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -8562,32 +8555,17 @@
   );
 }
 :root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-
-.x-button--ghost.x-button,
-.x-button--ghost .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-ghost);
-  --x-color-border-button-default: var(--x-color-border-button-ghost);
-  --x-color-text-button-default: var(--x-color-text-button-ghost);
-}
-
-.x-button--ghost.x-button--ghost-start.x-button,
-.x-button--ghost.x-button--ghost-start .x-button {
-  --x-size-padding-left-button-default: 0;
-}
-
-.x-button--ghost.x-button--ghost-end.x-button,
-.x-button--ghost.x-button--ghost-end .x-button {
-  --x-size-padding-right-button-default: 0;
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8611,6 +8589,28 @@
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
   --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
+
+.x-button--ghost.x-button,
+.x-button--ghost .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-ghost);
+  --x-color-border-button-default: var(--x-color-border-button-ghost);
+  --x-color-text-button-default: var(--x-color-text-button-ghost);
+}
+
+.x-button--ghost.x-button--ghost-start.x-button,
+.x-button--ghost.x-button--ghost-start .x-button {
+  --x-size-padding-left-button-default: 0;
+}
+
+.x-button--ghost.x-button--ghost-end.x-button,
+.x-button--ghost.x-button--ghost-end .x-button {
+  --x-size-padding-right-button-default: 0;
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,16 +8703,6 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8745,6 +8735,16 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -8784,6 +8784,19 @@
 .x-badge-container {
   position: relative;
 }
+:root {
+  --x-color-base-lead: #243d48;
+  --x-color-base-auxiliary: #bfe1ec;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #0086b2;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8806,19 +8819,6 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
-:root {
-  --x-color-base-lead: #243d48;
-  --x-color-base-auxiliary: #bfe1ec;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #0086b2;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
 :root {
   --x-size-border-radius-base-none: 0;
   --x-size-border-radius-base-s: var(--x-size-base-02);