@empathyco/x-components 6.0.0-alpha.2 → 6.0.0-alpha.20

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

@@ -14,7 +14,25 @@
 .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;
 }
@@ -475,25 +493,6 @@
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important;
 }
-.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-margin--auto {
   margin: auto !important;
 }
@@ -979,40 +978,6 @@
 .x-line-height--loose {
   line-height: 2 !important;
 }
-.x-line-clamp--2 {
-  overflow: hidden !important;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-line-clamp: 2 !important;
-}
-
-.x-line-clamp--3 {
-  overflow: hidden !important;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-line-clamp: 3 !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;
 }
@@ -1102,6 +1067,7 @@
   font-size: var(--x-size-base-20) !important;
   line-height: 1.5;
 }
+
 .x-font-color--lead {
   color: var(--x-color-base-lead) !important;
 }
@@ -1299,74 +1265,6 @@
   --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
     0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
-/* Material Elevations extracted from:
-    https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
-*/
-:root {
-  /* Shadow none */
-  --x-string-box-shadow-00: none;
-  /* Shadow 1dp */
-  --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
-    0 1px 3px 0 rgba(0, 0, 0, 0.2);
-  /* Shadow 2dp */
-  --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
-    0 1px 5px 0 rgba(0, 0, 0, 0.2);
-  /* Shadow 3dp */
-  --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
-    0 1px 8px 0 rgba(0, 0, 0, 0.2);
-  /* Shadow 4dp */
-  --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
-    0 2px 4px -1px rgba(0, 0, 0, 0.2);
-  /* Shadow 6dp */
-  --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
-    0 3px 5px -1px rgba(0, 0, 0, 0.2);
-  /* Shadow 8dp */
-  --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
-    0 5px 5px -3px rgba(0, 0, 0, 0.2);
-  /* Shadow 9dp */
-  --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
-    0 5px 6px -3px rgba(0, 0, 0, 0.2);
-  /* Shadow 12dp */
-  --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
-    0 7px 8px -4px rgba(0, 0, 0, 0.2);
-  /* Shadow 16dp */
-  --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
-    0 8px 10px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 24dp */
-  --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
-    0 11px 15px -7px rgba(0, 0, 0, 0.2);
-  /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
-  /* Shadow 1dp */
-  --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
-    0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
-  /* Shadow 2dp */
-  --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 3dp */
-  --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
-    0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
-  /* Shadow 4dp */
-  --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
-    0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
-  /* Shadow 6dp */
-  --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
-    0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
-  /* Shadow 8dp */
-  --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
-    0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 9dp */
-  --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
-    0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
-  /* Shadow 12dp */
-  --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
-    0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
-  /* Shadow 16dp */
-  --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
-    0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
-  /* Shadow 24dp */
-  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
-    0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
-}
 
 .x-shadow--none {
   box-shadow: none !important;
@@ -1766,6 +1664,74 @@
 .x-border-width--left-10 {
   border-style: solid !important;
 }
+/* Material Elevations extracted from:
+    https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
+*/
+:root {
+  /* Shadow none */
+  --x-string-box-shadow-00: none;
+  /* Shadow 1dp */
+  --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
+    0 1px 3px 0 rgba(0, 0, 0, 0.2);
+  /* Shadow 2dp */
+  --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
+    0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  /* Shadow 3dp */
+  --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
+    0 1px 8px 0 rgba(0, 0, 0, 0.2);
+  /* Shadow 4dp */
+  --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  /* Shadow 6dp */
+  --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
+    0 3px 5px -1px rgba(0, 0, 0, 0.2);
+  /* Shadow 8dp */
+  --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
+    0 5px 5px -3px rgba(0, 0, 0, 0.2);
+  /* Shadow 9dp */
+  --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
+    0 5px 6px -3px rgba(0, 0, 0, 0.2);
+  /* Shadow 12dp */
+  --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
+    0 7px 8px -4px rgba(0, 0, 0, 0.2);
+  /* Shadow 16dp */
+  --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+    0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 24dp */
+  --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
+    0 11px 15px -7px rgba(0, 0, 0, 0.2);
+  /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
+  /* Shadow 1dp */
+  --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
+    0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
+  /* Shadow 2dp */
+  --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 3dp */
+  --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
+    0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
+  /* Shadow 4dp */
+  --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
+    0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
+  /* Shadow 6dp */
+  --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
+    0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
+  /* Shadow 8dp */
+  --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
+    0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 9dp */
+  --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
+    0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
+  /* Shadow 12dp */
+  --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
+    0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
+  /* Shadow 16dp */
+  --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
+    0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 24dp */
+  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
+    0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
+}
 .x-border-radius--00 {
   border-radius: 0 !important;
 }
@@ -3274,6 +3240,40 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: 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;
+}
+
+.x-line-clamp--3 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 3 !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-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3317,51 +3317,14 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.x-border-color--lead {
-  border-color: var(--x-color-base-lead) !important;
+:root {
+  --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
-
-.x-border-color--auxiliary {
-  border-color: var(--x-color-base-auxiliary) !important;
+.x-text--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
 }
-
-.x-border-color--neutral-10 {
-  border-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-border-color--neutral-35 {
-  border-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
-}
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
-}
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
-}
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
-}
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
 }
 .x-text--stroke.x-title1 {
   --x-string-text-decoration-title1: line-through;
@@ -3375,52 +3338,6 @@
 .x-text--stroke.x-small {
   --x-string-text-decoration-small: line-through;
 }
-:root {
-  --x-color-text-secondary: var(--x-color-base-neutral-35);
-}
-.x-text--secondary {
-  --x-color-text-default: var(--x-color-text-secondary);
-}
-:root {
-  --x-font-family-base: "Montserrat", sans-serif;
-  --x-size-font-base-xs: 12px;
-  --x-size-font-base-s: 14px;
-  --x-size-font-base-m: 16px;
-  --x-size-font-base-l: 18px;
-  --x-size-font-base-xl: 32px;
-  --x-number-font-weight-base-light: 300;
-  --x-number-font-weight-base-regular: 400;
-  --x-number-font-weight-base-bold: 600;
-  --x-size-line-height-base-s: 16px;
-  --x-size-line-height-base-m: 24px;
-  --x-size-line-height-base-l: 32px;
-  --x-color-text-default: var(--x-color-base-neutral-10);
-  --x-font-family-text: var(--x-font-family-base);
-  --x-size-font-text: var(--x-size-font-base-s);
-  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-text: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-text: none;
-  --x-font-family-title1: var(--x-font-family-base);
-  --x-size-font-title1: var(--x-size-font-base-xl);
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title1: var(--x-size-line-height-base-l);
-  --x-string-text-decoration-title1: none;
-  --x-font-family-title2: var(--x-font-family-base);
-  --x-size-font-title2: var(--x-size-font-base-l);
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title2: var(--x-size-line-height-base-m);
-  --x-string-text-decoration-title2: none;
-  --x-font-family-title3: var(--x-font-family-base);
-  --x-size-font-title3: var(--x-size-font-base-m);
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title3: var(--x-size-line-height-base-m);
-  --x-string-text-decoration-title3: none;
-  --x-font-family-small: var(--x-font-family-base);
-  --x-size-font-small: var(--x-size-font-base-xs);
-  --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-small: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-small: none;
-}
 .x-text--light.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
@@ -3553,6 +3470,49 @@
 .x-text--bold.x-small {
   --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
 }
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important;
+}
+
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
+}
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
+}
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
+}
+
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
+}
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
@@ -3566,23 +3526,45 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
-
-.x-tag--pill.x-tag,
-.x-tag--pill .x-tag {
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
-  --x-size-border-radius-bottom-right-tag-default: var(
-    --x-size-border-radius-bottom-right-tag-pill
-  );
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
-}
 :root {
-  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-font-family-base: "Montserrat", sans-serif;
+  --x-size-font-base-xs: 12px;
+  --x-size-font-base-s: 14px;
+  --x-size-font-base-m: 16px;
+  --x-size-font-base-l: 18px;
+  --x-size-font-base-xl: 32px;
+  --x-number-font-weight-base-light: 300;
+  --x-number-font-weight-base-regular: 400;
+  --x-number-font-weight-base-bold: 600;
+  --x-size-line-height-base-s: 16px;
+  --x-size-line-height-base-m: 24px;
+  --x-size-line-height-base-l: 32px;
+  --x-color-text-default: var(--x-color-base-neutral-10);
+  --x-font-family-text: var(--x-font-family-base);
+  --x-size-font-text: var(--x-size-font-base-s);
+  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-text: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-text: none;
+  --x-font-family-title1: var(--x-font-family-base);
+  --x-size-font-title1: var(--x-size-font-base-xl);
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title1: var(--x-size-line-height-base-l);
+  --x-string-text-decoration-title1: none;
+  --x-font-family-title2: var(--x-font-family-base);
+  --x-size-font-title2: var(--x-size-font-base-l);
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title2: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title2: none;
+  --x-font-family-title3: var(--x-font-family-base);
+  --x-size-font-title3: var(--x-size-font-base-m);
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title3: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title3: none;
+  --x-font-family-small: var(--x-font-family-base);
+  --x-size-font-small: var(--x-size-font-base-xs);
+  --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-small: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-small: none;
 }
 :root {
   --x-color-background-tag-ghost: transparent;
@@ -3597,33 +3579,49 @@
   --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
 }
 :root {
-  --x-color-background-tag-ghost: transparent;
-  --x-color-border-tag-ghost: transparent;
-  --x-color-background-tag-selected-ghost: transparent;
-  --x-color-border-tag-selected-ghost: transparent;
-  --x-color-background-tag-curated-ghost: transparent;
-  --x-color-border-tag-curated-ghost: transparent;
-  --x-color-background-tag-curated-selected-ghost: transparent;
-  --x-color-border-tag-curated-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
-}
-
-.x-tag--ghost.x-tag,
-.x-tag--ghost .x-tag {
-  --x-color-background-tag-default: var(--x-color-background-tag-ghost);
-  --x-color-border-tag-default: var(--x-color-border-tag-ghost);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
-  --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
-  --x-color-background-tag-default-curated-selected: var(
-    --x-color-background-tag-curated-selected-ghost
-  );
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
+  --x-color-background-tag-default: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default: var(--x-color-text-tag-default);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
   --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-curated-selected-ghost
+    --x-number-font-weight-tag-default-selected
   );
 }
 :root {
@@ -3848,49 +3846,33 @@
   --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
 }
 :root {
-  --x-color-background-tag-default: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default: var(--x-color-text-tag-default);
-  --x-color-text-tag-default: var(--x-color-text-default);
-  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
-  --x-size-border-width-tag-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-height-tag-default: var(--x-size-base-07);
-  --x-size-padding-right-tag-default: var(--x-size-base-04);
-  --x-size-padding-left-tag-default: var(--x-size-base-04);
-  --x-size-gap-tag-default: var(--x-size-base-02);
-  --x-font-family-tag-default: var(--x-font-family-text);
-  --x-size-font-tag-default: var(--x-size-font-text);
-  --x-size-line-height-tag-default: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-color-background-tag-ghost: transparent;
+  --x-color-border-tag-ghost: transparent;
+  --x-color-background-tag-selected-ghost: transparent;
+  --x-color-border-tag-selected-ghost: transparent;
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+}
+
+.x-tag--ghost.x-tag,
+.x-tag--ghost .x-tag {
+  --x-color-background-tag-default: var(--x-color-background-tag-ghost);
+  --x-color-border-tag-default: var(--x-color-border-tag-ghost);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
+  --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
+  --x-color-background-tag-default-curated-selected: var(
+    --x-color-background-tag-curated-selected-ghost
+  );
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
   --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-default-selected
+    --x-number-font-weight-tag-curated-selected-ghost
   );
 }
 :root {
@@ -3900,13 +3882,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 {
@@ -4165,6 +4140,24 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
+:root {
+  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
+}
+
+.x-tag--pill.x-tag,
+.x-tag--pill .x-tag {
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
+  --x-size-border-radius-bottom-right-tag-default: var(
+    --x-size-border-radius-bottom-right-tag-pill
+  );
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
+}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4387,6 +4380,12 @@
     --x-color-text-suggestion-default-matching-curated
   );
 }
+:root {
+  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
+  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
+  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);
@@ -4448,13 +4447,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-:root {
-  --x-string-overflow-scroll: auto;
-  --x-color-background-scroll-bar: transparent;
-  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
-  --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
-}
 
 .x-scroll {
   overflow-y: var(--x-string-overflow-scroll);
@@ -4494,6 +4486,14 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4515,41 +4515,12 @@
 .x-row--padding-06 {
   --x-size-padding-row: var(--x-size-padding-row-06);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 :root {
-  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
-  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
-}
-:root {
-  --x-size-gap-row-01: var(--x-size-base-01);
-  --x-size-gap-row-02: var(--x-size-base-02);
-  --x-size-gap-row-03: var(--x-size-base-03);
-  --x-size-gap-row-04: var(--x-size-base-04);
-  --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06);
-  --x-size-gap-row-07: var(--x-size-base-07);
-  --x-size-gap-row-08: var(--x-size-base-08);
-  --x-size-gap-row-09: var(--x-size-base-09);
-  --x-size-gap-row-10: var(--x-size-base-10);
-  --x-size-gap-row-11: var(--x-size-base-11);
-  --x-size-gap-row-12: var(--x-size-base-12);
-  --x-size-gap-row-13: var(--x-size-base-13);
-  --x-size-gap-row-14: var(--x-size-base-14);
-  --x-size-gap-row-15: var(--x-size-base-15);
-  --x-size-gap-row-16: var(--x-size-base-16);
-  --x-size-gap-row-17: var(--x-size-base-17);
-  --x-size-gap-row-18: var(--x-size-base-18);
-  --x-size-gap-row-19: var(--x-size-base-19);
-  --x-size-gap-row-20: var(--x-size-base-20);
+  --x-string-overflow-scroll: auto;
+  --x-color-background-scroll-bar: transparent;
+  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
+  --x-color-background-scroll-bar-hover: transparent;
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
@@ -4573,86 +4544,6 @@
   --x-size-gap-row-19: var(--x-size-base-19);
   --x-size-gap-row-20: var(--x-size-base-20);
 }
-
-.x-row--gap-01 {
-  --x-size-gap-row: var(--x-size-gap-row-01);
-}
-
-.x-row--gap-02 {
-  --x-size-gap-row: var(--x-size-gap-row-02);
-}
-
-.x-row--gap-03 {
-  --x-size-gap-row: var(--x-size-gap-row-03);
-}
-
-.x-row--gap-04 {
-  --x-size-gap-row: var(--x-size-gap-row-04);
-}
-
-.x-row--gap-05 {
-  --x-size-gap-row: var(--x-size-gap-row-05);
-}
-
-.x-row--gap-06 {
-  --x-size-gap-row: var(--x-size-gap-row-06);
-}
-
-.x-row--gap-07 {
-  --x-size-gap-row: var(--x-size-gap-row-07);
-}
-
-.x-row--gap-08 {
-  --x-size-gap-row: var(--x-size-gap-row-08);
-}
-
-.x-row--gap-09 {
-  --x-size-gap-row: var(--x-size-gap-row-09);
-}
-
-.x-row--gap-10 {
-  --x-size-gap-row: var(--x-size-gap-row-10);
-}
-
-.x-row--gap-11 {
-  --x-size-gap-row: var(--x-size-gap-row-11);
-}
-
-.x-row--gap-12 {
-  --x-size-gap-row: var(--x-size-gap-row-12);
-}
-
-.x-row--gap-13 {
-  --x-size-gap-row: var(--x-size-gap-row-13);
-}
-
-.x-row--gap-14 {
-  --x-size-gap-row: var(--x-size-gap-row-14);
-}
-
-.x-row--gap-15 {
-  --x-size-gap-row: var(--x-size-gap-row-15);
-}
-
-.x-row--gap-16 {
-  --x-size-gap-row: var(--x-size-gap-row-16);
-}
-
-.x-row--gap-17 {
-  --x-size-gap-row: var(--x-size-gap-row-17);
-}
-
-.x-row--gap-18 {
-  --x-size-gap-row: var(--x-size-gap-row-18);
-}
-
-.x-row--gap-19 {
-  --x-size-gap-row: var(--x-size-gap-row-19);
-}
-
-.x-row--gap-20 {
-  --x-size-gap-row: var(--x-size-gap-row-20);
-}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
@@ -4661,6 +4552,13 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
+:root {
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
@@ -4806,23 +4704,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;
@@ -4880,15 +4761,32 @@
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
 :root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
-
-.x-result.x-result--card {
-  overflow: hidden;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
-}
-:root {
-  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
+  --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);
+}
+
+.x-result.x-result--card {
+  overflow: hidden;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
+}
+:root {
+  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
   --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
   --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
@@ -4925,10 +4823,6 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}
 
 .x-picture--zoom .x-picture-image {
   transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4937,15 +4831,109 @@
   transform: scale(var(--x-number-zoom-scale-picture));
 }
 :root {
-  --x-number-aspect-ratio-picture: 1;
+  --x-size-gap-row-01: var(--x-size-base-01);
+  --x-size-gap-row-02: var(--x-size-base-02);
+  --x-size-gap-row-03: var(--x-size-base-03);
+  --x-size-gap-row-04: var(--x-size-base-04);
+  --x-size-gap-row-05: var(--x-size-base-05);
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20);
 }
