@empathyco/x-components 6.0.0-alpha.59 → 6.0.0-alpha.60

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

@@ -1,19 +1,4 @@
 
-.x-uppercase {
-  text-transform: uppercase;
-}
-
-.x-lowercase {
-  text-transform: lowercase;
-}
-
-.x-capitalize {
-  text-transform: capitalize;
-}
-
-.x-normal-case {
-  text-transform: none;
-}
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -52,7 +37,6 @@
 .x-sticky {
   position: sticky !important;
 }
-
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -956,6 +940,21 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-uppercase {
+  text-transform: uppercase;
+}
+
+.x-lowercase {
+  text-transform: lowercase;
+}
+
+.x-capitalize {
+  text-transform: capitalize;
+}
+
+.x-normal-case {
+  text-transform: none;
+}
 .x-line-height--none {
   line-height: 1 !important;
 }
@@ -3381,6 +3380,21 @@
 .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--light.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
+}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -3421,21 +3435,6 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none;
 }
-.x-text--light.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
-}
-.x-text--light.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
-}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -4500,6 +4499,14 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4521,14 +4528,6 @@
 .x-row--padding-06 {
   --x-size-padding-row: var(--x-size-padding-row-06);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -4806,23 +4805,6 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 
 .x-result {
   display: grid;
@@ -4876,6 +4858,23 @@
     opacity: 1;
   }
 }
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
+  --x-size-border-width-result-picture-default: 0;
+}
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
@@ -4896,15 +4895,6 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
-:root {
-  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
-  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
-  --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
-  --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
-  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-progress-bar-default: 0;
-}
 
 .x-progress-bar {
   display: inline-block;
@@ -4925,6 +4915,15 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
+:root {
+  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
+  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
+  --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
+  --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
+  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-progress-bar-default: 0;
+}
 :root {
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
@@ -4939,14 +4938,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);
-  width: 100%;
-}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -4965,6 +4956,14 @@
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
   --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
 }
+:root {
+  --x-number-aspect-ratio-picture: 1;
+}
+
+.x-picture--fixed-ratio.x-picture {
+  aspect-ratio: var(--x-number-aspect-ratio-picture);
+  width: 100%;
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5051,13 +5050,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;
@@ -5084,6 +5076,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);
@@ -6710,15 +6709,6 @@
   );
   --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
 
 .x-input-group--pill.x-input-group,
 .x-input-group--pill .x-input-group {
@@ -6736,6 +6726,24 @@
     --x-size-border-radius-bottom-left-input-group-pill
   );
 }
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --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;
@@ -6783,15 +6791,6 @@
   margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
   margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
 }
-: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-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7279,6 +7278,10 @@
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
 }
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
 :root {
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7292,10 +7295,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-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
 
 .x-icon--s {
   --x-size-width-icon-default: var(--x-size-width-icon-s);
@@ -7305,10 +7304,6 @@
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
 }
-:root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
-}
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7322,6 +7317,10 @@
   --x-size-width-icon-l: var(--x-size-base-06);
   --x-size-height-icon-l: var(--x-size-base-06);
 }
+:root {
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
+}
 
 .x-icon--l {
   --x-size-width-icon-default: var(--x-size-width-icon-l);
@@ -7336,6 +7335,11 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7371,11 +7375,6 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 
 .x-grid-list {
   margin: 0;
@@ -7600,34 +7599,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-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
-
-.x-facet--outlined.x-facet,
-.x-facet--outlined .x-facet {
-  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
-  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
-  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
-  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
-  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
-}
 :root {
   --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
   --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7636,30 +7607,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 {
-  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
-  --x-size-border-width-right-facet-header-default: var(
-    --x-size-border-width-right-facet-header-line
-  );
-  --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-bottom-facet-header-line
-  );
-  --x-size-border-width-left-facet-header-default: var(
-    --x-size-border-width-left-facet-header-line
-  );
-}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7693,6 +7640,42 @@
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
   --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
+:root {
+  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
+  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-left-facet-header-line: 0;
+}
+
+.x-facet--line.x-facet,
+.x-facet--line .x-facet {
+  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
+  --x-size-border-width-right-facet-header-default: var(
+    --x-size-border-width-right-facet-header-line
+  );
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-bottom-facet-header-line
+  );
+  --x-size-border-width-left-facet-header-default: var(
+    --x-size-border-width-left-facet-header-line
+  );
+}
+: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-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7832,18 +7815,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 {
@@ -7932,13 +7903,13 @@
 :root {
   --x-size-width-dropdown-m: 130px;
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
 
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
 :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);
@@ -7963,9 +7934,6 @@
   --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
   --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8029,6 +7997,16 @@
     --x-size-border-width-left-dropdown-list-line
   );
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
+
+.x-dropdown.x-dropdown--l {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
+}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8102,13 +8080,6 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
-
-.x-dropdown.x-dropdown--l {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8417,16 +8388,6 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
-}
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -8438,6 +8399,16 @@
   --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-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-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8539,6 +8510,18 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
+:root {
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -8554,18 +8537,6 @@
     --x-size-border-radius-bottom-left-button-pill
   );
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
-}
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
@@ -8703,6 +8674,16 @@
   --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-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-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);
@@ -8735,38 +8716,6 @@
   --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;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 80px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 128px;
-  --x-size-base-16: 152px;
-  --x-size-base-17: 184px;
-  --x-size-base-18: 216px;
-  --x-size-base-19: 280px;
-  --x-size-base-20: 344px;
-}
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -8806,6 +8755,35 @@
 .x-badge-container {
   position: relative;
 }
+:root {
+  --x-size-base-01: 2px;
+  --x-size-base-02: 4px;
+  --x-size-base-03: 8px;
+  --x-size-base-04: 12px;
+  --x-size-base-05: 16px;
+  --x-size-base-06: 24px;
+  --x-size-base-07: 32px;
+  --x-size-base-08: 40px;
+  --x-size-base-09: 48px;
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 80px;
+  --x-size-base-13: 80px;
+  --x-size-base-14: 96px;
+  --x-size-base-15: 128px;
+  --x-size-base-16: 152px;
+  --x-size-base-17: 184px;
+  --x-size-base-18: 216px;
+  --x-size-base-19: 280px;
+  --x-size-base-20: 344px;
+}
+:root {
+  --x-size-border-radius-base-none: 0;
+  --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
+  --x-size-border-radius-base-pill: 99999px;
+  --x-size-border-width-base: 1px;
+}
 :root {
   --x-color-base-lead: #243d48;
   --x-color-base-auxiliary: #bfe1ec;
@@ -8820,9 +8798,30 @@
   --x-color-base-transparent: transparent;
 }
 :root {
-  --x-size-border-radius-base-none: 0;
-  --x-size-border-radius-base-s: var(--x-size-base-02);
-  --x-size-border-radius-base-m: var(--x-size-base-06);
-  --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px;
-}
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
+
+.x-facet--outlined.x-facet,
+.x-facet--outlined .x-facet {
+  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
+  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
+  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
+  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
+}