@empathyco/x-components 6.0.0-alpha.46 → 6.0.0-alpha.48

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

@@ -33,6 +33,7 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
+
 .x-static {
   position: static !important;
 }
@@ -52,7 +53,6 @@
 .x-sticky {
   position: sticky !important;
 }
-
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -3317,6 +3317,24 @@
 .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;
+}
+:root {
+  --x-color-text-secondary: var(--x-color-base-neutral-35);
+}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3360,42 +3378,9 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
-:root {
-  --x-color-text-secondary: var(--x-color-base-neutral-35);
-}
 .x-text--secondary {
   --x-color-text-default: var(--x-color-text-secondary);
 }
-.x-text--light.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
-}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -3436,20 +3421,20 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none;
 }
-.x-text--bold.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+.x-text--light.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
-.x-text--bold.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+.x-text--light.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
 }
-.x-text--bold.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+.x-text--light.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
 }
-.x-text--bold.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+.x-text--light.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
 }
-.x-text--bold.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+.x-text--light.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
 }
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
@@ -3556,6 +3541,21 @@
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+}
 .x-text--accent {
   --x-color-text-default: var(--x-color-text-accent);
 }
@@ -3672,52 +3672,6 @@
     --x-number-font-weight-tag-default-selected
   );
 }
-:root {
-  --x-color-background-tag-default: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default: var(--x-color-text-tag-default);
-  --x-color-text-tag-default: var(--x-color-text-default);
-  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
-  --x-size-border-width-tag-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-height-tag-default: var(--x-size-base-07);
-  --x-size-padding-right-tag-default: var(--x-size-base-04);
-  --x-size-padding-left-tag-default: var(--x-size-base-04);
-  --x-size-gap-tag-default: var(--x-size-base-02);
-  --x-font-family-tag-default: var(--x-font-family-text);
-  --x-size-font-tag-default: var(--x-size-font-text);
-  --x-size-line-height-tag-default: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
-  --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-default-selected
-  );
-}
 
 [dir="ltr"] .x-tag {
   border-left-width: var(--x-size-border-width-left-tag-default);
@@ -3893,6 +3847,52 @@
   );
   --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
 }
+:root {
+  --x-color-background-tag-default: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default: var(--x-color-text-tag-default);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+}
 :root {
   --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
@@ -3959,6 +3959,47 @@
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
 }
+:root {
+  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-group-matching-part-default: var(
+    --x-color-text-suggestion-matching-part-default
+  );
+  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
+  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
+  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
+  --x-size-border-width-suggestion-group-default: 0;
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-width-bottom-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-width-left-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-top-right-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
+}
 
 [dir="ltr"] .x-suggestion-group {
   padding-left: var(--x-size-padding-left-suggestion-group-default);
@@ -4035,60 +4076,19 @@
   border: none;
 }
 :root {
-  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-group-matching-part-default: var(
+  --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-background-suggestion-group-default: var(--x-color-background-suggestion-default);
-  --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
-  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
-  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
-  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
-  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
-  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
-  --x-size-border-width-suggestion-group-default: 0;
-  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-right-suggestion-group-default: var(
-    --x-size-border-width-suggestion-default
-  );
-  --x-size-border-width-bottom-suggestion-group-default: var(
-    --x-size-border-width-suggestion-default
-  );
-  --x-size-border-width-left-suggestion-group-default: var(
-    --x-size-border-width-suggestion-default
-  );
-  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-top-right-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-right-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-left-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
-}
-: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-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);
@@ -4165,12 +4165,6 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
-:root {
-  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
-  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
-}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4393,6 +4387,12 @@
     --x-color-text-suggestion-default-matching-curated
   );
 }
+:root {
+  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
+  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
+  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);
@@ -4500,14 +4500,6 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4529,6 +4521,36 @@
 .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);
+  --x-size-gap-row-03: var(--x-size-base-03);
+  --x-size-gap-row-04: var(--x-size-base-04);
+  --x-size-gap-row-05: var(--x-size-base-05);
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20);
+}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -4631,28 +4653,6 @@
 .x-row--gap-20 {
   --x-size-gap-row: var(--x-size-gap-row-20);
 }