-:root {
-  --x-number-aspect-ratio-picture: 1;
+
+.x-row--gap-01 {
+  --x-size-gap-row: var(--x-size-gap-row-01);
 }
 
-.x-picture--fixed-ratio.x-picture {
-  aspect-ratio: var(--x-number-aspect-ratio-picture);
-  width: 100%;
+.x-row--gap-02 {
+  --x-size-gap-row: var(--x-size-gap-row-02);
+}
+
+.x-row--gap-03 {
+  --x-size-gap-row: var(--x-size-gap-row-03);
+}
+
+.x-row--gap-04 {
+  --x-size-gap-row: var(--x-size-gap-row-04);
+}
+
+.x-row--gap-05 {
+  --x-size-gap-row: var(--x-size-gap-row-05);
+}
+
+.x-row--gap-06 {
+  --x-size-gap-row: var(--x-size-gap-row-06);
+}
+
+.x-row--gap-07 {
+  --x-size-gap-row: var(--x-size-gap-row-07);
+}
+
+.x-row--gap-08 {
+  --x-size-gap-row: var(--x-size-gap-row-08);
+}
+
+.x-row--gap-09 {
+  --x-size-gap-row: var(--x-size-gap-row-09);
+}
+
+.x-row--gap-10 {
+  --x-size-gap-row: var(--x-size-gap-row-10);
+}
+
+.x-row--gap-11 {
+  --x-size-gap-row: var(--x-size-gap-row-11);
+}
+
+.x-row--gap-12 {
+  --x-size-gap-row: var(--x-size-gap-row-12);
+}
+
+.x-row--gap-13 {
+  --x-size-gap-row: var(--x-size-gap-row-13);
+}
+
+.x-row--gap-14 {
+  --x-size-gap-row: var(--x-size-gap-row-14);
+}
+
+.x-row--gap-15 {
+  --x-size-gap-row: var(--x-size-gap-row-15);
+}
+
+.x-row--gap-16 {
+  --x-size-gap-row: var(--x-size-gap-row-16);
+}
+
+.x-row--gap-17 {
+  --x-size-gap-row: var(--x-size-gap-row-17);
+}
+
+.x-row--gap-18 {
+  --x-size-gap-row: var(--x-size-gap-row-18);
+}
+
+.x-row--gap-19 {
+  --x-size-gap-row: var(--x-size-gap-row-19);
+}
+
+.x-row--gap-20 {
+  --x-size-gap-row: var(--x-size-gap-row-20);
+}
+:root {
+  --x-number-aspect-ratio-picture: 1;
 }
 :root {
   --x-size-border-radius-picture-default: 0;
@@ -4965,6 +4953,14 @@
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
   --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
 }
+:root {
+  --x-number-aspect-ratio-picture: 1;
+}
+
+.x-picture--fixed-ratio.x-picture {
+  aspect-ratio: var(--x-number-aspect-ratio-picture);
+  width: 100%;
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5025,10 +5021,6 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
 
 .x-picture--cover.x-picture {
   position: relative;
@@ -5052,11 +5044,8 @@
   --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
 }
 :root {
-  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
 }
 :root {
   --x-color-background-picture-colored: var(--x-color-base-neutral-95);
@@ -5172,6 +5161,10 @@
   --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-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5544,15 +5537,15 @@
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
 }
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
 
 .x-modal__overlay {
   background-color: var(--x-modal-overlay-color) !important;
   opacity: var(--x-modal-overlay-opacity) !important;
 }
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -5661,6 +5654,22 @@
   --x-size-padding-list-12: var(--x-size-base-12);
   --x-size-padding-list-13: var(--x-size-base-13);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-list-01: var(--x-size-base-01);
+  --x-size-padding-list-02: var(--x-size-base-02);
+  --x-size-padding-list-03: var(--x-size-base-03);
+  --x-size-padding-list-04: var(--x-size-base-04);
+  --x-size-padding-list-05: var(--x-size-base-05);
+  --x-size-padding-list-06: var(--x-size-base-06);
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13);
+}
 
 /* @deprecated */
 [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5985,22 +5994,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);
@@ -6024,773 +6017,409 @@
   --x-size-gap-list-20: var(--x-size-base-20);
 }
 :root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --x-size-gap-list-03: var(--x-size-base-03);
