@empathyco/x-components 6.0.0-alpha.82 → 6.0.0-alpha.83

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

@@ -1,4 +1,5 @@
 
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -33,7 +34,6 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
-
 .x-static {
   position: static !important;
 }
@@ -3314,6 +3314,49 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important;
+}
+
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
+}
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
+}
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
+}
+
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
+}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3375,49 +3418,6 @@
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
-.x-border-color--lead {
-  border-color: var(--x-color-base-lead) !important;
-}
-
-.x-border-color--auxiliary {
-  border-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-border-color--neutral-10 {
-  border-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-border-color--neutral-35 {
-  border-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
-}
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
-}
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
-}
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
-}
 .x-text--secondary {
   --x-color-text-default: var(--x-color-text-secondary);
 }
@@ -4433,6 +4433,51 @@
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
   --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
 }
+:root {
+  --x-string-overflow-scroll: auto;
+  --x-color-background-scroll-bar: transparent;
+  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
+  --x-color-background-scroll-bar-hover: transparent;
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
+:root {
+  --x-string-overflow-scroll: auto;
+  --x-color-background-scroll-bar: transparent;
+  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
+  --x-color-background-scroll-bar-hover: transparent;
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
+
+.x-scroll {
+  overflow-y: var(--x-string-overflow-scroll);
+}
+@media (hover: hover) {
+  .x-scroll {
+    scrollbar-width: auto;
+    scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
+  }
+  .x-scroll::-webkit-scrollbar {
+    width: 17px;
+  }
+  .x-scroll::-webkit-scrollbar-track {
+    background: var(--x-color-background-scroll-bar);
+  }
+  .x-scroll::-webkit-scrollbar-thumb {
+    width: 5px;
+    border-radius: 15px;
+    background: var(--x-color-thumb-scroll-bar);
+    background-clip: content-box;
+    border: solid 4px rgba(0, 0, 0, 0.00001);
+  }
+  .x-scroll:hover {
+    --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
+    --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
+  }
+}
+
+.x-base-scroll {
+  overflow-y: var(--x-string-overflow-scroll, auto);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);
@@ -4487,50 +4532,13 @@
   opacity: 1;
   pointer-events: all;
 }
+/* @deprecated */
 :root {
-  --x-string-overflow-scroll: auto;
-  --x-color-background-scroll-bar: transparent;
-  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
-  --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
-}
-:root {
-  --x-string-overflow-scroll: auto;
-  --x-color-background-scroll-bar: transparent;
-  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
-  --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
-}
-
-.x-scroll {
-  overflow-y: var(--x-string-overflow-scroll);
-}
-@media (hover: hover) {
-  .x-scroll {
-    scrollbar-width: auto;
-    scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
-  }
-  .x-scroll::-webkit-scrollbar {
-    width: 17px;
-  }
-  .x-scroll::-webkit-scrollbar-track {
-    background: var(--x-color-background-scroll-bar);
-  }
-  .x-scroll::-webkit-scrollbar-thumb {
-    width: 5px;
-    border-radius: 15px;
-    background: var(--x-color-thumb-scroll-bar);
-    background-clip: content-box;
-    border: solid 4px rgba(0, 0, 0, 0.00001);
-  }
-  .x-scroll:hover {
-    --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
-    --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
-  }
-}
-
-.x-base-scroll {
-  overflow-y: var(--x-string-overflow-scroll, auto);
+  --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 */
 :root {
@@ -4685,14 +4693,6 @@
 .x-row--gap-20 {
   --x-size-gap-row: var(--x-size-gap-row-20);
 }
-/* @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: 0;
   --x-size-padding-row: 0;
@@ -4965,10 +4965,6 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}
 
 .x-picture--zoom .x-picture-image {
   transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4979,6 +4975,18 @@
 :root {
   --x-number-aspect-ratio-picture: 1;
 }
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
+: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);
@@ -4998,39 +5006,93 @@
   --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-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+  --x-size-border-radius-picture-default: 0;
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
+  --x-color-background-picture-default: transparent;
+  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
+  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
+  --x-object-fit-picture-default: contain;
+  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
+  --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
+  --x-mix-blend-mode-picture-default: normal;
+  --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);
 }
 
-.x-picture--cover.x-picture {
-  position: relative;
+.x-picture {
+  display: block;
+  overflow: hidden;
+  border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
+  background: var(--x-color-background-picture-default);
 }
-
-.x-result:hover .x-picture--cover:after,
-.x-picture--cover:hover:after {
-  content: "";
+.x-picture-image {
   display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
   width: 100%;
   height: 100%;
+  object-fit: var(--x-object-fit-picture-default);
+  mix-blend-mode: var(--x-mix-blend-mode-picture-default);
 }
-:root {
-  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+.x-picture-image--fallback {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default) !important;
+  --x-mix-blend-mode-picture-default: var(
+    --x-mix-blend-mode-picture-fallback-default
+  ) !important;
+}
+.x-picture-image--fallback > rect {
+  fill: var(--x-color-fill-picture-fallback-rect-default) !important;
+}
+.x-picture-image--fallback > path {
+  fill: var(--x-color-fill-picture-fallback-path-default) !important;
+}
+.x-picture-image--placeholder {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default) !important;
+  --x-mix-blend-mode-picture-default: var(
+    --x-mix-blend-mode-picture-placeholder-default
+  ) !important;
+}
+.x-picture-image--placeholder > rect {
+  fill: var(--x-color-fill-picture-placeholder-rect-default) !important;
+}
+.x-picture-image--placeholder > path {
+  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
+}
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
+
+.x-picture--cover.x-picture {
+  position: relative;
+}
+
+.x-result:hover .x-picture--cover:after,
+.x-picture--cover:hover:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
+  width: 100%;
+  height: 100%;
+}
+:root {
+  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+  --x-mix-blend-mode-picture-colored: multiply;
+  --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-color-background-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
   --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);
@@ -5048,12 +5110,6 @@
 .x-picture--colored.x-picture .x-picture--placeholder {
   --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
 }
-:root {
-  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
-  --x-mix-blend-mode-picture-colored: multiply;
-  --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);
@@ -5393,96 +5449,6 @@
     --x-number-font-weight-base-regular
   );
 }
-:root {
-  --x-size-border-radius-picture-default: 0;
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
-  --x-color-background-picture-default: transparent;
-  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
-  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
-  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
-  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
-  --x-object-fit-picture-default: contain;
-  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
-  --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
-  --x-mix-blend-mode-picture-default: normal;
-  --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);
-}
-
-.x-picture {
-  display: block;
-  overflow: hidden;
-  border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
-  background: var(--x-color-background-picture-default);
-}
-.x-picture-image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: var(--x-object-fit-picture-default);
-  mix-blend-mode: var(--x-mix-blend-mode-picture-default);
-}
-.x-picture-image--fallback {
-  --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default) !important;
-  --x-mix-blend-mode-picture-default: var(
-    --x-mix-blend-mode-picture-fallback-default
-  ) !important;
-}
-.x-picture-image--fallback > rect {
-  fill: var(--x-color-fill-picture-fallback-rect-default) !important;
-}
-.x-picture-image--fallback > path {
-  fill: var(--x-color-fill-picture-fallback-path-default) !important;
-}
-.x-picture-image--placeholder {
-  --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default) !important;
-  --x-mix-blend-mode-picture-default: var(
-    --x-mix-blend-mode-picture-placeholder-default
-  ) !important;
-}
-.x-picture-image--placeholder > rect {
-  fill: var(--x-color-fill-picture-placeholder-rect-default) !important;
-}
-.x-picture-image--placeholder > path {
-  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
-}
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
-}
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-:root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
-}
 :root {
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
   --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5614,6 +5580,40 @@
   --x-size-border-width-bottom-option-list-item-default: inherit;
   --x-size-border-width-left-option-list-item-default: inherit;
 }
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+
+.x-modal__overlay {
+  background-color: var(--x-modal-overlay-color) !important;
+  opacity: var(--x-modal-overlay-opacity) !important;
+}
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -6063,6 +6063,28 @@
   --x-size-gap-list-19: var(--x-size-base-19);
   --x-size-gap-list-20: var(--x-size-base-20);
 }
+: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);
@@ -6563,28 +6585,6 @@
     margin-bottom: var(--x-size-gap-list-20);
   }
 }
-: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);
-}
 :root {
   --x-string-flow-list: column nowrap;
   --x-size-padding-list: 0;
@@ -6594,18 +6594,62 @@
   --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-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-list {
-  display: flex;
-  flex-flow: var(--x-string-flow-list);
-  list-style: none;
+.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-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
+}
+
+.x-list {
+  display: flex;
+  flex-flow: var(--x-string-flow-list);
+  list-style: none;
   gap: var(--x-size-gap-list);
   margin: 0;
   padding: var(--x-size-padding-list);
@@ -6741,97 +6785,6 @@
 .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;
-}
-[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
-}
-[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-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
-}
-[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
-}
-.x-input-group--line .x-input-group > .x-input-group__action,
-.x-input-group--line.x-input-group > .x-input-group__action {
-  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-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6875,58 +6828,6 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
-:root {
-  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-bottom-right-input-group-card: var(
-    --x-size-border-radius-input-group-card
-  );
-  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
-}
-:root {
-  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-bottom-right-input-group-card: var(
-    --x-size-border-radius-input-group-card
-  );
-  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
-}
-
-.x-input-group--card.x-input-group,
-.x-input-group--card .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-card
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-card
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-card
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-card
-  );
-}
-.x-input-group--card.x-input-group__action:first-child,
-.x-input-group--card .x-input-group__action:first-child {
-  --x-size-border-radius-top-right-input-group-default: 0;
-  --x-size-border-radius-bottom-right-input-group-default: 0;
-}
-.x-input-group--card.x-input-group__action:last-child,
-.x-input-group--card .x-input-group__action:last-child {
-  --x-size-border-radius-top-left-input-group-default: 0;
-  --x-size-border-radius-bottom-left-input-group-default: 0;
-}
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
-}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7104,6 +7005,105 @@
 [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
   margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
 }
+:root {
+  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-bottom-right-input-group-card: var(
+    --x-size-border-radius-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+}
+:root {
+  --x-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;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+}
+[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-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
+}
+.x-input-group--line .x-input-group > .x-input-group__action,
+.x-input-group--line.x-input-group > .x-input-group__action {
+  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-border-radius-input-group-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-bottom-right-input-group-card: var(
+    --x-size-border-radius-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+}
+
+.x-input-group--card.x-input-group,
+.x-input-group--card .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-card
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-card
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-card
+  );
+}
+.x-input-group--card.x-input-group__action:first-child,
+.x-input-group--card .x-input-group__action:first-child {
+  --x-size-border-radius-top-right-input-group-default: 0;
+  --x-size-border-radius-bottom-right-input-group-default: 0;
+}
+.x-input-group--card.x-input-group__action:last-child,
+.x-input-group--card .x-input-group__action:last-child {
+  --x-size-border-radius-top-left-input-group-default: 0;
+  --x-size-border-radius-bottom-left-input-group-default: 0;
+}
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}
 :root {
   --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7180,13 +7180,6 @@
   --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
   --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
 }
-:root {
-  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
-}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7288,12 +7281,39 @@
   padding: 0;
   flex: 1 1 auto;
 }
-.x-input > .x-input-placeholder, .x-input::placeholder {
-  color: var(--x-color-text-input-placeholder-default);
-  font-family: var(--x-font-family-input-placeholder-default);
-  font-size: var(--x-size-font-input-placeholder-default);
-  font-weight: var(--x-number-font-weight-input-placeholder-default);
-  line-height: var(--x-size-line-height-input-placeholder-default);
+.x-input > .x-input-placeholder, .x-input::placeholder {
+  color: var(--x-color-text-input-placeholder-default);
+  font-family: var(--x-font-family-input-placeholder-default);
+  font-size: var(--x-size-font-input-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-placeholder-default);
+  line-height: var(--x-size-line-height-input-placeholder-default);
+}
+:root {
+  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
+}
+:root {
+  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
+}
+
+.x-input--card.x-input,
+.x-input--card .x-input {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
+  --x-size-border-radius-bottom-right-input-default: var(
+    --x-size-border-radius-bottom-right-input-card
+  );
+  --x-size-border-radius-bottom-left-input-default: var(
+    --x-size-border-radius-bottom-left-input-card
+  );
 }
 :root {
   --x-size-width-icon-xl: var(--x-size-base-07);
@@ -7325,10 +7345,6 @@
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
 }
-:root {
-  --x-size-width-icon-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
-}
 
 .x-icon--m {
   --x-size-width-icon-default: var(--x-size-width-icon-m);
@@ -7338,6 +7354,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-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);
@@ -7356,11 +7376,6 @@
   --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;
@@ -7396,6 +7411,11 @@
   --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;
@@ -7424,24 +7444,11 @@
   margin-left: auto;
 }
 :root {
-  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
-}
-
-.x-input--card.x-input,
-.x-input--card .x-input {
-  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
-  --x-size-border-radius-bottom-right-input-default: var(
-    --x-size-border-radius-bottom-right-input-card
-  );
-  --x-size-border-radius-bottom-left-input-default: var(
-    --x-size-border-radius-bottom-left-input-card
-  );
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
 :root {
   --x-size-margin-filter-children: 0;
@@ -7450,6 +7457,32 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
+
+.x-hierarchical-filter-container {
+  list-style: none;
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-left-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-left-filter-children);
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-right-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-right-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  margin: var(--x-size-margin-filter-children);
+  padding-top: var(--x-size-padding-top-filter-children);
+  padding-bottom: var(--x-size-padding-bottom-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter-container,
+.x-hierarchical-filter-container .x-filter,
+.x-hierarchical-filter-container .x-facet-filter {
+  width: 100%;
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7661,37 +7694,28 @@
   --x-size-border-width-left-facet-header-line: 0;
 }
 :root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
+  --x-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-hierarchical-filter-container {
-  list-style: none;
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-left-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-left-filter-children);
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-right-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-right-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  margin: var(--x-size-margin-filter-children);
-  padding-top: var(--x-size-padding-top-filter-children);
-  padding-bottom: var(--x-size-padding-bottom-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter-container,
-.x-hierarchical-filter-container .x-filter,
-.x-hierarchical-filter-container .x-facet-filter {
-  width: 100%;
+.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;
@@ -7726,30 +7750,6 @@
   --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-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7928,13 +7928,13 @@
 :root {
   --x-size-width-dropdown-s: 74px;
 }
+:root {
+  --x-size-width-dropdown-s: 74px;
+}
 
 .x-dropdown.x-dropdown--s {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
 }
-:root {
-  --x-size-width-dropdown-s: 74px;
-}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -8168,19 +8168,6 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
-:root {
-  --x-size-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8423,16 +8410,6 @@
 [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
   left: 0;
 }
-: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-size-gap-dropdown-card: var(--x-size-base-03);
   --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
@@ -8476,6 +8453,29 @@
     --x-size-border-width-left-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);
+}
+: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);
@@ -8762,28 +8762,6 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
-
-.x-button--card.x-button,
-.x-button--card .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-card
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-card
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-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);
@@ -8884,4 +8862,26 @@
   --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-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
+
+.x-button--card.x-button,
+.x-button--card .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-card
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-card
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-card
+  );
 }