-:root {
-  --x-size-gap-row-01: var(--x-size-base-01);
-  --x-size-gap-row-02: var(--x-size-base-02);
-  --x-size-gap-row-03: var(--x-size-base-03);
-  --x-size-gap-row-04: var(--x-size-base-04);
-  --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06);
-  --x-size-gap-row-07: var(--x-size-base-07);
-  --x-size-gap-row-08: var(--x-size-base-08);
-  --x-size-gap-row-09: var(--x-size-base-09);
-  --x-size-gap-row-10: var(--x-size-base-10);
-  --x-size-gap-row-11: var(--x-size-base-11);
-  --x-size-gap-row-12: var(--x-size-base-12);
-  --x-size-gap-row-13: var(--x-size-base-13);
-  --x-size-gap-row-14: var(--x-size-base-14);
-  --x-size-gap-row-15: var(--x-size-base-15);
-  --x-size-gap-row-16: var(--x-size-base-16);
-  --x-size-gap-row-17: var(--x-size-base-17);
-  --x-size-gap-row-18: var(--x-size-base-18);
-  --x-size-gap-row-19: var(--x-size-base-19);
-  --x-size-gap-row-20: var(--x-size-base-20);
-}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
@@ -4879,13 +4879,22 @@
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
 
 .x-result.x-result--card {
   overflow: hidden;
   --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
 }
 :root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+  --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-size-height-progress-bar-line-default: var(--x-size-base-02);
@@ -4912,15 +4921,6 @@
   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;
@@ -4965,6 +4965,24 @@
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
   --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
 }
+:root {
+  --x-size-border-radius-picture-default: 0;
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
+  --x-color-background-picture-default: transparent;
+  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
+  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
+  --x-object-fit-picture-default: contain;
+  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
+  --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
+  --x-mix-blend-mode-picture-default: normal;
+  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
+  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
+}
 
 .x-picture {
   display: block;
@@ -5003,28 +5021,16 @@
 .x-picture-image--placeholder > path {
   fill: var(--x-color-fill-picture-placeholder-path-default) !important;
 }
-:root {
-  --x-size-border-radius-picture-default: 0;
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
-  --x-color-background-picture-default: transparent;
-  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
-  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
-  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
-  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
-  --x-object-fit-picture-default: contain;
-  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
-  --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
-  --x-mix-blend-mode-picture-default: normal;
-  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
-  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
-}
 :root {
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
+:root {
+  --x-color-background-picture-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);
@@ -5051,12 +5057,6 @@
   --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
   --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
 }
-:root {
-  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
-  --x-mix-blend-mode-picture-colored: multiply;
-  --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);
-}
 
 .x-picture--colored.x-picture {
   --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -5172,6 +5172,86 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
+:root {
+  --x-color-background-option-list-button-default: transparent;
+  --x-color-border-option-list-button-default: transparent;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
+  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
 
 .x-option-list {
   display: inline-flex;
@@ -5274,95 +5354,15 @@
   --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-option-list__item .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-hover
   );
-  --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-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
 }
 :root {
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5574,6 +5574,27 @@
   --x-size-font-message-default: var(--x-size-font-title3);
   --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
 }
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
 
 [dir="ltr"] .x-message {
   border-left-width: var(--x-size-border-width-left-message-default);
@@ -5624,26 +5645,21 @@
 .x-message > p {
   margin: 0;
 }
+/* @deprecated */
 :root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+  --x-size-padding-list-01: var(--x-size-base-01);
+  --x-size-padding-list-02: var(--x-size-base-02);
+  --x-size-padding-list-03: var(--x-size-base-03);
+  --x-size-padding-list-04: var(--x-size-base-04);
+  --x-size-padding-list-05: var(--x-size-base-05);
+  --x-size-padding-list-06: var(--x-size-base-06);
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13);
 }
 /* @deprecated */
 :root {
@@ -5985,44 +6001,6 @@
     margin-right: var(--x-size-gap-list-13);
   }
 }
-/* @deprecated */
-:root {
-  --x-size-padding-list-01: var(--x-size-base-01);
-  --x-size-padding-list-02: var(--x-size-base-02);
-  --x-size-padding-list-03: var(--x-size-base-03);
-  --x-size-padding-list-04: var(--x-size-base-04);
-  --x-size-padding-list-05: var(--x-size-base-05);
-  --x-size-padding-list-06: var(--x-size-base-06);
-  --x-size-padding-list-07: var(--x-size-base-07);
-  --x-size-padding-list-08: var(--x-size-base-08);
-  --x-size-padding-list-09: var(--x-size-base-09);
-  --x-size-padding-list-10: var(--x-size-base-10);
-  --x-size-padding-list-11: var(--x-size-base-11);
-  --x-size-padding-list-12: var(--x-size-base-12);
-  --x-size-padding-list-13: var(--x-size-base-13);
-}
-:root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --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-size-gap-list-01: var(--x-size-base-01);
   --x-size-gap-list-02: var(--x-size-base-02);