-  --x-size-gap-list-04: var(--x-size-base-04);
-  --x-size-gap-list-05: var(--x-size-base-05);
-  --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07);
-  --x-size-gap-list-08: var(--x-size-base-08);
-  --x-size-gap-list-09: var(--x-size-base-09);
-  --x-size-gap-list-10: var(--x-size-base-10);
-  --x-size-gap-list-11: var(--x-size-base-11);
-  --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13);
-  --x-size-gap-list-14: var(--x-size-base-14);
-  --x-size-gap-list-15: var(--x-size-base-15);
-  --x-size-gap-list-16: var(--x-size-base-16);
-  --x-size-gap-list-17: var(--x-size-base-17);
-  --x-size-gap-list-18: var(--x-size-base-18);
-  --x-size-gap-list-19: var(--x-size-base-19);
-  --x-size-gap-list-20: var(--x-size-base-20);
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
+}
+:root {
+  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
+:root {
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
 }
 
-.x-list--gap-01.x-list {
-  gap: var(--x-size-gap-list-01);
+.x-list {
+  display: flex;
+  flex-flow: var(--x-string-flow-list);
+  list-style: none;
+  gap: var(--x-size-gap-list);
+  margin: 0;
+  padding: var(--x-size-padding-list);
+  justify-content: var(--x-size-justify-list);
+  align-items: var(--x-size-align-list);
+  min-width: 0;
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
+  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-01);
+  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list);
   }
-  .x-list--gap-01.x-list.x-list--horizontal {
+  .x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-01);
+  .x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
   }
-  .x-list--gap-01.x-list.x-list--wrap {
+  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
     gap: 0;
   }
-  .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-01);
-    margin-bottom: var(--x-size-gap-list-01);
+  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+    margin-bottom: var(--x-size-gap-list);
   }
 }
 
-.x-list--gap-02.x-list {
-  gap: var(--x-size-gap-list-02);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-02);
-  }
-  .x-list--gap-02.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-02);
-  }
-  .x-list--gap-02.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-02);
-    margin-bottom: var(--x-size-gap-list-02);
-  }
+.x-list--vertical.x-list {
+  flex-flow: column nowrap;
 }
 
-.x-list--gap-03.x-list {
-  gap: var(--x-size-gap-list-03);
+.x-list--horizontal.x-list {
+  flex-flow: row nowrap;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-03.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-03.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-03);
-  }
-  .x-list--gap-03.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-03.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-03);
-  }
-  .x-list--gap-03.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-03.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-03);
-    margin-bottom: var(--x-size-gap-list-03);
-  }
+
+.x-list--wrap.x-list {
+  flex-flow: row wrap;
 }
 
-.x-list--gap-04.x-list {
-  gap: var(--x-size-gap-list-04);
+.x-list--wrap-reverse.x-list {
+  flex-flow: row wrap-reverse;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-04.x-list:not(.x-list--horizontal), .x-list--gap-04.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-04.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-04.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-04);
-  }
-  .x-list--gap-04.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-04.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-04);
-  }
-  .x-list--gap-04.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-04.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-04);
-    margin-bottom: var(--x-size-gap-list-04);
-  }
+
+.x-list--justify-stretch.x-list {
+  justify-content: stretch;
 }
 
-.x-list--gap-05.x-list {
-  gap: var(--x-size-gap-list-05);
+.x-list--justify-center.x-list {
+  justify-content: center;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-05.x-list:not(.x-list--horizontal), .x-list--gap-05.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-05.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-05.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-05);
-  }
-  .x-list--gap-05.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-05.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-05);
-  }
-  .x-list--gap-05.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-05.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-05);
-    margin-bottom: var(--x-size-gap-list-05);
-  }
+
+.x-list--justify-end.x-list {
+  justify-content: flex-end;
 }
 
-.x-list--gap-06.x-list {
-  gap: var(--x-size-gap-list-06);
+.x-list--justify-start.x-list {
+  justify-content: flex-start;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-06.x-list:not(.x-list--horizontal), .x-list--gap-06.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-06.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-06.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-06);
-  }
-  .x-list--gap-06.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-06.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-06);
-  }
-  .x-list--gap-06.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-06.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-06);
-    margin-bottom: var(--x-size-gap-list-06);
-  }
+
+.x-list--align-stretch.x-list {
+  align-items: stretch;
 }
 
-.x-list--gap-07.x-list {
-  gap: var(--x-size-gap-list-07);
+.x-list--align-center.x-list {
+  align-items: center;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-07.x-list:not(.x-list--horizontal), .x-list--gap-07.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-07.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-07.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-07);
-  }
-  .x-list--gap-07.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-07.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-07);
-  }
-  .x-list--gap-07.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-07.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-07);
-    margin-bottom: var(--x-size-gap-list-07);
-  }
+
+.x-list--align-baseline.x-list {
+  align-items: baseline;
 }
 
-.x-list--gap-08.x-list {
-  gap: var(--x-size-gap-list-08);
+.x-list--align-end.x-list {
+  align-items: flex-end;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-08.x-list:not(.x-list--horizontal), .x-list--gap-08.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-08.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-08.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-08);
-  }
-  .x-list--gap-08.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-08.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-08);
-  }
-  .x-list--gap-08.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-08.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-08);
-    margin-bottom: var(--x-size-gap-list-08);
-  }
+
+.x-list--align-start.x-list {
+  align-items: flex-start;
 }
 
-.x-list--gap-09.x-list {
-  gap: var(--x-size-gap-list-09);
+.x-list > .x-list__item--expand {
+  flex: 1 1 auto;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-09.x-list:not(.x-list--horizontal), .x-list--gap-09.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-09.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-09.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-09);
-  }
-  .x-list--gap-09.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-09.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-09);
-  }
-  .x-list--gap-09.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-09.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-09);
-    margin-bottom: var(--x-size-gap-list-09);
-  }
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto;
 }
-
-.x-list--gap-10.x-list {
-  gap: var(--x-size-gap-list-10);
+.x-list.x-list--horizontal > .x-list__item--expand {
+  min-width: 0;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-10.x-list:not(.x-list--horizontal), .x-list--gap-10.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-10.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-10.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-10);
-  }
-  .x-list--gap-10.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-10.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-10);
-  }
-  .x-list--gap-10.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-10.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-10);
-    margin-bottom: var(--x-size-gap-list-10);
-  }
+.x-list:not(.x-list--horizontal) > .x-list__item--expand {
+  min-height: 0;
 }
-
-.x-list--gap-11.x-list {
-  gap: var(--x-size-gap-list-11);
+.x-list > .x-list__item--stretch {
+  align-self: stretch;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-11.x-list:not(.x-list--horizontal), .x-list--gap-11.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-11.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-11.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-11);
-  }
-  .x-list--gap-11.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-11.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-11);
-  }
-  .x-list--gap-11.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-11.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-11);
-    margin-bottom: var(--x-size-gap-list-11);
-  }
+.x-list > .x-list__item--flex-none {
+  flex: none;
 }
