@empathyco/x-components 3.0.0-alpha.294 → 3.0.0-alpha.296

package/design-system/full-theme.css

@@ -2024,329 +2024,6 @@
   --x-size-gap-list-20: var(--x-size-base-20);
 }
 /* @deprecated */
-[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
-  padding-right: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-bottom) {
-  padding-bottom: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-left) {
-  padding-left: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-top) {
-  padding-top: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-bottom) {
-  padding-bottom: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-left) {
-  padding-left: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-top) {
-  padding-top: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-right) {
-  padding-right: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-left) {
-  padding-left: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-top) {
-  padding-top: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-right) {
-  padding-right: 0;
-}
-[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-bottom) {
-  padding-bottom: 0;
-}
-
-.x-list--padding-01.x-list {
-  padding: var(--x-size-padding-list-01);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-01);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-01);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-01);
-  }
-}
-
-.x-list--padding-02.x-list {
-  padding: var(--x-size-padding-list-02);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-02);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-02);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-02);
-  }
-}
-
-.x-list--padding-03.x-list {
-  padding: var(--x-size-padding-list-03);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-03);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-03);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-03);
-  }
-}
-
-.x-list--padding-04.x-list {
-  padding: var(--x-size-padding-list-04);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-04);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-04);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-04);
-  }
-}
-
-.x-list--padding-05.x-list {
-  padding: var(--x-size-padding-list-05);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-05);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-05);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-05);
-  }
-}
-
-.x-list--padding-06.x-list {
-  padding: var(--x-size-padding-list-06);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-06);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-06);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-06);
-  }
-}
-
-.x-list--padding-07.x-list {
-  padding: var(--x-size-padding-list-07);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-07);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-07);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-07);
-  }
-}
-
-.x-list--padding-08.x-list {
-  padding: var(--x-size-padding-list-08);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-08);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-08);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-08);
-  }
-}
-
-.x-list--padding-09.x-list {
-  padding: var(--x-size-padding-list-09);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-09);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-09);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-09);
-  }
-}
-
-.x-list--padding-10.x-list {
-  padding: var(--x-size-padding-list-10);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-10);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-10);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-10);
-  }
-}
-
-.x-list--padding-11.x-list {
-  padding: var(--x-size-padding-list-11);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-11);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-11);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-11);
-  }
-}
-
-.x-list--padding-12.x-list {
-  padding: var(--x-size-padding-list-12);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-12);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-12);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-12);
-  }
-}
-
-.x-list--padding-13.x-list {
-  padding: var(--x-size-padding-list-13);
-}
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-13);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-.x-list {
-    gap: 0;
-  }
-  .x-list--gap-.x-list > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-13);
-  }
-  .x-list--gap-.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-13);
-  }
-}
-/* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
   --x-size-padding-list-02: var(--x-size-base-02);
@@ -3144,62 +2821,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-.x-sliding-panel {
-  z-index: 0;
-  background-color: var(--x-color-background-sliding-panel);
-}
-.x-sliding-panel__button.x-button {
-  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
-  pointer-events: none;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
-  pointer-events: all;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
-  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
-  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
-  opacity: 0;
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
-  opacity: 1;
-  pointer-events: all;
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
-  opacity: 1;
-  pointer-events: all;
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
-          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
-  -webkit-mask: none;
-          mask: none;
-}
-.x-sliding-panel__scroll > * {
-  flex: 0 0 auto;
-}
-.x-sliding-panel__scroll > .x-list {
-  --x-string-flow-list: row nowrap;
-}
-:root {
-  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
-  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
-}
 .x-tag--card.x-tag,
 .x-tag--card .x-tag {
   --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
@@ -6502,91 +6123,415 @@
 .x-padding--top-17 {
   padding-top: var(--x-size-base-17) !important;
 }
-.x-padding--bottom-17 {
-  padding-bottom: var(--x-size-base-17) !important;
+.x-padding--bottom-17 {
+  padding-bottom: var(--x-size-base-17) !important;
+}
+[dir="ltr"] .x-padding--right-17 {
+  padding-right: var(--x-size-base-17) !important;
+}
+[dir="rtl"] .x-padding--right-17 {
+  padding-left: var(--x-size-base-17) !important;
+}
+[dir="ltr"] .x-padding--left-17 {
+  padding-left: var(--x-size-base-17) !important;
+}
+[dir="rtl"] .x-padding--left-17 {
+  padding-right: var(--x-size-base-17) !important;
+}
+.x-padding--top-18 {
+  padding-top: var(--x-size-base-18) !important;
+}
+.x-padding--bottom-18 {
+  padding-bottom: var(--x-size-base-18) !important;
+}
+[dir="ltr"] .x-padding--right-18 {
+  padding-right: var(--x-size-base-18) !important;
+}
+[dir="rtl"] .x-padding--right-18 {
+  padding-left: var(--x-size-base-18) !important;
+}
+[dir="ltr"] .x-padding--left-18 {
+  padding-left: var(--x-size-base-18) !important;
+}
+[dir="rtl"] .x-padding--left-18 {
+  padding-right: var(--x-size-base-18) !important;
+}
+.x-padding--top-19 {
+  padding-top: var(--x-size-base-19) !important;
+}
+.x-padding--bottom-19 {
+  padding-bottom: var(--x-size-base-19) !important;
+}
+[dir="ltr"] .x-padding--right-19 {
+  padding-right: var(--x-size-base-19) !important;
+}
+[dir="rtl"] .x-padding--right-19 {
+  padding-left: var(--x-size-base-19) !important;
+}
+[dir="ltr"] .x-padding--left-19 {
+  padding-left: var(--x-size-base-19) !important;
+}
+[dir="rtl"] .x-padding--left-19 {
+  padding-right: var(--x-size-base-19) !important;
+}
+.x-padding--top-20 {
+  padding-top: var(--x-size-base-20) !important;
+}
+.x-padding--bottom-20 {
+  padding-bottom: var(--x-size-base-20) !important;
+}
+[dir="ltr"] .x-padding--right-20 {
+  padding-right: var(--x-size-base-20) !important;
+}
+[dir="rtl"] .x-padding--right-20 {
+  padding-left: var(--x-size-base-20) !important;
+}
+[dir="ltr"] .x-padding--left-20 {
+  padding-left: var(--x-size-base-20) !important;
+}
+[dir="rtl"] .x-padding--left-20 {
+  padding-right: var(--x-size-base-20) !important;
+}
+.x-static {
+  position: static !important;
+}
+
+.x-fixed {
+  position: fixed !important;
+}
+
+.x-absolute {
+  position: absolute !important;
+}
+
+.x-relative {
+  position: relative !important;
+}
+
+.x-sticky {
+  position: sticky !important;
+}
+
+/* @deprecated */
+[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
+  padding-right: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-bottom) {
+  padding-bottom: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-left) {
+  padding-left: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-top) {
+  padding-top: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-bottom) {
+  padding-bottom: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-left) {
+  padding-left: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-top) {
+  padding-top: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-right) {
+  padding-right: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-left) {
+  padding-left: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-top) {
+  padding-top: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-right) {
+  padding-right: 0;
+}
+[class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-bottom) {
+  padding-bottom: 0;
+}
+
+.x-list--padding-01.x-list {
+  padding: var(--x-size-padding-list-01);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-01);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-01);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
+  }
+}
+
+.x-list--padding-02.x-list {
+  padding: var(--x-size-padding-list-02);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-02);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-02);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
+  }
+}
+
+.x-list--padding-03.x-list {
+  padding: var(--x-size-padding-list-03);
+}
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-03);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-03);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-03);
+  }
+}
+
+.x-list--padding-04.x-list {
+  padding: var(--x-size-padding-list-04);
 }
