@empathyco/x-components 6.0.0-alpha.7 → 6.0.0-alpha.70

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

@@ -1,4 +1,5 @@
 
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -998,29 +999,6 @@
 .x-font-weight--bold {
   font-weight: var(--x-number-font-weight-base-bold) !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
-}
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
-}
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
-}
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
-}
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
-}
-
-.x-line-height--loose {
-  line-height: 2 !important;
-}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -1101,7 +1079,6 @@
   font-size: var(--x-size-base-20) !important;
   line-height: 1.5;
 }
-
 .x-font-color--lead {
   color: var(--x-color-base-lead) !important;
 }
@@ -1188,74 +1165,6 @@
 .x-self-baseline {
   align-self: baseline !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-fill--lead {
   fill: var(--x-color-base-lead) !important;
 }
@@ -1306,66 +1215,174 @@
   /* 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),
+  --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);
+}
+/* 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),
+  --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),
+  --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),
+  --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),
+  --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),
+  --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),
+  --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),
+  --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),
+  --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),
+  --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);
+  --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);
+  --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);
+  --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);
+  --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);
+  --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);
+  --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);
+  --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);
+  --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);
+  --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-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 {
@@ -1766,92 +1783,6 @@
 .x-border-width--left-10 {
   border-style: solid !important;
 }
-.x-border-color--lead {
-  border-color: var(--x-color-base-lead) !important;
-}
-
-.x-border-color--auxiliary {
-  border-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-border-color--neutral-10 {
-  border-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-border-color--neutral-35 {
-  border-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
-}
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
-}
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
-}
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
-}
-.x-background--lead {
-  background-color: var(--x-color-base-lead) !important;
-}
-
-.x-background--auxiliary {
-  background-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-background--neutral-10 {
-  background-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-background--neutral-35 {
-  background-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-background--neutral-70 {
-  background-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-background--neutral-95 {
-  background-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-background--neutral-100 {
-  background-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-background--accent {
-  background-color: var(--x-color-base-accent) !important;
-}
-
-.x-background--enable {
-  background-color: var(--x-color-base-enable) !important;
-}
-
-.x-background--disable {
-  background-color: var(--x-color-base-disable) !important;
-}
-
-.x-background--transparent {
-  background-color: var(--x-color-base-transparent) !important;
-}
 .x-border-radius--00 {
   border-radius: 0 !important;
 }
@@ -3360,50 +3291,139 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important;
 }
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
+
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important;
 }
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
+
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
 }
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
+
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
 }
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
+
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
 }
-:root {
-  --x-color-text-secondary: var(--x-color-base-neutral-35);
+
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
 }
-.x-text--light.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
+
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
 }
-.x-text--light.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
 }
-.x-text--light.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
 }
-.x-text--light.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
 }
-.x-text--light.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
+
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
 }
-:root {
-  --x-font-family-base: "Montserrat", sans-serif;
-  --x-size-font-base-xs: 12px;
-  --x-size-font-base-s: 14px;
-  --x-size-font-base-m: 16px;
-  --x-size-font-base-l: 18px;
-  --x-size-font-base-xl: 32px;
-  --x-number-font-weight-base-light: 300;
-  --x-number-font-weight-base-regular: 400;
-  --x-number-font-weight-base-bold: 600;
-  --x-size-line-height-base-s: 16px;
+.x-background--lead {
+  background-color: var(--x-color-base-lead) !important;
+}
+
+.x-background--auxiliary {
+  background-color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-background--neutral-10 {
+  background-color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-background--neutral-35 {
+  background-color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-background--neutral-70 {
+  background-color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-background--neutral-95 {
+  background-color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-background--neutral-100 {
+  background-color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important;
+}
+
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important;
+}
+
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important;
+}
+
+.x-background--transparent {
+  background-color: var(--x-color-base-transparent) !important;
+}
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
+: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);
+}
+.x-text--light.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
+}
+:root {
+  --x-font-family-base: "Montserrat", sans-serif;
+  --x-size-font-base-xs: 12px;
+  --x-size-font-base-s: 14px;
+  --x-size-font-base-m: 16px;
+  --x-size-font-base-l: 18px;
+  --x-size-font-base-xl: 32px;
+  --x-number-font-weight-base-light: 300;
+  --x-number-font-weight-base-regular: 400;
+  --x-number-font-weight-base-bold: 600;
+  --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
   --x-color-text-default: var(--x-color-base-neutral-10);
@@ -3535,19 +3555,6 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.x-text--accent {
-  --x-color-text-default: var(--x-color-text-accent);
-}
-:root {
-  --x-color-text-accent: var(--x-color-base-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);
-  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --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);
-}
 .x-text--bold.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
 }
@@ -3563,8 +3570,18 @@
 .x-text--bold.x-small {
   --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
 }
-.x-text--secondary {
-  --x-color-text-default: var(--x-color-text-secondary);
+: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);
+  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --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-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
@@ -4454,14 +4471,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
@@ -4508,6 +4517,14 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4806,6 +4823,23 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
+  --x-size-border-width-result-picture-default: 0;
+}
 
 .x-result {
   display: grid;
@@ -4879,23 +4913,6 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 :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);
@@ -4965,58 +4982,6 @@
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
   --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
 }
-: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);
-}
-: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);
-}
-
-.x-picture--cover.x-picture {
-  position: relative;
-}
-
-.x-result:hover .x-picture--cover:after,
-.x-picture--cover:hover:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
-  width: 100%;
-  height: 100%;
-}
-: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);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
-: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);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
-
-.x-picture--card.x-picture {
-  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
-}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5073,6 +5038,36 @@
 .x-picture-image--placeholder > path {
   fill: var(--x-color-fill-picture-placeholder-path-default) !important;
 }
+: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);
+}
+: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);
+}
+
+.x-picture--cover.x-picture {
+  position: relative;
+}
+
+.x-result:hover .x-picture--cover:after,
+.x-picture--cover:hover:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
+  width: 100%;
+  height: 100%;
+}
+: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-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
@@ -5092,6 +5087,28 @@
 .x-picture--colored.x-picture .x-picture--placeholder {
   --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-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);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
+: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);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
+
+.x-picture--card.x-picture {
+  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
+  --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;
@@ -5409,6 +5426,137 @@
     --x-number-font-weight-base-regular
   );
 }
+:root {
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
+
+.x-option-list--bottom.x-option-list,
+.x-option-list--bottom .x-option-list {
+  --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-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-bottom-option-list-item-default: var(
+    --x-color-border-top-option-list-item-bottom
+  );
+  --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-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-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;
@@ -5530,6 +5678,22 @@
   --x-size-padding-list-12: var(--x-size-base-12);
   --x-size-padding-list-13: var(--x-size-base-13);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-list-01: var(--x-size-base-01);
+  --x-size-padding-list-02: var(--x-size-base-02);
+  --x-size-padding-list-03: var(--x-size-base-03);
+  --x-size-padding-list-04: var(--x-size-base-04);
+  --x-size-padding-list-05: var(--x-size-base-05);
+  --x-size-padding-list-06: var(--x-size-base-06);
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13);
+}
 
 /* @deprecated */
 [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5806,200 +5970,53 @@
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-11);
-  }
-}
-
-.x-list--padding-12.x-list {
-  padding: var(--x-size-padding-list-12);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-12);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-12);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-12);
-  }
-}
-
-.x-list--padding-13.x-list {
-  padding: var(--x-size-padding-list-13);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-13);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-13);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-13);
-  }
-}
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-11);
+  }
 }
 