-
-.x-list--gap-12.x-list {
-  gap: var(--x-size-gap-list-12);
+.x-list > .x-list__item--01 {
+  flex: 1 12 auto;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-12.x-list:not(.x-list--horizontal), .x-list--gap-12.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-12.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-12.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-12);
-  }
-  .x-list--gap-12.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-12.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-12);
-  }
-  .x-list--gap-12.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-12.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-12);
-    margin-bottom: var(--x-size-gap-list-12);
-  }
+.x-list > .x-list__item--02 {
+  flex: 2 11 auto;
 }
-
-.x-list--gap-13.x-list {
-  gap: var(--x-size-gap-list-13);
+.x-list > .x-list__item--03 {
+  flex: 3 10 auto;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-13.x-list:not(.x-list--horizontal), .x-list--gap-13.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-13.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-13.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-13);
-  }
-  .x-list--gap-13.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-13.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-13);
-  }
-  .x-list--gap-13.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-13.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-13);
-    margin-bottom: var(--x-size-gap-list-13);
-  }
+.x-list > .x-list__item--04 {
+  flex: 4 9 auto;
 }
-
-.x-list--gap-14.x-list {
-  gap: var(--x-size-gap-list-14);
+.x-list > .x-list__item--05 {
+  flex: 5 8 auto;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-14.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-14.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-14);
-  }
-  .x-list--gap-14.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-14.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-14);
-  }
-  .x-list--gap-14.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-14.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-14);
-    margin-bottom: var(--x-size-gap-list-14);
-  }
+.x-list > .x-list__item--06 {
+  flex: 6 7 auto;
 }
-
-.x-list--gap-15.x-list {
-  gap: var(--x-size-gap-list-15);
+.x-list > .x-list__item--07 {
+  flex: 7 6 auto;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-15.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-15.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-15);
-  }
-  .x-list--gap-15.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-15.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-15);
-  }
-  .x-list--gap-15.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-15.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-15);
-    margin-bottom: var(--x-size-gap-list-15);
-  }
+.x-list > .x-list__item--08 {
+  flex: 8 5 auto;
 }
-
-.x-list--gap-16.x-list {
-  gap: var(--x-size-gap-list-16);
+.x-list > .x-list__item--09 {
+  flex: 9 4 auto;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-16.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-16.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-16);
-  }
-  .x-list--gap-16.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-16.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-16);
-  }
-  .x-list--gap-16.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-16.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-16);
-    margin-bottom: var(--x-size-gap-list-16);
-  }
+.x-list > .x-list__item--10 {
+  flex: 10 3 auto;
 }
-
-.x-list--gap-17.x-list {
-  gap: var(--x-size-gap-list-17);
+.x-list > .x-list__item--11 {
+  flex: 11 2 auto;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-17.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-17.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-17);
-  }
-  .x-list--gap-17.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-17.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-17);
-  }
-  .x-list--gap-17.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-17.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-17);
-    margin-bottom: var(--x-size-gap-list-17);
-  }
+.x-list > .x-list__item--12 {
+  flex: 12 1 auto;
 }
-
-.x-list--gap-18.x-list {
-  gap: var(--x-size-gap-list-18);
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-18);
-  }
-  .x-list--gap-18.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-18);
-  }
-  .x-list--gap-18.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-18);
-    margin-bottom: var(--x-size-gap-list-18);
-  }
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
 }
 
-.x-list--gap-19.x-list {
-  gap: var(--x-size-gap-list-19);
+.x-input-group--line .x-input-group,
+.x-input-group--line.x-input-group {
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
+  --x-size-border-width-right-input-group-default: var(
+    --x-size-border-width-right-input-group-line
+  );
+  --x-size-border-width-bottom-input-group-default: var(
+    --x-size-border-width-bottom-input-group-line
+  );
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-19);
-  }
-  .x-list--gap-19.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-19);
-  }
-  .x-list--gap-19.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-19);
-    margin-bottom: var(--x-size-gap-list-19);
-  }
-}
-
-.x-list--gap-20.x-list {
-  gap: var(--x-size-gap-list-20);
+.x-input-group--line .x-input-group > *:not(.x-input-group__action),
+.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
+  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
+  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-20);
-  }
-  .x-list--gap-20.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-20);
-  }
-  .x-list--gap-20.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-20);
-    margin-bottom: var(--x-size-gap-list-20);
-  }
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
 }
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
 }
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
 }
-
-.x-list {
-  display: flex;
-  flex-flow: var(--x-string-flow-list);
-  list-style: none;
-  gap: var(--x-size-gap-list);
-  margin: 0;
-  padding: var(--x-size-padding-list);
-  justify-content: var(--x-size-justify-list);
-  align-items: var(--x-size-align-list);
-  min-width: 0;
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list);
-  }
-  .x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
-  }
-  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
-    gap: 0;
-  }
-  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
-    margin-bottom: var(--x-size-gap-list);
-  }
+.x-input-group--line .x-input-group > .x-input-group__action,
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
 }
-
-.x-list--vertical.x-list {
-  flex-flow: column nowrap;
+: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);
 }
 
