@empathyco/x-components 6.0.0-alpha.30 → 6.0.0-alpha.32

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

@@ -1,5 +1,39 @@
 
 
+.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;
+}
+
+.x-overline {
+  -webkit-text-decoration-line: overline;
+          text-decoration-line: overline;
+}
+
+.x-line-through {
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
+}
+
+.x-no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
 .x-static {
   position: static !important;
 }
@@ -988,21 +1022,6 @@
 .x-font-weight--bold {
   font-weight: var(--x-number-font-weight-base-bold) !important;
 }
-.x-uppercase {
-  text-transform: uppercase;
-}
-
-.x-lowercase {
-  text-transform: lowercase;
-}
-
-.x-capitalize {
-  text-transform: capitalize;
-}
-
-.x-normal-case {
-  text-transform: none;
-}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -1280,6 +1299,139 @@
   --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
     0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
+/* Material Elevations extracted from:
+    https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
+*/
+:root {
+  /* Shadow none */
+  --x-string-box-shadow-00: none;
+  /* Shadow 1dp */
+  --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
+    0 1px 3px 0 rgba(0, 0, 0, 0.2);
+  /* Shadow 2dp */
+  --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
+    0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  /* Shadow 3dp */
+  --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
+    0 1px 8px 0 rgba(0, 0, 0, 0.2);
+  /* Shadow 4dp */
+  --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  /* Shadow 6dp */
+  --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
+    0 3px 5px -1px rgba(0, 0, 0, 0.2);
+  /* Shadow 8dp */
+  --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
+    0 5px 5px -3px rgba(0, 0, 0, 0.2);
+  /* Shadow 9dp */
+  --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
+    0 5px 6px -3px rgba(0, 0, 0, 0.2);
+  /* Shadow 12dp */
+  --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
+    0 7px 8px -4px rgba(0, 0, 0, 0.2);
+  /* Shadow 16dp */
+  --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+    0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 24dp */
+  --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
+    0 11px 15px -7px rgba(0, 0, 0, 0.2);
+  /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
+  /* Shadow 1dp */
+  --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
+    0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
+  /* Shadow 2dp */
+  --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 3dp */
+  --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
+    0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
+  /* Shadow 4dp */
+  --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
+    0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
+  /* Shadow 6dp */
+  --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
+    0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
+  /* Shadow 8dp */
+  --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
+    0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 9dp */
+  --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
+    0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
+  /* Shadow 12dp */
+  --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
+    0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
+  /* Shadow 16dp */
+  --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
+    0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 24dp */
+  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
+    0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
+}
+
+.x-shadow--none {
+  box-shadow: none !important;
+}
+
+.x-shadow--01 {
+  box-shadow: var(--x-string-box-shadow-01) !important;
+}
+.x-shadow--bottom-01 {
+  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
+}
+.x-shadow--02 {
+  box-shadow: var(--x-string-box-shadow-02) !important;
+}
+.x-shadow--bottom-02 {
+  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
+}
+.x-shadow--03 {
+  box-shadow: var(--x-string-box-shadow-03) !important;
+}
+.x-shadow--bottom-03 {
+  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
+}
+.x-shadow--04 {
+  box-shadow: var(--x-string-box-shadow-04) !important;
+}
+.x-shadow--bottom-04 {
+  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
+}
+.x-shadow--05 {
+  box-shadow: var(--x-string-box-shadow-05) !important;
+}
+.x-shadow--bottom-05 {
+  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
+}
+.x-shadow--06 {
+  box-shadow: var(--x-string-box-shadow-06) !important;
+}
+.x-shadow--bottom-06 {
+  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
+}
+.x-shadow--07 {
+  box-shadow: var(--x-string-box-shadow-07) !important;
+}
+.x-shadow--bottom-07 {
+  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
+}
+.x-shadow--08 {
+  box-shadow: var(--x-string-box-shadow-08) !important;
+}
+.x-shadow--bottom-08 {
+  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
+}
+.x-shadow--09 {
+  box-shadow: var(--x-string-box-shadow-09) !important;
+}
+.x-shadow--bottom-09 {
+  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
+}
+.x-shadow--10 {
+  box-shadow: var(--x-string-box-shadow-10) !important;
+}
+.x-shadow--bottom-10 {
+  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
+}
 *[class*=x-border-width--] {
   border-width: 0;
 }
@@ -1614,145 +1766,12 @@
 .x-border-width--left-10 {
   border-style: solid !important;
 }
