@empathyco/x-components 6.0.0-alpha.72 → 6.0.0-alpha.73

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

@@ -1,5 +1,4 @@
 
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -1319,71 +1318,6 @@
     0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
     0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
-
-.x-shadow--none {
-  box-shadow: none !important;
-}
-
-.x-shadow--01 {
-  box-shadow: var(--x-string-box-shadow-01) !important;
-}
-.x-shadow--bottom-01 {
-  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
-}
-.x-shadow--02 {
-  box-shadow: var(--x-string-box-shadow-02) !important;
-}
-.x-shadow--bottom-02 {
-  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
-}
-.x-shadow--03 {
-  box-shadow: var(--x-string-box-shadow-03) !important;
-}
-.x-shadow--bottom-03 {
-  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
-}
-.x-shadow--04 {
-  box-shadow: var(--x-string-box-shadow-04) !important;
-}
-.x-shadow--bottom-04 {
-  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
-}
-.x-shadow--05 {
-  box-shadow: var(--x-string-box-shadow-05) !important;
-}
-.x-shadow--bottom-05 {
-  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
-}
-.x-shadow--06 {
-  box-shadow: var(--x-string-box-shadow-06) !important;
-}
-.x-shadow--bottom-06 {
-  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
-}
-.x-shadow--07 {
-  box-shadow: var(--x-string-box-shadow-07) !important;
-}
-.x-shadow--bottom-07 {
-  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
-}
-.x-shadow--08 {
-  box-shadow: var(--x-string-box-shadow-08) !important;
-}
-.x-shadow--bottom-08 {
-  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
-}
-.x-shadow--09 {
-  box-shadow: var(--x-string-box-shadow-09) !important;
-}
-.x-shadow--bottom-09 {
-  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
-}
-.x-shadow--10 {
-  box-shadow: var(--x-string-box-shadow-10) !important;
-}
-.x-shadow--bottom-10 {
-  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
-}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -1472,6 +1406,71 @@
     0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
     0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
+
+.x-shadow--none {
+  box-shadow: none !important;
+}
+
+.x-shadow--01 {
+  box-shadow: var(--x-string-box-shadow-01) !important;
+}
+.x-shadow--bottom-01 {
+  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
+}
+.x-shadow--02 {
+  box-shadow: var(--x-string-box-shadow-02) !important;
+}
+.x-shadow--bottom-02 {
+  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
+}
+.x-shadow--03 {
+  box-shadow: var(--x-string-box-shadow-03) !important;
+}
+.x-shadow--bottom-03 {
+  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
+}
+.x-shadow--04 {
+  box-shadow: var(--x-string-box-shadow-04) !important;
+}
+.x-shadow--bottom-04 {
+  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
+}
+.x-shadow--05 {
+  box-shadow: var(--x-string-box-shadow-05) !important;
+}
+.x-shadow--bottom-05 {
+  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
+}
+.x-shadow--06 {
+  box-shadow: var(--x-string-box-shadow-06) !important;
+}
+.x-shadow--bottom-06 {
+  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
+}
+.x-shadow--07 {
+  box-shadow: var(--x-string-box-shadow-07) !important;
+}
+.x-shadow--bottom-07 {
+  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
+}
+.x-shadow--08 {
+  box-shadow: var(--x-string-box-shadow-08) !important;
+}
+.x-shadow--bottom-08 {
+  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
+}
+.x-shadow--09 {
+  box-shadow: var(--x-string-box-shadow-09) !important;
+}
+.x-shadow--bottom-09 {
+  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
+}
+.x-shadow--10 {
+  box-shadow: var(--x-string-box-shadow-10) !important;
+}
+.x-shadow--bottom-10 {
+  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
+}
 *[class*=x-border-width--] {
   border-width: 0;
 }
@@ -3418,9 +3417,6 @@
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
-.x-text--secondary {
-  --x-color-text-default: var(--x-color-text-secondary);
-}
 .x-text--light.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