-.x-list--horizontal.x-list {
-  flex-flow: row nowrap;
+[dir="ltr"] .x-input-group {
+  border-right-width: var(--x-size-border-width-right-input-group-default);
 }
 
-.x-list--wrap.x-list {
-  flex-flow: row wrap;
+[dir="rtl"] .x-input-group {
+  border-left-width: var(--x-size-border-width-right-input-group-default);
 }
 
-.x-list--wrap-reverse.x-list {
-  flex-flow: row wrap-reverse;
+[dir="ltr"] .x-input-group {
+  border-left-width: var(--x-size-border-width-left-input-group-default);
 }
 
-.x-list--justify-stretch.x-list {
-  justify-content: stretch;
+[dir="rtl"] .x-input-group {
+  border-right-width: var(--x-size-border-width-left-input-group-default);
 }
 
-.x-list--justify-center.x-list {
-  justify-content: center;
+.x-input-group {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  gap: var(--x-size-gap-input-group-default);
+  height: var(--x-size-height-input-group-default);
+  background-color: var(--x-color-background-input-group-default);
+  border-color: var(--x-color-border-input-group-default);
+  color: var(--x-color-text-input-group-default);
+  border-top-width: var(--x-size-border-width-top-input-group-default);
+  border-bottom-width: var(--x-size-border-width-bottom-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);
+  border-style: solid;
 }
-
-.x-list--justify-end.x-list {
-  justify-content: flex-end;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-input-group {
+    gap: 0;
+  }
+  .x-input-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-input-group-default);
+  }
 }
-
-.x-list--justify-start.x-list {
-  justify-content: flex-start;
+.x-input-group:focus-within {
+  border-color: var(--x-color-border-input-group-default-focus);
 }
-
-.x-list--align-stretch.x-list {
-  align-items: stretch;
+.x-input-group > *,
+.x-input-group > .x-input,
+.x-input-group > .x-button {
+  flex: 0 0 auto;
+  font-family: var(--x-font-family-input-group-default);
+  font-size: var(--x-size-font-input-group-default);
+  font-weight: var(--x-number-font-weight-input-group-default);
+  line-height: var(--x-size-line-height-input-group-default);
 }
-
-.x-list--align-center.x-list {
-  align-items: center;
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
+  padding-left: 0;
 }
-
-.x-list--align-baseline.x-list {
-  align-items: baseline;
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
+  padding-right: 0;
 }
-
-.x-list--align-end.x-list {
-  align-items: flex-end;
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
+  padding-right: 0;
 }
-
-.x-list--align-start.x-list {
-  align-items: flex-start;
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
+  padding-left: 0;
 }
-
-.x-list > .x-list__item--expand {
-  flex: 1 1 auto;
+.x-input-group > *:not(.x-input-group__action) {
+  background-color: transparent;
+  color: var(--x-color-text-input-group-default);
+  border: none;
 }
-.x-list > .x-list__item--no-expand {
-  flex: 0 0 auto;
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
+  padding-left: var(--x-size-padding-left-input-group-default);
 }
-.x-list.x-list--horizontal > .x-list__item--expand {
-  min-width: 0;
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
+  padding-right: var(--x-size-padding-left-input-group-default);
 }
-.x-list:not(.x-list--horizontal) > .x-list__item--expand {
-  min-height: 0;
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
+  padding-right: var(--x-size-padding-right-input-group-default);
 }
-.x-list > .x-list__item--stretch {
-  align-self: stretch;
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
+  padding-left: var(--x-size-padding-right-input-group-default);
 }
-.x-list > .x-list__item--flex-none {
-  flex: none;
+.x-input-group > .x-input {
+  flex: 1 1 100%;
+  min-width: 0;
+  border: none;
 }
-.x-list > .x-list__item--01 {
-  flex: 1 12 auto;
-}
-.x-list > .x-list__item--02 {
-  flex: 2 11 auto;
-}
-.x-list > .x-list__item--03 {
-  flex: 3 10 auto;
-}
-.x-list > .x-list__item--04 {
-  flex: 4 9 auto;
-}
-.x-list > .x-list__item--05 {
-  flex: 5 8 auto;
-}
-.x-list > .x-list__item--06 {
-  flex: 6 7 auto;
-}
-.x-list > .x-list__item--07 {
-  flex: 7 6 auto;
-}
-.x-list > .x-list__item--08 {
-  flex: 8 5 auto;
-}
-.x-list > .x-list__item--09 {
-  flex: 9 4 auto;
-}
-.x-list > .x-list__item--10 {
-  flex: 10 3 auto;
-}
-.x-list > .x-list__item--11 {
-  flex: 11 2 auto;
-}
-.x-list > .x-list__item--12 {
-  flex: 12 1 auto;
-}
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+.x-input-group > .x-input > .x-input-placeholder, .x-input-group > .x-input::placeholder {
+  color: var(--x-color-text-input-group-placeholder-default);
+  font-family: var(--x-font-family-input-group-placeholder-default);
+  font-size: var(--x-size-font-input-group-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-group-placeholder-default);
+  line-height: var(--x-size-line-height-input-group-placeholder-default);
 }
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+.x-input-group > .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--pill.x-input-group,
-.x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-pill
-  );
+.x-input-group > .x-button:not(.x-input-group__action) {
+  font-weight: var(--x-number-font-weight-input-group-default-button);
 }
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-right: 0;
 }
-
-.x-input-group--line .x-input-group,
-.x-input-group--line.x-input-group {
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
-  --x-size-border-width-right-input-group-default: var(
-    --x-size-border-width-right-input-group-line
-  );
-  --x-size-border-width-bottom-input-group-default: var(
-    --x-size-border-width-bottom-input-group-line
-  );
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-left: 0;
 }
-.x-input-group--line .x-input-group > *:not(.x-input-group__action),
-.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
-  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
-  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-left: 0;
 }
-[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-right: 0;
 }
-[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+.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--line .x-input-group > .x-input-group__action,[dir="ltr"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
+[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--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
+[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
+  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
 }
-.x-input-group--line .x-input-group > .x-input-group__action,
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
-  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
+[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
+  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
 }
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
+[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);
@@ -6845,272 +6474,607 @@
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
 :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-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-input-group--card.x-input-group,
+.x-input-group--card .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
   --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-input-group-default
+    --x-size-border-radius-top-left-input-group-card
   );
   --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
+    --x-size-border-radius-top-right-input-group-card
   );
   --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
+    --x-size-border-radius-bottom-right-input-group-card
   );
   --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-size-border-radius-bottom-left-input-group-card
   );
-  --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);
+.x-input-group--card.x-input-group__action:first-child,
+.x-input-group--card .x-input-group__action:first-child {
+  --x-size-border-radius-top-right-input-group-default: 0;
+  --x-size-border-radius-bottom-right-input-group-default: 0;
 }
-
-[dir="rtl"] .x-input-group {
-  border-left-width: var(--x-size-border-width-right-input-group-default);
+.x-input-group--card.x-input-group__action:last-child,
+.x-input-group--card .x-input-group__action:last-child {
+  --x-size-border-radius-top-left-input-group-default: 0;
+  --x-size-border-radius-bottom-left-input-group-default: 0;
 }
-
-[dir="ltr"] .x-input-group {
-  border-left-width: var(--x-size-border-width-left-input-group-default);
+: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);
 }
-
-[dir="rtl"] .x-input-group {
-  border-right-width: var(--x-size-border-width-left-input-group-default);
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
 }
 
-.x-input-group {
-  display: flex;
-  flex-flow: row nowrap;
-  align-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  min-width: 0;
-  gap: var(--x-size-gap-input-group-default);
-  height: var(--x-size-height-input-group-default);
-  background-color: var(--x-color-background-input-group-default);
-  border-color: var(--x-color-border-input-group-default);
-  color: var(--x-color-text-input-group-default);
-  border-top-width: var(--x-size-border-width-top-input-group-default);
-  border-bottom-width: var(--x-size-border-width-bottom-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);
-  border-style: solid;
+.x-input--pill.x-input,
+.x-input--pill .x-input {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
+  --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);
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-input-group {
-    gap: 0;
+:root {
+  --x-size-padding-top-input-line: var(--x-size-base-03);
+  --x-size-padding-right-input-line: 0;
+  --x-size-padding-bottom-input-line: var(--x-size-base-03);
+  --x-size-padding-left-input-line: 0;
+  --x-size-border-width-top-input-line: 0;
+  --x-size-border-width-right-input-line: 0;
+  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
+  --x-size-border-width-left-input-line: 0;
+}
+
+.x-input--line .x-input,
+.x-input--line.x-input {
+  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
+  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
+  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
+  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
+}
+:root {
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
+}
+
+.x-list--gap-01.x-list {
+  gap: var(--x-size-gap-list-01);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
+    gap: 0;
   }
-  .x-input-group > *:not(:last-child) {
-    margin-right: var(--x-size-gap-input-group-default);
+  .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-01);
+  }
+  .x-list--gap-01.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
+  }
+  .x-list--gap-01.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
+    margin-bottom: var(--x-size-gap-list-01);
   }
 }