-/* Material Elevations extracted from:
-    https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
-*/
-:root {
-  /* Shadow none */
-  --x-string-box-shadow-00: none;
-  /* Shadow 1dp */
-  --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
-    0 1px 3px 0 rgba(0, 0, 0, 0.2);
-  /* Shadow 2dp */
-  --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
-    0 1px 5px 0 rgba(0, 0, 0, 0.2);
-  /* Shadow 3dp */
-  --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
-    0 1px 8px 0 rgba(0, 0, 0, 0.2);
-  /* Shadow 4dp */
-  --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
-    0 2px 4px -1px rgba(0, 0, 0, 0.2);
-  /* Shadow 6dp */
-  --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
-    0 3px 5px -1px rgba(0, 0, 0, 0.2);
-  /* Shadow 8dp */
-  --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
-    0 5px 5px -3px rgba(0, 0, 0, 0.2);
-  /* Shadow 9dp */
-  --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
-    0 5px 6px -3px rgba(0, 0, 0, 0.2);
-  /* Shadow 12dp */
-  --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
-    0 7px 8px -4px rgba(0, 0, 0, 0.2);
-  /* Shadow 16dp */
-  --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
-    0 8px 10px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 24dp */
-  --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
-    0 11px 15px -7px rgba(0, 0, 0, 0.2);
-  /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
-  /* Shadow 1dp */
-  --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
-    0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
-  /* Shadow 2dp */
-  --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 3dp */
-  --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
-    0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
-  /* Shadow 4dp */
-  --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
-    0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
-  /* Shadow 6dp */
-  --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
-    0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
-  /* Shadow 8dp */
-  --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
-    0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 9dp */
-  --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
-    0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
-  /* Shadow 12dp */
-  --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
-    0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
-  /* Shadow 16dp */
-  --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
-    0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 24dp */
-  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
-    0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
+.x-border-radius--00 {
+  border-radius: 0 !important;
 }
 
-.x-shadow--none {
-  box-shadow: none !important;
-}
-
-.x-shadow--01 {
-  box-shadow: var(--x-string-box-shadow-01) !important;
-}
-.x-shadow--bottom-01 {
-  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
-}
-.x-shadow--02 {
-  box-shadow: var(--x-string-box-shadow-02) !important;
-}
-.x-shadow--bottom-02 {
-  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
-}
-.x-shadow--03 {
-  box-shadow: var(--x-string-box-shadow-03) !important;
-}
-.x-shadow--bottom-03 {
-  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
-}
-.x-shadow--04 {
-  box-shadow: var(--x-string-box-shadow-04) !important;
-}
-.x-shadow--bottom-04 {
-  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
-}
-.x-shadow--05 {
-  box-shadow: var(--x-string-box-shadow-05) !important;
-}
-.x-shadow--bottom-05 {
-  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
-}
-.x-shadow--06 {
-  box-shadow: var(--x-string-box-shadow-06) !important;
-}
-.x-shadow--bottom-06 {
-  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
-}
-.x-shadow--07 {
-  box-shadow: var(--x-string-box-shadow-07) !important;
-}
-.x-shadow--bottom-07 {
-  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
-}
-.x-shadow--08 {
-  box-shadow: var(--x-string-box-shadow-08) !important;
-}
-.x-shadow--bottom-08 {
-  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
-}
-.x-shadow--09 {
-  box-shadow: var(--x-string-box-shadow-09) !important;
-}
-.x-shadow--bottom-09 {
-  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
-}
-.x-shadow--10 {
-  box-shadow: var(--x-string-box-shadow-10) !important;
-}
-.x-shadow--bottom-10 {
-  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
-}
-.x-border-radius--00 {
-  border-radius: 0 !important;
-}
-
-.x-border-radius--pill {
-  border-radius: 99999px !important;
+.x-border-radius--pill {
+  border-radius: 99999px !important;
 }
 
 .x-border-radius--01 {
@@ -3356,12 +3375,12 @@
 .x-text--stroke.x-small {
   --x-string-text-decoration-small: line-through;
 }
-.x-text--secondary {
-  --x-color-text-default: var(--x-color-text-secondary);
-}
 :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);
 }
@@ -3417,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;
@@ -3534,9 +3538,27 @@
   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);
 }
+.x-text--accent {
+  --x-color-text-default: var(--x-color-text-accent);
+}
 :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);
@@ -3544,6 +3566,18 @@
   --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-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);
@@ -3574,8 +3608,23 @@
   --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-text--accent {
-  --x-color-text-default: var(--x-color-text-accent);
+
+.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);
@@ -3623,36 +3672,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);
@@ -4146,12 +4165,6 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
-:root {
-  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
-  --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-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4374,6 +4387,12 @@
     --x-color-text-suggestion-default-matching-curated
   );
 }
