@empathyco/x-components 6.0.0-alpha.76 → 6.0.0-alpha.77

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

@@ -1,4 +1,5 @@
 
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -3356,6 +3357,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;
 }
@@ -3399,21 +3415,6 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
@@ -3595,9 +3596,6 @@
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
-.x-text--accent {
-  --x-color-text-default: var(--x-color-text-accent);
-}
 :root {
   --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3605,6 +3603,9 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
+.x-text--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);
@@ -3635,18 +3636,6 @@
   --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
   --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-color-background-tag-ghost: transparent;
-  --x-color-border-tag-ghost: transparent;
-  --x-color-background-tag-selected-ghost: transparent;
-  --x-color-border-tag-selected-ghost: transparent;
-  --x-color-background-tag-curated-ghost: transparent;
-  --x-color-border-tag-curated-ghost: transparent;
-  --x-color-background-tag-curated-selected-ghost: transparent;
-  --x-color-border-tag-curated-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
-}
 
 .x-tag--ghost.x-tag,
 .x-tag--ghost .x-tag {
@@ -3665,6 +3654,18 @@
     --x-number-font-weight-tag-curated-selected-ghost
   );
 }
+:root {
+  --x-color-background-tag-ghost: transparent;
+  --x-color-border-tag-ghost: transparent;
+  --x-color-background-tag-selected-ghost: transparent;
+  --x-color-border-tag-selected-ghost: transparent;
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3998,96 +3999,6 @@
   --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-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-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -4294,6 +4205,96 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
+:root {
+  --x-string-align-items-suggestion-default: center;
+  --x-color-text-suggestion-default: var(--x-color-text-default);
+  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
+  --x-color-background-suggestion-default: transparent;
+  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(
+    --x-color-text-suggestion-matching-part-default
+  );
+  --x-color-text-suggestion-default-matching-curated: var(
+    --x-color-text-suggestion-default-matching
+  );
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
+  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
+  --x-size-padding-right-suggestion-default: 0;
+  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
+  --x-size-padding-left-suggestion-default: 0;
+  --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-top-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-right-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-font-family-suggestion-default: var(--x-font-family-text);
+  --x-size-font-suggestion-default: var(--x-size-font-text);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
+  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-matching: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
+  --x-text-transform-suggestion-filter-default: none;
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(
+    --x-font-family-suggestion-matching-part-default
+  );
+  --x-size-font-suggestion-matching-part-default-curated: var(
+    --x-size-font-suggestion-matching-part-default
+  );
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+    --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+    --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(
+    --x-font-family-suggestion-default-matching
+  );
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+    --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+    --x-number-font-weight-suggestion-default-matching
+  );
+}
 
 [dir="ltr"] .x-suggestion {
   text-align: left;
@@ -4426,12 +4427,6 @@
     --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);
@@ -4487,11 +4482,25 @@
   pointer-events: all;
 }
 :root {
-  --x-string-overflow-scroll: auto;
-  --x-color-background-scroll-bar: transparent;
-  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
-  --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+  --x-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-overflow-scroll: auto;
+  --x-color-background-scroll-bar: transparent;
+  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
+  --x-color-background-scroll-bar-hover: transparent;
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
 }
 :root {
   --x-string-overflow-scroll: auto;
@@ -4539,14 +4548,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 {
@@ -4700,6 +4701,23 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
+  --x-size-border-width-result-picture-default: 0;
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
@@ -4901,23 +4919,6 @@
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
@@ -5090,12 +5091,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);
@@ -5110,26 +5105,10 @@
   --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
 }
 :root {
-  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
-:root {
-  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
-
-.x-picture--card.x-picture {
-  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
+  --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-option-list-button-default: transparent;
@@ -5211,6 +5190,13 @@
   --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-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5403,6 +5389,21 @@
   -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-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
+
+.x-picture--card.x-picture {
+  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
+}
 :root {
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
   --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -6749,15 +6750,6 @@
   );
   --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
 
 .x-input-group--pill.x-input-group,
 .x-input-group--pill .x-input-group {
@@ -6775,6 +6767,15 @@
     --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;
@@ -6874,6 +6875,49 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
+:root {
+  --x-color-background-input-group-default: var(--x-color-background-input-default);
+  --x-color-border-input-group-default: var(--x-color-border-input-default);
+  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
+  --x-color-text-input-group-default: var(--x-color-text-input-default);
+  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
+  --x-size-height-input-group-default: var(--x-size-height-input-default);
+  --x-size-gap-input-group-default: var(--x-size-base-03);
+  --x-size-padding-left-input-group-default: var(--x-size-base-06);
+  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
+  --x-size-padding-input-group-default-action: var(--x-size-base-03);
+  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-font-family-input-group-default: var(--x-font-family-input-default);
+  --x-size-font-input-group-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
+  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
+  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
+  --x-size-line-height-input-group-placeholder-default: var(
+    --x-size-line-height-input-group-default
+  );
+  --x-number-font-weight-input-group-placeholder-default: var(
+    --x-number-font-weight-input-group-default
+  );
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+}
 
 [dir="ltr"] .x-input-group {
   border-right-width: var(--x-size-border-width-right-input-group-default);
@@ -7017,49 +7061,6 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
-:root {
-  --x-color-background-input-group-default: var(--x-color-background-input-default);
-  --x-color-border-input-group-default: var(--x-color-border-input-default);
-  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
-  --x-color-text-input-group-default: var(--x-color-text-input-default);
-  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
-  --x-size-height-input-group-default: var(--x-size-height-input-default);
-  --x-size-gap-input-group-default: var(--x-size-base-03);
-  --x-size-padding-left-input-group-default: var(--x-size-base-06);
-  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
-  --x-size-padding-input-group-default-action: var(--x-size-base-03);
-  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-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);
-}
 :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);
@@ -7103,6 +7104,13 @@
   --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);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}
 
 .x-input--pill.x-input,
 .x-input--pill .x-input {
@@ -7122,35 +7130,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
-}
-:root {
-  --x-size-padding-top-input-line: var(--x-size-base-03);
-  --x-size-padding-right-input-line: 0;
-  --x-size-padding-bottom-input-line: var(--x-size-base-03);
-  --x-size-padding-left-input-line: 0;
-  --x-size-border-width-top-input-line: 0;
-  --x-size-border-width-right-input-line: 0;
-  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
-  --x-size-border-width-left-input-line: 0;
-}
-
-.x-input--line .x-input,
-.x-input--line.x-input {
-  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
-  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
-  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
-  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
-}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7179,6 +7158,35 @@
   --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;
+  --x-size-padding-bottom-input-line: var(--x-size-base-03);
+  --x-size-padding-left-input-line: 0;
+  --x-size-border-width-top-input-line: 0;
+  --x-size-border-width-right-input-line: 0;
+  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
+  --x-size-border-width-left-input-line: 0;
+}
+
+.x-input--line .x-input,
+.x-input--line.x-input {
+  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
+  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
+  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
+  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
+}
+:root {
+  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7294,13 +7302,6 @@
   --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
   --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
 }