-.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-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-bottom-option-list-item-default: var(
-    --x-color-border-top-option-list-item-bottom
-  );
-  --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-list--padding-12.x-list {
+  padding: var(--x-size-padding-list-12);
 }
-.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-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-list--gap-.x-list {
+  gap: var(--x-size-gap-list-12);
 }
-.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;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-12);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-12);
+  }
 }
-/* @deprecated */
-:root {
-  --x-size-padding-list-01: var(--x-size-base-01);
-  --x-size-padding-list-02: var(--x-size-base-02);
-  --x-size-padding-list-03: var(--x-size-base-03);
-  --x-size-padding-list-04: var(--x-size-base-04);
-  --x-size-padding-list-05: var(--x-size-base-05);
-  --x-size-padding-list-06: var(--x-size-base-06);
-  --x-size-padding-list-07: var(--x-size-base-07);
-  --x-size-padding-list-08: var(--x-size-base-08);
-  --x-size-padding-list-09: var(--x-size-base-09);
-  --x-size-padding-list-10: var(--x-size-base-10);
-  --x-size-padding-list-11: var(--x-size-base-11);
-  --x-size-padding-list-12: var(--x-size-base-12);
-  --x-size-padding-list-13: var(--x-size-base-13);
+
+.x-list--padding-13.x-list {
+  padding: var(--x-size-padding-list-13);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-13);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-13);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-13);
+  }
 }
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
@@ -6710,6 +6727,32 @@
   );
   --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
 :root {
   --x-size-padding-left-input-group-line: 0;
   --x-size-padding-right-input-group-line: 0;
@@ -6995,32 +7038,6 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
-
-.x-input-group--pill.x-input-group,
-.x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-pill
-  );
-}
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7255,13 +7272,6 @@
   --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
   --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
 }