+:root {
+  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
+  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
+  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);
@@ -4481,14 +4500,6 @@
   --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 {
@@ -4510,6 +4521,14 @@
 .x-row--padding-06 {
   --x-size-padding-row: var(--x-size-padding-row-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);
+}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -4643,101 +4662,31 @@
   --x-size-start-row-item: 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-size-gap-row: 0;
+  --x-size-padding-row: 0;
+  --x-size-justify-row: stretch;
+  --x-size-align-row: center;
+  --x-size-span-row-item: 1;
+  --x-size-start-row-item: 0;
 }
 
-.x-result {
+.x-row {
   display: grid;
-  grid-template-columns: [result-start] 1fr [result-end];
-  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
-  box-sizing: border-box;
-  background-color: var(--x-color-background-result-default);
-  border-color: var(--x-color-border-result-default);
-  padding: var(--x-size-padding-result-default);
-  gap: var(--x-size-gap-result-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-default);
-  border-radius: var(--x-size-border-radius-result-default);
-}
-.x-result > * {
-  min-width: 0;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: 1fr;
+  justify-items: var(--x-size-justify-row);
+  align-items: var(--x-size-align-row);
+  padding: var(--x-size-padding-row);
+  gap: var(--x-size-gap-row);
+  margin: 0;
 }
-.x-result__picture {
-  grid-column: result;
-  grid-row: picture;
+.x-row__item {
+  grid-column-start: var(--x-size-start-row-item);
+  grid-column-end: span var(--x-size-span-row-item);
+  list-style: none;
 }
-.x-result__overlay {
-  grid-column: result;
-  grid-row: overlay;
-  z-index: 1;
-  border-color: var(--x-color-border-result-overlay-default);
-  padding: var(--x-size-padding-result-overlay-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-overlay-default);
-  opacity: 0;
-}
-.x-result__description {
-  grid-column: result;
-  grid-row: description;
-  border-color: var(--x-color-border-result-description-default);
-  padding: var(--x-size-padding-result-description-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-description-default);
-}
-.x-result__picture {
-  border-color: var(--x-color-border-result-picture-default);
-  padding: var(--x-size-padding-result-picture-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-picture-default);
-}
-.x-result:hover .x-result__overlay {
-  opacity: 1;
-}
-@media (hover: none) {
-  .x-result .x-result__overlay {
-    opacity: 1;
-  }
-}
-:root {
-  --x-size-gap-row: 0;
-  --x-size-padding-row: 0;
-  --x-size-justify-row: stretch;
-  --x-size-align-row: center;
-  --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0;
-}
-
-.x-row {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: 1fr;
-  justify-items: var(--x-size-justify-row);
-  align-items: var(--x-size-align-row);
-  padding: var(--x-size-padding-row);
-  gap: var(--x-size-gap-row);
-  margin: 0;
-}
-.x-row__item {
-  grid-column-start: var(--x-size-start-row-item);
-  grid-column-end: span var(--x-size-span-row-item);
-  list-style: none;
-}
-.x-row__item--span-1 {
-  --x-size-span-row-item: 1;
+.x-row__item--span-1 {
+  --x-size-span-row-item: 1;
 }
 .x-row__item--span-2 {
   --x-size-span-row-item: 2;
@@ -4841,7 +4790,21 @@
   --x-size-align-row: stretch;
 }
 :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-color-border-result-default: var(--x-color-base-lead);
@@ -4860,6 +4823,62 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
+
+.x-result {
+  display: grid;
+  grid-template-columns: [result-start] 1fr [result-end];
+  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
+  box-sizing: border-box;
+  background-color: var(--x-color-background-result-default);
+  border-color: var(--x-color-border-result-default);
+  padding: var(--x-size-padding-result-default);
+  gap: var(--x-size-gap-result-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-default);
+  border-radius: var(--x-size-border-radius-result-default);
+}
+.x-result > * {
+  min-width: 0;
+}
+.x-result__picture {
+  grid-column: result;
+  grid-row: picture;
+}
+.x-result__overlay {
+  grid-column: result;
+  grid-row: overlay;
+  z-index: 1;
+  border-color: var(--x-color-border-result-overlay-default);
+  padding: var(--x-size-padding-result-overlay-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-overlay-default);
+  opacity: 0;
+}
+.x-result__description {
+  grid-column: result;
+  grid-row: description;
+  border-color: var(--x-color-border-result-description-default);
+  padding: var(--x-size-padding-result-description-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-description-default);
+}
+.x-result__picture {
+  border-color: var(--x-color-border-result-picture-default);
+  padding: var(--x-size-padding-result-picture-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-picture-default);
+}
+.x-result:hover .x-result__overlay {
+  opacity: 1;
+}
+@media (hover: none) {
+  .x-result .x-result__overlay {
+    opacity: 1;
+  }
+}
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
@@ -4877,6 +4896,10 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
 :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);
@@ -4906,10 +4929,6 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}
 
 .x-picture--zoom .x-picture-image {
   transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4920,14 +4939,14 @@
 :root {
   --x-number-aspect-ratio-picture: 1;
 }
-:root {
-  --x-number-aspect-ratio-picture: 1;
-}
 
 .x-picture--fixed-ratio.x-picture {
   aspect-ratio: var(--x-number-aspect-ratio-picture);
   width: 100%;
 }
+:root {
+  --x-number-aspect-ratio-picture: 1;
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5006,6 +5025,12 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
+:root {
+  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+  --x-mix-blend-mode-picture-colored: multiply;
+  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
+  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+}
 :root {
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
@@ -5045,12 +5070,6 @@
 .x-picture--colored.x-picture .x-picture--placeholder {
   --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
 }
-:root {
-  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
-  --x-mix-blend-mode-picture-colored: multiply;
-  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
-  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
-}
 :root {
   --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5074,84 +5093,49 @@
   --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
 }
 :root {
-  --x-color-background-option-list-button-default: transparent;
-  --x-color-border-option-list-button-default: transparent;
-  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
-  --x-color-background-option-list-button-default-hover: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-hover: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
-  --x-color-background-option-list-button-default-selected: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-selected: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
-  --x-color-background-option-list-button-default-selected-hover: var(
-    --x-color-background-option-list-button-default-selected
-  );
-  --x-color-border-option-list-button-default-selected-hover: var(
-    --x-color-border-option-list-button-default-selected
-  );
-  --x-color-text-option-list-button-default-selected-hover: var(
-    --x-color-text-option-list-button-default-selected
-  );
-  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-option-list-item-default
+  --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-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default-selected: var(
-    --x-size-border-width-top-option-list-item-default
+  --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-size-border-width-right-option-list-item-default-selected: var(
-    --x-size-border-width-right-option-list-item-default
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
   );
-  --x-size-border-width-bottom-option-list-item-default-selected: var(
-    --x-size-border-width-bottom-option-list-item-default
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
   );
-  --x-size-border-width-left-option-list-item-default-selected: var(
-    --x-size-border-width-left-option-list-item-default
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
   );
-  --x-size-padding-option-list-button-default: var(--x-size-base-02);
-  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-right-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
+  --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-padding-bottom-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
+  --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-padding-left-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
+  --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-font-decoration-option-list-button-default-hover: underline;
-  --x-size-font-option-list-button-default: var(--x-size-font-text);
-  --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-background-option-list-button-default: transparent;
@@ -5233,118 +5217,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);
 }
-
-.x-option-list {
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  box-sizing: border-box;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-[dir="ltr"] .x-option-list__item {
-  border-right-width: var(--x-size-border-width-right-option-list-item-default);
-}
-[dir="rtl"] .x-option-list__item {
-  border-left-width: var(--x-size-border-width-right-option-list-item-default);
-}
-[dir="ltr"] .x-option-list__item {
-  border-left-width: var(--x-size-border-width-left-option-list-item-default);
-}
-[dir="rtl"] .x-option-list__item {
-  border-right-width: var(--x-size-border-width-left-option-list-item-default);
-}
-.x-option-list__item {
-  border-top-color: var(--x-color-border-top-option-list-item-default);
-  border-right-color: var(--x-color-border-right-option-list-item-default);
-  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
-  border-left-color: var(--x-color-border-left-option-list-item-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-option-list-item-default);
-  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
-}
-.x-option-list__item.x-option-list__item--is-selected {
-  --x-color-border-option-list-item-default: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-top-option-list-item-default: var(
-    --x-color-border-top-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default: var(
-    --x-color-border-right-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default: var(
-    --x-color-border-bottom-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default: var(
-    --x-color-border-left-option-list-item-default-selected
-  );
-  --x-size-border-width-top-option-list-item-default: var(
-    --x-size-border-width-top-option-list-item-default-selected
-  );
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-right-option-list-item-default-selected
-  );
-  --x-size-border-width-bottom-option-list-item-default: var(
-    --x-size-border-width-bottom-option-list-item-default-selected
-  );
-  --x-size-border-width-left-option-list-item-default: var(
-    --x-size-border-width-left-option-list-item-default-selected
-  );
-}
-.x-option-list__item.x-option-list__item--is-selected .x-button {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-selected
-  );
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
-  --x-number-font-weight-option-list-button-default: var(
-    --x-number-font-weight-option-list-button-default-selected
-  );
-}
-.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-selected-hover
-  );
-  --x-color-border-button-default: var(
-    --x-color-border-option-list-button-default-selected-hover
-  );
-  --x-color-text-button-default: var(
-    --x-color-text-option-list-button-default-selected-hover
-  );
-}
-.x-option-list__item:last-child {
-  --x-size-border-width-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: 0;
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-}
-.x-option-list__item .x-button {
-  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
-  min-height: auto;
-  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
-  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
-  --x-size-padding-bottom-button-default: var(
-    --x-size-padding-bottom-option-list-button-default
-  );
-  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
-  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
-  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
-}
-.x-option-list__item .x-button:hover {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-hover
-  );
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
-  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
-          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
-}
 :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(
@@ -5390,170 +5262,317 @@
     --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-option-list--bottom.x-option-list,
+.x-option-list--bottom .x-option-list {
+  --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
+  --x-color-text-option-list-button-default-hover: var(
+    --x-color-text-option-list-button-bottom-hover
   );
-  --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-option-list-item-default: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
+  --x-color-border-right-option-list-item-default: var(
+    --x-color-border-top-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-default: var(
+    --x-color-border-top-option-list-item-bottom
   );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
+  --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
+  --x-size-border-width-option-list-item-default: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-bottom
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-bottom
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-bottom
+  );
+  --x-font-decoration-option-list-button-default-hover: var(
+    --x-font-decoration-option-list-button-bottom-hover
+  );
+  --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
+  --x-number-font-weight-option-list-button-default: var(
+    --x-number-font-weight-option-list-button-bottom
+  );
+}
+.x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
+.x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
+  --x-color-text-option-list-button-default-selected: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected-hover
+  );
+  --x-color-border-option-list-item-default-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-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
   );
-  --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-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
   );
-  --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-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-bottom-option-list-item-bottom-selected
   );
