@empathyco/x-components 6.0.0-alpha.80 → 6.0.0-alpha.81

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

@@ -1,23 +1,5 @@
 
-.x-underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
-.x-overline {
-  -webkit-text-decoration-line: overline;
-          text-decoration-line: overline;
-}
-
-.x-line-through {
-  -webkit-text-decoration-line: line-through;
-          text-decoration-line: line-through;
-}
 
-.x-no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-}
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -955,7 +937,25 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.x-overline {
+  -webkit-text-decoration-line: overline;
+          text-decoration-line: overline;
+}
+
+.x-line-through {
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
+}
 
+.x-no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
 .x-line-height--none {
   line-height: 1 !important;
 }
@@ -1806,6 +1806,49 @@
 .x-border-width--left-10 {
   border-style: solid !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-border-radius--00 {
   border-radius: 0 !important;
 }
@@ -3314,48 +3357,20 @@
 [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-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
 }
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
 }
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
 }
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
 }
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
 }
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
@@ -3400,21 +3415,6 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
@@ -3940,13 +3940,6 @@
   --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
   --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
 }
-:root {
-  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
-}
 
 .x-tag--card.x-tag,
 .x-tag--card .x-tag {
@@ -3958,6 +3951,13 @@
   );
   --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
 }
+:root {
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -4846,23 +4846,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;
@@ -4916,6 +4899,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);
 }
@@ -4979,14 +4979,14 @@
 :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-number-aspect-ratio-picture: 1;
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5091,12 +5091,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-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);
-}
 
 .x-picture--colored.x-picture {
   --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -5110,6 +5104,12 @@
 .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);
@@ -5449,51 +5449,6 @@
     --x-number-font-weight-base-regular
   );
 }
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
-}
 
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
@@ -5581,9 +5536,54 @@
   --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;
-}
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
 :root {
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
@@ -6063,28 +6063,6 @@
   --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);
@@ -6586,12 +6564,26 @@
   }
 }
 :root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
 }
 :root {
   --x-string-flow-list: column nowrap;
@@ -6742,13 +6734,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);
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
 }
 :root {
   --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6777,13 +6768,13 @@
   );
 }
 :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-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;
@@ -6832,6 +6823,15 @@
   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);
@@ -7130,16 +7130,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-:root {
-  --x-size-padding-top-input-line: var(--x-size-base-03);
-  --x-size-padding-right-input-line: 0;
-  --x-size-padding-bottom-input-line: var(--x-size-base-03);
-  --x-size-padding-left-input-line: 0;
-  --x-size-border-width-top-input-line: 0;
-  --x-size-border-width-right-input-line: 0;
-  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
-  --x-size-border-width-left-input-line: 0;
-}
 
 .x-input--line .x-input,
 .x-input--line.x-input {
@@ -7152,6 +7142,16 @@
   --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
   --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
 }
+:root {
+  --x-size-padding-top-input-line: var(--x-size-base-03);
+  --x-size-padding-right-input-line: 0;
+  --x-size-padding-bottom-input-line: var(--x-size-base-03);
+  --x-size-padding-left-input-line: 0;
+  --x-size-border-width-top-input-line: 0;
+  --x-size-border-width-right-input-line: 0;
+  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
+  --x-size-border-width-left-input-line: 0;
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7208,78 +7208,186 @@
   );
 }
 :root {
-  --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-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
+  --x-color-background-input-default: var(--x-color-base-neutral-100);
+  --x-color-border-input-default: var(--x-color-base-neutral-70);
+  --x-color-border-input-default-focus: var(--x-color-base-lead);
+  --x-color-text-input-default: var(--x-color-text-default);
+  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
+  --x-size-border-width-input-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-height-input-default: var(--x-size-base-07);
+  --x-size-padding-right-input-default: var(--x-size-base-04);
+  --x-size-padding-left-input-default: var(--x-size-base-04);
+  --x-font-family-input-default: var(--x-font-family-text);
+  --x-size-font-input-default: var(--x-size-font-text);
+  --x-size-line-height-input-default: var(--x-size-line-height-text);
+  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
+  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
+  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
+  --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);
 }
 
-.x-icon--xl {
-  --x-size-width-icon-default: var(--x-size-width-icon-xl);
-  --x-size-height-icon-default: var(--x-size-height-icon-xl);
-}
-: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-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
+[dir="ltr"] .x-input {
+  padding-left: var(--x-size-padding-left-input-default);
 }
 
-.x-icon--s {
-  --x-size-width-icon-default: var(--x-size-width-icon-s);
-  --x-size-height-icon-default: var(--x-size-height-icon-s);
-}
-: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-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
+[dir="rtl"] .x-input {
+  padding-right: var(--x-size-padding-left-input-default);
 }
 