@@ -3436,6 +3432,9 @@
 .x-text--light.x-small {
   --x-number-font-weight-small: var(--x-number-font-weight-base-light);
 }
+.x-text--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
+}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -4965,6 +4964,9 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
+:root {
+  --x-number-aspect-ratio-picture: 1;
+}
 :root {
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
@@ -4979,9 +4981,6 @@
 :root {
   --x-number-aspect-ratio-picture: 1;
 }
-:root {
-  --x-number-aspect-ratio-picture: 1;
-}
 
 .x-picture--fixed-ratio.x-picture {
   aspect-ratio: var(--x-number-aspect-ratio-picture);
@@ -5091,13 +5090,6 @@
   --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
   --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
 }
-:root {
-  --x-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-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
@@ -5124,6 +5116,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);
@@ -6064,245 +6063,80 @@
   --x-size-gap-list-20: var(--x-size-base-20);
 }
 :root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
 }
 
-.x-list {
-  display: flex;
-  flex-flow: var(--x-string-flow-list);
-  list-style: none;
-  gap: var(--x-size-gap-list);
-  margin: 0;
-  padding: var(--x-size-padding-list);
-  justify-content: var(--x-size-justify-list);
-  align-items: var(--x-size-align-list);
-  min-width: 0;
+.x-list--gap-01.x-list {
+  gap: var(--x-size-gap-list-01);
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
+  .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list);
+  .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-01);
   }
-  .x-list.x-list--horizontal {
+  .x-list--gap-01.x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
+  .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
   }
-  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
+  .x-list--gap-01.x-list.x-list--wrap {
     gap: 0;
   }
-  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
-    margin-bottom: var(--x-size-gap-list);
+  .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
+    margin-bottom: var(--x-size-gap-list-01);
   }
 }
 
-.x-list--vertical.x-list {
-  flex-flow: column nowrap;
+.x-list--gap-02.x-list {
+  gap: var(--x-size-gap-list-02);
 }
-
-.x-list--horizontal.x-list {
-  flex-flow: row nowrap;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-02);
+  }
+  .x-list--gap-02.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
+  }
+  .x-list--gap-02.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
+    margin-bottom: var(--x-size-gap-list-02);
+  }
 }
 