-  --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-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-bottom-selected
   );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-bottom-selected
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-bottom-selected
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-bottom-selected
+  );
+  --x-number-font-weight-option-list-button-default-selected: var(
+    --x-number-font-weight-option-list-button-bottom-selected
+  );
+}
+.x-option-list--bottom.x-option-list .x-option-list__item:last-child,
+.x-option-list--bottom .x-option-list .x-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: inherit;
+  --x-size-border-width-top-option-list-item-default: inherit;
+  --x-size-border-width-right-option-list-item-default: inherit;
+  --x-size-border-width-bottom-option-list-item-default: inherit;
+  --x-size-border-width-left-option-list-item-default: inherit;
+}
+:root {
+  --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);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
+:root {
+  --x-color-background-option-list-button-default: transparent;
+  --x-color-border-option-list-button-default: transparent;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
+  --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);
+}
+
+.x-option-list {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  box-sizing: border-box;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
-
-.x-option-list--bottom.x-option-list,
-.x-option-list--bottom .x-option-list {
-  --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
-  --x-color-text-option-list-button-default-hover: var(
-    --x-color-text-option-list-button-bottom-hover
+[dir="ltr"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="ltr"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-left-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-left-option-list-item-default);
+}
+.x-option-list__item {
+  border-top-color: var(--x-color-border-top-option-list-item-default);
+  border-right-color: var(--x-color-border-right-option-list-item-default);
+  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
+  border-left-color: var(--x-color-border-left-option-list-item-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-option-list-item-default);
+  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
+}
+.x-option-list__item.x-option-list__item--is-selected {
+  --x-color-border-option-list-item-default: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-top-option-list-item-default: var(
+    --x-color-border-top-option-list-item-default-selected
   );
-  --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
   --x-color-border-right-option-list-item-default: var(
-    --x-color-border-top-option-list-item-bottom
+    --x-color-border-right-option-list-item-default-selected
   );
   --x-color-border-bottom-option-list-item-default: var(
-    --x-color-border-top-option-list-item-bottom
+    --x-color-border-bottom-option-list-item-default-selected
   );
-  --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
-  --x-size-border-width-option-list-item-default: var(
-    --x-size-border-width-option-list-item-bottom
+  --x-color-border-left-option-list-item-default: var(
+    --x-color-border-left-option-list-item-default-selected
   );
   --x-size-border-width-top-option-list-item-default: var(
-    --x-size-border-width-top-option-list-item-bottom
+    --x-size-border-width-top-option-list-item-default-selected
   );
   --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-right-option-list-item-bottom
+    --x-size-border-width-right-option-list-item-default-selected
   );
   --x-size-border-width-bottom-option-list-item-default: var(
-    --x-size-border-width-bottom-option-list-item-bottom
+    --x-size-border-width-bottom-option-list-item-default-selected
   );
   --x-size-border-width-left-option-list-item-default: var(
-    --x-size-border-width-left-option-list-item-bottom
+    --x-size-border-width-left-option-list-item-default-selected
   );
-  --x-font-decoration-option-list-button-default-hover: var(
-    --x-font-decoration-option-list-button-bottom-hover
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected
   );
-  --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
   --x-number-font-weight-option-list-button-default: var(
-    --x-number-font-weight-option-list-button-bottom
+    --x-number-font-weight-option-list-button-default-selected
   );
 }
-.x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
-.x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
-  --x-color-text-option-list-button-default-selected: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-default-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected-hover
-  );
-  --x-color-border-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-top-option-list-item-default-selected: var(
-    --x-color-border-top-option-list-item-bottom-selected
-  );
-  --x-color-border-right-option-list-item-default-selected: var(
-    --x-color-border-top-option-list-item-bottom-selected
-  );
-  --x-color-border-bottom-option-list-item-default-selected: var(
-    --x-color-border-bottom-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-top-option-list-item-bottom-selected
-  );
-  --x-size-border-width-top-option-list-item-default: var(
-    --x-size-border-width-top-option-list-item-bottom-selected
-  );
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-right-option-list-item-bottom-selected
-  );
-  --x-size-border-width-bottom-option-list-item-default: var(
-    --x-size-border-width-bottom-option-list-item-bottom-selected
+.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected-hover
   );
