@empathyco/x-components 6.0.0-alpha.55 → 6.0.0-alpha.56

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

@@ -34,25 +34,6 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
-.x-static {
-  position: static !important;
-}
-
-.x-fixed {
-  position: fixed !important;
-}
-
-.x-absolute {
-  position: absolute !important;
-}
-
-.x-relative {
-  position: relative !important;
-}
-
-.x-sticky {
-  position: sticky !important;
-}
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -956,6 +937,29 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -990,29 +994,6 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
-}
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
-}
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
-}
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
-}
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
-}
-
-.x-line-height--loose {
-  line-height: 2 !important;
-}
 .x-font-weight--light {
   font-weight: var(--x-number-font-weight-base-light) !important;
 }
@@ -1145,6 +1126,25 @@
 .x-font-color--transparent {
   color: var(--x-color-base-transparent) !important;
 }
+.x-static {
+  position: static !important;
+}
+
+.x-fixed {
+  position: fixed !important;
+}
+
+.x-absolute {
+  position: absolute !important;
+}
+
+.x-relative {
+  position: relative !important;
+}
+
+.x-sticky {
+  position: sticky !important;
+}
 .x-flex-1 {
   flex: 1 1 0% !important;
 }
@@ -3317,6 +3317,21 @@
 .x-border-color--transparent {
   border-color: var(--x-color-base-transparent) !important;
 }
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3360,20 +3375,20 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
+.x-text--light.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
+.x-text--light.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
 }
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
+.x-text--light.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
 }
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
+.x-text--light.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
 }
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
+.x-text--light.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
 }
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
@@ -3381,20 +3396,20 @@
 .x-text--secondary {
   --x-color-text-default: var(--x-color-text-secondary);
 }
-.x-text--light.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
 }
-.x-text--light.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
 }
-.x-text--light.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
 }
-.x-text--light.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
 }
-.x-text--light.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
 }
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
@@ -3538,21 +3553,6 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.x-text--bold.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
-}
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
@@ -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;
@@ -5409,6 +5409,51 @@
     --x-number-font-weight-base-regular
   );
 }
+:root {
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
 
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
@@ -5495,51 +5540,6 @@
   --x-size-border-width-bottom-option-list-item-default: inherit;
   --x-size-border-width-left-option-list-item-default: inherit;
 }
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
-}
 :root {
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
@@ -6023,6 +6023,14 @@
   --x-size-gap-list-19: var(--x-size-base-19);
   --x-size-gap-list-20: var(--x-size-base-20);
 }
+:root {
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
+}
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
   --x-size-gap-list-02: var(--x-size-base-02);
@@ -6553,14 +6561,6 @@
   --x-size-align-list: stretch;
   --x-size-align-list-stretch: stretch;
 }
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
 
 .x-list {
   display: flex;
@@ -7021,6 +7021,29 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --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 {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
+  --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-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);
@@ -7057,29 +7080,6 @@
   --x-size-border-radius-top-left-input-group-default: 0;
   --x-size-border-radius-bottom-left-input-group-default: 0;
 }
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
-}
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --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 {
-  --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
-  --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-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7292,10 +7292,6 @@
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
 }
-:root {
-  --x-size-width-icon-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
-}
 :root {
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
@@ -7309,6 +7305,10 @@
   --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);
@@ -7336,15 +7336,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);
@@ -7366,6 +7357,15 @@
   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);
@@ -7410,38 +7410,6 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
-:root {
-  --x-color-background-filter-default: transparent;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
-}
 :root {
   --x-size-margin-filter-children: 0;
   --x-size-padding-top-filter-children: 0;
@@ -7506,6 +7474,38 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-filter-count-default
+  );
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
 
 [dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
   padding-left: var(--x-size-padding-left-filter-default);
@@ -7832,18 +7832,6 @@
   --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 {
@@ -7868,6 +7856,18 @@
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
+: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-s: 74px;
 }
@@ -8002,6 +8002,9 @@
     --x-size-border-width-left-dropdown-list-line
   );
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 :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);
@@ -8033,9 +8036,6 @@
 .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);
@@ -8448,34 +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-color-background-button-secondary: transparent;
-  --x-color-border-button-secondary: var(--x-color-border-button-default);
-  --x-color-text-button-secondary: var(--x-color-border-button-default);
-  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
-}
-
-.x-button--secondary.x-button,
-.x-button--secondary .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-secondary);
-  --x-color-border-button-default: var(--x-color-border-button-secondary);
-  --x-color-text-button-default: var(--x-color-text-button-secondary);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-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-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);
@@ -8502,14 +8474,11 @@
   --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);
-  --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-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-primary: var(--x-color-background-button-default);
@@ -8532,6 +8501,16 @@
   --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-color-background-button-primary: var(--x-color-background-button-default);
+  --x-color-border-button-primary: var(--x-color-border-button-default);
+  --x-color-text-button-primary: var(--x-color-text-button-default);
+  --x-size-border-width-button-primary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
+}
 :root {
   --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8611,13 +8590,6 @@
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
   --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8704,14 +8676,11 @@
   }
 }
 :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);
+  --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-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8784,6 +8753,16 @@
 .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;
@@ -8825,4 +8804,25 @@
   --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-secondary: transparent;
+  --x-color-border-button-secondary: var(--x-color-border-button-default);
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
+
+.x-button--secondary.x-button,
+.x-button--secondary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-secondary);
+  --x-color-border-button-default: var(--x-color-border-button-secondary);
+  --x-color-text-button-default: var(--x-color-text-button-secondary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
 }