-[dir="ltr"] .x-padding--right-17 {
-  padding-right: var(--x-size-base-17) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-04);
 }
-[dir="rtl"] .x-padding--right-17 {
-  padding-left: var(--x-size-base-17) !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-04);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-04);
+  }
 }
-[dir="ltr"] .x-padding--left-17 {
-  padding-left: var(--x-size-base-17) !important;
+
+.x-list--padding-05.x-list {
+  padding: var(--x-size-padding-list-05);
 }
-[dir="rtl"] .x-padding--left-17 {
-  padding-right: var(--x-size-base-17) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-05);
 }
-.x-padding--top-18 {
-  padding-top: var(--x-size-base-18) !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-05);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-05);
+  }
 }
-.x-padding--bottom-18 {
-  padding-bottom: var(--x-size-base-18) !important;
+
+.x-list--padding-06.x-list {
+  padding: var(--x-size-padding-list-06);
 }
-[dir="ltr"] .x-padding--right-18 {
-  padding-right: var(--x-size-base-18) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-06);
 }
-[dir="rtl"] .x-padding--right-18 {
-  padding-left: var(--x-size-base-18) !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-06);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-06);
+  }
 }
-[dir="ltr"] .x-padding--left-18 {
-  padding-left: var(--x-size-base-18) !important;
+
+.x-list--padding-07.x-list {
+  padding: var(--x-size-padding-list-07);
 }
-[dir="rtl"] .x-padding--left-18 {
-  padding-right: var(--x-size-base-18) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-07);
 }