-  --x-size-border-width-left-option-list-item-default: var(
-    --x-size-border-width-left-option-list-item-bottom-selected
+  --x-color-border-button-default: var(
+    --x-color-border-option-list-button-default-selected-hover
   );
-  --x-number-font-weight-option-list-button-default-selected: var(
-    --x-number-font-weight-option-list-button-bottom-selected
+  --x-color-text-button-default: var(
+    --x-color-text-option-list-button-default-selected-hover
   );
 }
-.x-option-list--bottom.x-option-list .x-option-list__item:last-child,
-.x-option-list--bottom .x-option-list .x-option-list__item:last-child {
-  --x-size-border-width-option-list-item-default: inherit;
-  --x-size-border-width-top-option-list-item-default: inherit;
-  --x-size-border-width-right-option-list-item-default: inherit;
-  --x-size-border-width-bottom-option-list-item-default: inherit;
-  --x-size-border-width-left-option-list-item-default: inherit;
-}
-:root {
-  --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-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: 0;
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
 }
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
+.x-option-list__item .x-button {
+  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
+  min-height: auto;
+  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
+  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
+  --x-size-padding-bottom-button-default: var(
+    --x-size-padding-bottom-option-list-button-default
+  );
+  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
+  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
 }
-:root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+.x-option-list__item .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-hover
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
 }
 :root {
   --x-string-justify-message-default: center;
@@ -6004,28 +6023,6 @@
   --x-size-gap-list-19: var(--x-size-base-19);
   --x-size-gap-list-20: var(--x-size-base-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);
-}
 
 .x-list--gap-01.x-list {
   gap: var(--x-size-gap-list-01);
@@ -6526,6 +6523,28 @@
     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;
@@ -6726,6 +6745,49 @@
   --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);
