@empathyco/x-components 6.0.0-alpha.45 → 6.0.0-alpha.47

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

@@ -52,7 +52,6 @@
 .x-sticky {
   position: sticky !important;
 }
-
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -3317,21 +3316,6 @@
 .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;
 }
@@ -3375,6 +3359,21 @@
 .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);
 }
@@ -3566,18 +3565,6 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
-:root {
-  --x-color-background-tag-ghost: transparent;
-  --x-color-border-tag-ghost: transparent;
-  --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-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);
@@ -3608,6 +3595,18 @@
   --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 {
@@ -4500,6 +4499,14 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4521,14 +4528,6 @@
 .x-row--padding-06 {
   --x-size-padding-row: var(--x-size-padding-row-06);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -5077,6 +5076,21 @@
   --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);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5157,21 +5171,6 @@
   --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);
-}
-
-.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-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5661,6 +5660,22 @@
   --x-size-padding-list-12: var(--x-size-base-12);
   --x-size-padding-list-13: var(--x-size-base-13);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-list-01: var(--x-size-base-01);
+  --x-size-padding-list-02: var(--x-size-base-02);
+  --x-size-padding-list-03: var(--x-size-base-03);
+  --x-size-padding-list-04: var(--x-size-base-04);
+  --x-size-padding-list-05: var(--x-size-base-05);
+  --x-size-padding-list-06: var(--x-size-base-06);
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13);
+}
 
 /* @deprecated */
 [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5985,22 +6000,6 @@
     margin-right: var(--x-size-gap-list-13);
   }
 }
-/* @deprecated */
-:root {
-  --x-size-padding-list-01: var(--x-size-base-01);
-  --x-size-padding-list-02: var(--x-size-base-02);
-  --x-size-padding-list-03: var(--x-size-base-03);
-  --x-size-padding-list-04: var(--x-size-base-04);
-  --x-size-padding-list-05: var(--x-size-base-05);
-  --x-size-padding-list-06: var(--x-size-base-06);
-  --x-size-padding-list-07: var(--x-size-base-07);
-  --x-size-padding-list-08: var(--x-size-base-08);
-  --x-size-padding-list-09: var(--x-size-base-09);
-  --x-size-padding-list-10: var(--x-size-base-10);
-  --x-size-padding-list-11: var(--x-size-base-11);
-  --x-size-padding-list-12: var(--x-size-base-12);
-  --x-size-padding-list-13: var(--x-size-base-13);
-}
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
   --x-size-gap-list-02: var(--x-size-base-02);
@@ -6835,15 +6834,6 @@
   );
   --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);
-  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-bottom-right-input-group-card: var(
-    --x-size-border-radius-input-group-card
-  );
-  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
-}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7030,6 +7020,15 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
+:root {
+  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-bottom-right-input-group-card: var(
+    --x-size-border-radius-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+}
 
 .x-input-group--card.x-input-group,
 .x-input-group--card .x-input-group {
@@ -7090,6 +7089,28 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
+:root {
+  --x-size-padding-top-input-line: var(--x-size-base-03);
+  --x-size-padding-right-input-line: 0;
+  --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);
@@ -7118,28 +7139,6 @@
   --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-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7292,15 +7291,15 @@
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
 }
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
 
 .x-icon--s {
   --x-size-width-icon-default: var(--x-size-width-icon-s);
   --x-size-height-icon-default: var(--x-size-height-icon-s);
 }
-:root {
-  --x-size-width-icon-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7336,15 +7335,6 @@
   --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);
@@ -7371,6 +7361,20 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
+}
 
 .x-grid-list {
   margin: 0;
@@ -7392,11 +7396,6 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
@@ -7410,38 +7409,6 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
-:root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
-}
-
-.x-hierarchical-filter-container {
-  list-style: none;
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-left-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-left-filter-children);
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-right-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-right-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  margin: var(--x-size-margin-filter-children);
-  padding-top: var(--x-size-padding-top-filter-children);
-  padding-bottom: var(--x-size-padding-bottom-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter-container,
-.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
-  width: 100%;
-}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7474,6 +7441,38 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
+
+.x-hierarchical-filter-container {
+  list-style: none;
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-left-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-left-filter-children);
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-right-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-right-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  margin: var(--x-size-margin-filter-children);
+  padding-top: var(--x-size-padding-top-filter-children);
+  padding-bottom: var(--x-size-padding-bottom-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter-container,
+.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
+  width: 100%;
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7832,6 +7831,18 @@
   --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
   --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
 }
+:root {
+  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-padding-facet-header-card: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
+}
 
 .x-facet--card.x-facet,
 .x-facet--card .x-facet {
@@ -7846,21 +7857,6 @@
   --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
 }
-:root {
-  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-padding-facet-header-card: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
-}
-:root {
-  --x-size-width-dropdown-xl: 282px;
-}
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
@@ -7868,6 +7864,9 @@
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -7932,12 +7931,36 @@
 :root {
   --x-size-width-dropdown-m: 130px;
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
 
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
 }
 :root {
-  --x-size-width-dropdown-m: 130px;
+  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
+  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-item-line: 0;
+  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-item-line: 0;
+  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-toggle-line: 0;
+  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-line: 0;
+  --x-size-border-width-right-dropdown-toggle-line: 0;
+  --x-size-border-width-bottom-dropdown-toggle-line: var(
+    --x-size-border-width-dropdown-toggle-line
+  );
+  --x-size-border-width-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-list-line: 0;
+  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
@@ -8002,30 +8025,6 @@
     --x-size-border-width-left-dropdown-list-line
   );
 }
-:root {
-  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
-  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-item-line: 0;
-  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-item-line: 0;
-  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-toggle-line: 0;
-  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-line: 0;
-  --x-size-border-width-right-dropdown-toggle-line: 0;
-  --x-size-border-width-bottom-dropdown-toggle-line: var(
-    --x-size-border-width-dropdown-toggle-line
-  );
-  --x-size-border-width-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-list-line: 0;
-  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -8109,19 +8108,6 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
-:root {
-  --x-size-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8377,6 +8363,19 @@
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
+:root {
+  --x-size-gap-dropdown-card: var(--x-size-base-03);
+  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+}
 
 .x-dropdown--card {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8417,27 +8416,6 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
-}
-
-.x-button--tertiary.x-button,
-.x-button--tertiary .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-tertiary);
-  --x-color-border-button-default: var(--x-color-border-button-tertiary);
-  --x-color-text-button-default: var(--x-color-text-button-tertiary);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
-}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8501,6 +8479,7 @@
   --x-size-padding-left-button-default: 0;
   --x-size-padding-right-button-default: 0;
 }
+
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8539,6 +8518,13 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
+:root {
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -8554,13 +8540,6 @@
     --x-size-border-radius-bottom-left-button-pill
   );
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
-}
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
@@ -8784,19 +8763,6 @@
 .x-badge-container {
   position: relative;
 }
-:root {
-  --x-color-base-lead: #243d48;
-  --x-color-base-auxiliary: #bfe1ec;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #0086b2;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8819,10 +8785,44 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
+:root {
+  --x-color-base-lead: #243d48;
+  --x-color-base-auxiliary: #bfe1ec;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #0086b2;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-border-radius-base-none: 0;
   --x-size-border-radius-base-s: var(--x-size-base-02);
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
+}
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
+
+.x-button--tertiary.x-button,
+.x-button--tertiary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-tertiary);
+  --x-color-border-button-default: var(--x-color-border-button-tertiary);
+  --x-color-text-button-default: var(--x-color-text-button-tertiary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }