@empathyco/x-components 6.0.0-alpha.89 → 6.0.0-alpha.90

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

@@ -4591,28 +4591,6 @@
   --x-size-gap-row-19: var(--x-size-base-19);
   --x-size-gap-row-20: var(--x-size-base-20);
 }
-:root {
-  --x-size-gap-row-01: var(--x-size-base-01);
-  --x-size-gap-row-02: var(--x-size-base-02);
-  --x-size-gap-row-03: var(--x-size-base-03);
-  --x-size-gap-row-04: var(--x-size-base-04);
-  --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06);
-  --x-size-gap-row-07: var(--x-size-base-07);
-  --x-size-gap-row-08: var(--x-size-base-08);
-  --x-size-gap-row-09: var(--x-size-base-09);
-  --x-size-gap-row-10: var(--x-size-base-10);
-  --x-size-gap-row-11: var(--x-size-base-11);
-  --x-size-gap-row-12: var(--x-size-base-12);
-  --x-size-gap-row-13: var(--x-size-base-13);
-  --x-size-gap-row-14: var(--x-size-base-14);
-  --x-size-gap-row-15: var(--x-size-base-15);
-  --x-size-gap-row-16: var(--x-size-base-16);
-  --x-size-gap-row-17: var(--x-size-base-17);
-  --x-size-gap-row-18: var(--x-size-base-18);
-  --x-size-gap-row-19: var(--x-size-base-19);
-  --x-size-gap-row-20: var(--x-size-base-20);
-}
 
 .x-row--gap-01 {
   --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4693,6 +4671,28 @@
 .x-row--gap-20 {
   --x-size-gap-row: var(--x-size-gap-row-20);
 }
+:root {
+  --x-size-gap-row-01: var(--x-size-base-01);
+  --x-size-gap-row-02: var(--x-size-base-02);
+  --x-size-gap-row-03: var(--x-size-base-03);
+  --x-size-gap-row-04: var(--x-size-base-04);
+  --x-size-gap-row-05: var(--x-size-base-05);
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20);
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
@@ -4701,6 +4701,104 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 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;
+}
+: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;
+  grid-template-columns: [result-start] 1fr [result-end];
+  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
+  box-sizing: border-box;
+  background-color: var(--x-color-background-result-default);
+  border-color: var(--x-color-border-result-default);
+  padding: var(--x-size-padding-result-default);
+  gap: var(--x-size-gap-result-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-default);
+  border-radius: var(--x-size-border-radius-result-default);
+}
+.x-result > * {
+  min-width: 0;
+}
+.x-result__picture {
+  grid-column: result;
+  grid-row: picture;
+}
+.x-result__overlay {
+  grid-column: result;
+  grid-row: overlay;
+  z-index: 1;
+  border-color: var(--x-color-border-result-overlay-default);
+  padding: var(--x-size-padding-result-overlay-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-overlay-default);
+  opacity: 0;
+}
+.x-result__description {
+  grid-column: result;
+  grid-row: description;
+  border-color: var(--x-color-border-result-description-default);
+  padding: var(--x-size-padding-result-description-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-description-default);
+}
+.x-result__picture {
+  border-color: var(--x-color-border-result-picture-default);
+  padding: var(--x-size-padding-result-picture-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-picture-default);
+}
+.x-result:hover .x-result__overlay {
+  opacity: 1;
+}
+@media (hover: none) {
+  .x-result .x-result__overlay {
+    opacity: 1;
+  }
+}
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
+
+.x-result.x-result--card {
+  overflow: hidden;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
@@ -4829,104 +4927,6 @@
 .x-row--align-stretch {
   --x-size-align-row: stretch;
 }
-: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-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;
-  grid-template-columns: [result-start] 1fr [result-end];
-  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
-  box-sizing: border-box;
-  background-color: var(--x-color-background-result-default);
-  border-color: var(--x-color-border-result-default);
-  padding: var(--x-size-padding-result-default);
-  gap: var(--x-size-gap-result-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-default);
-  border-radius: var(--x-size-border-radius-result-default);
-}
-.x-result > * {
-  min-width: 0;
-}
-.x-result__picture {
-  grid-column: result;
-  grid-row: picture;
-}
-.x-result__overlay {
-  grid-column: result;
-  grid-row: overlay;
-  z-index: 1;
-  border-color: var(--x-color-border-result-overlay-default);
-  padding: var(--x-size-padding-result-overlay-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-overlay-default);
-  opacity: 0;
-}
-.x-result__description {
-  grid-column: result;
-  grid-row: description;
-  border-color: var(--x-color-border-result-description-default);
-  padding: var(--x-size-padding-result-description-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-description-default);
-}
-.x-result__picture {
-  border-color: var(--x-color-border-result-picture-default);
-  padding: var(--x-size-padding-result-picture-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-result-picture-default);
-}
-.x-result:hover .x-result__overlay {
-  opacity: 1;
-}
-@media (hover: none) {
-  .x-result .x-result__overlay {
-    opacity: 1;
-  }
-}
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
-
-.x-result.x-result--card {
-  overflow: hidden;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
-}
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -5117,13 +5117,6 @@
   --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
   --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
 }