+  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
+  --x-color-text-input-group-default: var(--x-color-text-input-default);
+  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
+  --x-size-height-input-group-default: var(--x-size-height-input-default);
+  --x-size-gap-input-group-default: var(--x-size-base-03);
+  --x-size-padding-left-input-group-default: var(--x-size-base-06);
+  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
+  --x-size-padding-input-group-default-action: var(--x-size-base-03);
+  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-font-family-input-group-default: var(--x-font-family-input-default);
+  --x-size-font-input-group-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
+  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
+  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
+  --x-size-line-height-input-group-placeholder-default: var(
+    --x-size-line-height-input-group-default
+  );
+  --x-number-font-weight-input-group-placeholder-default: var(
+    --x-number-font-weight-input-group-default
+  );
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+}
 :root {
   --x-size-padding-left-input-group-line: 0;
   --x-size-padding-right-input-group-line: 0;
@@ -6816,49 +6878,6 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
-: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);
-  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
-  --x-color-text-input-group-default: var(--x-color-text-input-default);
-  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
-  --x-size-height-input-group-default: var(--x-size-height-input-default);
-  --x-size-gap-input-group-default: var(--x-size-base-03);
-  --x-size-padding-left-input-group-default: var(--x-size-base-06);
-  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
-  --x-size-padding-input-group-default-action: var(--x-size-base-03);
-  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-font-family-input-group-default: var(--x-font-family-input-default);
-  --x-size-font-input-group-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
-  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
-  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
-  --x-size-line-height-input-group-placeholder-default: var(
-    --x-size-line-height-input-group-default
-  );
-  --x-number-font-weight-input-group-placeholder-default: var(
-    --x-number-font-weight-input-group-default
-  );
-  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
-}
 
 [dir="ltr"] .x-input-group {
   border-right-width: var(--x-size-border-width-right-input-group-default);
@@ -7045,13 +7064,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 {
@@ -7062,14 +7074,11 @@
   --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
 }
 :root {
-  --x-size-padding-top-input-line: var(--x-size-base-03);
-  --x-size-padding-right-input-line: 0;
-  --x-size-padding-bottom-input-line: var(--x-size-base-03);
-  --x-size-padding-left-input-line: 0;
-  --x-size-border-width-top-input-line: 0;
-  --x-size-border-width-right-input-line: 0;
-  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
-  --x-size-border-width-left-input-line: 0;
+  --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-padding-top-input-line: var(--x-size-base-03);
@@ -7081,18 +7090,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-
-.x-input--line .x-input,
-.x-input--line.x-input {
-  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
-  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
-  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
-  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
-}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7121,6 +7118,28 @@
   --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;
+  --x-size-padding-bottom-input-line: var(--x-size-base-03);
+  --x-size-padding-left-input-line: 0;
+  --x-size-border-width-top-input-line: 0;
+  --x-size-border-width-right-input-line: 0;
+  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
+  --x-size-border-width-left-input-line: 0;
+}
+
+.x-input--line .x-input,
+.x-input--line.x-input {
+  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
+  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
+  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
+  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7260,10 +7279,6 @@
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
 }
-:root {
-  --x-size-width-icon-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
 :root {
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7282,6 +7297,10 @@
   --x-size-width-icon-default: var(--x-size-width-icon-s);
   --x-size-height-icon-default: var(--x-size-height-icon-s);
 }
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7299,15 +7318,6 @@
   --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-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
-}
-
-.x-icon--l {
-  --x-size-width-icon-default: var(--x-size-width-icon-l);
-  --x-size-height-icon-default: var(--x-size-height-icon-l);
-}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7317,6 +7327,15 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
+:root {
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
+}
+
+.x-icon--l {
+  --x-size-width-icon-default: var(--x-size-width-icon-l);
+  --x-size-height-icon-default: var(--x-size-height-icon-l);
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7352,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;
@@ -7378,6 +7392,11 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
+:root {
+  --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),
 .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
@@ -7455,38 +7474,6 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
-:root {
-  --x-color-background-filter-default: transparent;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
-}
 
 [dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
   padding-left: var(--x-size-padding-left-filter-default);
@@ -7568,6 +7555,38 @@
     --x-number-font-weight-filter-count-default-selected
   );
 }
+:root {
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-filter-count-default
+  );
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
 :root {
   --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
   --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7617,6 +7636,39 @@
   --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
   --x-size-border-width-left-facet-header-line: 0;
 }
+:root {
+  --x-color-background-facet-default: transparent;
+  --x-color-border-facet-default: var(--x-color-background-facet-default);
+  --x-color-text-facet-default: var(--x-color-text-default);
+  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
+  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
+  --x-size-border-width-facet-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-facet-header-default
+  );
+  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-right-facet-header-default: 0;
+  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-left-facet-header-default: 0;
+  --x-size-gap-facet-header-default: var(--x-size-base-03);
+  --x-font-family-facet-default: var(--x-font-family-title3);
+  --x-size-font-facet-default: var(--x-size-font-title3);
+  --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-color-border-facet-header-line: var(--x-color-base-neutral-10);
   --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7633,46 +7685,25 @@
   --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
   --x-size-border-width-right-facet-header-default: var(
     --x-size-border-width-right-facet-header-line
-  );
-  --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-bottom-facet-header-line
-  );
-  --x-size-border-width-left-facet-header-default: var(
-    --x-size-border-width-left-facet-header-line
-  );
-}
-:root {
-  --x-color-background-facet-default: transparent;
-  --x-color-border-facet-default: var(--x-color-background-facet-default);
-  --x-color-text-facet-default: var(--x-color-text-default);
-  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
-  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
-  --x-size-border-width-facet-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
+  );
   --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-facet-header-default