-:root {
-  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
-}
 
 .x-input--card.x-input,
 .x-input--card .x-input {
@@ -7357,15 +7358,6 @@
   --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);
@@ -7384,6 +7376,15 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
 
 .x-icon {
   stroke: var(--x-color-stroke-icon-default);
@@ -7693,37 +7694,28 @@
   --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-color-border-facet-header-line: var(--x-color-base-neutral-10);
+  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-left-facet-header-line: 0;
+}
+
+.x-facet--line.x-facet,
+.x-facet--line .x-facet {
+  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
+  --x-size-border-width-right-facet-header-default: var(
+    --x-size-border-width-right-facet-header-line
+  );
   --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-facet-header-default
+    --x-size-border-width-bottom-facet-header-line
+  );
+  --x-size-border-width-left-facet-header-default: var(
+    --x-size-border-width-left-facet-header-line
   );
-  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-right-facet-header-default: 0;
-  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-left-facet-header-default: 0;
-  --x-size-gap-facet-header-default: var(--x-size-base-03);
-  --x-font-family-facet-default: var(--x-font-family-title3);
-  --x-size-font-facet-default: var(--x-size-font-title3);
-  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
 :root {
   --x-color-background-facet-default: transparent;
@@ -7852,6 +7844,39 @@
 .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);
@@ -7891,32 +7916,15 @@
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
 }
 :root {
-  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
-  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-line: 0;
-  --x-size-border-width-right-facet-header-line: 0;
-  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-left-facet-header-line: 0;
-}
-
-.x-facet--line.x-facet,
-.x-facet--line .x-facet {
-  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
-  --x-size-border-width-right-facet-header-default: var(
-    --x-size-border-width-right-facet-header-line
-  );
-  --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-bottom-facet-header-line
-  );
-  --x-size-border-width-left-facet-header-default: var(
-    --x-size-border-width-left-facet-header-line
-  );
+  --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-s: 74px;
 }
@@ -7990,13 +7998,6 @@
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
 }
-: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-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8087,13 +8088,13 @@
 :root {
   --x-size-width-dropdown-l: 202px;
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 
 .x-dropdown.x-dropdown--l {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8506,13 +8507,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-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8541,6 +8535,13 @@
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
+:root {
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -8569,7 +8570,27 @@
   --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 {
+  --x-color-background-button-default: var(--x-color-background-button-primary);
+  --x-color-border-button-default: var(--x-color-border-button-primary);
+  --x-color-text-button-default: var(--x-color-text-button-primary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
+}
 :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);
@@ -8863,25 +8884,4 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
-}
-:root {
-  --x-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 {
-  --x-color-background-button-default: var(--x-color-background-button-primary);
-  --x-color-border-button-default: var(--x-color-border-button-primary);
-  --x-color-text-button-default: var(--x-color-text-button-primary);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
 }