@@ -6545,6 +6523,36 @@
     margin-bottom: var(--x-size-gap-list-20);
   }
 }
+:root {
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
+}
+:root {
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --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;
@@ -6694,12 +6702,13 @@
   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;
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
 :root {
   --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6727,15 +6736,6 @@
     --x-size-border-radius-bottom-left-input-group-pill
   );
 }
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
 :root {
   --x-size-padding-left-input-group-line: 0;
   --x-size-padding-right-input-group-line: 0;
@@ -6835,6 +6835,49 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
+:root {
+  --x-color-background-input-group-default: var(--x-color-background-input-default);
+  --x-color-border-input-group-default: var(--x-color-border-input-default);
+  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
+  --x-color-text-input-group-default: var(--x-color-text-input-default);
+  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
+  --x-size-height-input-group-default: var(--x-size-height-input-default);
+  --x-size-gap-input-group-default: var(--x-size-base-03);
+  --x-size-padding-left-input-group-default: var(--x-size-base-06);
+  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
+  --x-size-padding-input-group-default-action: var(--x-size-base-03);
+  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-font-family-input-group-default: var(--x-font-family-input-default);
+  --x-size-font-input-group-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
+  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
+  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
+  --x-size-line-height-input-group-placeholder-default: var(
+    --x-size-line-height-input-group-default
+  );
+  --x-number-font-weight-input-group-placeholder-default: var(
+    --x-number-font-weight-input-group-default
+  );
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+}
 
 [dir="ltr"] .x-input-group {
   border-right-width: var(--x-size-border-width-right-input-group-default);
@@ -6954,63 +6997,20 @@
 .x-input-group > .x-input-group__action {
   box-sizing: border-box;
   padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
-  min-width: var(--x-size-height-input-group-default);
-  border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
-}
-[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
-  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
-}
-[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
-  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
-}
-[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
-  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
-}
-[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
-  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
-}
-:root {
-  --x-color-background-input-group-default: var(--x-color-background-input-default);
-  --x-color-border-input-group-default: var(--x-color-border-input-default);
-  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
-  --x-color-text-input-group-default: var(--x-color-text-input-default);
-  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
-  --x-size-height-input-group-default: var(--x-size-height-input-default);
-  --x-size-gap-input-group-default: var(--x-size-base-03);
-  --x-size-padding-left-input-group-default: var(--x-size-base-06);
-  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
-  --x-size-padding-input-group-default-action: var(--x-size-base-03);
-  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-font-family-input-group-default: var(--x-font-family-input-default);
-  --x-size-font-input-group-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
-  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
-  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
-  --x-size-line-height-input-group-placeholder-default: var(
-    --x-size-line-height-input-group-default
-  );
-  --x-number-font-weight-input-group-placeholder-default: var(
-    --x-number-font-weight-input-group-default
-  );
-  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+  min-width: var(--x-size-height-input-group-default);
+  border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
+  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
+  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
+  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
+  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
 }
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
@@ -7140,6 +7140,34 @@
   --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-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);
+}
 
 [dir="ltr"] .x-input {
   padding-left: var(--x-size-padding-left-input-default);
@@ -7220,34 +7248,6 @@
   font-weight: var(--x-number-font-weight-input-placeholder-default);
   line-height: var(--x-size-line-height-input-placeholder-default);
 }
-:root {
-  --x-color-background-input-default: var(--x-color-base-neutral-100);
-  --x-color-border-input-default: var(--x-color-base-neutral-70);
-  --x-color-border-input-default-focus: var(--x-color-base-lead);
-  --x-color-text-input-default: var(--x-color-text-default);
-  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
-  --x-size-border-width-input-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-height-input-default: var(--x-size-base-07);
-  --x-size-padding-right-input-default: var(--x-size-base-04);
-  --x-size-padding-left-input-default: var(--x-size-base-04);
-  --x-font-family-input-default: var(--x-font-family-text);
-  --x-size-font-input-default: var(--x-size-font-text);
-  --x-size-line-height-input-default: var(--x-size-line-height-text);
-  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
-  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
-  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
-}
 :root {
   --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7279,14 +7279,22 @@
   --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);
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
+:root {
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
 }
 :root {
   --x-size-width-icon-s: var(--x-size-base-03);
@@ -7297,10 +7305,6 @@
   --x-size-width-icon-default: var(--x-size-width-icon-s);
   --x-size-height-icon-default: var(--x-size-height-icon-s);
 }