+    --x-size-border-width-bottom-facet-header-line
   );
-  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-right-facet-header-default: 0;
-  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-left-facet-header-default: 0;
-  --x-size-gap-facet-header-default: var(--x-size-base-03);
-  --x-font-family-facet-default: var(--x-font-family-title3);
-  --x-size-font-facet-default: var(--x-size-font-title3);
-  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
+  --x-size-border-width-left-facet-header-default: var(
+    --x-size-border-width-left-facet-header-line
+  );
+}
+: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;
@@ -7813,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 {
@@ -7842,13 +7861,13 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
-:root {
-  --x-size-width-dropdown-xl: 282px;
-}
 
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -7867,6 +7886,9 @@
   --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;
+}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7910,16 +7932,6 @@
     --x-size-border-width-left-dropdown-list-pill
   );
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
-
-.x-dropdown.x-dropdown--m {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
-}
 :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);
@@ -8007,6 +8019,13 @@
     --x-size-border-width-left-dropdown-list-line
   );
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
+
+.x-dropdown.x-dropdown--m {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
+}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -8090,6 +8109,19 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
+: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);
+}
 :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);
@@ -8345,19 +8377,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);
@@ -8398,16 +8417,6 @@
   --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-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-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -8419,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);
@@ -8429,13 +8448,6 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
-: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-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8464,6 +8476,23 @@
   --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);
