@empathyco/x-components 6.0.0-alpha.8 → 6.0.0-alpha.81

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

@@ -1,4 +1,5 @@
 
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -14,25 +15,6 @@
 .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;
 }
@@ -52,976 +34,994 @@
 .x-sticky {
   position: sticky !important;
 }
-.x-margin--auto {
-  margin: auto !important;
+.x-padding--00 {
+  padding: 0 !important;
 }
-.x-margin--00 {
-  margin: 0 !important;
+.x-padding--01 {
+  padding: var(--x-size-base-01) !important;
 }
-.x-margin--01 {
-  margin: var(--x-size-base-01) !important;
+.x-padding--02 {
+  padding: var(--x-size-base-02) !important;
 }
-.x-margin--02 {
-  margin: var(--x-size-base-02) !important;
+.x-padding--03 {
+  padding: var(--x-size-base-03) !important;
 }
-.x-margin--03 {
-  margin: var(--x-size-base-03) !important;
+.x-padding--04 {
+  padding: var(--x-size-base-04) !important;
 }
-.x-margin--04 {
-  margin: var(--x-size-base-04) !important;
+.x-padding--05 {
+  padding: var(--x-size-base-05) !important;
 }
-.x-margin--05 {
-  margin: var(--x-size-base-05) !important;
+.x-padding--06 {
+  padding: var(--x-size-base-06) !important;
 }
-.x-margin--06 {
-  margin: var(--x-size-base-06) !important;
+.x-padding--07 {
+  padding: var(--x-size-base-07) !important;
 }
-.x-margin--07 {
-  margin: var(--x-size-base-07) !important;
+.x-padding--08 {
+  padding: var(--x-size-base-08) !important;
 }
-.x-margin--08 {
-  margin: var(--x-size-base-08) !important;
+.x-padding--09 {
+  padding: var(--x-size-base-09) !important;
 }
-.x-margin--09 {
-  margin: var(--x-size-base-09) !important;
+.x-padding--10 {
+  padding: var(--x-size-base-10) !important;
 }
-.x-margin--10 {
-  margin: var(--x-size-base-10) !important;
+.x-padding--11 {
+  padding: var(--x-size-base-11) !important;
 }
-.x-margin--11 {
-  margin: var(--x-size-base-11) !important;
+.x-padding--12 {
+  padding: var(--x-size-base-12) !important;
 }
-.x-margin--12 {
-  margin: var(--x-size-base-12) !important;
+.x-padding--13 {
+  padding: var(--x-size-base-13) !important;
 }
-.x-margin--13 {
-  margin: var(--x-size-base-13) !important;
+.x-padding--14 {
+  padding: var(--x-size-base-14) !important;
 }
-.x-margin--14 {
-  margin: var(--x-size-base-14) !important;
+.x-padding--15 {
+  padding: var(--x-size-base-15) !important;
 }
-.x-margin--15 {
-  margin: var(--x-size-base-15) !important;
+.x-padding--16 {
+  padding: var(--x-size-base-16) !important;
 }
-.x-margin--16 {
-  margin: var(--x-size-base-16) !important;
+.x-padding--17 {
+  padding: var(--x-size-base-17) !important;
 }
-.x-margin--17 {
-  margin: var(--x-size-base-17) !important;
+.x-padding--18 {
+  padding: var(--x-size-base-18) !important;
 }
-.x-margin--18 {
-  margin: var(--x-size-base-18) !important;
+.x-padding--19 {
+  padding: var(--x-size-base-19) !important;
 }
-.x-margin--19 {
-  margin: var(--x-size-base-19) !important;
+.x-padding--20 {
+  padding: var(--x-size-base-20) !important;
 }
-.x-margin--20 {
-  margin: var(--x-size-base-20) !important;
+.x-padding--top-00 {
+  padding-top: 0 !important;
 }
-.x-margin--top-auto {
-  margin-top: auto !important;
+.x-padding--bottom-00 {
+  padding-bottom: 0 !important;
 }
-.x-margin--bottom-auto {
-  margin-bottom: auto !important;
+[dir="ltr"] .x-padding--right-00 {
+  padding-right: 0 !important;
 }
-[dir="ltr"] .x-margin--right-auto {
-  margin-right: auto !important;
+[dir="rtl"] .x-padding--right-00 {
+  padding-left: 0 !important;
 }
-[dir="rtl"] .x-margin--right-auto {
-  margin-left: auto !important;
+[dir="ltr"] .x-padding--left-00 {
+  padding-left: 0 !important;
 }
-[dir="ltr"] .x-margin--left-auto {
-  margin-left: auto !important;
+[dir="rtl"] .x-padding--left-00 {
+  padding-right: 0 !important;
 }
-[dir="rtl"] .x-margin--left-auto {
-  margin-right: auto !important;
+.x-padding--top-01 {
+  padding-top: var(--x-size-base-01) !important;
 }
-.x-margin--top-00 {
-  margin-top: 0 !important;
+.x-padding--bottom-01 {
+  padding-bottom: var(--x-size-base-01) !important;
 }
-.x-margin--bottom-00 {
-  margin-bottom: 0 !important;
+[dir="ltr"] .x-padding--right-01 {
+  padding-right: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-margin--right-00 {
-  margin-right: 0 !important;
+[dir="rtl"] .x-padding--right-01 {
+  padding-left: var(--x-size-base-01) !important;
 }
-[dir="rtl"] .x-margin--right-00 {
-  margin-left: 0 !important;
+[dir="ltr"] .x-padding--left-01 {
+  padding-left: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-margin--left-00 {
-  margin-left: 0 !important;
+[dir="rtl"] .x-padding--left-01 {
+  padding-right: var(--x-size-base-01) !important;
 }
-[dir="rtl"] .x-margin--left-00 {
-  margin-right: 0 !important;
+.x-padding--top-02 {
+  padding-top: var(--x-size-base-02) !important;
 }
-.x-margin--top-01 {
-  margin-top: var(--x-size-base-01) !important;
+.x-padding--bottom-02 {
+  padding-bottom: var(--x-size-base-02) !important;
 }
-.x-margin--bottom-01 {
-  margin-bottom: var(--x-size-base-01) !important;
+[dir="ltr"] .x-padding--right-02 {
+  padding-right: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-margin--right-01 {
-  margin-right: var(--x-size-base-01) !important;
+[dir="rtl"] .x-padding--right-02 {
+  padding-left: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-margin--right-01 {
-  margin-left: var(--x-size-base-01) !important;
+[dir="ltr"] .x-padding--left-02 {
+  padding-left: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-margin--left-01 {
-  margin-left: var(--x-size-base-01) !important;
+[dir="rtl"] .x-padding--left-02 {
+  padding-right: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-margin--left-01 {
-  margin-right: var(--x-size-base-01) !important;
+.x-padding--top-03 {
+  padding-top: var(--x-size-base-03) !important;
 }
-.x-margin--top-02 {
-  margin-top: var(--x-size-base-02) !important;
+.x-padding--bottom-03 {
+  padding-bottom: var(--x-size-base-03) !important;
 }
-.x-margin--bottom-02 {
-  margin-bottom: var(--x-size-base-02) !important;
+[dir="ltr"] .x-padding--right-03 {
+  padding-right: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-margin--right-02 {
-  margin-right: var(--x-size-base-02) !important;
+[dir="rtl"] .x-padding--right-03 {
+  padding-left: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-margin--right-02 {
-  margin-left: var(--x-size-base-02) !important;
+[dir="ltr"] .x-padding--left-03 {
+  padding-left: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-margin--left-02 {
-  margin-left: var(--x-size-base-02) !important;
+[dir="rtl"] .x-padding--left-03 {
+  padding-right: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-margin--left-02 {
-  margin-right: var(--x-size-base-02) !important;
+.x-padding--top-04 {
+  padding-top: var(--x-size-base-04) !important;
 }
-.x-margin--top-03 {
-  margin-top: var(--x-size-base-03) !important;
+.x-padding--bottom-04 {
+  padding-bottom: var(--x-size-base-04) !important;
 }
-.x-margin--bottom-03 {
-  margin-bottom: var(--x-size-base-03) !important;
+[dir="ltr"] .x-padding--right-04 {
+  padding-right: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-margin--right-03 {
-  margin-right: var(--x-size-base-03) !important;
+[dir="rtl"] .x-padding--right-04 {
+  padding-left: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-margin--right-03 {
-  margin-left: var(--x-size-base-03) !important;
+[dir="ltr"] .x-padding--left-04 {
+  padding-left: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-margin--left-03 {
-  margin-left: var(--x-size-base-03) !important;
+[dir="rtl"] .x-padding--left-04 {
+  padding-right: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-margin--left-03 {
-  margin-right: var(--x-size-base-03) !important;
+.x-padding--top-05 {
+  padding-top: var(--x-size-base-05) !important;
 }
-.x-margin--top-04 {
-  margin-top: var(--x-size-base-04) !important;
+.x-padding--bottom-05 {
+  padding-bottom: var(--x-size-base-05) !important;
 }
-.x-margin--bottom-04 {
-  margin-bottom: var(--x-size-base-04) !important;
+[dir="ltr"] .x-padding--right-05 {
+  padding-right: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-margin--right-04 {
-  margin-right: var(--x-size-base-04) !important;
+[dir="rtl"] .x-padding--right-05 {
+  padding-left: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-margin--right-04 {
-  margin-left: var(--x-size-base-04) !important;
+[dir="ltr"] .x-padding--left-05 {
+  padding-left: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-margin--left-04 {
-  margin-left: var(--x-size-base-04) !important;
+[dir="rtl"] .x-padding--left-05 {
+  padding-right: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-margin--left-04 {
-  margin-right: var(--x-size-base-04) !important;
+.x-padding--top-06 {
+  padding-top: var(--x-size-base-06) !important;
 }
-.x-margin--top-05 {
-  margin-top: var(--x-size-base-05) !important;
+.x-padding--bottom-06 {
+  padding-bottom: var(--x-size-base-06) !important;
 }
-.x-margin--bottom-05 {
-  margin-bottom: var(--x-size-base-05) !important;
+[dir="ltr"] .x-padding--right-06 {
+  padding-right: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-margin--right-05 {
-  margin-right: var(--x-size-base-05) !important;
+[dir="rtl"] .x-padding--right-06 {
+  padding-left: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-margin--right-05 {
-  margin-left: var(--x-size-base-05) !important;
+[dir="ltr"] .x-padding--left-06 {
+  padding-left: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-margin--left-05 {
-  margin-left: var(--x-size-base-05) !important;
+[dir="rtl"] .x-padding--left-06 {
+  padding-right: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-margin--left-05 {
-  margin-right: var(--x-size-base-05) !important;
+.x-padding--top-07 {
+  padding-top: var(--x-size-base-07) !important;
 }
-.x-margin--top-06 {
-  margin-top: var(--x-size-base-06) !important;
+.x-padding--bottom-07 {
+  padding-bottom: var(--x-size-base-07) !important;
 }
-.x-margin--bottom-06 {
-  margin-bottom: var(--x-size-base-06) !important;
+[dir="ltr"] .x-padding--right-07 {
+  padding-right: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-margin--right-06 {
-  margin-right: var(--x-size-base-06) !important;
+[dir="rtl"] .x-padding--right-07 {
+  padding-left: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-margin--right-06 {
-  margin-left: var(--x-size-base-06) !important;
+[dir="ltr"] .x-padding--left-07 {
+  padding-left: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-margin--left-06 {
-  margin-left: var(--x-size-base-06) !important;
+[dir="rtl"] .x-padding--left-07 {
+  padding-right: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-margin--left-06 {
-  margin-right: var(--x-size-base-06) !important;
+.x-padding--top-08 {
+  padding-top: var(--x-size-base-08) !important;
 }
-.x-margin--top-07 {
-  margin-top: var(--x-size-base-07) !important;
+.x-padding--bottom-08 {
+  padding-bottom: var(--x-size-base-08) !important;
 }
-.x-margin--bottom-07 {
-  margin-bottom: var(--x-size-base-07) !important;
+[dir="ltr"] .x-padding--right-08 {
+  padding-right: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-margin--right-07 {
-  margin-right: var(--x-size-base-07) !important;
+[dir="rtl"] .x-padding--right-08 {
+  padding-left: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-margin--right-07 {
-  margin-left: var(--x-size-base-07) !important;
+[dir="ltr"] .x-padding--left-08 {
+  padding-left: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-margin--left-07 {
-  margin-left: var(--x-size-base-07) !important;
+[dir="rtl"] .x-padding--left-08 {
+  padding-right: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-margin--left-07 {
-  margin-right: var(--x-size-base-07) !important;
+.x-padding--top-09 {
+  padding-top: var(--x-size-base-09) !important;
 }
-.x-margin--top-08 {
-  margin-top: var(--x-size-base-08) !important;
+.x-padding--bottom-09 {
+  padding-bottom: var(--x-size-base-09) !important;
 }
-.x-margin--bottom-08 {
-  margin-bottom: var(--x-size-base-08) !important;
+[dir="ltr"] .x-padding--right-09 {
+  padding-right: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-margin--right-08 {
-  margin-right: var(--x-size-base-08) !important;
+[dir="rtl"] .x-padding--right-09 {
+  padding-left: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-margin--right-08 {
-  margin-left: var(--x-size-base-08) !important;
+[dir="ltr"] .x-padding--left-09 {
+  padding-left: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-margin--left-08 {
-  margin-left: var(--x-size-base-08) !important;
+[dir="rtl"] .x-padding--left-09 {
+  padding-right: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-margin--left-08 {
-  margin-right: var(--x-size-base-08) !important;
+.x-padding--top-10 {
+  padding-top: var(--x-size-base-10) !important;
 }
-.x-margin--top-09 {
-  margin-top: var(--x-size-base-09) !important;
+.x-padding--bottom-10 {
+  padding-bottom: var(--x-size-base-10) !important;
 }
-.x-margin--bottom-09 {
-  margin-bottom: var(--x-size-base-09) !important;
+[dir="ltr"] .x-padding--right-10 {
+  padding-right: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-margin--right-09 {
-  margin-right: var(--x-size-base-09) !important;
+[dir="rtl"] .x-padding--right-10 {
+  padding-left: var(--x-size-base-10) !important;
 }
-[dir="rtl"] .x-margin--right-09 {
-  margin-left: var(--x-size-base-09) !important;
+[dir="ltr"] .x-padding--left-10 {
+  padding-left: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-margin--left-09 {
-  margin-left: var(--x-size-base-09) !important;
+[dir="rtl"] .x-padding--left-10 {
+  padding-right: var(--x-size-base-10) !important;
 }
-[dir="rtl"] .x-margin--left-09 {
-  margin-right: var(--x-size-base-09) !important;
+.x-padding--top-11 {
+  padding-top: var(--x-size-base-11) !important;
 }
-.x-margin--top-10 {
-  margin-top: var(--x-size-base-10) !important;
+.x-padding--bottom-11 {
+  padding-bottom: var(--x-size-base-11) !important;
 }
-.x-margin--bottom-10 {
-  margin-bottom: var(--x-size-base-10) !important;
+[dir="ltr"] .x-padding--right-11 {
+  padding-right: var(--x-size-base-11) !important;
 }
-[dir="ltr"] .x-margin--right-10 {
-  margin-right: var(--x-size-base-10) !important;
+[dir="rtl"] .x-padding--right-11 {
+  padding-left: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-margin--right-10 {
-  margin-left: var(--x-size-base-10) !important;
+[dir="ltr"] .x-padding--left-11 {
+  padding-left: var(--x-size-base-11) !important;
 }
-[dir="ltr"] .x-margin--left-10 {
-  margin-left: var(--x-size-base-10) !important;
+[dir="rtl"] .x-padding--left-11 {
+  padding-right: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-margin--left-10 {
-  margin-right: var(--x-size-base-10) !important;
+.x-padding--top-12 {
+  padding-top: var(--x-size-base-12) !important;
 }
-.x-margin--top-11 {
-  margin-top: var(--x-size-base-11) !important;
+.x-padding--bottom-12 {
+  padding-bottom: var(--x-size-base-12) !important;
 }
-.x-margin--bottom-11 {
-  margin-bottom: var(--x-size-base-11) !important;
+[dir="ltr"] .x-padding--right-12 {
+  padding-right: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-margin--right-11 {
-  margin-right: var(--x-size-base-11) !important;
+[dir="rtl"] .x-padding--right-12 {
+  padding-left: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-margin--right-11 {
-  margin-left: var(--x-size-base-11) !important;
+[dir="ltr"] .x-padding--left-12 {
+  padding-left: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-margin--left-11 {
-  margin-left: var(--x-size-base-11) !important;
+[dir="rtl"] .x-padding--left-12 {
+  padding-right: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-margin--left-11 {
-  margin-right: var(--x-size-base-11) !important;
+.x-padding--top-13 {
+  padding-top: var(--x-size-base-13) !important;
 }
-.x-margin--top-12 {
-  margin-top: var(--x-size-base-12) !important;
+.x-padding--bottom-13 {
+  padding-bottom: var(--x-size-base-13) !important;
 }
-.x-margin--bottom-12 {
-  margin-bottom: var(--x-size-base-12) !important;
+[dir="ltr"] .x-padding--right-13 {
+  padding-right: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-margin--right-12 {
-  margin-right: var(--x-size-base-12) !important;
+[dir="rtl"] .x-padding--right-13 {
+  padding-left: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-margin--right-12 {
-  margin-left: var(--x-size-base-12) !important;
+[dir="ltr"] .x-padding--left-13 {
+  padding-left: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-margin--left-12 {
-  margin-left: var(--x-size-base-12) !important;
+[dir="rtl"] .x-padding--left-13 {
+  padding-right: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-margin--left-12 {
-  margin-right: var(--x-size-base-12) !important;
+.x-padding--top-14 {
+  padding-top: var(--x-size-base-14) !important;
 }
-.x-margin--top-13 {
-  margin-top: var(--x-size-base-13) !important;
+.x-padding--bottom-14 {
+  padding-bottom: var(--x-size-base-14) !important;
 }
-.x-margin--bottom-13 {
-  margin-bottom: var(--x-size-base-13) !important;
+[dir="ltr"] .x-padding--right-14 {
+  padding-right: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-margin--right-13 {
-  margin-right: var(--x-size-base-13) !important;
+[dir="rtl"] .x-padding--right-14 {
+  padding-left: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-margin--right-13 {
-  margin-left: var(--x-size-base-13) !important;
+[dir="ltr"] .x-padding--left-14 {
+  padding-left: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-margin--left-13 {
-  margin-left: var(--x-size-base-13) !important;
+[dir="rtl"] .x-padding--left-14 {
+  padding-right: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-margin--left-13 {
-  margin-right: var(--x-size-base-13) !important;
+.x-padding--top-15 {
+  padding-top: var(--x-size-base-15) !important;
 }
-.x-margin--top-14 {
-  margin-top: var(--x-size-base-14) !important;
+.x-padding--bottom-15 {
+  padding-bottom: var(--x-size-base-15) !important;
 }
-.x-margin--bottom-14 {
-  margin-bottom: var(--x-size-base-14) !important;
+[dir="ltr"] .x-padding--right-15 {
+  padding-right: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-margin--right-14 {
-  margin-right: var(--x-size-base-14) !important;
+[dir="rtl"] .x-padding--right-15 {
+  padding-left: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-margin--right-14 {
-  margin-left: var(--x-size-base-14) !important;
+[dir="ltr"] .x-padding--left-15 {
+  padding-left: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-margin--left-14 {
-  margin-left: var(--x-size-base-14) !important;
+[dir="rtl"] .x-padding--left-15 {
+  padding-right: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-margin--left-14 {
-  margin-right: var(--x-size-base-14) !important;
+.x-padding--top-16 {
+  padding-top: var(--x-size-base-16) !important;
 }
-.x-margin--top-15 {
-  margin-top: var(--x-size-base-15) !important;
+.x-padding--bottom-16 {
+  padding-bottom: var(--x-size-base-16) !important;
 }
-.x-margin--bottom-15 {
-  margin-bottom: var(--x-size-base-15) !important;
+[dir="ltr"] .x-padding--right-16 {
+  padding-right: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-margin--right-15 {
-  margin-right: var(--x-size-base-15) !important;
+[dir="rtl"] .x-padding--right-16 {
+  padding-left: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-margin--right-15 {
-  margin-left: var(--x-size-base-15) !important;
+[dir="ltr"] .x-padding--left-16 {
+  padding-left: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-margin--left-15 {
-  margin-left: var(--x-size-base-15) !important;
+[dir="rtl"] .x-padding--left-16 {
+  padding-right: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-margin--left-15 {
-  margin-right: var(--x-size-base-15) !important;
+.x-padding--top-17 {
+  padding-top: var(--x-size-base-17) !important;
 }
-.x-margin--top-16 {
-  margin-top: var(--x-size-base-16) !important;
+.x-padding--bottom-17 {
+  padding-bottom: var(--x-size-base-17) !important;
 }
-.x-margin--bottom-16 {
-  margin-bottom: var(--x-size-base-16) !important;
+[dir="ltr"] .x-padding--right-17 {
+  padding-right: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-margin--right-16 {
-  margin-right: var(--x-size-base-16) !important;
+[dir="rtl"] .x-padding--right-17 {
+  padding-left: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-margin--right-16 {
-  margin-left: var(--x-size-base-16) !important;
+[dir="ltr"] .x-padding--left-17 {
+  padding-left: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-margin--left-16 {
-  margin-left: var(--x-size-base-16) !important;
+[dir="rtl"] .x-padding--left-17 {
+  padding-right: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-margin--left-16 {
-  margin-right: var(--x-size-base-16) !important;
+.x-padding--top-18 {
+  padding-top: var(--x-size-base-18) !important;
 }
-.x-margin--top-17 {
-  margin-top: var(--x-size-base-17) !important;
+.x-padding--bottom-18 {
+  padding-bottom: var(--x-size-base-18) !important;
 }
-.x-margin--bottom-17 {
-  margin-bottom: var(--x-size-base-17) !important;
+[dir="ltr"] .x-padding--right-18 {
+  padding-right: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-margin--right-17 {
-  margin-right: var(--x-size-base-17) !important;
+[dir="rtl"] .x-padding--right-18 {
+  padding-left: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-margin--right-17 {
-  margin-left: var(--x-size-base-17) !important;
+[dir="ltr"] .x-padding--left-18 {
+  padding-left: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-margin--left-17 {
-  margin-left: var(--x-size-base-17) !important;
+[dir="rtl"] .x-padding--left-18 {
+  padding-right: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-margin--left-17 {
-  margin-right: var(--x-size-base-17) !important;
+.x-padding--top-19 {
+  padding-top: var(--x-size-base-19) !important;
 }
-.x-margin--top-18 {
-  margin-top: var(--x-size-base-18) !important;
+.x-padding--bottom-19 {
+  padding-bottom: var(--x-size-base-19) !important;
 }
-.x-margin--bottom-18 {
-  margin-bottom: var(--x-size-base-18) !important;
+[dir="ltr"] .x-padding--right-19 {
+  padding-right: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-margin--right-18 {
-  margin-right: var(--x-size-base-18) !important;
+[dir="rtl"] .x-padding--right-19 {
+  padding-left: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-margin--right-18 {
-  margin-left: var(--x-size-base-18) !important;
+[dir="ltr"] .x-padding--left-19 {
+  padding-left: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-margin--left-18 {
-  margin-left: var(--x-size-base-18) !important;
+[dir="rtl"] .x-padding--left-19 {
+  padding-right: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-margin--left-18 {
-  margin-right: var(--x-size-base-18) !important;
+.x-padding--top-20 {
+  padding-top: var(--x-size-base-20) !important;
 }
-.x-margin--top-19 {
-  margin-top: var(--x-size-base-19) !important;
+.x-padding--bottom-20 {
+  padding-bottom: var(--x-size-base-20) !important;
 }
-.x-margin--bottom-19 {
-  margin-bottom: var(--x-size-base-19) !important;
+[dir="ltr"] .x-padding--right-20 {
+  padding-right: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-margin--right-19 {
-  margin-right: var(--x-size-base-19) !important;
+[dir="rtl"] .x-padding--right-20 {
+  padding-left: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-margin--right-19 {
-  margin-left: var(--x-size-base-19) !important;
+[dir="ltr"] .x-padding--left-20 {
+  padding-left: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-margin--left-19 {
-  margin-left: var(--x-size-base-19) !important;
+[dir="rtl"] .x-padding--left-20 {
+  padding-right: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-margin--left-19 {
-  margin-right: var(--x-size-base-19) !important;
+.x-margin--auto {
+  margin: auto !important;
 }
-.x-margin--top-20 {
-  margin-top: var(--x-size-base-20) !important;
+.x-margin--00 {
+  margin: 0 !important;
 }
-.x-margin--bottom-20 {
-  margin-bottom: var(--x-size-base-20) !important;
+.x-margin--01 {
+  margin: var(--x-size-base-01) !important;
 }
-[dir="ltr"] .x-margin--right-20 {
-  margin-right: var(--x-size-base-20) !important;
+.x-margin--02 {
+  margin: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-margin--right-20 {
-  margin-left: var(--x-size-base-20) !important;
+.x-margin--03 {
+  margin: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-margin--left-20 {
-  margin-left: var(--x-size-base-20) !important;
+.x-margin--04 {
+  margin: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-margin--left-20 {
-  margin-right: var(--x-size-base-20) !important;
+.x-margin--05 {
+  margin: var(--x-size-base-05) !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
+.x-margin--06 {
+  margin: var(--x-size-base-06) !important;
 }
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
+.x-margin--07 {
+  margin: var(--x-size-base-07) !important;
 }
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
+.x-margin--08 {
+  margin: var(--x-size-base-08) !important;
 }
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
+.x-margin--09 {
+  margin: var(--x-size-base-09) !important;
 }
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
+.x-margin--10 {
+  margin: var(--x-size-base-10) !important;
 }
-
-.x-line-height--loose {
-  line-height: 2 !important;
+.x-margin--11 {
+  margin: var(--x-size-base-11) !important;
 }
-.x-font-weight--light {
-  font-weight: var(--x-number-font-weight-base-light) !important;
+.x-margin--12 {
+  margin: var(--x-size-base-12) !important;
 }
-.x-font-weight--regular {
-  font-weight: var(--x-number-font-weight-base-regular) !important;
+.x-margin--13 {
+  margin: var(--x-size-base-13) !important;
 }
-.x-font-weight--bold {
-  font-weight: var(--x-number-font-weight-base-bold) !important;
+.x-margin--14 {
+  margin: var(--x-size-base-14) !important;
 }
-.x-line-clamp--2 {
-  overflow: hidden !important;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-line-clamp: 2 !important;
+.x-margin--15 {
+  margin: var(--x-size-base-15) !important;
 }
-
-.x-line-clamp--3 {
-  overflow: hidden !important;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-line-clamp: 3 !important;
+.x-margin--16 {
+  margin: var(--x-size-base-16) !important;
 }
-
-.x-line-clamp--4 {
-  overflow: hidden !important;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-line-clamp: 4 !important;
+.x-margin--17 {
+  margin: var(--x-size-base-17) !important;
 }
-
-.x-line-clamp--5 {
-  overflow: hidden !important;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-line-clamp: 5 !important;
+.x-margin--18 {
+  margin: var(--x-size-base-18) !important;
 }
-
-.x-line-clamp--6 {
-  overflow: hidden !important;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-line-clamp: 6 !important;
+.x-margin--19 {
+  margin: var(--x-size-base-19) !important;
 }
-.x-padding--00 {
-  padding: 0 !important;
+.x-margin--20 {
+  margin: var(--x-size-base-20) !important;
 }
-.x-padding--01 {
-  padding: var(--x-size-base-01) !important;
+.x-margin--top-auto {
+  margin-top: auto !important;
 }
-.x-padding--02 {
-  padding: var(--x-size-base-02) !important;
+.x-margin--bottom-auto {
+  margin-bottom: auto !important;
 }
-.x-padding--03 {
-  padding: var(--x-size-base-03) !important;
+[dir="ltr"] .x-margin--right-auto {
+  margin-right: auto !important;
 }
-.x-padding--04 {
-  padding: var(--x-size-base-04) !important;
+[dir="rtl"] .x-margin--right-auto {
+  margin-left: auto !important;
 }
-.x-padding--05 {
-  padding: var(--x-size-base-05) !important;
+[dir="ltr"] .x-margin--left-auto {
+  margin-left: auto !important;
 }
-.x-padding--06 {
-  padding: var(--x-size-base-06) !important;
+[dir="rtl"] .x-margin--left-auto {
+  margin-right: auto !important;
 }
-.x-padding--07 {
-  padding: var(--x-size-base-07) !important;
+.x-margin--top-00 {
+  margin-top: 0 !important;
 }
-.x-padding--08 {
-  padding: var(--x-size-base-08) !important;
+.x-margin--bottom-00 {
+  margin-bottom: 0 !important;
 }
-.x-padding--09 {
-  padding: var(--x-size-base-09) !important;
+[dir="ltr"] .x-margin--right-00 {
+  margin-right: 0 !important;
 }
-.x-padding--10 {
-  padding: var(--x-size-base-10) !important;
+[dir="rtl"] .x-margin--right-00 {
+  margin-left: 0 !important;
 }
-.x-padding--11 {
-  padding: var(--x-size-base-11) !important;
+[dir="ltr"] .x-margin--left-00 {
+  margin-left: 0 !important;
 }
-.x-padding--12 {
-  padding: var(--x-size-base-12) !important;
+[dir="rtl"] .x-margin--left-00 {
+  margin-right: 0 !important;
 }
-.x-padding--13 {
-  padding: var(--x-size-base-13) !important;
+.x-margin--top-01 {
+  margin-top: var(--x-size-base-01) !important;
 }
-.x-padding--14 {
-  padding: var(--x-size-base-14) !important;
+.x-margin--bottom-01 {
+  margin-bottom: var(--x-size-base-01) !important;
 }
-.x-padding--15 {
-  padding: var(--x-size-base-15) !important;
+[dir="ltr"] .x-margin--right-01 {
+  margin-right: var(--x-size-base-01) !important;
 }
-.x-padding--16 {
-  padding: var(--x-size-base-16) !important;
+[dir="rtl"] .x-margin--right-01 {
+  margin-left: var(--x-size-base-01) !important;
 }
-.x-padding--17 {
-  padding: var(--x-size-base-17) !important;
+[dir="ltr"] .x-margin--left-01 {
+  margin-left: var(--x-size-base-01) !important;
 }
-.x-padding--18 {
-  padding: var(--x-size-base-18) !important;
+[dir="rtl"] .x-margin--left-01 {
+  margin-right: var(--x-size-base-01) !important;
 }
-.x-padding--19 {
-  padding: var(--x-size-base-19) !important;
+.x-margin--top-02 {
+  margin-top: var(--x-size-base-02) !important;
 }
-.x-padding--20 {
-  padding: var(--x-size-base-20) !important;
+.x-margin--bottom-02 {
+  margin-bottom: var(--x-size-base-02) !important;
 }
-.x-padding--top-00 {
-  padding-top: 0 !important;
+[dir="ltr"] .x-margin--right-02 {
+  margin-right: var(--x-size-base-02) !important;
 }
-.x-padding--bottom-00 {
-  padding-bottom: 0 !important;
+[dir="rtl"] .x-margin--right-02 {
+  margin-left: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-padding--right-00 {
-  padding-right: 0 !important;
+[dir="ltr"] .x-margin--left-02 {
+  margin-left: var(--x-size-base-02) !important;
 }
-[dir="rtl"] .x-padding--right-00 {
-  padding-left: 0 !important;
+[dir="rtl"] .x-margin--left-02 {
+  margin-right: var(--x-size-base-02) !important;
 }
-[dir="ltr"] .x-padding--left-00 {
-  padding-left: 0 !important;
+.x-margin--top-03 {
+  margin-top: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-padding--left-00 {
-  padding-right: 0 !important;
+.x-margin--bottom-03 {
+  margin-bottom: var(--x-size-base-03) !important;
 }
-.x-padding--top-01 {
-  padding-top: var(--x-size-base-01) !important;
+[dir="ltr"] .x-margin--right-03 {
+  margin-right: var(--x-size-base-03) !important;
 }
-.x-padding--bottom-01 {
-  padding-bottom: var(--x-size-base-01) !important;
+[dir="rtl"] .x-margin--right-03 {
+  margin-left: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-padding--right-01 {
-  padding-right: var(--x-size-base-01) !important;
+[dir="ltr"] .x-margin--left-03 {
+  margin-left: var(--x-size-base-03) !important;
 }
-[dir="rtl"] .x-padding--right-01 {
-  padding-left: var(--x-size-base-01) !important;
+[dir="rtl"] .x-margin--left-03 {
+  margin-right: var(--x-size-base-03) !important;
 }
-[dir="ltr"] .x-padding--left-01 {
-  padding-left: var(--x-size-base-01) !important;
+.x-margin--top-04 {
+  margin-top: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-padding--left-01 {
-  padding-right: var(--x-size-base-01) !important;
+.x-margin--bottom-04 {
+  margin-bottom: var(--x-size-base-04) !important;
 }
-.x-padding--top-02 {
-  padding-top: var(--x-size-base-02) !important;
+[dir="ltr"] .x-margin--right-04 {
+  margin-right: var(--x-size-base-04) !important;
 }
-.x-padding--bottom-02 {
-  padding-bottom: var(--x-size-base-02) !important;
+[dir="rtl"] .x-margin--right-04 {
+  margin-left: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-padding--right-02 {
-  padding-right: var(--x-size-base-02) !important;
+[dir="ltr"] .x-margin--left-04 {
+  margin-left: var(--x-size-base-04) !important;
 }
-[dir="rtl"] .x-padding--right-02 {
-  padding-left: var(--x-size-base-02) !important;
+[dir="rtl"] .x-margin--left-04 {
+  margin-right: var(--x-size-base-04) !important;
 }
-[dir="ltr"] .x-padding--left-02 {
-  padding-left: var(--x-size-base-02) !important;
+.x-margin--top-05 {
+  margin-top: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-padding--left-02 {
-  padding-right: var(--x-size-base-02) !important;
+.x-margin--bottom-05 {
+  margin-bottom: var(--x-size-base-05) !important;
 }
-.x-padding--top-03 {
-  padding-top: var(--x-size-base-03) !important;
+[dir="ltr"] .x-margin--right-05 {
+  margin-right: var(--x-size-base-05) !important;
 }
-.x-padding--bottom-03 {
-  padding-bottom: var(--x-size-base-03) !important;
+[dir="rtl"] .x-margin--right-05 {
+  margin-left: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-padding--right-03 {
-  padding-right: var(--x-size-base-03) !important;
+[dir="ltr"] .x-margin--left-05 {
+  margin-left: var(--x-size-base-05) !important;
 }
-[dir="rtl"] .x-padding--right-03 {
-  padding-left: var(--x-size-base-03) !important;
+[dir="rtl"] .x-margin--left-05 {
+  margin-right: var(--x-size-base-05) !important;
 }
-[dir="ltr"] .x-padding--left-03 {
-  padding-left: var(--x-size-base-03) !important;
+.x-margin--top-06 {
+  margin-top: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-padding--left-03 {
-  padding-right: var(--x-size-base-03) !important;
+.x-margin--bottom-06 {
+  margin-bottom: var(--x-size-base-06) !important;
 }
-.x-padding--top-04 {
-  padding-top: var(--x-size-base-04) !important;
+[dir="ltr"] .x-margin--right-06 {
+  margin-right: var(--x-size-base-06) !important;
 }
-.x-padding--bottom-04 {
-  padding-bottom: var(--x-size-base-04) !important;
+[dir="rtl"] .x-margin--right-06 {
+  margin-left: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-padding--right-04 {
-  padding-right: var(--x-size-base-04) !important;
+[dir="ltr"] .x-margin--left-06 {
+  margin-left: var(--x-size-base-06) !important;
 }
-[dir="rtl"] .x-padding--right-04 {
-  padding-left: var(--x-size-base-04) !important;
+[dir="rtl"] .x-margin--left-06 {
+  margin-right: var(--x-size-base-06) !important;
 }
-[dir="ltr"] .x-padding--left-04 {
-  padding-left: var(--x-size-base-04) !important;
+.x-margin--top-07 {
+  margin-top: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-padding--left-04 {
-  padding-right: var(--x-size-base-04) !important;
+.x-margin--bottom-07 {
+  margin-bottom: var(--x-size-base-07) !important;
 }
-.x-padding--top-05 {
-  padding-top: var(--x-size-base-05) !important;
+[dir="ltr"] .x-margin--right-07 {
+  margin-right: var(--x-size-base-07) !important;
 }
-.x-padding--bottom-05 {
-  padding-bottom: var(--x-size-base-05) !important;
+[dir="rtl"] .x-margin--right-07 {
+  margin-left: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-padding--right-05 {
-  padding-right: var(--x-size-base-05) !important;
+[dir="ltr"] .x-margin--left-07 {
+  margin-left: var(--x-size-base-07) !important;
 }
-[dir="rtl"] .x-padding--right-05 {
-  padding-left: var(--x-size-base-05) !important;
+[dir="rtl"] .x-margin--left-07 {
+  margin-right: var(--x-size-base-07) !important;
 }
-[dir="ltr"] .x-padding--left-05 {
-  padding-left: var(--x-size-base-05) !important;
+.x-margin--top-08 {
+  margin-top: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-padding--left-05 {
-  padding-right: var(--x-size-base-05) !important;
+.x-margin--bottom-08 {
+  margin-bottom: var(--x-size-base-08) !important;
 }
-.x-padding--top-06 {
-  padding-top: var(--x-size-base-06) !important;
+[dir="ltr"] .x-margin--right-08 {
+  margin-right: var(--x-size-base-08) !important;
 }
-.x-padding--bottom-06 {
-  padding-bottom: var(--x-size-base-06) !important;
+[dir="rtl"] .x-margin--right-08 {
+  margin-left: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-padding--right-06 {
-  padding-right: var(--x-size-base-06) !important;
+[dir="ltr"] .x-margin--left-08 {
+  margin-left: var(--x-size-base-08) !important;
 }
-[dir="rtl"] .x-padding--right-06 {
-  padding-left: var(--x-size-base-06) !important;
+[dir="rtl"] .x-margin--left-08 {
+  margin-right: var(--x-size-base-08) !important;
 }
-[dir="ltr"] .x-padding--left-06 {
-  padding-left: var(--x-size-base-06) !important;
+.x-margin--top-09 {
+  margin-top: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-padding--left-06 {
-  padding-right: var(--x-size-base-06) !important;
+.x-margin--bottom-09 {
+  margin-bottom: var(--x-size-base-09) !important;
 }
-.x-padding--top-07 {
-  padding-top: var(--x-size-base-07) !important;
+[dir="ltr"] .x-margin--right-09 {
+  margin-right: var(--x-size-base-09) !important;
 }
-.x-padding--bottom-07 {
-  padding-bottom: var(--x-size-base-07) !important;
+[dir="rtl"] .x-margin--right-09 {
+  margin-left: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-padding--right-07 {
-  padding-right: var(--x-size-base-07) !important;
+[dir="ltr"] .x-margin--left-09 {
+  margin-left: var(--x-size-base-09) !important;
 }
-[dir="rtl"] .x-padding--right-07 {
-  padding-left: var(--x-size-base-07) !important;
+[dir="rtl"] .x-margin--left-09 {
+  margin-right: var(--x-size-base-09) !important;
 }
-[dir="ltr"] .x-padding--left-07 {
-  padding-left: var(--x-size-base-07) !important;
+.x-margin--top-10 {
+  margin-top: var(--x-size-base-10) !important;
 }
-[dir="rtl"] .x-padding--left-07 {
-  padding-right: var(--x-size-base-07) !important;
+.x-margin--bottom-10 {
+  margin-bottom: var(--x-size-base-10) !important;
 }
-.x-padding--top-08 {
-  padding-top: var(--x-size-base-08) !important;
+[dir="ltr"] .x-margin--right-10 {
+  margin-right: var(--x-size-base-10) !important;
 }
-.x-padding--bottom-08 {
-  padding-bottom: var(--x-size-base-08) !important;
+[dir="rtl"] .x-margin--right-10 {
+  margin-left: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-padding--right-08 {
-  padding-right: var(--x-size-base-08) !important;
+[dir="ltr"] .x-margin--left-10 {
+  margin-left: var(--x-size-base-10) !important;
 }
-[dir="rtl"] .x-padding--right-08 {
-  padding-left: var(--x-size-base-08) !important;
+[dir="rtl"] .x-margin--left-10 {
+  margin-right: var(--x-size-base-10) !important;
 }
-[dir="ltr"] .x-padding--left-08 {
-  padding-left: var(--x-size-base-08) !important;
+.x-margin--top-11 {
+  margin-top: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-padding--left-08 {
-  padding-right: var(--x-size-base-08) !important;
+.x-margin--bottom-11 {
+  margin-bottom: var(--x-size-base-11) !important;
 }
-.x-padding--top-09 {
-  padding-top: var(--x-size-base-09) !important;
+[dir="ltr"] .x-margin--right-11 {
+  margin-right: var(--x-size-base-11) !important;
 }
-.x-padding--bottom-09 {
-  padding-bottom: var(--x-size-base-09) !important;
+[dir="rtl"] .x-margin--right-11 {
+  margin-left: var(--x-size-base-11) !important;
 }
-[dir="ltr"] .x-padding--right-09 {
-  padding-right: var(--x-size-base-09) !important;
+[dir="ltr"] .x-margin--left-11 {
+  margin-left: var(--x-size-base-11) !important;
 }
-[dir="rtl"] .x-padding--right-09 {
-  padding-left: var(--x-size-base-09) !important;
+[dir="rtl"] .x-margin--left-11 {
+  margin-right: var(--x-size-base-11) !important;
 }
-[dir="ltr"] .x-padding--left-09 {
-  padding-left: var(--x-size-base-09) !important;
+.x-margin--top-12 {
+  margin-top: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-padding--left-09 {
-  padding-right: var(--x-size-base-09) !important;
+.x-margin--bottom-12 {
+  margin-bottom: var(--x-size-base-12) !important;
 }
-.x-padding--top-10 {
-  padding-top: var(--x-size-base-10) !important;
+[dir="ltr"] .x-margin--right-12 {
+  margin-right: var(--x-size-base-12) !important;
 }
-.x-padding--bottom-10 {
-  padding-bottom: var(--x-size-base-10) !important;
+[dir="rtl"] .x-margin--right-12 {
+  margin-left: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-padding--right-10 {
-  padding-right: var(--x-size-base-10) !important;
+[dir="ltr"] .x-margin--left-12 {
+  margin-left: var(--x-size-base-12) !important;
 }
-[dir="rtl"] .x-padding--right-10 {
-  padding-left: var(--x-size-base-10) !important;
+[dir="rtl"] .x-margin--left-12 {
+  margin-right: var(--x-size-base-12) !important;
 }
-[dir="ltr"] .x-padding--left-10 {
-  padding-left: var(--x-size-base-10) !important;
+.x-margin--top-13 {
+  margin-top: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-padding--left-10 {
-  padding-right: var(--x-size-base-10) !important;
+.x-margin--bottom-13 {
+  margin-bottom: var(--x-size-base-13) !important;
 }
-.x-padding--top-11 {
-  padding-top: var(--x-size-base-11) !important;
+[dir="ltr"] .x-margin--right-13 {
+  margin-right: var(--x-size-base-13) !important;
 }
-.x-padding--bottom-11 {
-  padding-bottom: var(--x-size-base-11) !important;
+[dir="rtl"] .x-margin--right-13 {
+  margin-left: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-padding--right-11 {
-  padding-right: var(--x-size-base-11) !important;
+[dir="ltr"] .x-margin--left-13 {
+  margin-left: var(--x-size-base-13) !important;
 }
-[dir="rtl"] .x-padding--right-11 {
-  padding-left: var(--x-size-base-11) !important;
+[dir="rtl"] .x-margin--left-13 {
+  margin-right: var(--x-size-base-13) !important;
 }
-[dir="ltr"] .x-padding--left-11 {
-  padding-left: var(--x-size-base-11) !important;
+.x-margin--top-14 {
+  margin-top: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-padding--left-11 {
-  padding-right: var(--x-size-base-11) !important;
+.x-margin--bottom-14 {
+  margin-bottom: var(--x-size-base-14) !important;
 }
-.x-padding--top-12 {
-  padding-top: var(--x-size-base-12) !important;
+[dir="ltr"] .x-margin--right-14 {
+  margin-right: var(--x-size-base-14) !important;
 }
-.x-padding--bottom-12 {
-  padding-bottom: var(--x-size-base-12) !important;
+[dir="rtl"] .x-margin--right-14 {
+  margin-left: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-padding--right-12 {
-  padding-right: var(--x-size-base-12) !important;
+[dir="ltr"] .x-margin--left-14 {
+  margin-left: var(--x-size-base-14) !important;
 }
-[dir="rtl"] .x-padding--right-12 {
-  padding-left: var(--x-size-base-12) !important;
+[dir="rtl"] .x-margin--left-14 {
+  margin-right: var(--x-size-base-14) !important;
 }
-[dir="ltr"] .x-padding--left-12 {
-  padding-left: var(--x-size-base-12) !important;
+.x-margin--top-15 {
+  margin-top: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-padding--left-12 {
-  padding-right: var(--x-size-base-12) !important;
+.x-margin--bottom-15 {
+  margin-bottom: var(--x-size-base-15) !important;
 }
-.x-padding--top-13 {
-  padding-top: var(--x-size-base-13) !important;
+[dir="ltr"] .x-margin--right-15 {
+  margin-right: var(--x-size-base-15) !important;
 }
-.x-padding--bottom-13 {
-  padding-bottom: var(--x-size-base-13) !important;
+[dir="rtl"] .x-margin--right-15 {
+  margin-left: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-padding--right-13 {
-  padding-right: var(--x-size-base-13) !important;
+[dir="ltr"] .x-margin--left-15 {
+  margin-left: var(--x-size-base-15) !important;
 }
-[dir="rtl"] .x-padding--right-13 {
-  padding-left: var(--x-size-base-13) !important;
+[dir="rtl"] .x-margin--left-15 {
+  margin-right: var(--x-size-base-15) !important;
 }
-[dir="ltr"] .x-padding--left-13 {
-  padding-left: var(--x-size-base-13) !important;
+.x-margin--top-16 {
+  margin-top: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-padding--left-13 {
-  padding-right: var(--x-size-base-13) !important;
+.x-margin--bottom-16 {
+  margin-bottom: var(--x-size-base-16) !important;
 }
-.x-padding--top-14 {
-  padding-top: var(--x-size-base-14) !important;
+[dir="ltr"] .x-margin--right-16 {
+  margin-right: var(--x-size-base-16) !important;
 }
-.x-padding--bottom-14 {
-  padding-bottom: var(--x-size-base-14) !important;
+[dir="rtl"] .x-margin--right-16 {
+  margin-left: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-padding--right-14 {
-  padding-right: var(--x-size-base-14) !important;
+[dir="ltr"] .x-margin--left-16 {
+  margin-left: var(--x-size-base-16) !important;
 }
-[dir="rtl"] .x-padding--right-14 {
-  padding-left: var(--x-size-base-14) !important;
+[dir="rtl"] .x-margin--left-16 {
+  margin-right: var(--x-size-base-16) !important;
 }
-[dir="ltr"] .x-padding--left-14 {
-  padding-left: var(--x-size-base-14) !important;
+.x-margin--top-17 {
+  margin-top: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-padding--left-14 {
-  padding-right: var(--x-size-base-14) !important;
+.x-margin--bottom-17 {
+  margin-bottom: var(--x-size-base-17) !important;
 }
-.x-padding--top-15 {
-  padding-top: var(--x-size-base-15) !important;
+[dir="ltr"] .x-margin--right-17 {
+  margin-right: var(--x-size-base-17) !important;
 }
-.x-padding--bottom-15 {
-  padding-bottom: var(--x-size-base-15) !important;
+[dir="rtl"] .x-margin--right-17 {
+  margin-left: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-padding--right-15 {
-  padding-right: var(--x-size-base-15) !important;
+[dir="ltr"] .x-margin--left-17 {
+  margin-left: var(--x-size-base-17) !important;
 }
-[dir="rtl"] .x-padding--right-15 {
-  padding-left: var(--x-size-base-15) !important;
+[dir="rtl"] .x-margin--left-17 {
+  margin-right: var(--x-size-base-17) !important;
 }
-[dir="ltr"] .x-padding--left-15 {
-  padding-left: var(--x-size-base-15) !important;
+.x-margin--top-18 {
+  margin-top: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-padding--left-15 {
-  padding-right: var(--x-size-base-15) !important;
+.x-margin--bottom-18 {
+  margin-bottom: var(--x-size-base-18) !important;
 }
-.x-padding--top-16 {
-  padding-top: var(--x-size-base-16) !important;
+[dir="ltr"] .x-margin--right-18 {
+  margin-right: var(--x-size-base-18) !important;
 }
-.x-padding--bottom-16 {
-  padding-bottom: var(--x-size-base-16) !important;
+[dir="rtl"] .x-margin--right-18 {
+  margin-left: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-padding--right-16 {
-  padding-right: var(--x-size-base-16) !important;
+[dir="ltr"] .x-margin--left-18 {
+  margin-left: var(--x-size-base-18) !important;
 }
-[dir="rtl"] .x-padding--right-16 {
-  padding-left: var(--x-size-base-16) !important;
+[dir="rtl"] .x-margin--left-18 {
+  margin-right: var(--x-size-base-18) !important;
 }
-[dir="ltr"] .x-padding--left-16 {
-  padding-left: var(--x-size-base-16) !important;
+.x-margin--top-19 {
+  margin-top: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-padding--left-16 {
-  padding-right: var(--x-size-base-16) !important;
+.x-margin--bottom-19 {
+  margin-bottom: var(--x-size-base-19) !important;
 }
-.x-padding--top-17 {
-  padding-top: var(--x-size-base-17) !important;
+[dir="ltr"] .x-margin--right-19 {
+  margin-right: var(--x-size-base-19) !important;
 }
-.x-padding--bottom-17 {
-  padding-bottom: var(--x-size-base-17) !important;
+[dir="rtl"] .x-margin--right-19 {
+  margin-left: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-padding--right-17 {
-  padding-right: var(--x-size-base-17) !important;
+[dir="ltr"] .x-margin--left-19 {
+  margin-left: var(--x-size-base-19) !important;
 }
-[dir="rtl"] .x-padding--right-17 {
-  padding-left: var(--x-size-base-17) !important;
+[dir="rtl"] .x-margin--left-19 {
+  margin-right: var(--x-size-base-19) !important;
 }
-[dir="ltr"] .x-padding--left-17 {
-  padding-left: var(--x-size-base-17) !important;
+.x-margin--top-20 {
+  margin-top: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-padding--left-17 {
-  padding-right: var(--x-size-base-17) !important;
+.x-margin--bottom-20 {
+  margin-bottom: var(--x-size-base-20) !important;
 }
-.x-padding--top-18 {
-  padding-top: var(--x-size-base-18) !important;
+[dir="ltr"] .x-margin--right-20 {
+  margin-right: var(--x-size-base-20) !important;
 }
-.x-padding--bottom-18 {
-  padding-bottom: var(--x-size-base-18) !important;
+[dir="rtl"] .x-margin--right-20 {
+  margin-left: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-padding--right-18 {
-  padding-right: var(--x-size-base-18) !important;
+[dir="ltr"] .x-margin--left-20 {
+  margin-left: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-padding--right-18 {
-  padding-left: var(--x-size-base-18) !important;
+[dir="rtl"] .x-margin--left-20 {
+  margin-right: var(--x-size-base-20) !important;
 }
-[dir="ltr"] .x-padding--left-18 {
-  padding-left: var(--x-size-base-18) !important;
+.x-underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
 }
-[dir="rtl"] .x-padding--left-18 {
-  padding-right: var(--x-size-base-18) !important;
+
+.x-overline {
+  -webkit-text-decoration-line: overline;
+          text-decoration-line: overline;
 }
-.x-padding--top-19 {
-  padding-top: var(--x-size-base-19) !important;
+
+.x-line-through {
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
 }
-.x-padding--bottom-19 {
-  padding-bottom: var(--x-size-base-19) !important;
+
+.x-no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
-[dir="ltr"] .x-padding--right-19 {
-  padding-right: var(--x-size-base-19) !important;
+.x-line-height--none {
+  line-height: 1 !important;
 }
-[dir="rtl"] .x-padding--right-19 {
-  padding-left: var(--x-size-base-19) !important;
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
 }
-[dir="ltr"] .x-padding--left-19 {
-  padding-left: var(--x-size-base-19) !important;
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
 }
-[dir="rtl"] .x-padding--left-19 {
-  padding-right: var(--x-size-base-19) !important;
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
 }
-.x-padding--top-20 {
-  padding-top: var(--x-size-base-20) !important;
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
 }
-.x-padding--bottom-20 {
-  padding-bottom: var(--x-size-base-20) !important;
+
+.x-line-height--loose {
+  line-height: 2 !important;
 }
-[dir="ltr"] .x-padding--right-20 {
-  padding-right: var(--x-size-base-20) !important;
+.x-line-clamp--2 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 2 !important;
 }
-[dir="rtl"] .x-padding--right-20 {
-  padding-left: var(--x-size-base-20) !important;
+
+.x-line-clamp--3 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 3 !important;
 }
-[dir="ltr"] .x-padding--left-20 {
-  padding-left: var(--x-size-base-20) !important;
+
+.x-line-clamp--4 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 4 !important;
+}
+
+.x-line-clamp--5 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 5 !important;
+}
+
+.x-line-clamp--6 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 6 !important;
+}
+.x-font-weight--light {
+  font-weight: var(--x-number-font-weight-base-light) !important;
+}
+.x-font-weight--regular {
+  font-weight: var(--x-number-font-weight-base-regular) !important;
 }
-[dir="rtl"] .x-padding--left-20 {
-  padding-right: var(--x-size-base-20) !important;
+.x-font-weight--bold {
+  font-weight: var(--x-number-font-weight-base-bold) !important;
 }
-
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -1238,66 +1238,239 @@
   /* 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 {
+  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;
@@ -1633,138 +1806,48 @@
 .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-color--lead {
+  border-color: var(--x-color-base-lead) !important;
 }
 
-.x-shadow--none {
-  box-shadow: none !important;
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !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-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
 }
-.x-shadow--07 {
-  box-shadow: var(--x-string-box-shadow-07) !important;
+
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
 }
-.x-shadow--bottom-07 {
-  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
+
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
 }
-.x-shadow--08 {
-  box-shadow: var(--x-string-box-shadow-08) !important;
+
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
 }
-.x-shadow--bottom-08 {
-  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
+
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
 }
-.x-shadow--09 {
-  box-shadow: var(--x-string-box-shadow-09) !important;
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
 }
-.x-shadow--bottom-09 {
-  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
 }
-.x-shadow--10 {
-  box-shadow: var(--x-string-box-shadow-10) !important;
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
 }
-.x-shadow--bottom-10 {
-  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
+
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
 }
 .x-border-radius--00 {
   border-radius: 0 !important;
@@ -3265,57 +3348,29 @@
 [dir="ltr"] .x-border-radius--bottom-left-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-[dir="rtl"] .x-border-radius--bottom-left-20 {
-  border-bottom-right-radius: var(--x-size-base-20) !important;
-}
-[dir="ltr"] .x-border-radius--bottom-right-20 {
-  border-bottom-right-radius: var(--x-size-base-20) !important;
-}
-[dir="rtl"] .x-border-radius--bottom-right-20 {
-  border-bottom-left-radius: var(--x-size-base-20) !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;
+[dir="rtl"] .x-border-radius--bottom-left-20 {
+  border-bottom-right-radius: var(--x-size-base-20) !important;
 }
-
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
+[dir="ltr"] .x-border-radius--bottom-right-20 {
+  border-bottom-right-radius: var(--x-size-base-20) !important;
 }
-
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
+[dir="rtl"] .x-border-radius--bottom-right-20 {
+  border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
 }
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
 }
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
 }
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
 }
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
 }
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
@@ -3360,21 +3415,6 @@
 .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);
 }
@@ -3900,13 +3940,6 @@
   --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
   --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
 }
-:root {
-  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
-}
 
 .x-tag--card.x-tag,
 .x-tag--card .x-tag {
@@ -3918,6 +3951,13 @@
   );
   --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
 }
+:root {
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -4165,6 +4205,96 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
+:root {
+  --x-string-align-items-suggestion-default: center;
+  --x-color-text-suggestion-default: var(--x-color-text-default);
+  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
+  --x-color-background-suggestion-default: transparent;
+  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(
+    --x-color-text-suggestion-matching-part-default
+  );
+  --x-color-text-suggestion-default-matching-curated: var(
+    --x-color-text-suggestion-default-matching
+  );
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
+  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
+  --x-size-padding-right-suggestion-default: 0;
+  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
+  --x-size-padding-left-suggestion-default: 0;
+  --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-top-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-font-family-suggestion-default: var(--x-font-family-text);
+  --x-size-font-suggestion-default: var(--x-size-font-text);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
+  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-matching: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
+  --x-text-transform-suggestion-filter-default: none;
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(
+    --x-font-family-suggestion-matching-part-default
+  );
+  --x-size-font-suggestion-matching-part-default-curated: var(
+    --x-size-font-suggestion-matching-part-default
+  );
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+    --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+    --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(
+    --x-font-family-suggestion-default-matching
+  );
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+    --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+    --x-number-font-weight-suggestion-default-matching
+  );
+}
 
 [dir="ltr"] .x-suggestion {
   text-align: left;
@@ -4298,94 +4428,10 @@
   );
 }
 :root {
-  --x-string-align-items-suggestion-default: center;
-  --x-color-text-suggestion-default: var(--x-color-text-default);
-  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
-  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
-  --x-color-background-suggestion-default: transparent;
-  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-matching-part-default-curated: var(
-    --x-color-text-suggestion-matching-part-default
-  );
-  --x-color-text-suggestion-default-matching-curated: var(
-    --x-color-text-suggestion-default-matching
-  );
-  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
-  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
-  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
-  --x-size-padding-right-suggestion-default: 0;
-  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
-  --x-size-padding-left-suggestion-default: 0;
-  --x-size-gap-suggestion-default: var(--x-size-base-03);
-  --x-size-border-width-suggestion-default: 0;
-  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-top-right-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-right-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-left-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-font-family-suggestion-default: var(--x-font-family-text);
-  --x-size-font-suggestion-default: var(--x-size-font-text);
-  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
-  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
-  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-matching-part-default: var(
-    --x-size-line-height-suggestion-default
-  );
-  --x-number-font-weight-suggestion-matching-part-default: var(
-    --x-number-font-weight-suggestion-default
-  );
-  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-default-matching: var(
-    --x-number-font-weight-suggestion-default
-  );
-  --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
-  --x-text-transform-suggestion-filter-default: none;
-  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
-  --x-font-family-suggestion-matching-part-default-curated: var(
-    --x-font-family-suggestion-matching-part-default
-  );
-  --x-size-font-suggestion-matching-part-default-curated: var(
-    --x-size-font-suggestion-matching-part-default
-  );
-  --x-size-line-height-suggestion-matching-part-default-curated: var(
-    --x-size-line-height-suggestion-matching-part-default
-  );
-  --x-number-font-weight-suggestion-matching-part-default-curated: var(
-    --x-number-font-weight-suggestion-matching-part-default
-  );
-  --x-font-family-suggestion-default-matching-curated: var(
-    --x-font-family-suggestion-default-matching
-  );
-  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
-  --x-size-line-height-suggestion-default-matching-curated: var(
-    --x-size-line-height-suggestion-default-matching
-  );
-  --x-number-font-weight-suggestion-default-matching-curated: var(
-    --x-number-font-weight-suggestion-default-matching
-  );
+  --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;
@@ -4438,14 +4484,8 @@
   pointer-events: all;
 }
 .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
-  opacity: 1;
-  pointer-events: all;
-}
-: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);
+  opacity: 1;
+  pointer-events: all;
 }
 :root {
   --x-string-overflow-scroll: auto;
@@ -4806,23 +4846,6 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 
 .x-result {
   display: grid;
@@ -4876,6 +4899,23 @@
     opacity: 1;
   }
 }
+: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-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
@@ -4939,14 +4979,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);
@@ -5172,6 +5212,86 @@
   --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;
+  --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;
@@ -5266,148 +5386,23 @@
   --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-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);
-}
-: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-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-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-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);
@@ -5540,6 +5535,51 @@
   --x-size-border-width-bottom-option-list-item-default: inherit;
   --x-size-border-width-left-option-list-item-default: inherit;
 }
+:root {
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
 :root {
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
@@ -5574,6 +5614,27 @@
   --x-size-font-message-default: var(--x-size-font-title3);
   --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
 }
+: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);
+}
 
 [dir="ltr"] .x-message {
   border-left-width: var(--x-size-border-width-left-message-default);
@@ -5624,26 +5685,21 @@
 .x-message > p {
   margin: 0;
 }
+/* @deprecated */
 :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-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 */
 :root {
@@ -5985,22 +6041,6 @@
     margin-right: var(--x-size-gap-list-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);
-}
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
   --x-size-gap-list-02: var(--x-size-base-02);
@@ -6835,6 +6875,49 @@
   );
   --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);
@@ -6932,85 +7015,51 @@
 }
 .x-input-group > .x-button {
   height: var(--x-size-height-input-group-default);
-  min-height: var(--x-size-height-input-group-default);
-  margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
-  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1);
-}
-.x-input-group > .x-button:not(.x-input-group__action) {
-  font-weight: var(--x-number-font-weight-input-group-default-button);
-}
-[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
-  margin-right: 0;
-}
-[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
-  margin-left: 0;
-}
-[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
-  margin-left: 0;
-}
-[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
-  margin-right: 0;
-}
-.x-input-group > .x-input-group__action {
-  box-sizing: border-box;
-  padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
-  min-width: var(--x-size-height-input-group-default);
-  border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
-}
-[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
-  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
-}
-[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
-  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
-}
-[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
-  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
-}
-[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
-  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
-}
-: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
+  min-height: var(--x-size-height-input-group-default);
+  margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1);
+}
+.x-input-group > .x-button:not(.x-input-group__action) {
+  font-weight: var(--x-number-font-weight-input-group-default-button);
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-right: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-left: 0;
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-left: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-right: 0;
+}
+.x-input-group > .x-input-group__action {
+  box-sizing: border-box;
+  padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
+  min-width: var(--x-size-height-input-group-default);
+  border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
+  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
+  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
+  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
+  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
+: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);
+  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-bottom-right-input-group-card: var(
+    --x-size-border-radius-input-group-card
   );
-  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
@@ -7049,13 +7098,11 @@
   --x-size-border-radius-bottom-left-input-group-default: 0;
 }
 :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);
-  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-bottom-right-input-group-card: var(
-    --x-size-border-radius-input-group-card
-  );
-  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
 }
 :root {
   --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
@@ -7073,23 +7120,6 @@
   --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
   --x-size-border-radius-bottom-left-input-default: 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);
-}
-: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;
-}
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7112,6 +7142,71 @@
   --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-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;
+}
+:root {
+  --x-color-background-input-default: var(--x-color-base-neutral-100);
+  --x-color-border-input-default: var(--x-color-base-neutral-70);
+  --x-color-border-input-default-focus: var(--x-color-base-lead);
+  --x-color-text-input-default: var(--x-color-text-default);
+  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
+  --x-size-border-width-input-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-height-input-default: var(--x-size-base-07);
+  --x-size-padding-right-input-default: var(--x-size-base-04);
+  --x-size-padding-left-input-default: var(--x-size-base-04);
+  --x-font-family-input-default: var(--x-font-family-text);
+  --x-size-font-input-default: var(--x-size-font-text);
+  --x-size-line-height-input-default: var(--x-size-line-height-text);
+  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
+  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
+  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
+:root {
+  --x-size-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-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 {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
+  --x-size-border-radius-bottom-right-input-default: var(
+    --x-size-border-radius-bottom-right-input-card
+  );
+  --x-size-border-radius-bottom-left-input-default: var(
+    --x-size-border-radius-bottom-left-input-card
+  );
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7220,61 +7315,6 @@
   font-weight: var(--x-number-font-weight-input-placeholder-default);
   line-height: var(--x-size-line-height-input-placeholder-default);
 }
-:root {
-  --x-color-background-input-default: var(--x-color-base-neutral-100);
-  --x-color-border-input-default: var(--x-color-base-neutral-70);
-  --x-color-border-input-default-focus: var(--x-color-base-lead);
-  --x-color-text-input-default: var(--x-color-text-default);
-  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
-  --x-size-border-width-input-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-height-input-default: var(--x-size-base-07);
-  --x-size-padding-right-input-default: var(--x-size-base-04);
-  --x-size-padding-left-input-default: var(--x-size-base-04);
-  --x-font-family-input-default: var(--x-font-family-text);
-  --x-size-font-input-default: var(--x-size-font-text);
-  --x-size-line-height-input-default: var(--x-size-line-height-text);
-  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
-  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
-  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
-}
-:root {
-  --x-size-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-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 {
-  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
-  --x-size-border-radius-bottom-right-input-default: var(
-    --x-size-border-radius-bottom-right-input-card
-  );
-  --x-size-border-radius-bottom-left-input-default: var(
-    --x-size-border-radius-bottom-left-input-card
-  );
-}
 :root {
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7292,15 +7332,15 @@
   --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-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
 
 .x-icon--s {
   --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);
@@ -7336,6 +7376,15 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
 
 .x-icon {
   stroke: var(--x-color-stroke-icon-default);
@@ -7357,15 +7406,6 @@
   stroke: none;
   fill: var(--x-color-stroke-icon-default);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
-}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -7394,53 +7434,21 @@
 .x-grid-list__item > * {
   flex-grow: 1;
 }
-.x-grid-list--cols-auto .x-grid-list__item {
-  min-width: var(--x-size-min-width-grid-item);
-}
-.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),
-.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
-  margin-left: auto;
-}
-:root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
-}
-:root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
-}
-
-.x-hierarchical-filter-container {
-  list-style: none;
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-left-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-left-filter-children);
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-right-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-right-filter-children);
+.x-grid-list--cols-auto .x-grid-list__item {
+  min-width: var(--x-size-min-width-grid-item);
 }
-.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  margin: var(--x-size-margin-filter-children);
-  padding-top: var(--x-size-padding-top-filter-children);
-  padding-bottom: var(--x-size-padding-bottom-filter-children);
+.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),
+.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
+  margin-left: auto;
 }
-.x-hierarchical-filter-container .x-hierarchical-filter-container,
-.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
-  width: 100%;
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
 :root {
   --x-color-background-filter-default: transparent;
@@ -7474,6 +7482,39 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
+
+.x-hierarchical-filter-container {
+  list-style: none;
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-left-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-left-filter-children);
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-right-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-right-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  margin: var(--x-size-margin-filter-children);
+  padding-top: var(--x-size-padding-top-filter-children);
+  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 {
+  width: 100%;
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7507,39 +7548,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 +7612,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);
@@ -7636,30 +7693,6 @@
   --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-border-facet-header-line: var(--x-color-base-neutral-10);
-  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-line: 0;
-  --x-size-border-width-right-facet-header-line: 0;
-  --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;
-}
-
-.x-facet--line.x-facet,
-.x-facet--line .x-facet {
-  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
-  --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);
@@ -7693,6 +7726,30 @@
   --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);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --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;
+}
+
+.x-facet--line.x-facet,
+.x-facet--line .x-facet {
+  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
+  --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);
@@ -7861,13 +7918,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;
 }
@@ -7898,11 +7955,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(
@@ -7963,6 +8022,30 @@
   --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
   --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
+:root {
+  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
+  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-item-line: 0;
+  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-item-line: 0;
+  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-toggle-line: 0;
+  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-line: 0;
+  --x-size-border-width-right-dropdown-toggle-line: 0;
+  --x-size-border-width-bottom-dropdown-toggle-line: var(
+    --x-size-border-width-dropdown-toggle-line
+  );
+  --x-size-border-width-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-list-line: 0;
+  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+}
 
 .x-dropdown--line {
   --x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
@@ -8005,30 +8088,6 @@
 :root {
   --x-size-width-dropdown-l: 202px;
 }
-:root {
-  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
-  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-item-line: 0;
-  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-item-line: 0;
-  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-toggle-line: 0;
-  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-line: 0;
-  --x-size-border-width-right-dropdown-toggle-line: 0;
-  --x-size-border-width-bottom-dropdown-toggle-line: var(
-    --x-size-border-width-dropdown-toggle-line
-  );
-  --x-size-border-width-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-list-line: 0;
-  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -8417,16 +8476,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 {
@@ -8438,6 +8487,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);
@@ -8477,29 +8536,11 @@
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
 :root {
-  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
-
-.x-button--round.x-button,
-.x-button--round .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-round
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-round
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-button-round
-  );
-  min-width: var(--x-size-height-button-default);
-  --x-size-padding-left-button-default: 0;
-  --x-size-padding-right-button-default: 0;
+  --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-primary: var(--x-color-background-button-default);
@@ -8539,13 +8580,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 {
@@ -8703,16 +8737,6 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8745,6 +8769,16 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -8825,4 +8859,29 @@
   --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-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 {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-round
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-round
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-round
+  );
+  min-width: var(--x-size-height-button-default);
+  --x-size-padding-left-button-default: 0;
+  --x-size-padding-right-button-default: 0;
 }