-:root {
-  --x-size-width-icon-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7310,10 +7314,6 @@
   --x-size-width-icon-default: var(--x-size-width-icon-m);
   --x-size-height-icon-default: var(--x-size-height-icon-m);
 }
-:root {
-  --x-size-width-icon-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
-}
 :root {
   --x-size-width-icon-l: var(--x-size-base-06);
   --x-size-height-icon-l: var(--x-size-base-06);
@@ -7371,11 +7371,6 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 
 .x-grid-list {
   margin: 0;
@@ -7398,11 +7393,9 @@
   min-width: var(--x-size-min-width-grid-item);
 }
 :root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
+  --x-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),
@@ -7417,6 +7410,13 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
 
 .x-hierarchical-filter-container {
   list-style: none;
@@ -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-secondary: transparent;
+  --x-color-border-button-secondary: var(--x-color-border-button-default);
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8448,16 +8458,6 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
-:root {
-  --x-color-background-button-secondary: transparent;
-  --x-color-border-button-secondary: var(--x-color-border-button-default);
-  --x-color-text-button-secondary: var(--x-color-border-button-default);
-  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
-}
 
 .x-button--secondary.x-button,
 .x-button--secondary .x-button {
@@ -8539,13 +8539,6 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
-}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -8562,31 +8555,39 @@
   );
 }
 :root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
+  --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;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-
-.x-button--ghost.x-button,
-.x-button--ghost .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-ghost);
-  --x-color-border-button-default: var(--x-color-border-button-ghost);
-  --x-color-text-button-default: var(--x-color-text-button-ghost);
-}
-
-.x-button--ghost.x-button--ghost-start.x-button,
-.x-button--ghost.x-button--ghost-start .x-button {
-  --x-size-padding-left-button-default: 0;
-}
-
-.x-button--ghost.x-button--ghost-end.x-button,
-.x-button--ghost.x-button--ghost-end .x-button {
-  --x-size-padding-right-button-default: 0;
+:root {
+  --x-color-background-button-default: var(--x-color-base-lead);
+  --x-color-border-button-default: var(--x-color-background-button-default);
+  --x-color-text-button-default: var(--x-color-base-neutral-100);
+  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-width-button-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
+  --x-size-height-button-default: var(--x-size-base-08);
+  --x-size-padding-right-button-default: var(--x-size-base-05);
+  --x-size-padding-left-button-default: var(--x-size-base-05);
+  --x-size-gap-button-default: var(--x-size-base-03);
+  --x-font-family-button-default: var(--x-font-family-text);
+  --x-size-font-button-default: var(--x-size-font-text);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
@@ -8674,34 +8675,26 @@
   }
 }
 :root {
-  --x-color-background-button-default: var(--x-color-base-lead);
-  --x-color-border-button-default: var(--x-color-background-button-default);
-  --x-color-text-button-default: var(--x-color-base-neutral-100);
-  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-width-button-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
-  --x-size-height-button-default: var(--x-size-base-08);
-  --x-size-padding-right-button-default: var(--x-size-base-05);
-  --x-size-padding-left-button-default: var(--x-size-base-05);
-  --x-size-gap-button-default: var(--x-size-base-03);
-  --x-font-family-button-default: var(--x-font-family-text);
-  --x-size-font-button-default: var(--x-size-font-text);
-  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text);
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-: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--ghost.x-button,
+.x-button--ghost .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-ghost);
+  --x-color-border-button-default: var(--x-color-border-button-ghost);
+  --x-color-text-button-default: var(--x-color-text-button-ghost);
+}
+
+.x-button--ghost.x-button--ghost-start.x-button,
+.x-button--ghost.x-button--ghost-start .x-button {
+  --x-size-padding-left-button-default: 0;
+}
+
+.x-button--ghost.x-button--ghost-end.x-button,
+.x-button--ghost.x-button--ghost-end .x-button {
+  --x-size-padding-right-button-default: 0;
 }
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8725,6 +8718,23 @@
     --x-size-border-radius-bottom-left-button-card
   );
 }
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 :root {
   --x-color-background-badge-default: var(--x-color-base-neutral-10);
   --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8774,16 +8784,6 @@
 .x-badge-container {
   position: relative;
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;