-:root {
-  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
-}
 
 .x-input--card.x-input,
 .x-input--card .x-input {
@@ -7275,6 +7285,13 @@
     --x-size-border-radius-bottom-left-input-card
   );
 }
+:root {
+  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
+}
 :root {
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7439,7 +7456,8 @@
   padding-bottom: var(--x-size-padding-bottom-filter-children);
 }
 .x-hierarchical-filter-container .x-hierarchical-filter-container,
-.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
+.x-hierarchical-filter-container .x-filter,
+.x-hierarchical-filter-container .x-facet-filter {
   width: 100%;
 }
 :root {
@@ -7507,39 +7525,48 @@
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
 
-[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
+[dir="ltr"] .x-filter,[dir="ltr"] 
+.x-facet-filter {
   padding-left: var(--x-size-padding-left-filter-default);
 }
 
-[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+[dir="rtl"] .x-filter,[dir="rtl"] 
+.x-facet-filter {
   padding-right: var(--x-size-padding-left-filter-default);
 }
 
-[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
+[dir="ltr"] .x-filter,[dir="ltr"] 
+.x-facet-filter {
   padding-right: var(--x-size-padding-right-filter-default);
 }
 
-[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+[dir="rtl"] .x-filter,[dir="rtl"] 
+.x-facet-filter {
   padding-left: var(--x-size-padding-right-filter-default);
 }
 
-[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
+[dir="ltr"] .x-filter,[dir="ltr"] 
+.x-facet-filter {
   border-right-width: var(--x-size-border-width-right-filter-default);
 }
 
-[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+[dir="rtl"] .x-filter,[dir="rtl"] 
+.x-facet-filter {
   border-left-width: var(--x-size-border-width-right-filter-default);
 }
 
-[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
+[dir="ltr"] .x-filter,[dir="ltr"] 
+.x-facet-filter {
   border-left-width: var(--x-size-border-width-left-filter-default);
 }
 
-[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+[dir="rtl"] .x-filter,[dir="rtl"] 
+.x-facet-filter {
   border-right-width: var(--x-size-border-width-left-filter-default);
 }
 
-.x-filter, .x-facet-filter {
+.x-filter,
+.x-facet-filter {
   display: inline-flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -7562,23 +7589,30 @@
   cursor: pointer;
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-filter, .x-facet-filter {
+  .x-filter,
+  .x-facet-filter {
     gap: 0;
   }
-  .x-filter > *:not(:last-child), .x-facet-filter > *:not(:last-child) {
+  .x-filter > *:not(:last-child),
+  .x-facet-filter > *:not(:last-child) {
     margin-right: var(--x-size-gap-filter-default);
   }
 }
-.x-filter > *, .x-facet-filter > * {
+.x-filter > *,
+.x-facet-filter > * {
   flex: 0 0 auto;
 }
-.x-filter__label, .x-facet-filter__label {
+.x-filter__label,
+.x-facet-filter__label {
   flex: 0 1 auto;
 }
-.x-filter__count, .x-facet-filter__count {
+.x-filter__count,
+.x-facet-filter__count {
   font-weight: var(--x-number-font-weight-filter-count-default);
 }
-.x-filter--is-selected, .x-filter.x-selected, .x-facet-filter--is-selected, .x-facet-filter.x-selected {
+.x-filter--is-selected, .x-filter.x-selected,
+.x-facet-filter--is-selected,
+.x-facet-filter.x-selected {
   --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
   --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
   --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
@@ -7898,11 +7932,13 @@
 .x-dropdown--pill {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
   --x-size-border-radius-top-left-dropdown-default: calc(
-    var(--x-size-line-height-dropdown-default) / 2 + var(--x-size-padding-top-dropdown-item-default) +
+    var(--x-size-line-height-dropdown-default) / 2 +
+      var(--x-size-padding-top-dropdown-item-default) +
       var(--x-size-border-width-top-dropdown-toggle-default)
   );
   --x-size-border-radius-top-right-dropdown-default: calc(
-    var(--x-size-line-height-dropdown-default) / 2 + var(--x-size-padding-top-dropdown-item-default) +
+    var(--x-size-line-height-dropdown-default) / 2 +
+      var(--x-size-padding-top-dropdown-item-default) +
       var(--x-size-border-width-top-dropdown-toggle-default)
   );
   --x-size-border-radius-bottom-right-dropdown-default: calc(
@@ -8364,19 +8400,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);
@@ -8407,6 +8430,19 @@
     --x-size-border-width-left-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);
+}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8825,4 +8861,27 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
+}
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
 }