-.x-input-group:focus-within {
-  border-color: var(--x-color-border-input-group-default-focus);
+
+.x-list--gap-02.x-list {
+  gap: var(--x-size-gap-list-02);
 }
-.x-input-group > *,
-.x-input-group > .x-input,
-.x-input-group > .x-button {
-  flex: 0 0 auto;
-  font-family: var(--x-font-family-input-group-default);
-  font-size: var(--x-size-font-input-group-default);
-  font-weight: var(--x-number-font-weight-input-group-default);
-  line-height: var(--x-size-line-height-input-group-default);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-02);
+  }
+  .x-list--gap-02.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
+  }
+  .x-list--gap-02.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
+    margin-bottom: var(--x-size-gap-list-02);
+  }
 }
-[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
-  padding-left: 0;
+
+.x-list--gap-03.x-list {
+  gap: var(--x-size-gap-list-03);
 }
-[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-  padding-right: 0;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-03.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-03.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-03);
+  }
+  .x-list--gap-03.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-03.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-03);
+  }
+  .x-list--gap-03.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-03.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-03);
+    margin-bottom: var(--x-size-gap-list-03);
+  }
 }
-[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
-  padding-right: 0;
+
+.x-list--gap-04.x-list {
+  gap: var(--x-size-gap-list-04);
 }
-[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-  padding-left: 0;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-04.x-list:not(.x-list--horizontal), .x-list--gap-04.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-04.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-04.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-04);
+  }
+  .x-list--gap-04.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-04.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-04);
+  }
+  .x-list--gap-04.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-04.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-04);
+    margin-bottom: var(--x-size-gap-list-04);
+  }
 }
-.x-input-group > *:not(.x-input-group__action) {
-  background-color: transparent;
-  color: var(--x-color-text-input-group-default);
-  border: none;
+
+.x-list--gap-05.x-list {
+  gap: var(--x-size-gap-list-05);
 }
-[dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
-  padding-left: var(--x-size-padding-left-input-group-default);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-05.x-list:not(.x-list--horizontal), .x-list--gap-05.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-05.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-05.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-05);
+  }
+  .x-list--gap-05.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-05.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-05);
+  }
+  .x-list--gap-05.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-05.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-05);
+    margin-bottom: var(--x-size-gap-list-05);
+  }
 }
-[dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
-  padding-right: var(--x-size-padding-left-input-group-default);
+
+.x-list--gap-06.x-list {
+  gap: var(--x-size-gap-list-06);
 }
-[dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
-  padding-right: var(--x-size-padding-right-input-group-default);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-06.x-list:not(.x-list--horizontal), .x-list--gap-06.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-06.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-06.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-06);
+  }
+  .x-list--gap-06.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-06.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-06);
+  }
+  .x-list--gap-06.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-06.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-06);
+    margin-bottom: var(--x-size-gap-list-06);
+  }
 }
-[dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
-  padding-left: var(--x-size-padding-right-input-group-default);
+
+.x-list--gap-07.x-list {
+  gap: var(--x-size-gap-list-07);
 }
-.x-input-group > .x-input {
-  flex: 1 1 100%;
-  min-width: 0;
-  border: none;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-07.x-list:not(.x-list--horizontal), .x-list--gap-07.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-07.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-07.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-07);
+  }
+  .x-list--gap-07.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-07.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-07);
+  }
+  .x-list--gap-07.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-07.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-07);
+    margin-bottom: var(--x-size-gap-list-07);
+  }
 }
-.x-input-group > .x-input > .x-input-placeholder, .x-input-group > .x-input::placeholder {
-  color: var(--x-color-text-input-group-placeholder-default);
-  font-family: var(--x-font-family-input-group-placeholder-default);
-  font-size: var(--x-size-font-input-group-placeholder-default);
-  font-weight: var(--x-number-font-weight-input-group-placeholder-default);
-  line-height: var(--x-size-line-height-input-group-placeholder-default);
+
+.x-list--gap-08.x-list {
+  gap: var(--x-size-gap-list-08);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-08.x-list:not(.x-list--horizontal), .x-list--gap-08.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-08.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-08.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-08);
+  }
+  .x-list--gap-08.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-08.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-08);
+  }
+  .x-list--gap-08.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-08.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-08);
+    margin-bottom: var(--x-size-gap-list-08);
+  }
+}
+
+.x-list--gap-09.x-list {
+  gap: var(--x-size-gap-list-09);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-09.x-list:not(.x-list--horizontal), .x-list--gap-09.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-09.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-09.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-09);
+  }
+  .x-list--gap-09.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-09.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-09);
+  }
+  .x-list--gap-09.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-09.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-09);
+    margin-bottom: var(--x-size-gap-list-09);
+  }
 }
-.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-list--gap-10.x-list {
+  gap: var(--x-size-gap-list-10);
 }
-.x-input-group > .x-button:not(.x-input-group__action) {
-  font-weight: var(--x-number-font-weight-input-group-default-button);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-10.x-list:not(.x-list--horizontal), .x-list--gap-10.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-10.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-10.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-10);
+  }
+  .x-list--gap-10.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-10.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-10);
+  }
+  .x-list--gap-10.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-10.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-10);
+    margin-bottom: var(--x-size-gap-list-10);
+  }
 }
-[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
-  margin-right: 0;
+
+.x-list--gap-11.x-list {
+  gap: var(--x-size-gap-list-11);
 }
-[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
-  margin-left: 0;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-11.x-list:not(.x-list--horizontal), .x-list--gap-11.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-11.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-11.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-11);
+  }
+  .x-list--gap-11.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-11.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-11);
+  }
+  .x-list--gap-11.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-11.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-11);
+    margin-bottom: var(--x-size-gap-list-11);
+  }
 }
-[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
-  margin-left: 0;
+
+.x-list--gap-12.x-list {
+  gap: var(--x-size-gap-list-12);
 }
-[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
-  margin-right: 0;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-12.x-list:not(.x-list--horizontal), .x-list--gap-12.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-12.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-12.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-12);
+  }
+  .x-list--gap-12.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-12.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-12);
+  }
+  .x-list--gap-12.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-12.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-12);
+    margin-bottom: var(--x-size-gap-list-12);
+  }
 }
-.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);
+
+.x-list--gap-13.x-list {
+  gap: var(--x-size-gap-list-13);
 }
-[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
-  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-13.x-list:not(.x-list--horizontal), .x-list--gap-13.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-13.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-13.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-13);
+  }
+  .x-list--gap-13.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-13.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-13);
+  }
+  .x-list--gap-13.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-13.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-13);
+    margin-bottom: var(--x-size-gap-list-13);
+  }
 }
-[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
-  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
+
+.x-list--gap-14.x-list {
+  gap: var(--x-size-gap-list-14);
 }
-[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
-  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-14.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-14.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-14);
+  }
+  .x-list--gap-14.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-14.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-14);
+  }
+  .x-list--gap-14.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-14.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-14);
+    margin-bottom: var(--x-size-gap-list-14);
+  }
 }
