@empathyco/x-components 6.0.0-alpha.24 → 6.0.0-alpha.25

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

@@ -1022,49 +1022,6 @@
 .x-font-weight--bold {
   font-weight: var(--x-number-font-weight-base-bold) !important;
 }
-.x-font-color--lead {
-  color: var(--x-color-base-lead) !important;
-}
-
-.x-font-color--auxiliary {
-  color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-font-color--neutral-10 {
-  color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-font-color--neutral-35 {
-  color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-font-color--neutral-70 {
-  color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-font-color--neutral-95 {
-  color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-font-color--neutral-100 {
-  color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-font-color--accent {
-  color: var(--x-color-base-accent) !important;
-}
-
-.x-font-color--enable {
-  color: var(--x-color-base-enable) !important;
-}
-
-.x-font-color--disable {
-  color: var(--x-color-base-disable) !important;
-}
-
-.x-font-color--transparent {
-  color: var(--x-color-base-transparent) !important;
-}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -1145,6 +1102,49 @@
   font-size: var(--x-size-base-20) !important;
   line-height: 1.5;
 }
+.x-font-color--lead {
+  color: var(--x-color-base-lead) !important;
+}
+
+.x-font-color--auxiliary {
+  color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-font-color--neutral-10 {
+  color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-font-color--neutral-35 {
+  color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-font-color--neutral-70 {
+  color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-font-color--neutral-95 {
+  color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-font-color--neutral-100 {
+  color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important;
+}
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important;
+}
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important;
+}
+
+.x-font-color--transparent {
+  color: var(--x-color-base-transparent) !important;
+}
 .x-flex-1 {
   flex: 1 1 0% !important;
 }
@@ -3566,6 +3566,13 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
+:root {
+  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
+}
 
 .x-tag--pill.x-tag,
 .x-tag--pill .x-tag {
@@ -3577,13 +3584,6 @@
   );
   --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
 }
-:root {
-  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
-}
 :root {
   --x-color-background-tag-ghost: transparent;
   --x-color-border-tag-ghost: transparent;
@@ -4806,9 +4806,6 @@
   --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);
-}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4882,6 +4879,9 @@
 :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;
@@ -4896,15 +4896,6 @@
   --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);
-  --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;
-}
 
 .x-progress-bar {
   display: inline-block;
@@ -4921,6 +4912,15 @@
   border-radius: var(--x-size-border-radius-progress-bar-default);
   background-color: var(--x-color-background-progress-bar-line-default);
 }
+:root {
+  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
+  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
+  --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
+  --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
+  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-progress-bar-default: 0;
+}
 :root {
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
@@ -5077,6 +5077,13 @@
   --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);
@@ -5085,13 +5092,6 @@
   --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
   --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
 }
-:root {
-  --x-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;
@@ -7021,13 +7021,6 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
-}
 :root {
   --x-size-border-radius-input-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);
@@ -7080,6 +7073,13 @@
   --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
   --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
 }
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7305,15 +7305,6 @@
   --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-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
-}
-
-.x-icon--m {
-  --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-l: var(--x-size-base-06);
   --x-size-height-icon-l: var(--x-size-base-06);
@@ -7327,6 +7318,24 @@
   --x-size-width-icon-default: var(--x-size-width-icon-l);
   --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
+:root {
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
+}
+
+.x-icon--m {
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+}
+: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-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7357,15 +7366,6 @@
   stroke: none;
   fill: var(--x-color-stroke-icon-default);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
-}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -7474,6 +7474,47 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
+:root {
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
+
+.x-facet--outlined.x-facet,
+.x-facet--outlined .x-facet {
+  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
+  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
+  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
+  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7587,47 +7628,6 @@
     --x-number-font-weight-filter-count-default-selected
   );
 }
-:root {
-  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
-:root {
-  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
-
-.x-facet--outlined.x-facet,
-.x-facet--outlined .x-facet {
-  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
-  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
-  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
-  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
-  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
-}
 :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);
@@ -7886,6 +7886,24 @@
   --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
+
+.x-dropdown.x-dropdown--m {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
+}
+:root {
+  --x-size-gap-dropdown-pill: var(--x-size-base-03);
+  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+}
 
 .x-dropdown--pill {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -7921,24 +7939,6 @@
     --x-size-border-width-left-dropdown-list-pill
   );
 }
-:root {
-  --x-size-gap-dropdown-pill: var(--x-size-base-03);
-  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-}
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
-
-.x-dropdown.x-dropdown--m {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
-}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8029,6 +8029,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-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);
@@ -8103,11 +8110,60 @@
   --x-string-overflow-dropdown-list-default: hidden;
 }
 :root {
-  --x-size-width-dropdown-l: 202px;
+  --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-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.x-dropdown--l {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
+.x-dropdown--card {
+  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-left-dropdown-default: var(
+    --x-size-border-radius-top-left-dropdown-card
+  );
+  --x-size-border-radius-top-right-dropdown-default: var(
+    --x-size-border-radius-top-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-bottom-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(
+    --x-size-border-radius-bottom-left-dropdown-card
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-top-dropdown-list-default: var(
+    --x-size-border-width-top-dropdown-list-card
+  );
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-right-dropdown-list-card
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-bottom-dropdown-list-card
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-left-dropdown-list-card
+  );
 }
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
@@ -8351,62 +8407,6 @@
 [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
   left: 0;
 }
-: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-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);
-  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-left-dropdown-default: var(
-    --x-size-border-radius-top-left-dropdown-card
-  );
-  --x-size-border-radius-top-right-dropdown-default: var(
-    --x-size-border-radius-top-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-bottom-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(
-    --x-size-border-radius-bottom-left-dropdown-card
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-top-dropdown-list-default: var(
-    --x-size-border-width-top-dropdown-list-card
-  );
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-right-dropdown-list-card
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-bottom-dropdown-list-card
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-left-dropdown-list-card
-  );
-}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8448,13 +8448,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);
@@ -8483,6 +8476,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 {
@@ -8611,6 +8611,13 @@
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
   --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,13 +8710,6 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
 
 .x-button--card.x-button,
 .x-button--card .x-button {
@@ -8735,6 +8735,16 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -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;
@@ -8806,6 +8806,13 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
+: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-base-lead: #243d48;
   --x-color-base-auxiliary: #bfe1ec;
@@ -8818,11 +8825,4 @@
   --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;
 }