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

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

@@ -1013,15 +1013,6 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
-.x-font-weight--light {
-  font-weight: var(--x-number-font-weight-base-light) !important;
-}
-.x-font-weight--regular {
-  font-weight: var(--x-number-font-weight-base-regular) !important;
-}
-.x-font-weight--bold {
-  font-weight: var(--x-number-font-weight-base-bold) !important;
-}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -1102,48 +1093,14 @@
   font-size: var(--x-size-base-20) !important;
   line-height: 1.5;
 }
-.x-font-color--lead {
-  color: var(--x-color-base-lead) !important;
-}
-
-.x-font-color--auxiliary {
-  color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-font-color--neutral-10 {
-  color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-font-color--neutral-35 {
-  color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-font-color--neutral-70 {
-  color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-font-color--neutral-95 {
-  color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-font-color--neutral-100 {
-  color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-font-color--accent {
-  color: var(--x-color-base-accent) !important;
-}
-
-.x-font-color--enable {
-  color: var(--x-color-base-enable) !important;
+.x-font-weight--light {
+  font-weight: var(--x-number-font-weight-base-light) !important;
 }
-
-.x-font-color--disable {
-  color: var(--x-color-base-disable) !important;
+.x-font-weight--regular {
+  font-weight: var(--x-number-font-weight-base-regular) !important;
 }
-
-.x-font-color--transparent {
-  color: var(--x-color-base-transparent) !important;
+.x-font-weight--bold {
+  font-weight: var(--x-number-font-weight-base-bold) !important;
 }
 .x-flex-1 {
   flex: 1 1 0% !important;
@@ -1188,6 +1145,49 @@
 .x-self-baseline {
   align-self: baseline !important;
 }
+.x-font-color--lead {
+  color: var(--x-color-base-lead) !important;
+}
+
+.x-font-color--auxiliary {
+  color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-font-color--neutral-10 {
+  color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-font-color--neutral-35 {
+  color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-font-color--neutral-70 {
+  color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-font-color--neutral-95 {
+  color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-font-color--neutral-100 {
+  color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important;
+}
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important;
+}
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important;
+}
+
+.x-font-color--transparent {
+  color: var(--x-color-base-transparent) !important;
+}
 .x-fill--lead {
   fill: var(--x-color-base-lead) !important;
 }
@@ -3317,6 +3317,21 @@
 .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-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3360,21 +3375,6 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
@@ -3559,13 +3559,6 @@
 .x-text--accent {
   --x-color-text-default: var(--x-color-text-accent);
 }
-:root {
-  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
-}
 :root {
   --x-color-background-tag-ghost: transparent;
   --x-color-border-tag-ghost: transparent;
@@ -3585,6 +3578,13 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
+:root {
+  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
+  --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 {
@@ -4165,96 +4165,6 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
-:root {
-  --x-string-align-items-suggestion-default: center;
-  --x-color-text-suggestion-default: var(--x-color-text-default);
-  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
-  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
-  --x-color-background-suggestion-default: transparent;
-  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-matching-part-default-curated: var(
-    --x-color-text-suggestion-matching-part-default
-  );
-  --x-color-text-suggestion-default-matching-curated: var(
-    --x-color-text-suggestion-default-matching
-  );
-  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
-  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
-  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
-  --x-size-padding-right-suggestion-default: 0;
-  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
-  --x-size-padding-left-suggestion-default: 0;
-  --x-size-gap-suggestion-default: var(--x-size-base-03);
-  --x-size-border-width-suggestion-default: 0;
-  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-top-right-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-right-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-left-suggestion-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-font-family-suggestion-default: var(--x-font-family-text);
-  --x-size-font-suggestion-default: var(--x-size-font-text);
-  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
-  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
-  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-matching-part-default: var(
-    --x-size-line-height-suggestion-default
-  );
-  --x-number-font-weight-suggestion-matching-part-default: var(
-    --x-number-font-weight-suggestion-default
-  );
-  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-default-matching: var(
-    --x-number-font-weight-suggestion-default
-  );
-  --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
-  --x-text-transform-suggestion-filter-default: none;
-  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
-  --x-font-family-suggestion-matching-part-default-curated: var(
-    --x-font-family-suggestion-matching-part-default
-  );
-  --x-size-font-suggestion-matching-part-default-curated: var(
-    --x-size-font-suggestion-matching-part-default
-  );
-  --x-size-line-height-suggestion-matching-part-default-curated: var(
-    --x-size-line-height-suggestion-matching-part-default
-  );
-  --x-number-font-weight-suggestion-matching-part-default-curated: var(
-    --x-number-font-weight-suggestion-matching-part-default
-  );
-  --x-font-family-suggestion-default-matching-curated: var(
-    --x-font-family-suggestion-default-matching
-  );
-  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
-  --x-size-line-height-suggestion-default-matching-curated: var(
-    --x-size-line-height-suggestion-default-matching
-  );
-  --x-number-font-weight-suggestion-default-matching-curated: var(
-    --x-number-font-weight-suggestion-default-matching
-  );
-}
 
 [dir="ltr"] .x-suggestion {
   text-align: left;
@@ -4388,30 +4298,120 @@
   );
 }
 :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);
-}
-.x-sliding-panel__button.x-button {
-  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
-  pointer-events: none;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
-  pointer-events: all;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
-  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
-  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
-  opacity: 0;
+  --x-string-align-items-suggestion-default: center;
+  --x-color-text-suggestion-default: var(--x-color-text-default);
+  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
+  --x-color-background-suggestion-default: transparent;
+  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(
+    --x-color-text-suggestion-matching-part-default
+  );
+  --x-color-text-suggestion-default-matching-curated: var(
+    --x-color-text-suggestion-default-matching
+  );
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
+  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
+  --x-size-padding-right-suggestion-default: 0;
+  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
+  --x-size-padding-left-suggestion-default: 0;
+  --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-top-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-font-family-suggestion-default: var(--x-font-family-text);
+  --x-size-font-suggestion-default: var(--x-size-font-text);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
+  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-matching: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
+  --x-text-transform-suggestion-filter-default: none;
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(
+    --x-font-family-suggestion-matching-part-default
+  );
+  --x-size-font-suggestion-matching-part-default-curated: var(
+    --x-size-font-suggestion-matching-part-default
+  );
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+    --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+    --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(
+    --x-font-family-suggestion-default-matching
+  );
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+    --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+    --x-number-font-weight-suggestion-default-matching
+  );
+}
+: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);
+}
+.x-sliding-panel__button.x-button {
+  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+  pointer-events: none;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
+  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
+  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
+  opacity: 0;
 }
 .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
   opacity: 1;
@@ -4500,6 +4500,14 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4521,14 +4529,6 @@
 .x-row--padding-06 {
   --x-size-padding-row: var(--x-size-padding-row-06);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -4806,23 +4806,6 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 
 .x-result {
   display: grid;
@@ -4877,7 +4860,21 @@
   }
 }
 :root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
+  --x-size-border-width-result-picture-default: 0;
 }
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
@@ -4888,17 +4885,7 @@
   --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);
-  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-progress-bar-default: 0;
-}
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
@@ -4925,6 +4912,15 @@
   border-radius: var(--x-size-border-radius-progress-bar-default);
   background-color: var(--x-color-background-progress-bar-line-default);
 }
+: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);
+  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-progress-bar-default: 0;
+}
 :root {
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
@@ -4936,6 +4932,10 @@
 .x-picture--zoom .x-picture-image:hover {
   transform: scale(var(--x-number-zoom-scale-picture));
 }
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
 :root {
   --x-number-aspect-ratio-picture: 1;
 }
@@ -5025,12 +5025,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-colored: var(--x-color-base-neutral-95);
-  --x-mix-blend-mode-picture-colored: multiply;
-  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
-  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
-}
 :root {
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
@@ -5070,6 +5064,12 @@
 .x-picture--colored.x-picture .x-picture--placeholder {
   --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
 }
+:root {
+  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+  --x-mix-blend-mode-picture-colored: multiply;
+  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
+  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+}
 :root {
   --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5092,51 +5092,6 @@
   --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
   --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
 }
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
-}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5217,17 +5172,254 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+
+.x-option-list {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  box-sizing: border-box;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+[dir="ltr"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="ltr"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-left-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-left-option-list-item-default);
+}
+.x-option-list__item {
+  border-top-color: var(--x-color-border-top-option-list-item-default);
+  border-right-color: var(--x-color-border-right-option-list-item-default);
+  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
+  border-left-color: var(--x-color-border-left-option-list-item-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-option-list-item-default);
+  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
+}
+.x-option-list__item.x-option-list__item--is-selected {
+  --x-color-border-option-list-item-default: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-top-option-list-item-default: var(
+    --x-color-border-top-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default: var(
+    --x-color-border-right-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default: var(
+    --x-color-border-bottom-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default: var(
+    --x-color-border-left-option-list-item-default-selected
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-default-selected
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-default-selected
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-default-selected
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
+  --x-number-font-weight-option-list-button-default: var(
+    --x-number-font-weight-option-list-button-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected-hover
+  );
+  --x-color-border-button-default: var(
+    --x-color-border-option-list-button-default-selected-hover
+  );
+  --x-color-text-button-default: var(
+    --x-color-text-option-list-button-default-selected-hover
+  );
+}
+.x-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: 0;
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+}
+.x-option-list__item .x-button {
+  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
+  min-height: auto;
+  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
+  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
+  --x-size-padding-bottom-button-default: var(
+    --x-size-padding-bottom-option-list-button-default
+  );
+  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
+  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
+}
+.x-option-list__item .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-hover
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+}
+:root {
+  --x-color-background-option-list-button-default: transparent;
+  --x-color-border-option-list-button-default: transparent;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
+  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
+:root {
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
+:root {
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
   --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
   --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
   --x-color-border-top-option-list-item-bottom-selected: var(
@@ -5352,15 +5544,6 @@
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
 }
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
-}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -5382,198 +5565,6 @@
   --x-size-font-message-default: var(--x-size-font-title3);
   --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
 }
-:root {
-  --x-color-background-option-list-button-default: transparent;
-  --x-color-border-option-list-button-default: transparent;
-  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
-  --x-color-background-option-list-button-default-hover: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-hover: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
-  --x-color-background-option-list-button-default-selected: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-selected: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
-  --x-color-background-option-list-button-default-selected-hover: var(
-    --x-color-background-option-list-button-default-selected
-  );
-  --x-color-border-option-list-button-default-selected-hover: var(
-    --x-color-border-option-list-button-default-selected
-  );
-  --x-color-text-option-list-button-default-selected-hover: var(
-    --x-color-text-option-list-button-default-selected
-  );
-  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default-selected: var(
-    --x-size-border-width-top-option-list-item-default
-  );
-  --x-size-border-width-right-option-list-item-default-selected: var(
-    --x-size-border-width-right-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default-selected: var(
-    --x-size-border-width-bottom-option-list-item-default
-  );
-  --x-size-border-width-left-option-list-item-default-selected: var(
-    --x-size-border-width-left-option-list-item-default
-  );
-  --x-size-padding-option-list-button-default: var(--x-size-base-02);
-  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-right-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-bottom-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-left-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-font-decoration-option-list-button-default-hover: underline;
-  --x-size-font-option-list-button-default: var(--x-size-font-text);
-  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
-}
-
-.x-option-list {
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  box-sizing: border-box;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-[dir="ltr"] .x-option-list__item {
-  border-right-width: var(--x-size-border-width-right-option-list-item-default);
-}
-[dir="rtl"] .x-option-list__item {
-  border-left-width: var(--x-size-border-width-right-option-list-item-default);
-}
-[dir="ltr"] .x-option-list__item {
-  border-left-width: var(--x-size-border-width-left-option-list-item-default);
-}
-[dir="rtl"] .x-option-list__item {
-  border-right-width: var(--x-size-border-width-left-option-list-item-default);
-}
-.x-option-list__item {
-  border-top-color: var(--x-color-border-top-option-list-item-default);
-  border-right-color: var(--x-color-border-right-option-list-item-default);
-  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
-  border-left-color: var(--x-color-border-left-option-list-item-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-option-list-item-default);
-  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
-}
-.x-option-list__item.x-option-list__item--is-selected {
-  --x-color-border-option-list-item-default: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-top-option-list-item-default: var(
-    --x-color-border-top-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default: var(
-    --x-color-border-right-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default: var(
-    --x-color-border-bottom-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default: var(
-    --x-color-border-left-option-list-item-default-selected
-  );
-  --x-size-border-width-top-option-list-item-default: var(
-    --x-size-border-width-top-option-list-item-default-selected
-  );
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-right-option-list-item-default-selected
-  );
-  --x-size-border-width-bottom-option-list-item-default: var(
-    --x-size-border-width-bottom-option-list-item-default-selected
-  );
-  --x-size-border-width-left-option-list-item-default: var(
-    --x-size-border-width-left-option-list-item-default-selected
-  );
-}
-.x-option-list__item.x-option-list__item--is-selected .x-button {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-selected
-  );
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
-  --x-number-font-weight-option-list-button-default: var(
-    --x-number-font-weight-option-list-button-default-selected
-  );
-}
-.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-selected-hover
-  );
-  --x-color-border-button-default: var(
-    --x-color-border-option-list-button-default-selected-hover
-  );
-  --x-color-text-button-default: var(
-    --x-color-text-option-list-button-default-selected-hover
-  );
-}
-.x-option-list__item:last-child {
-  --x-size-border-width-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: 0;
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-}
-.x-option-list__item .x-button {
-  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
-  min-height: auto;
-  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
-  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
-  --x-size-padding-bottom-button-default: var(
-    --x-size-padding-bottom-option-list-button-default
-  );
-  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
-  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
-  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
-}
-.x-option-list__item .x-button:hover {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-hover
-  );
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
-  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
-          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
-}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -5645,21 +5636,36 @@
 .x-message > p {
   margin: 0;
 }
-/* @deprecated */
 :root {
-  --x-size-padding-list-01: var(--x-size-base-01);
-  --x-size-padding-list-02: var(--x-size-base-02);
-  --x-size-padding-list-03: var(--x-size-base-03);
-  --x-size-padding-list-04: var(--x-size-base-04);
-  --x-size-padding-list-05: var(--x-size-base-05);
-  --x-size-padding-list-06: var(--x-size-base-06);
-  --x-size-padding-list-07: var(--x-size-base-07);
-  --x-size-padding-list-08: var(--x-size-base-08);
-  --x-size-padding-list-09: var(--x-size-base-09);
-  --x-size-padding-list-10: var(--x-size-base-10);
-  --x-size-padding-list-11: var(--x-size-base-11);
-  --x-size-padding-list-12: var(--x-size-base-12);
-  --x-size-padding-list-13: var(--x-size-base-13);
+  --x-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-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
 }
 /* @deprecated */
 :root {
@@ -5677,882 +5683,868 @@
   --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) {
-  padding-right: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-bottom) {
-  padding-bottom: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-left) {
-  padding-left: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-top) {
-  padding-top: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-bottom) {
-  padding-bottom: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-left) {
-  padding-left: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-top) {
-  padding-top: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-right) {
-  padding-right: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-left) {
-  padding-left: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-top) {
-  padding-top: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-right) {
-  padding-right: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-bottom) {
-  padding-bottom: 0;
-}
-
-.x-list--padding-01.x-list {
-  padding: var(--x-size-padding-list-01);
+: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-.x-list {
+.x-list--gap-01.x-list {
   gap: var(--x-size-gap-list-01);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-01.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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-list--padding-02.x-list {
-  padding: var(--x-size-padding-list-02);
-}
-
-.x-list--gap-.x-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-.x-list {
+  .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-02.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-03.x-list {
-  padding: var(--x-size-padding-list-03);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-03.x-list {
   gap: var(--x-size-gap-list-03);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-03.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-04.x-list {
-  padding: var(--x-size-padding-list-04);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-04.x-list {
   gap: var(--x-size-gap-list-04);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-04.x-list:not(.x-list--horizontal), .x-list--gap-04.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-04.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-05.x-list {
-  padding: var(--x-size-padding-list-05);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-05.x-list {
   gap: var(--x-size-gap-list-05);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-05.x-list:not(.x-list--horizontal), .x-list--gap-05.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-05.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-06.x-list {
-  padding: var(--x-size-padding-list-06);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-06.x-list {
   gap: var(--x-size-gap-list-06);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-06.x-list:not(.x-list--horizontal), .x-list--gap-06.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-06.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-07.x-list {
-  padding: var(--x-size-padding-list-07);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-07.x-list {
   gap: var(--x-size-gap-list-07);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-07.x-list:not(.x-list--horizontal), .x-list--gap-07.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-07.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-08.x-list {
-  padding: var(--x-size-padding-list-08);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-08.x-list {
   gap: var(--x-size-gap-list-08);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-08.x-list:not(.x-list--horizontal), .x-list--gap-08.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-08.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-09.x-list {
-  padding: var(--x-size-padding-list-09);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-09.x-list {
   gap: var(--x-size-gap-list-09);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-09.x-list:not(.x-list--horizontal), .x-list--gap-09.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-09.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-10.x-list {
-  padding: var(--x-size-padding-list-10);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-10.x-list {
   gap: var(--x-size-gap-list-10);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-10.x-list:not(.x-list--horizontal), .x-list--gap-10.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-10.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-11.x-list {
-  padding: var(--x-size-padding-list-11);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-11.x-list {
   gap: var(--x-size-gap-list-11);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-11.x-list:not(.x-list--horizontal), .x-list--gap-11.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-11.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-12.x-list {
-  padding: var(--x-size-padding-list-12);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-12.x-list {
   gap: var(--x-size-gap-list-12);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-12.x-list:not(.x-list--horizontal), .x-list--gap-12.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-12.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .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--padding-13.x-list {
-  padding: var(--x-size-padding-list-13);
-}
-
-.x-list--gap-.x-list {
+.x-list--gap-13.x-list {
   gap: var(--x-size-gap-list-13);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
+  .x-list--gap-13.x-list:not(.x-list--horizontal), .x-list--gap-13.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-.x-list > *:not(:last-child) {
+  .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-.x-list.x-list--horizontal {
+  .x-list--gap-13.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+  .x-list--gap-13.x-list.x-list--horizontal > *:not(:last-child) {
     margin-right: var(--x-size-gap-list-13);
   }
-}
-:root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --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-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--gap-01.x-list {
-  gap: var(--x-size-gap-list-01);
+.x-list--gap-14.x-list {
+  gap: var(--x-size-gap-list-14);
 }
 @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--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.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--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-01.x-list.x-list--horizontal {
+  .x-list--gap-14.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-14.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-14);
   }
-  .x-list--gap-01.x-list.x-list--wrap {
+  .x-list--gap-14.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-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--gap-02.x-list {
-  gap: var(--x-size-gap-list-02);
+.x-list--gap-15.x-list {
+  gap: var(--x-size-gap-list-15);
 }
 @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 {
+  .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.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-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-02.x-list.x-list--horizontal {
+  .x-list--gap-15.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-15.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-15);
   }
-  .x-list--gap-02.x-list.x-list--wrap {
+  .x-list--gap-15.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--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--gap-03.x-list {
-  gap: var(--x-size-gap-list-03);
+.x-list--gap-16.x-list {
+  gap: var(--x-size-gap-list-16);
 }
 @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 {
+  .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.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-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-03.x-list.x-list--horizontal {
+  .x-list--gap-16.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-16.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-16);
   }
-  .x-list--gap-03.x-list.x-list--wrap {
+  .x-list--gap-16.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--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--gap-04.x-list {
-  gap: var(--x-size-gap-list-04);
+.x-list--gap-17.x-list {
+  gap: var(--x-size-gap-list-17);
 }
 @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 {
+  .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.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-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-04.x-list.x-list--horizontal {
+  .x-list--gap-17.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-17.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-17);
   }
-  .x-list--gap-04.x-list.x-list--wrap {
+  .x-list--gap-17.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--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--gap-05.x-list {
-  gap: var(--x-size-gap-list-05);
+.x-list--gap-18.x-list {
+  gap: var(--x-size-gap-list-18);
 }
 @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 {
+  .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.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-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-05.x-list.x-list--horizontal {
+  .x-list--gap-18.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-18.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-18);
   }
-  .x-list--gap-05.x-list.x-list--wrap {
+  .x-list--gap-18.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--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);
   }
 }
 
-.x-list--gap-06.x-list {
-  gap: var(--x-size-gap-list-06);
+.x-list--gap-19.x-list {
+  gap: var(--x-size-gap-list-19);
 }
 @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 {
+  .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.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-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-06.x-list.x-list--horizontal {
+  .x-list--gap-19.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-19.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-19);
   }
-  .x-list--gap-06.x-list.x-list--wrap {
+  .x-list--gap-19.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--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-07.x-list {
-  gap: var(--x-size-gap-list-07);
+.x-list--gap-20.x-list {
+  gap: var(--x-size-gap-list-20);
 }
 @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 {
+  .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.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-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-07.x-list.x-list--horizontal {
+  .x-list--gap-20.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-20.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-20);
   }
-  .x-list--gap-07.x-list.x-list--wrap {
+  .x-list--gap-20.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--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);
   }
 }
+/* @deprecated */
+:root {
+  --x-size-padding-list-01: var(--x-size-base-01);
+  --x-size-padding-list-02: var(--x-size-base-02);
+  --x-size-padding-list-03: var(--x-size-base-03);
+  --x-size-padding-list-04: var(--x-size-base-04);
+  --x-size-padding-list-05: var(--x-size-base-05);
+  --x-size-padding-list-06: var(--x-size-base-06);
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13);
+}
 
-.x-list--gap-08.x-list {
-  gap: var(--x-size-gap-list-08);
+/* @deprecated */
+[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
+  padding-right: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-bottom) {
+  padding-bottom: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-left) {
+  padding-left: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-top) {
+  padding-top: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-bottom) {
+  padding-bottom: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-left) {
+  padding-left: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-top) {
+  padding-top: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-right) {
+  padding-right: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-left) {
+  padding-left: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-top) {
+  padding-top: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-right) {
+  padding-right: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-bottom) {
+  padding-bottom: 0;
+}
+
+.x-list--padding-01.x-list {
+  padding: var(--x-size-padding-list-01);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-01);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-01);
   }
-  .x-list--gap-08.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
   }
 }
 
-.x-list--gap-09.x-list {
-  gap: var(--x-size-gap-list-09);
+.x-list--padding-02.x-list {
+  padding: var(--x-size-padding-list-02);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-02);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-02);
   }
-  .x-list--gap-09.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
   }
 }
 
-.x-list--gap-10.x-list {
-  gap: var(--x-size-gap-list-10);
+.x-list--padding-03.x-list {
+  padding: var(--x-size-padding-list-03);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-03);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-03);
   }
-  .x-list--gap-10.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-03);
   }
 }
 
-.x-list--gap-11.x-list {
-  gap: var(--x-size-gap-list-11);
+.x-list--padding-04.x-list {
+  padding: var(--x-size-padding-list-04);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-04);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-04);
   }
-  .x-list--gap-11.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-04);
   }
 }
 
-.x-list--gap-12.x-list {
-  gap: var(--x-size-gap-list-12);
+.x-list--padding-05.x-list {
+  padding: var(--x-size-padding-list-05);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-05);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-05);
   }
-  .x-list--gap-12.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-05);
   }
 }
 
-.x-list--gap-13.x-list {
-  gap: var(--x-size-gap-list-13);
+.x-list--padding-06.x-list {
+  padding: var(--x-size-padding-list-06);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-06);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-06);
   }
-  .x-list--gap-13.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-06);
   }
 }
 
-.x-list--gap-14.x-list {
-  gap: var(--x-size-gap-list-14);
+.x-list--padding-07.x-list {
+  padding: var(--x-size-padding-list-07);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-07);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-07);
   }
-  .x-list--gap-14.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-07);
   }
 }
 
-.x-list--gap-15.x-list {
-  gap: var(--x-size-gap-list-15);
+.x-list--padding-08.x-list {
+  padding: var(--x-size-padding-list-08);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-08);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-08);
   }
-  .x-list--gap-15.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-08);
   }
 }
 
-.x-list--gap-16.x-list {
-  gap: var(--x-size-gap-list-16);
+.x-list--padding-09.x-list {
+  padding: var(--x-size-padding-list-09);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-09);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-09);
   }
-  .x-list--gap-16.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-09);
   }
 }
 
-.x-list--gap-17.x-list {
-  gap: var(--x-size-gap-list-17);
+.x-list--padding-10.x-list {
+  padding: var(--x-size-padding-list-10);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-10);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-10);
   }
-  .x-list--gap-17.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-10);
   }
 }
 
-.x-list--gap-18.x-list {
-  gap: var(--x-size-gap-list-18);
+.x-list--padding-11.x-list {
+  padding: var(--x-size-padding-list-11);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-11);
 }
 @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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-11);
   }
-  .x-list--gap-18.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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);
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-11);
   }
 }
 
-.x-list--gap-19.x-list {
-  gap: var(--x-size-gap-list-19);
+.x-list--padding-12.x-list {
+  padding: var(--x-size-padding-list-12);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-12);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-12);
   }
-  .x-list--gap-19.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-12);
   }
 }
 
-.x-list--gap-20.x-list {
-  gap: var(--x-size-gap-list-20);
+.x-list--padding-13.x-list {
+  padding: var(--x-size-padding-list-13);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-13);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-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 {
+  .x-list--gap-.x-list {
     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-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-13);
   }
-  .x-list--gap-20.x-list.x-list--wrap {
+  .x-list--gap-.x-list.x-list--horizontal {
     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);
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-13);
   }
 }
-:root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --x-size-gap-list-03: var(--x-size-base-03);
-  --x-size-gap-list-04: var(--x-size-base-04);
-  --x-size-gap-list-05: var(--x-size-base-05);
-  --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07);
-  --x-size-gap-list-08: var(--x-size-base-08);
-  --x-size-gap-list-09: var(--x-size-base-09);
-  --x-size-gap-list-10: var(--x-size-base-10);
-  --x-size-gap-list-11: var(--x-size-base-11);
-  --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13);
-  --x-size-gap-list-14: var(--x-size-base-14);
-  --x-size-gap-list-15: var(--x-size-base-15);
-  --x-size-gap-list-16: var(--x-size-base-16);
-  --x-size-gap-list-17: var(--x-size-base-17);
-  --x-size-gap-list-18: var(--x-size-base-18);
-  --x-size-gap-list-19: var(--x-size-base-19);
-  --x-size-gap-list-20: var(--x-size-base-20);
-}
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
 :root {
   --x-string-flow-list: column nowrap;
   --x-size-padding-list: 0;
@@ -6701,6 +6693,14 @@
 .x-list > .x-list__item--12 {
   flex: 12 1 auto;
 }
+: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;
+}
 :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);
@@ -6722,71 +6722,19 @@
 
 .x-input-group--pill.x-input-group,
 .x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-pill
-  );
-}
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
-}
-:root {
-  --x-color-background-input-group-default: var(--x-color-background-input-default);
-  --x-color-border-input-group-default: var(--x-color-border-input-default);
-  --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-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-number-font-weight-input-group-placeholder-default: var(
-    --x-number-font-weight-input-group-default
+  --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-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
 :root {
   --x-size-padding-left-input-group-line: 0;
@@ -6835,6 +6783,15 @@
   margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
   margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
 }
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7013,13 +6970,47 @@
   margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
 }
 :root {
-  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-bottom-right-input-group-card: var(
-    --x-size-border-radius-input-group-card
+  --x-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-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-font-family-input-group-default: var(--x-font-family-input-default);
+  --x-size-font-input-group-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
+  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
+  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
+  --x-size-line-height-input-group-placeholder-default: var(
+    --x-size-line-height-input-group-default
+  );
+  --x-number-font-weight-input-group-placeholder-default: var(
+    --x-number-font-weight-input-group-default
+  );
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
@@ -7057,6 +7048,22 @@
   --x-size-border-radius-top-left-input-group-default: 0;
   --x-size-border-radius-bottom-left-input-group-default: 0;
 }
+:root {
+  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-bottom-right-input-group-card: var(
+    --x-size-border-radius-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+}
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}
 :root {
   --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7073,13 +7080,6 @@
   --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
   --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
 }
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
-}
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7090,34 +7090,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-:root {
-  --x-color-background-input-default: var(--x-color-base-neutral-100);
-  --x-color-border-input-default: var(--x-color-base-neutral-70);
-  --x-color-border-input-default-focus: var(--x-color-base-lead);
-  --x-color-text-input-default: var(--x-color-text-default);
-  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
-  --x-size-border-width-input-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-height-input-default: var(--x-size-base-07);
-  --x-size-padding-right-input-default: var(--x-size-base-04);
-  --x-size-padding-left-input-default: var(--x-size-base-04);
-  --x-font-family-input-default: var(--x-font-family-text);
-  --x-size-font-input-default: var(--x-size-font-text);
-  --x-size-line-height-input-default: var(--x-size-line-height-text);
-  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
-  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
-  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
-}
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7248,6 +7220,34 @@
   font-weight: var(--x-number-font-weight-input-placeholder-default);
   line-height: var(--x-size-line-height-input-placeholder-default);
 }