-:root {
-  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
 
 .x-picture--card.x-picture {
   --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
@@ -5174,235 +5167,50 @@
   --x-color-border-bottom-option-list-item-default-selected: var(
     --x-color-border-option-list-item-default-selected
   );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default-selected: var(
-    --x-size-border-width-top-option-list-item-default
-  );
-  --x-size-border-width-right-option-list-item-default-selected: var(
-    --x-size-border-width-right-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default-selected: var(
-    --x-size-border-width-bottom-option-list-item-default
-  );
-  --x-size-border-width-left-option-list-item-default-selected: var(
-    --x-size-border-width-left-option-list-item-default
-  );
-  --x-size-padding-option-list-button-default: var(--x-size-base-02);
-  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-right-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-bottom-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-left-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-font-decoration-option-list-button-default-hover: underline;
-  --x-size-font-option-list-button-default: var(--x-size-font-text);
-  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
-}
-:root {
-  --x-color-background-option-list-button-default: transparent;
-  --x-color-border-option-list-button-default: transparent;
-  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
-  --x-color-background-option-list-button-default-hover: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-hover: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
-  --x-color-background-option-list-button-default-selected: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-selected: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
-  --x-color-background-option-list-button-default-selected-hover: var(
-    --x-color-background-option-list-button-default-selected
-  );
-  --x-color-border-option-list-button-default-selected-hover: var(
-    --x-color-border-option-list-button-default-selected
-  );
-  --x-color-text-option-list-button-default-selected-hover: var(
-    --x-color-text-option-list-button-default-selected
-  );
-  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default-selected: var(
-    --x-size-border-width-top-option-list-item-default
-  );
-  --x-size-border-width-right-option-list-item-default-selected: var(
-    --x-size-border-width-right-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default-selected: var(
-    --x-size-border-width-bottom-option-list-item-default
-  );
-  --x-size-border-width-left-option-list-item-default-selected: var(
-    --x-size-border-width-left-option-list-item-default
-  );
-  --x-size-padding-option-list-button-default: var(--x-size-base-02);
-  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-right-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-bottom-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-left-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-font-decoration-option-list-button-default-hover: underline;
-  --x-size-font-option-list-button-default: var(--x-size-font-text);
-  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
-}
-
-.x-option-list {
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  box-sizing: border-box;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-[dir="ltr"] .x-option-list__item {
-  border-right-width: var(--x-size-border-width-right-option-list-item-default);
-}
-[dir="rtl"] .x-option-list__item {
-  border-left-width: var(--x-size-border-width-right-option-list-item-default);
-}
-[dir="ltr"] .x-option-list__item {
-  border-left-width: var(--x-size-border-width-left-option-list-item-default);
-}
-[dir="rtl"] .x-option-list__item {
-  border-right-width: var(--x-size-border-width-left-option-list-item-default);
-}
-.x-option-list__item {
-  border-top-color: var(--x-color-border-top-option-list-item-default);
-  border-right-color: var(--x-color-border-right-option-list-item-default);
-  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
-  border-left-color: var(--x-color-border-left-option-list-item-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-option-list-item-default);
-  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
-}
-.x-option-list__item.x-option-list__item--is-selected {
-  --x-color-border-option-list-item-default: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-top-option-list-item-default: var(
-    --x-color-border-top-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default: var(
-    --x-color-border-right-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default: var(
-    --x-color-border-bottom-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default: var(
-    --x-color-border-left-option-list-item-default-selected
-  );
-  --x-size-border-width-top-option-list-item-default: var(
-    --x-size-border-width-top-option-list-item-default-selected
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
   );
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
   --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-right-option-list-item-default-selected
-  );
-  --x-size-border-width-bottom-option-list-item-default: var(
-    --x-size-border-width-bottom-option-list-item-default-selected
+    --x-size-border-width-option-list-item-default
   );
-  --x-size-border-width-left-option-list-item-default: var(
-    --x-size-border-width-left-option-list-item-default-selected
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
   );
-}
-.x-option-list__item.x-option-list__item--is-selected .x-button {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-selected
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
   );
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
-  --x-number-font-weight-option-list-button-default: var(
-    --x-number-font-weight-option-list-button-default-selected
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
   );
-}
-.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-selected-hover
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
   );
-  --x-color-border-button-default: var(
-    --x-color-border-option-list-button-default-selected-hover
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
   );
-  --x-color-text-button-default: var(
-    --x-color-text-option-list-button-default-selected-hover
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
   );
-}
-.x-option-list__item:last-child {
-  --x-size-border-width-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: 0;
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-}
-.x-option-list__item .x-button {
-  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
-  min-height: auto;
-  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
-  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
-  --x-size-padding-bottom-button-default: var(
-    --x-size-padding-bottom-option-list-button-default
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
   );
-  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
-  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
-  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
+  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
-.x-option-list__item .x-button:hover {
-  --x-color-background-button-default: var(
-    --x-color-background-option-list-button-default-hover
-  );
-  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
-  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
-  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
-          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+:root {
+  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
 }
 :root {
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -6019,27 +5827,219 @@
     margin-right: var(--x-size-gap-list-12);
   }
 }
-
-.x-list--padding-13.x-list {
-  padding: var(--x-size-padding-list-13);
+
+.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);
+  }
+}
+:root {
+  --x-color-background-option-list-button-default: transparent;
+  --x-color-border-option-list-button-default: transparent;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
+  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
+
+.x-option-list {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  box-sizing: border-box;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+[dir="ltr"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="ltr"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-left-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-left-option-list-item-default);
+}
+.x-option-list__item {
+  border-top-color: var(--x-color-border-top-option-list-item-default);
+  border-right-color: var(--x-color-border-right-option-list-item-default);
+  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
+  border-left-color: var(--x-color-border-left-option-list-item-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-option-list-item-default);
+  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
+}
+.x-option-list__item.x-option-list__item--is-selected {
+  --x-color-border-option-list-item-default: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-top-option-list-item-default: var(
+    --x-color-border-top-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default: var(
+    --x-color-border-right-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default: var(
+    --x-color-border-bottom-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default: var(
+    --x-color-border-left-option-list-item-default-selected
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-default-selected
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-default-selected
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-default-selected
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
+  --x-number-font-weight-option-list-button-default: var(
+    --x-number-font-weight-option-list-button-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected-hover
+  );
+  --x-color-border-button-default: var(
+    --x-color-border-option-list-button-default-selected-hover
+  );
+  --x-color-text-button-default: var(
+    --x-color-text-option-list-button-default-selected-hover
+  );
 }
-
-.x-list--gap-.x-list {
-  gap: var(--x-size-gap-list-13);
+.x-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: 0;
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
 }
-@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);
-  }
+.x-option-list__item .x-button {
+  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
+  min-height: auto;
+  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
+  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
+  --x-size-padding-bottom-button-default: var(
+    --x-size-padding-bottom-option-list-button-default
+  );
+  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
+  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
+}
+.x-option-list__item .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-hover
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
 }
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
@@ -6593,97 +6593,6 @@
   --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);
-  --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-string-flow-list: column nowrap;
   --x-size-padding-list: 0;
@@ -6832,6 +6741,50 @@
 .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-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6875,6 +6828,53 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
+: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);
@@ -7113,22 +7113,12 @@
 }
 
 .x-input--pill.x-input,
-.x-input--pill .x-input {
-  --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
-}
-: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--pill .x-input {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
 }
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
@@ -7140,18 +7130,6 @@
   --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 {
-  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
-  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
-  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
-  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
-  --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-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7180,6 +7158,28 @@
   --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-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 {
+  --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
+  --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
+  --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
+  --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
+  --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-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7345,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);
@@ -7928,6 +7924,14 @@
 :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);
+  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -7936,12 +7940,8 @@
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
 }
 :root {
-  --x-size-gap-dropdown-pill: var(--x-size-base-03);
-  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
-  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
 }
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
@@ -8168,6 +8168,79 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
+:root {
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-dropdown-default
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-right-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-bottom-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-left-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-default: 0;
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
+  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
+  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
+  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
+  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-font-family-dropdown-default: var(--x-font-family-text);
+  --x-size-font-dropdown-default: var(--x-size-font-text);
+  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
+  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
+  --x-font-decoration-dropdown-item-default-hover: none;
+  --x-font-decoration-dropdown-item-default-selected: none;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
+  --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
+  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
+  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
+  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
+  --x-string-box-shadow-dropdown-default: none;
+  --x-string-overflow-dropdown-toggle-default: hidden;
+  --x-string-overflow-dropdown-list-default: hidden;
+}
 
 .x-dropdown {
   box-sizing: border-box;
@@ -8403,79 +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-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-dropdown-default
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-right-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-bottom-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-left-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-default: 0;
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
-  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
-  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-open-default: var(
-    --x-color-background-dropdown-toggle-default
-  );
-  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
-  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
-  --x-color-text-dropdown-default: var(--x-color-text-default);
-  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
-  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
-  --x-font-family-dropdown-default: var(--x-font-family-text);
-  --x-size-font-dropdown-default: var(--x-size-font-text);
-  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
-  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
-  --x-font-decoration-dropdown-item-default-hover: none;
-  --x-font-decoration-dropdown-item-default-selected: none;
-  --x-size-width-dropdown-toggle-default: 100%;
-  --x-size-min-width-dropdown-list-default: 100%;
-  --x-size-gap-dropdown-default: 0;
-  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
-  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
-  --x-size-padding-bottom-dropdown-toggle-default: var(
-    --x-size-padding-bottom-dropdown-item-default
-  );
-  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
-  --x-size-padding-vertical-dropdown-list-default: 0;
-  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
-  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
-  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
-  --x-string-box-shadow-dropdown-default: none;
-  --x-string-overflow-dropdown-toggle-default: hidden;
-  --x-string-overflow-dropdown-list-default: hidden;
-}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8507,6 +8507,13 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
+:root {
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8836,26 +8843,6 @@
 .x-badge-container {
   position: relative;
 }
-:root {
-  --x-color-base-lead: #243d48;
-  --x-color-base-auxiliary: #bfe1ec;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #0086b2;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
-:root {
-  --x-size-border-radius-base-none: 0;
-  --x-size-border-radius-base-s: var(--x-size-base-02);
-  --x-size-border-radius-base-m: var(--x-size-base-06);
-  --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px;
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8879,9 +8866,22 @@
   --x-size-base-20: 344px;
 }
 :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-color-base-lead: #243d48;
+  --x-color-base-auxiliary: #bfe1ec;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #0086b2;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
+:root {
+  --x-size-border-radius-base-none: 0;
+  --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
+  --x-size-border-radius-base-pill: 99999px;
+  --x-size-border-width-base: 1px;
 }