-.x-list--wrap.x-list {
-  flex-flow: row wrap;
-}
-
-.x-list--wrap-reverse.x-list {
-  flex-flow: row wrap-reverse;
-}
-
-.x-list--justify-stretch.x-list {
-  justify-content: stretch;
-}
-
-.x-list--justify-center.x-list {
-  justify-content: center;
-}
-
-.x-list--justify-end.x-list {
-  justify-content: flex-end;
-}
-
-.x-list--justify-start.x-list {
-  justify-content: flex-start;
-}
-
-.x-list--align-stretch.x-list {
-  align-items: stretch;
-}
-
-.x-list--align-center.x-list {
-  align-items: center;
-}
-
-.x-list--align-baseline.x-list {
-  align-items: baseline;
-}
-
-.x-list--align-end.x-list {
-  align-items: flex-end;
-}
-
-.x-list--align-start.x-list {
-  align-items: flex-start;
-}
-
-.x-list > .x-list__item--expand {
-  flex: 1 1 auto;
-}
-.x-list > .x-list__item--no-expand {
-  flex: 0 0 auto;
-}
-.x-list.x-list--horizontal > .x-list__item--expand {
-  min-width: 0;
-}
-.x-list:not(.x-list--horizontal) > .x-list__item--expand {
-  min-height: 0;
-}
-.x-list > .x-list__item--stretch {
-  align-self: stretch;
-}
-.x-list > .x-list__item--flex-none {
-  flex: none;
-}
-.x-list > .x-list__item--01 {
-  flex: 1 12 auto;
-}
-.x-list > .x-list__item--02 {
-  flex: 2 11 auto;
-}
-.x-list > .x-list__item--03 {
-  flex: 3 10 auto;
-}
-.x-list > .x-list__item--04 {
-  flex: 4 9 auto;
-}
-.x-list > .x-list__item--05 {
-  flex: 5 8 auto;
-}
-.x-list > .x-list__item--06 {
-  flex: 6 7 auto;
-}
-.x-list > .x-list__item--07 {
-  flex: 7 6 auto;
-}
-.x-list > .x-list__item--08 {
-  flex: 8 5 auto;
-}
-.x-list > .x-list__item--09 {
-  flex: 9 4 auto;
-}
-.x-list > .x-list__item--10 {
-  flex: 10 3 auto;
-}
-.x-list > .x-list__item--11 {
-  flex: 11 2 auto;
-}
-.x-list > .x-list__item--12 {
-  flex: 12 1 auto;
-}
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
-:root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --x-size-gap-list-03: var(--x-size-base-03);
-  --x-size-gap-list-04: var(--x-size-base-04);
-  --x-size-gap-list-05: var(--x-size-base-05);
-  --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07);
-  --x-size-gap-list-08: var(--x-size-base-08);
-  --x-size-gap-list-09: var(--x-size-base-09);
-  --x-size-gap-list-10: var(--x-size-base-10);
-  --x-size-gap-list-11: var(--x-size-base-11);
-  --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13);
-  --x-size-gap-list-14: var(--x-size-base-14);
-  --x-size-gap-list-15: var(--x-size-base-15);
-  --x-size-gap-list-16: var(--x-size-base-16);
-  --x-size-gap-list-17: var(--x-size-base-17);
-  --x-size-gap-list-18: var(--x-size-base-18);
-  --x-size-gap-list-19: var(--x-size-base-19);
-  --x-size-gap-list-20: var(--x-size-base-20);
-}
-
-.x-list--gap-01.x-list {
-  gap: var(--x-size-gap-list-01);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-01);
-  }
-  .x-list--gap-01.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-01);
-  }
-  .x-list--gap-01.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-01);
-    margin-bottom: var(--x-size-gap-list-01);
-  }
-}
-
-.x-list--gap-02.x-list {
-  gap: var(--x-size-gap-list-02);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-02);
-  }
-  .x-list--gap-02.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-02);
-  }
-  .x-list--gap-02.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-02);
-    margin-bottom: var(--x-size-gap-list-02);
-  }
-}
-
-.x-list--gap-03.x-list {
-  gap: var(--x-size-gap-list-03);
+.x-list--gap-03.x-list {
+  gap: var(--x-size-gap-list-03);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
@@ -6751,67 +6585,232 @@
   }
 }
 :root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
-
-.x-input-group--pill.x-input-group,
-.x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-pill
-  );
-}
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
+  --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-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
+  --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-input-group--line .x-input-group,
-.x-input-group--line.x-input-group {
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
-  --x-size-border-width-right-input-group-default: var(
-    --x-size-border-width-right-input-group-line
-  );
-  --x-size-border-width-bottom-input-group-default: var(
-    --x-size-border-width-bottom-input-group-line
-  );
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
-}
-.x-input-group--line .x-input-group > *:not(.x-input-group__action),
-.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
-  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
-  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
+.x-list {
+  display: flex;
+  flex-flow: var(--x-string-flow-list);
+  list-style: none;
+  gap: var(--x-size-gap-list);
+  margin: 0;
+  padding: var(--x-size-padding-list);
+  justify-content: var(--x-size-justify-list);
+  align-items: var(--x-size-align-list);
+  min-width: 0;
 }