+:root {
+  --x-color-background-input-default: var(--x-color-base-neutral-100);
+  --x-color-border-input-default: var(--x-color-base-neutral-70);
+  --x-color-border-input-default-focus: var(--x-color-base-lead);
+  --x-color-text-input-default: var(--x-color-text-default);
+  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
+  --x-size-border-width-input-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-height-input-default: var(--x-size-base-07);
+  --x-size-padding-right-input-default: var(--x-size-base-04);
+  --x-size-padding-left-input-default: var(--x-size-base-04);
+  --x-font-family-input-default: var(--x-font-family-text);
+  --x-size-font-input-default: var(--x-size-font-text);
+  --x-size-line-height-input-default: var(--x-size-line-height-text);
+  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
+  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
+  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
 :root {
   --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7279,15 +7279,15 @@
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
 }
-:root {
-  --x-size-width-icon-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
-}
 
 .x-icon--xl {
   --x-size-width-icon-default: var(--x-size-width-icon-xl);
   --x-size-height-icon-default: var(--x-size-height-icon-xl);
 }
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
 :root {
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
@@ -7318,24 +7318,15 @@
   --x-size-width-icon-l: var(--x-size-base-06);
   --x-size-height-icon-l: var(--x-size-base-06);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
-}
-:root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
-}
 
 .x-icon--l {
   --x-size-width-icon-default: var(--x-size-width-icon-l);
   --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
+:root {
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7366,6 +7357,20 @@
   stroke: none;
   fill: var(--x-color-stroke-icon-default);
 }
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
+}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -7392,11 +7397,6 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
@@ -7410,6 +7410,38 @@
   --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);
+}
 :root {
   --x-size-margin-filter-children: 0;
   --x-size-padding-top-filter-children: 0;
@@ -7555,38 +7587,6 @@
     --x-number-font-weight-filter-count-default-selected
   );
 }
-:root {
-  --x-color-background-filter-default: transparent;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
-}
 :root {
   --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
   --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7636,39 +7636,6 @@
   --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
   --x-size-border-width-left-facet-header-line: 0;
 }
-:root {
-  --x-color-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);
@@ -7693,18 +7660,6 @@
     --x-size-border-width-left-facet-header-line
   );
 }
-:root {
-  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-padding-facet-header-card: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
-}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7832,6 +7787,51 @@
 .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
   margin-left: auto;
 }
+: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-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-padding-facet-header-card: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
+}
 :root {
   --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
@@ -7861,13 +7861,13 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
 
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
-:root {
-  --x-size-width-dropdown-xl: 282px;
-}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -7886,9 +7886,6 @@
   --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7932,6 +7929,16 @@
     --x-size-border-width-left-dropdown-list-pill
   );
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
+
+.x-dropdown.x-dropdown--m {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
+}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8019,13 +8026,6 @@
     --x-size-border-width-left-dropdown-list-line
   );
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
-
-.x-dropdown.x-dropdown--m {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
-}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -8109,19 +8109,6 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
-:root {
-  --x-size-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8377,6 +8364,19 @@
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
+:root {
+  --x-size-gap-dropdown-card: var(--x-size-base-03);
+  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+}
 
 .x-dropdown--card {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8417,6 +8417,16 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -8428,16 +8438,6 @@
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
-}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8476,16 +8476,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-color-background-button-primary: var(--x-color-background-button-default);
-  --x-color-border-button-primary: var(--x-color-border-button-default);
-  --x-color-text-button-primary: var(--x-color-text-button-default);
-  --x-size-border-width-button-primary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
-}
 :root {
   --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8521,6 +8511,16 @@
   --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
   --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
 }
+:root {
+  --x-color-background-button-primary: var(--x-color-background-button-default);
+  --x-color-border-button-primary: var(--x-color-border-button-default);
+  --x-color-text-button-primary: var(--x-color-text-button-default);
+  --x-size-border-width-button-primary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
+}
 
 .x-button--primary.x-button,
 .x-button--primary .x-button {
@@ -8539,6 +8539,13 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
+:root {
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -8554,13 +8561,6 @@
     --x-size-border-radius-bottom-left-button-pill
   );
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
-}
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
@@ -8611,13 +8611,6 @@
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
   --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8710,6 +8703,23 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --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 {
@@ -8735,16 +8745,6 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -8784,19 +8784,6 @@
 .x-badge-container {
   position: relative;
 }
-:root {
-  --x-color-base-lead: #243d48;
-  --x-color-base-auxiliary: #bfe1ec;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #0086b2;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8819,6 +8806,19 @@
   --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);