+  --x-color-text-button-primary: var(--x-color-text-button-default);
+  --x-size-border-width-button-primary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
+}
+: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 {
@@ -8492,16 +8521,6 @@
   --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
   --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
 }
-:root {
-  --x-color-background-button-primary: var(--x-color-background-button-default);
-  --x-color-border-button-primary: var(--x-color-border-button-default);
-  --x-color-text-button-primary: var(--x-color-text-button-default);
-  --x-size-border-width-button-primary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
-}
 
 .x-button--primary.x-button,
 .x-button--primary .x-button {
@@ -8520,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 {
@@ -8542,6 +8554,13 @@
     --x-size-border-radius-bottom-left-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);
+}
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
@@ -8592,6 +8611,36 @@
   --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-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);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --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-button-default: var(--x-color-base-lead);
+  --x-color-border-button-default: var(--x-color-background-button-default);
+  --x-color-text-button-default: var(--x-color-base-neutral-100);
+  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-width-button-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
+  --x-size-height-button-default: var(--x-size-base-08);
+  --x-size-padding-right-button-default: var(--x-size-base-05);
+  --x-size-padding-left-button-default: var(--x-size-base-05);
+  --x-size-gap-button-default: var(--x-size-base-03);
+  --x-font-family-button-default: var(--x-font-family-text);
+  --x-size-font-button-default: var(--x-size-font-text);
+  --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);
+}
 
 [dir="ltr"] .x-button {
   padding-right: var(--x-size-padding-right-button-default);
@@ -8654,36 +8703,6 @@
     margin-right: var(--x-size-gap-button-default);
   }
 }
-:root {
-  --x-color-background-button-default: var(--x-color-base-lead);
-  --x-color-border-button-default: var(--x-color-background-button-default);
-  --x-color-text-button-default: var(--x-color-base-neutral-100);
-  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-width-button-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
-  --x-size-height-button-default: var(--x-size-base-08);
-  --x-size-padding-right-button-default: var(--x-size-base-05);
-  --x-size-padding-left-button-default: var(--x-size-base-05);
-  --x-size-gap-button-default: var(--x-size-base-03);
-  --x-font-family-button-default: var(--x-font-family-text);
-  --x-size-font-button-default: var(--x-size-font-text);
-  --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-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);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --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-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);
@@ -8778,13 +8797,6 @@
   --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);
-  --x-size-border-radius-base-m: var(--x-size-base-06);
-  --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px;
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8807,22 +8819,10 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
-.x-underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
-.x-overline {
-  -webkit-text-decoration-line: overline;
-          text-decoration-line: overline;
-}
-
-.x-line-through {
-  -webkit-text-decoration-line: line-through;
-          text-decoration-line: line-through;
-}
-
-.x-no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+:root {
+  --x-size-border-radius-base-none: 0;
+  --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
+  --x-size-border-radius-base-pill: 99999px;
+  --x-size-border-width-base: 1px;
 }