-[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list);
+  }
+  .x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+  }
+  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
+    gap: 0;
+  }
+  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+    margin-bottom: var(--x-size-gap-list);
+  }
+}
+
+.x-list--vertical.x-list {
+  flex-flow: column nowrap;
+}
+
+.x-list--horizontal.x-list {
+  flex-flow: row nowrap;
+}
+
+.x-list--wrap.x-list {
+  flex-flow: row wrap;
+}
+
+.x-list--wrap-reverse.x-list {
+  flex-flow: row wrap-reverse;
+}
+
+.x-list--justify-stretch.x-list {
+  justify-content: stretch;
+}
+
+.x-list--justify-center.x-list {
+  justify-content: center;
+}
+
+.x-list--justify-end.x-list {
+  justify-content: flex-end;
+}
+
+.x-list--justify-start.x-list {
+  justify-content: flex-start;
+}
+
+.x-list--align-stretch.x-list {
+  align-items: stretch;
+}
+
+.x-list--align-center.x-list {
+  align-items: center;
+}
+
+.x-list--align-baseline.x-list {
+  align-items: baseline;
+}
+
+.x-list--align-end.x-list {
+  align-items: flex-end;
+}
+
+.x-list--align-start.x-list {
+  align-items: flex-start;
+}
+
+.x-list > .x-list__item--expand {
+  flex: 1 1 auto;
+}
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto;
+}
+.x-list.x-list--horizontal > .x-list__item--expand {
+  min-width: 0;
+}
+.x-list:not(.x-list--horizontal) > .x-list__item--expand {
+  min-height: 0;
+}
+.x-list > .x-list__item--stretch {
+  align-self: stretch;
+}
+.x-list > .x-list__item--flex-none {
+  flex: none;
+}
+.x-list > .x-list__item--01 {
+  flex: 1 12 auto;
+}
+.x-list > .x-list__item--02 {
+  flex: 2 11 auto;
+}
+.x-list > .x-list__item--03 {
+  flex: 3 10 auto;
+}
+.x-list > .x-list__item--04 {
+  flex: 4 9 auto;
+}
+.x-list > .x-list__item--05 {
+  flex: 5 8 auto;
+}
+.x-list > .x-list__item--06 {
+  flex: 6 7 auto;
+}
+.x-list > .x-list__item--07 {
+  flex: 7 6 auto;
+}
+.x-list > .x-list__item--08 {
+  flex: 8 5 auto;
+}
+.x-list > .x-list__item--09 {
+  flex: 9 4 auto;
+}
+.x-list > .x-list__item--10 {
+  flex: 10 3 auto;
+}
+.x-list > .x-list__item--11 {
+  flex: 11 2 auto;
+}
+.x-list > .x-list__item--12 {
+  flex: 12 1 auto;
+}
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
+
+.x-input-group--line .x-input-group,
+.x-input-group--line.x-input-group {
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
+  --x-size-border-width-right-input-group-default: var(
+    --x-size-border-width-right-input-group-line
+  );
+  --x-size-border-width-bottom-input-group-default: var(
+    --x-size-border-width-bottom-input-group-line
+  );
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
+}
+.x-input-group--line .x-input-group > *:not(.x-input-group__action),
+.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
+  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
+  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
+}
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
 .x-input-group--line.x-input-group > .x-input-group__action {
   margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
 }
@@ -7515,6 +7514,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 {
@@ -7625,38 +7656,6 @@
   --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-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-color-border-facet-outlined: var(--x-color-base-neutral-70);
   --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7693,14 +7692,6 @@
   --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
   --x-size-border-width-left-facet-header-line: 0;
 }
-:root {
-  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
-  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-line: 0;
-  --x-size-border-width-right-facet-header-line: 0;
-  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-left-facet-header-line: 0;
-}
 
 .x-facet--line.x-facet,
 .x-facet--line .x-facet {
@@ -7717,6 +7708,14 @@
     --x-size-border-width-left-facet-header-line
   );
 }
+:root {
+  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
+  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-left-facet-header-line: 0;
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7918,13 +7917,13 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
-:root {
-  --x-size-width-dropdown-xl: 282px;
-}
 
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -8169,173 +8168,415 @@
   --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-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-dropdown-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-dropdown-default
   );