-.x-icon--m {
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
+[dir="ltr"] .x-input {
+  padding-right: var(--x-size-padding-right-input-default);
 }
-:root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
+
+[dir="rtl"] .x-input {
+  padding-left: var(--x-size-padding-right-input-default);
 }
-:root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
+
+[dir="ltr"] .x-input {
+  border-right-width: var(--x-size-border-width-right-input-default);
 }
 
-.x-icon--l {
-  --x-size-width-icon-default: var(--x-size-width-icon-l);
-  --x-size-height-icon-default: var(--x-size-height-icon-l);
+[dir="rtl"] .x-input {
+  border-left-width: var(--x-size-border-width-right-input-default);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
+
+[dir="ltr"] .x-input {
+  border-left-width: var(--x-size-border-width-left-input-default);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
+
+[dir="rtl"] .x-input {
+  border-right-width: var(--x-size-border-width-left-input-default);
 }
 
-.x-icon {
-  stroke: var(--x-color-stroke-icon-default);
+.x-input {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  height: var(--x-size-height-input-default);
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: var(--x-color-background-input-default);
+  border-color: var(--x-color-border-input-default);
+  color: var(--x-color-text-input-default);
+  border-top-width: var(--x-size-border-width-top-input-default);
+  border-bottom-width: var(--x-size-border-width-bottom-input-default);
+  border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
+  border-style: solid;
+  font-family: var(--x-font-family-input-default);
+  font-size: var(--x-size-font-input-default);
+  font-weight: var(--x-number-font-weight-input-default);
+  line-height: var(--x-size-line-height-input-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-input {
+    -webkit-appearance: none;
+  }
+}
+.x-input:focus {
+  border-color: var(--x-color-border-input-default-focus);
+}
+.x-input > .x-input-placeholder {
+  position: absolute;
+  height: 100%;
+}
+.x-input > .x-input {
+  background: none;
+  border: none;
+  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);
+}
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
+
+.x-icon--xl {
+  --x-size-width-icon-default: var(--x-size-width-icon-xl);
+  --x-size-height-icon-default: var(--x-size-height-icon-xl);
+}
+:root {
+  --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);
+}
+
+.x-icon--s {
+  --x-size-width-icon-default: var(--x-size-width-icon-s);
+  --x-size-height-icon-default: var(--x-size-height-icon-s);
+}
+: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-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);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+}
+: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-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);
+  --x-size-height-icon-default: var(--x-size-height-icon-l);
+}
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
+
+.x-icon {
+  stroke: var(--x-color-stroke-icon-default);
   fill: var(--x-color-fill-icon-default);
   display: inline-flex;
   justify-content: center;
@@ -7342,6 +7450,38 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
+:root {
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-filter-count-default
+  );
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
 :root {
   --x-size-margin-filter-children: 0;
   --x-size-padding-top-filter-children: 0;
@@ -7407,38 +7547,6 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
-:root {
-  --x-color-background-filter-default: transparent;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
-}
 
 [dir="ltr"] .x-filter,[dir="ltr"] 
 .x-facet-filter {
@@ -7585,30 +7693,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);
@@ -7642,6 +7726,30 @@
   --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);
@@ -7810,13 +7918,13 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
-:root {
-  --x-size-width-dropdown-xl: 282px;
-}
 
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -8368,16 +8476,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 {
@@ -8389,6 +8487,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);
@@ -8428,29 +8536,11 @@
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
 :root {
-  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
-
-.x-button--round.x-button,
-.x-button--round .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-round
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-round
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-button-round
-  );
-  min-width: var(--x-size-height-button-default);
-  --x-size-padding-left-button-default: 0;
-  --x-size-padding-right-button-default: 0;
+  --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-primary: var(--x-color-background-button-default);
@@ -8490,13 +8580,6 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
-}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -8778,110 +8861,27 @@
   --x-size-border-width-base: 1px;
 }
 :root {
-  --x-color-background-input-default: var(--x-color-base-neutral-100);
-  --x-color-border-input-default: var(--x-color-base-neutral-70);
-  --x-color-border-input-default-focus: var(--x-color-base-lead);
-  --x-color-text-input-default: var(--x-color-text-default);
-  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
-  --x-size-border-width-input-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-height-input-default: var(--x-size-base-07);
-  --x-size-padding-right-input-default: var(--x-size-base-04);
-  --x-size-padding-left-input-default: var(--x-size-base-04);
-  --x-font-family-input-default: var(--x-font-family-text);
-  --x-size-font-input-default: var(--x-size-font-text);
-  --x-size-line-height-input-default: var(--x-size-line-height-text);
-  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
-  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
-  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
-  --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);
-}
-
-[dir="ltr"] .x-input {
-  padding-left: var(--x-size-padding-left-input-default);
-}
-
-[dir="rtl"] .x-input {
-  padding-right: var(--x-size-padding-left-input-default);
-}
-
-[dir="ltr"] .x-input {
-  padding-right: var(--x-size-padding-right-input-default);
-}
-
-[dir="rtl"] .x-input {
-  padding-left: var(--x-size-padding-right-input-default);
-}
-
-[dir="ltr"] .x-input {
-  border-right-width: var(--x-size-border-width-right-input-default);
-}
-
-[dir="rtl"] .x-input {
-  border-left-width: var(--x-size-border-width-right-input-default);
-}
-
-[dir="ltr"] .x-input {
-  border-left-width: var(--x-size-border-width-left-input-default);
-}
-
-[dir="rtl"] .x-input {
-  border-right-width: var(--x-size-border-width-left-input-default);
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
 
-.x-input {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-  height: var(--x-size-height-input-default);
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--x-color-background-input-default);
-  border-color: var(--x-color-border-input-default);
-  color: var(--x-color-text-input-default);
-  border-top-width: var(--x-size-border-width-top-input-default);
-  border-bottom-width: var(--x-size-border-width-bottom-input-default);
-  border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
-  border-style: solid;
-  font-family: var(--x-font-family-input-default);
-  font-size: var(--x-size-font-input-default);
-  font-weight: var(--x-number-font-weight-input-default);
-  line-height: var(--x-size-line-height-input-default);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-input {
-    -webkit-appearance: none;
-  }
-}
-.x-input:focus {
-  border-color: var(--x-color-border-input-default-focus);
-}
-.x-input > .x-input-placeholder {
-  position: absolute;
-  height: 100%;
-}
-.x-input > .x-input {
-  background: none;
-  border: none;
-  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-button--round.x-button,
+.x-button--round .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-round
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-round
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-round
+  );
+  min-width: var(--x-size-height-button-default);
+  --x-size-padding-left-button-default: 0;
+  --x-size-padding-right-button-default: 0;
 }