-[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
-  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
+
+.x-list--gap-15.x-list {
+  gap: var(--x-size-gap-list-15);
 }
-: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);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-15.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-15.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-15);
+  }
+  .x-list--gap-15.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-15.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-15);
+  }
+  .x-list--gap-15.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-15.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-15);
+    margin-bottom: var(--x-size-gap-list-15);
+  }
 }
 
-.x-input-group--card.x-input-group,
-.x-input-group--card .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-card
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-card
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-card
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-card
-  );
-}
-.x-input-group--card.x-input-group__action:first-child,
-.x-input-group--card .x-input-group__action:first-child {
-  --x-size-border-radius-top-right-input-group-default: 0;
-  --x-size-border-radius-bottom-right-input-group-default: 0;
+.x-list--gap-16.x-list {
+  gap: var(--x-size-gap-list-16);
 }
-.x-input-group--card.x-input-group__action:last-child,
-.x-input-group--card .x-input-group__action:last-child {
-  --x-size-border-radius-top-left-input-group-default: 0;
-  --x-size-border-radius-bottom-left-input-group-default: 0;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-16.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-16.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-16);
+  }
+  .x-list--gap-16.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-16.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-16);
+  }
+  .x-list--gap-16.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-16.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-16);
+    margin-bottom: var(--x-size-gap-list-16);
+  }
 }
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+
+.x-list--gap-17.x-list {
+  gap: var(--x-size-gap-list-17);
 }
-: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);
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-17.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-17.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-17);
+  }
+  .x-list--gap-17.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-17.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-17);
+  }
+  .x-list--gap-17.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-17.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-17);
+    margin-bottom: var(--x-size-gap-list-17);
+  }
 }
 
-.x-input--pill.x-input,
-.x-input--pill .x-input {
-  --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
-  --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);
+.x-list--gap-18.x-list {
+  gap: var(--x-size-gap-list-18);
 }
-: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;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-18);
+  }
+  .x-list--gap-18.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-18);
+  }
+  .x-list--gap-18.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-18);
+    margin-bottom: var(--x-size-gap-list-18);
+  }
 }
-:root {
-  --x-size-padding-top-input-line: var(--x-size-base-03);
-  --x-size-padding-right-input-line: 0;
-  --x-size-padding-bottom-input-line: var(--x-size-base-03);
-  --x-size-padding-left-input-line: 0;
-  --x-size-border-width-top-input-line: 0;
-  --x-size-border-width-right-input-line: 0;
-  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
-  --x-size-border-width-left-input-line: 0;
+
+.x-list--gap-19.x-list {
+  gap: var(--x-size-gap-list-19);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-19);
+  }
+  .x-list--gap-19.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-19);
+  }
+  .x-list--gap-19.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-19);
+    margin-bottom: var(--x-size-gap-list-19);
+  }
 }
 
-.x-input--line .x-input,
-.x-input--line.x-input {
-  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
-  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
-  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
-  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
+.x-list--gap-20.x-list {
+  gap: var(--x-size-gap-list-20);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-20);
+  }
+  .x-list--gap-20.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-20);
+  }
+  .x-list--gap-20.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-20);
+    margin-bottom: var(--x-size-gap-list-20);
+  }
 }
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
@@ -7255,30 +7219,20 @@
   --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);
 }
+: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-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7292,10 +7246,6 @@
   --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);
@@ -7305,6 +7255,26 @@
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
 }
+: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-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7397,12 +7367,6 @@
 .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;
@@ -7410,37 +7374,11 @@
   --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;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+.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;
@@ -7587,6 +7525,10 @@
     --x-number-font-weight-filter-count-default-selected
   );
 }
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
 :root {
   --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
   --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7636,6 +7578,39 @@
   --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
   --x-size-border-width-left-facet-header-line: 0;
 }
+:root {
+  --x-color-background-facet-default: transparent;
+  --x-color-border-facet-default: var(--x-color-background-facet-default);
+  --x-color-text-facet-default: var(--x-color-text-default);
+  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
+  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
+  --x-size-border-width-facet-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-facet-header-default
+  );
+  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-right-facet-header-default: 0;
+  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-left-facet-header-default: 0;
+  --x-size-gap-facet-header-default: var(--x-size-base-03);
+  --x-font-family-facet-default: var(--x-font-family-title3);
+  --x-size-font-facet-default: var(--x-size-font-title3);
+  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
+  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
+}
 :root {
   --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
   --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7657,41 +7632,8 @@
     --x-size-border-width-bottom-facet-header-line
   );
   --x-size-border-width-left-facet-header-default: var(
-    --x-size-border-width-left-facet-header-line
-  );
-}
-:root {
-  --x-color-background-facet-default: transparent;
-  --x-color-border-facet-default: var(--x-color-background-facet-default);
-  --x-color-text-facet-default: var(--x-color-text-default);
-  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
-  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
-  --x-size-border-width-facet-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-facet-header-default
+    --x-size-border-width-left-facet-header-line
   );
-  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-right-facet-header-default: 0;
-  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-left-facet-header-default: 0;
-  --x-size-gap-facet-header-default: var(--x-size-base-03);
-  --x-font-family-facet-default: var(--x-font-family-title3);
-  --x-size-font-facet-default: var(--x-size-font-title3);
-  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
 :root {
   --x-color-background-facet-default: transparent;
@@ -7859,7 +7801,36 @@
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
 }
 :root {
-  --x-size-width-dropdown-xl: 282px;
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-filter-count-default
+  );
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
 :root {
   --x-size-width-dropdown-xl: 282px;
@@ -7932,9 +7903,6 @@
 :root {
   --x-size-width-dropdown-m: 130px;
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
 
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
@@ -7963,6 +7931,33 @@
   --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-xl: 282px;
+}
+: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);
@@ -8002,33 +7997,6 @@
     --x-size-border-width-left-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);
-}
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -8036,6 +8004,9 @@
 .x-dropdown.x-dropdown--l {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8476,31 +8447,6 @@
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
-:root {
-  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
-
-.x-button--round.x-button,
-.x-button--round .x-button {
-  --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;
-}
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8511,6 +8457,9 @@
   --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
   --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8566,6 +8515,11 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 
 .x-button--ghost.x-button,
 .x-button--ghost .x-button {
@@ -8583,11 +8537,6 @@
 .x-button--ghost.x-button--ghost-end .x-button {
   --x-size-padding-right-button-default: 0;
 }
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,13 +8652,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-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
 
 .x-button--card.x-button,
 .x-button--card .x-button {
@@ -8725,6 +8667,23 @@
     --x-size-border-radius-bottom-left-button-card
   );
 }
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
+:root {
+  --x-color-background-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-color-background-badge-default: var(--x-color-base-neutral-10);
   --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8774,29 +8733,6 @@
 .x-badge-container {
   position: relative;
 }
-: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-color-base-lead: #243d48;
-  --x-color-base-auxiliary: #bfe1ec;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #0086b2;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8819,10 +8755,74 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
+:root {
+  --x-color-base-lead: #243d48;
+  --x-color-base-auxiliary: #bfe1ec;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #0086b2;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-border-radius-base-none: 0;
   --x-size-border-radius-base-s: var(--x-size-base-02);
   --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-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
+:root {
+  --x-size-border-radius-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;
 }