-  --x-size-border-radius-top-right-dropdown-default: var(
-    --x-size-border-radius-top-right-dropdown-card
+  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
   );
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-bottom-right-dropdown-card
+  --x-size-border-width-right-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
   );
-  --x-size-border-radius-bottom-left-dropdown-default: var(
-    --x-size-border-radius-bottom-left-dropdown-card
+  --x-size-border-width-bottom-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
   );
-  --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-left-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
   );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-default: 0;
   --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-right-dropdown-list-card
+    --x-size-border-width-dropdown-list-default
   );
   --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-bottom-dropdown-list-card
+    --x-size-border-width-dropdown-list-default
   );
   --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-left-dropdown-list-card
+    --x-size-border-width-dropdown-list-default
   );
-}
-: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);
-}
-: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-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
+  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
+  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
+  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
+  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-font-family-dropdown-default: var(--x-font-family-text);
+  --x-size-font-dropdown-default: var(--x-size-font-text);
+  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
+  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
+  --x-font-decoration-dropdown-item-default-hover: none;
+  --x-font-decoration-dropdown-item-default-selected: none;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
+  --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
+  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
+  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
+  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
+  --x-string-box-shadow-dropdown-default: none;
+  --x-string-overflow-dropdown-toggle-default: hidden;
+  --x-string-overflow-dropdown-list-default: hidden;
 }
 
-.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);
+.x-dropdown {
+  box-sizing: border-box;
+  position: relative;
+  font-size: var(--x-size-font-dropdown-default);
+  font-family: var(--x-font-family-dropdown-default);
+  font-weight: var(--x-number-font-weight-dropdown-default);
+  line-height: var(--x-size-line-height-dropdown-default);
 }
-: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);
+[dir="ltr"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
 }
-
-.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);
+[dir="rtl"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
 }
-: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);
+[dir="ltr"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
 }
-: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);
+[dir="rtl"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
 }
-
-.x-button--round.x-button,
-.x-button--round .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-round
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-round
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-button-round
-  );
-  min-width: var(--x-size-height-button-default);
-  --x-size-padding-left-button-default: 0;
-  --x-size-padding-right-button-default: 0;
+[dir="ltr"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-right-dropdown-toggle-default);
 }
-: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);
+[dir="rtl"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-right-dropdown-toggle-default);
 }
-: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);
+[dir="ltr"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-left-dropdown-toggle-default);
 }
-: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);
+[dir="rtl"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-left-dropdown-toggle-default);
+}
+.x-dropdown__toggle {
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  background: var(--x-color-background-dropdown-toggle-default);
+  color: var(--x-color-text-dropdown-toggle-default);
+  border-color: var(--x-color-border-dropdown-toggle-default);
+  padding-top: var(--x-size-padding-top-dropdown-toggle-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  width: var(--x-size-width-dropdown-toggle-default);
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 0;
+  cursor: pointer;
+  overflow: var(--x-string-overflow-dropdown-toggle-default);
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-dropdown__toggle {
+    gap: 0;
+  }
+  .x-dropdown__toggle > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+[dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown__toggle-selected-value {
+  color: var(--x-color-text-dropdown-toggle-default-selected);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+.x-dropdown__items-list {
+  background: var(--x-color-background-dropdown-default);
+  box-sizing: border-box;
+  min-width: var(--x-size-min-width-dropdown-list-default);
+  position: absolute;
+  top: calc(100% + var(--x-size-gap-dropdown-default));
+  overflow: var(--x-string-overflow-dropdown-list-default);
+  border-color: var(--x-color-border-dropdown-list-default);
+  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  border-style: solid;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+  z-index: 1;
+}
+.x-dropdown__items-list:before, .x-dropdown__items-list:after {
+  content: "";
+  display: block;
+  height: var(--x-size-padding-vertical-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-right-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-right-dropdown-item-default);
+}
+.x-dropdown__item {
+  background: var(--x-color-background-dropdown-default);
+  padding-top: var(--x-size-padding-top-dropdown-item-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  border: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  text-align: left;
+  width: 100%;
+  margin: 0;
+  white-space: nowrap;
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-dropdown__item {
+    gap: 0;
+  }
+  .x-dropdown__item > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+.x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
+  color: var(--x-color-text-dropdown-item-default-hover);
+  background-color: var(--x-color-background-dropdown-item-default-hover);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+}
+.x-dropdown__item--is-selected {
+  color: var(--x-color-text-dropdown-item-default-selected);
+  background-color: var(--x-color-background-dropdown-item-default-selected);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+}
+[dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown--is-open {
+  --x-color-background-dropdown-toggle-default: var(
+    --x-color-background-dropdown-toggle-open-default
+  );
+}
+[dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
+  right: 0;
+}
+[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);
+  --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);
+}
+: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);
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
+:root {
+  --x-color-background-button-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);
+  --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 {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-round
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-round
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-round
+  );
+  min-width: var(--x-size-height-button-default);
+  --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);
+  --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-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);
 }
 