-.x-padding--top-19 {
-  padding-top: var(--x-size-base-19) !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-07);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-07);
+  }
 }
-.x-padding--bottom-19 {
-  padding-bottom: var(--x-size-base-19) !important;
+
+.x-list--padding-08.x-list {
+  padding: var(--x-size-padding-list-08);
 }
-[dir="ltr"] .x-padding--right-19 {
-  padding-right: var(--x-size-base-19) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-08);
 }
-[dir="rtl"] .x-padding--right-19 {
-  padding-left: var(--x-size-base-19) !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-08);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-08);
+  }
 }
-[dir="ltr"] .x-padding--left-19 {
-  padding-left: var(--x-size-base-19) !important;
+
+.x-list--padding-09.x-list {
+  padding: var(--x-size-padding-list-09);
 }
-[dir="rtl"] .x-padding--left-19 {
-  padding-right: var(--x-size-base-19) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-09);
 }
-.x-padding--top-20 {
-  padding-top: var(--x-size-base-20) !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-09);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-09);
+  }
 }
-.x-padding--bottom-20 {
-  padding-bottom: var(--x-size-base-20) !important;
+
+.x-list--padding-10.x-list {
+  padding: var(--x-size-padding-list-10);
 }
-[dir="ltr"] .x-padding--right-20 {
-  padding-right: var(--x-size-base-20) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-10);
 }
-[dir="rtl"] .x-padding--right-20 {
-  padding-left: var(--x-size-base-20) !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-10);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-10);
+  }
 }
-[dir="ltr"] .x-padding--left-20 {
-  padding-left: var(--x-size-base-20) !important;
+
+.x-list--padding-11.x-list {
+  padding: var(--x-size-padding-list-11);
 }
-[dir="rtl"] .x-padding--left-20 {
-  padding-right: var(--x-size-base-20) !important;
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-11);
 }
-.x-static {
-  position: static !important;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-11);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-11);
+  }
 }
 
-.x-fixed {
-  position: fixed !important;
+.x-list--padding-12.x-list {
+  padding: var(--x-size-padding-list-12);
 }
 
-.x-absolute {
-  position: absolute !important;
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-12);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-12);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-12);
+  }
 }
 
-.x-relative {
-  position: relative !important;
+.x-list--padding-13.x-list {
+  padding: var(--x-size-padding-list-13);
 }
 
-.x-sticky {
-  position: sticky !important;
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-13);
 }
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-.x-list {
+    gap: 0;
+  }
+  .x-list--gap-.x-list > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-13);
+  }
+  .x-list--gap-.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-13);
+  }
+}