@@ -8356,6 +8597,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 {
@@ -8372,11 +8620,9 @@
   );
 }
 :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-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
 }
 :root {
   --x-color-background-button-ghost: transparent;
@@ -8508,11 +8754,6 @@
     margin-right: var(--x-size-gap-button-default);
   }
 }
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8643,245 +8884,3 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
-: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);
-  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-dropdown-default
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-right-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-bottom-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-left-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-default: 0;
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
-  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
-  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-open-default: var(
-    --x-color-background-dropdown-toggle-default
-  );
-  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
-  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
-  --x-color-text-dropdown-default: var(--x-color-text-default);
-  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
-  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
-  --x-font-family-dropdown-default: var(--x-font-family-text);
-  --x-size-font-dropdown-default: var(--x-size-font-text);
-  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
-  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
-  --x-font-decoration-dropdown-item-default-hover: none;
-  --x-font-decoration-dropdown-item-default-selected: none;
-  --x-size-width-dropdown-toggle-default: 100%;
-  --x-size-min-width-dropdown-list-default: 100%;
-  --x-size-gap-dropdown-default: 0;
-  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
-  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
-  --x-size-padding-bottom-dropdown-toggle-default: var(
-    --x-size-padding-bottom-dropdown-item-default
-  );
-  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
-  --x-size-padding-vertical-dropdown-list-default: 0;
-  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
-  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
-  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
-  --x-string-box-shadow-dropdown-default: none;
-  --x-string-overflow-dropdown-toggle-default: hidden;
-  --x-string-overflow-dropdown-list-default: hidden;
-}
-
-.x-dropdown {
-  box-sizing: border-box;
-  position: relative;
-  font-size: var(--x-size-font-dropdown-default);
-  font-family: var(--x-font-family-dropdown-default);
-  font-weight: var(--x-number-font-weight-dropdown-default);
-  line-height: var(--x-size-line-height-dropdown-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  padding-right: var(--x-size-padding-right-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  padding-left: var(--x-size-padding-right-dropdown-toggle-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  padding-left: var(--x-size-padding-left-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  padding-right: var(--x-size-padding-left-dropdown-toggle-default);
-}
-.x-dropdown__toggle {
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
-  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
-  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-  background: var(--x-color-background-dropdown-toggle-default);
-  color: var(--x-color-text-dropdown-toggle-default);
-  border-color: var(--x-color-border-dropdown-toggle-default);
-  padding-top: var(--x-size-padding-top-dropdown-toggle-default);
-  padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
-  gap: var(--x-size-gap-dropdown-item-default);
-  width: var(--x-size-width-dropdown-toggle-default);
-  display: flex;
-  flex-flow: row nowrap;
-  margin: 0;
-  cursor: pointer;
-  overflow: var(--x-string-overflow-dropdown-toggle-default);
-  box-shadow: var(--x-string-box-shadow-dropdown-default);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-dropdown__toggle {
-    gap: 0;
-  }
-  .x-dropdown__toggle > *:not(:last-child) {
-    margin-right: var(--x-size-gap-dropdown-item-default);
-  }
-}
-[dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
-  margin-left: auto;
-}
-[dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
-  margin-right: auto;
-}
-.x-dropdown__toggle-selected-value {
-  color: var(--x-color-text-dropdown-toggle-default-selected);
-}
-[dir="ltr"] .x-dropdown__items-list {
-  border-right-width: var(--x-size-border-width-right-dropdown-list-default);
-}
-[dir="rtl"] .x-dropdown__items-list {
-  border-left-width: var(--x-size-border-width-right-dropdown-list-default);
-}
-[dir="ltr"] .x-dropdown__items-list {
-  border-left-width: var(--x-size-border-width-left-dropdown-list-default);
-}
-[dir="rtl"] .x-dropdown__items-list {
-  border-right-width: var(--x-size-border-width-left-dropdown-list-default);
-}
-.x-dropdown__items-list {
-  background: var(--x-color-background-dropdown-default);
-  box-sizing: border-box;
-  min-width: var(--x-size-min-width-dropdown-list-default);
-  position: absolute;
-  top: calc(100% + var(--x-size-gap-dropdown-default));
-  overflow: var(--x-string-overflow-dropdown-list-default);
-  border-color: var(--x-color-border-dropdown-list-default);
-  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
-  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
-  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-  border-style: solid;
-  margin: 0;
-  padding: 0;
-  box-shadow: var(--x-string-box-shadow-dropdown-default);
-  z-index: 1;
-}
-.x-dropdown__items-list:before, .x-dropdown__items-list:after {
-  content: "";
-  display: block;
-  height: var(--x-size-padding-vertical-dropdown-list-default);
-}
-[dir="ltr"] .x-dropdown__item {
-  padding-left: var(--x-size-padding-left-dropdown-item-default);
-}
-[dir="rtl"] .x-dropdown__item {
-  padding-right: var(--x-size-padding-left-dropdown-item-default);
-}
-[dir="ltr"] .x-dropdown__item {
-  padding-right: var(--x-size-padding-right-dropdown-item-default);
-}
-[dir="rtl"] .x-dropdown__item {
-  padding-left: var(--x-size-padding-right-dropdown-item-default);
-}
-.x-dropdown__item {
-  background: var(--x-color-background-dropdown-default);
-  padding-top: var(--x-size-padding-top-dropdown-item-default);
-  padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
-  gap: var(--x-size-gap-dropdown-item-default);
-  border: none;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  text-align: left;
-  width: 100%;
-  margin: 0;
-  white-space: nowrap;
-  cursor: pointer;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-dropdown__item {
-    gap: 0;
-  }
-  .x-dropdown__item > *:not(:last-child) {
-    margin-right: var(--x-size-gap-dropdown-item-default);
-  }
-}
-.x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
-  color: var(--x-color-text-dropdown-item-default-hover);
-  background-color: var(--x-color-background-dropdown-item-default-hover);
-  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
-  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
-          text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
-}
-.x-dropdown__item--is-selected {
-  color: var(--x-color-text-dropdown-item-default-selected);
-  background-color: var(--x-color-background-dropdown-item-default-selected);
-  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
-  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
-          text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
-}
-[dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
-  margin-left: auto;
-}
-[dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
-  margin-right: auto;
-}
-.x-dropdown--is-open {
-  --x-color-background-dropdown-toggle-default: var(
-    --x-color-background-dropdown-toggle-open-default
-  );
-}
-[dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
-  right: 0;
-}
-[dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
-  left: 0;
-}