@empathyco/x-components 3.0.0-alpha.18 → 3.0.0-alpha.181

package/design-system/default-theme.css

@@ -1,3 +1,62 @@
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
+
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4);
+}
+
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4);
+}
+
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  padding: 2px;
+  background: var(--x-color-background-badge-default);
+  color: var(--x-color-text-badge-default);
+  border-color: var(--x-color-border-badge-default);
+}
+[dir="rtl"] .x-badge {
+  transform: translate(-50%, -50%);
+}
+
+.x-badge-container {
+  position: relative;
+}
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -19,38 +78,49 @@
   --x-font-family-button-default: var(--x-font-family-text);
   --x-size-font-button-default: var(--x-size-font-text);
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text); }
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-button {
-          padding-right: var(--x-size-padding-right-button-default); }
+  padding-right: var(--x-size-padding-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-          padding-left: var(--x-size-padding-right-button-default); }
+  padding-left: var(--x-size-padding-right-button-default);
+}
+
 [dir="ltr"] .x-button {
-          padding-left: var(--x-size-padding-left-button-default); }
+  padding-left: var(--x-size-padding-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-          padding-right: var(--x-size-padding-left-button-default); }
+  padding-right: var(--x-size-padding-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-left-width: var(--x-size-border-width-left-button-default); }
+  border-left-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-right-width: var(--x-size-border-width-left-button-default); }
+  border-right-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-right-width: var(--x-size-border-width-right-button-default); }
+  border-right-width: var(--x-size-border-width-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-left-width: var(--x-size-border-width-right-button-default); }
+  border-left-width: var(--x-size-border-width-right-button-default);
+}
+
 .x-button {
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  justify-content: center;
+  align-items: center;
   box-sizing: border-box;
   margin: 0;
   gap: var(--x-size-gap-button-default);
   min-height: var(--x-size-height-button-default);
-  -webkit-padding-end: var(--x-size-padding-right-button-default);
-  -webkit-padding-start: var(--x-size-padding-left-button-default);
   background-color: var(--x-color-background-button-default);
   border-color: var(--x-color-border-button-default);
   color: var(--x-color-text-button-default);
@@ -62,13 +132,16 @@
   font-size: var(--x-size-font-button-default);
   font-weight: var(--x-number-font-weight-button-default);
   line-height: var(--x-size-line-height-button-default);
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-button {
-      gap: 0; }
-      .x-button > *:not(:last-child) {
-        margin-right: var(--x-size-gap-button-default); } }
-
+  cursor: pointer;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-button {
+    gap: 0;
+  }
+  .x-button > *:not(:last-child) {
+    margin-right: var(--x-size-gap-button-default);
+  }
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -90,8 +163,8 @@
   --x-font-family-button-default: var(--x-font-family-text);
   --x-size-font-button-default: var(--x-size-font-text);
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text); }
-
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
 :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);
@@ -128,13 +201,16 @@
   --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-font-dropdown-default: var(--x-color-text-default);
-  --x-color-font-dropdown-toggle-default: var(--x-color-font-dropdown-default);
-  --x-color-font-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-selected: var(--x-color-text-default);
+  --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);
@@ -143,143 +219,194 @@
   --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-default: auto;
+  --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-rotation-toggle-icon-collapsed: 0;
-  --x-rotation-toggle-icon-expanded: 180deg; }
+  --x-string-box-shadow-dropdown-default: none;
+  --x-string-overflow-dropdown-toggle-default: hidden;
+  --x-string-overflow-dropdown-list-default: hidden;
+}
 
-@use 'sass:string';
 .x-dropdown {
   box-sizing: border-box;
   position: relative;
   font-size: var(--x-size-font-dropdown-default);
   font-family: var(--x-font-family-dropdown-default);
   font-weight: var(--x-number-font-weight-dropdown-default);
-  line-height: var(--x-size-line-height-dropdown-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    border-right-width: var(--x-size-border-width-right-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    border-left-width: var(--x-size-border-width-right-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    border-left-width: var(--x-size-border-width-left-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    border-right-width: var(--x-size-border-width-left-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-            padding-right: var(--x-size-padding-right-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-            padding-left: var(--x-size-padding-right-dropdown-item-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-            padding-left: var(--x-size-padding-left-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-            padding-right: var(--x-size-padding-left-dropdown-item-default); }
+  line-height: var(--x-size-line-height-dropdown-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-left-dropdown-toggle-default);
+}
+.x-dropdown__toggle {
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  background: var(--x-color-background-dropdown-toggle-default);
+  color: var(--x-color-text-dropdown-toggle-default);
+  border-color: var(--x-color-border-dropdown-toggle-default);
+  padding-top: var(--x-size-padding-top-dropdown-toggle-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  width: var(--x-size-width-dropdown-toggle-default);
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 0;
+  cursor: pointer;
+  overflow: var(--x-string-overflow-dropdown-toggle-default);
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-dropdown__toggle {
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
-    border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
-    border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-    background: var(--x-color-background-dropdown-toggle-default);
-    color: var(--x-color-font-dropdown-toggle-default);
-    border-color: var(--x-color-border-dropdown-toggle-default);
-    -webkit-padding-before: var(--x-size-padding-top-dropdown-item-default);
-            padding-top: var(--x-size-padding-top-dropdown-item-default);
-    -webkit-padding-end: var(--x-size-padding-right-dropdown-item-default);
-    -webkit-padding-after: var(--x-size-padding-bottom-dropdown-item-default);
-            padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
-    -webkit-padding-start: var(--x-size-padding-left-dropdown-item-default);
-    gap: var(--x-size-gap-dropdown-item-default);
-    width: var(--x-size-width-dropdown-default);
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-flow: row nowrap;
-        flex-flow: row nowrap;
-    margin: 0;
-    cursor: pointer;
-    overflow: hidden; }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-dropdown__toggle {
-        gap: 0; }
-        .x-dropdown__toggle > *:not(:last-child) {
-          margin-right: var(--x-size-gap-dropdown-item-default); } }
-    .x-dropdown__toggle .x-icon {
-      transform: rotate(var(--x-rotation-toggle-icon-collapsed)); }
-  .x-dropdown__toggle-selected-value {
-    color: var(--x-color-font-dropdown-toggle-default-selected); }
-  [dir="ltr"] .x-dropdown__items-list {
-    border-right-width: var(--x-size-border-width-right-dropdown-list-default); }
-  [dir="rtl"] .x-dropdown__items-list {
-    border-left-width: var(--x-size-border-width-right-dropdown-list-default); }
-  [dir="ltr"] .x-dropdown__items-list {
-    border-left-width: var(--x-size-border-width-left-dropdown-list-default); }
-  [dir="rtl"] .x-dropdown__items-list {
-    border-right-width: var(--x-size-border-width-left-dropdown-list-default); }
-  .x-dropdown__items-list {
-    box-sizing: border-box;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: calc(100% + var(--x-size-gap-dropdown-default));
-    overflow: hidden;
-    border-color: var(--x-color-border-dropdown-list-default);
-    border-top-width: var(--x-size-border-width-top-dropdown-list-default);
-    border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
-    border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-    border-style: solid;
-    margin: 0;
-    padding: 0;
-    z-index: 1; }
-  [dir="ltr"] .x-dropdown__item {
-            padding-left: var(--x-size-padding-left-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__item {
-            padding-right: var(--x-size-padding-left-dropdown-item-default); }
-  [dir="ltr"] .x-dropdown__item {
-            padding-right: var(--x-size-padding-right-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__item {
-            padding-left: var(--x-size-padding-right-dropdown-item-default); }
+    gap: 0;
+  }
+  .x-dropdown__toggle > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+[dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown__toggle-selected-value {
+  color: var(--x-color-text-dropdown-toggle-default-selected);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+.x-dropdown__items-list {
+  background: var(--x-color-background-dropdown-default);
+  box-sizing: border-box;
+  min-width: var(--x-size-min-width-dropdown-list-default);
+  position: absolute;
+  top: calc(100% + var(--x-size-gap-dropdown-default));
+  overflow: var(--x-string-overflow-dropdown-list-default);
+  border-color: var(--x-color-border-dropdown-list-default);
+  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  border-style: solid;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+  z-index: 1;
+}
+.x-dropdown__items-list:before, .x-dropdown__items-list:after {
+  content: "";
+  display: block;
+  height: var(--x-size-padding-vertical-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-right-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-right-dropdown-item-default);
+}
+.x-dropdown__item {
+  background: var(--x-color-background-dropdown-default);
+  padding-top: var(--x-size-padding-top-dropdown-item-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  border: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  text-align: left;
+  width: 100%;
+  margin: 0;
+  white-space: nowrap;
+  cursor: pointer;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-dropdown__item {
-    background: var(--x-color-background-dropdown-default);
-    -webkit-padding-before: var(--x-size-padding-top-dropdown-item-default);
-            padding-top: var(--x-size-padding-top-dropdown-item-default);
-    -webkit-padding-after: var(--x-size-padding-bottom-dropdown-item-default);
-            padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
-    -webkit-padding-start: var(--x-size-padding-left-dropdown-item-default);
-    -webkit-padding-end: var(--x-size-padding-right-dropdown-item-default);
-    gap: var(--x-size-gap-dropdown-item-default);
-    border: none;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-flow: row nowrap;
-        flex-flow: row nowrap;
-    -ms-flex-pack: justify;
-        justify-content: space-between;
-    text-align: left;
-    width: 100%;
-    margin: 0;
-    cursor: pointer; }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-dropdown__item {
-        gap: 0; }
-        .x-dropdown__item > *:not(:last-child) {
-          margin-right: var(--x-size-gap-dropdown-item-default); } }
-    .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
-      color: var(--x-color-font-dropdown-item-default-hover);
-      background-color: var(--x-color-background-dropdown-item-default-hover);
-      font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
-      -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
-              text-decoration: var(--x-font-decoration-dropdown-item-default-hover); }
-    .x-dropdown__item--is-selected {
-      color: var(--x-color-font-dropdown-item-default-selected);
-      background-color: var(--x-color-background-dropdown-item-default-selected);
-      font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
-      -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
-              text-decoration: var(--x-font-decoration-dropdown-item-default-selected); }
-  .x-dropdown--is-open .x-dropdown__toggle .x-icon {
-    transform: rotate(var(--x-rotation-toggle-icon-expanded)); }
-
+    gap: 0;
+  }
+  .x-dropdown__item > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+.x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
+  color: var(--x-color-text-dropdown-item-default-hover);
+  background-color: var(--x-color-background-dropdown-item-default-hover);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+}
+.x-dropdown__item--is-selected {
+  color: var(--x-color-text-dropdown-item-default-selected);
+  background-color: var(--x-color-background-dropdown-item-default-selected);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+}
+[dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown--is-open {
+  --x-color-background-dropdown-toggle-default: var(
+    --x-color-background-dropdown-toggle-open-default
+  );
+}
+[dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
+  right: 0;
+}
+[dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
+  left: 0;
+}
 :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);
@@ -316,13 +443,16 @@
   --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-font-dropdown-default: var(--x-color-text-default);
-  --x-color-font-dropdown-toggle-default: var(--x-color-font-dropdown-default);
-  --x-color-font-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-selected: var(--x-color-text-default);
+  --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);
@@ -331,16 +461,25 @@
   --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-default: auto;
+  --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-rotation-toggle-icon-collapsed: 0;
-  --x-rotation-toggle-icon-expanded: 180deg; }
-
+  --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-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -372,89 +511,102 @@
   --x-font-family-facet-default: var(--x-font-family-title3);
   --x-size-font-facet-default: var(--x-size-font-title3);
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3); }
+  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-facet {
-  border-right-width: var(--x-size-border-width-right-facet-default); }
+  border-right-width: var(--x-size-border-width-right-facet-default);
+}
+
 [dir="rtl"] .x-facet {
-  border-left-width: var(--x-size-border-width-right-facet-default); }
+  border-left-width: var(--x-size-border-width-right-facet-default);
+}
+
 [dir="ltr"] .x-facet {
-  border-left-width: var(--x-size-border-width-left-facet-default); }
+  border-left-width: var(--x-size-border-width-left-facet-default);
+}
+
 [dir="rtl"] .x-facet {
-  border-right-width: var(--x-size-border-width-left-facet-default); }
+  border-right-width: var(--x-size-border-width-left-facet-default);
+}
+
 .x-facet {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-flow: column nowrap;
-      flex-flow: column nowrap;
-  -ms-flex-pack: start;
-      justify-content: flex-start;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
   box-sizing: border-box;
   background-color: var(--x-color-background-facet-default);
   border-color: var(--x-color-border-facet-default);
   border-style: solid;
   border-top-width: var(--x-size-border-width-top-facet-default);
   border-bottom-width: var(--x-size-border-width-bottom-facet-default);
-  border-radius: var(--x-size-border-radius-top-left-facet-default) var(--x-size-border-radius-top-right-facet-default) var(--x-size-border-radius-bottom-right-facet-default) var(--x-size-border-radius-bottom-left-facet-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    text-align: left; }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    text-align: right; }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-            padding-left: var(--x-size-padding-left-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-            padding-right: var(--x-size-padding-left-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-            padding-right: var(--x-size-padding-right-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-            padding-left: var(--x-size-padding-right-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    border-right-width: var(--x-size-border-width-right-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    border-left-width: var(--x-size-border-width-right-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    border-left-width: var(--x-size-border-width-left-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    border-right-width: var(--x-size-border-width-left-facet-header-default); }
+  border-radius: var(--x-size-border-radius-top-left-facet-default) var(--x-size-border-radius-top-right-facet-default) var(--x-size-border-radius-bottom-right-facet-default) var(--x-size-border-radius-bottom-left-facet-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  text-align: left;
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  text-align: right;
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  padding-left: var(--x-size-padding-left-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  padding-right: var(--x-size-padding-left-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  padding-right: var(--x-size-padding-right-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  padding-left: var(--x-size-padding-right-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  border-right-width: var(--x-size-border-width-right-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  border-left-width: var(--x-size-border-width-right-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  border-left-width: var(--x-size-border-width-left-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  border-right-width: var(--x-size-border-width-left-facet-header-default);
+}
+.x-facet > *:first-child, .x-facet__header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: stretch;
+  align-items: flex-start;
+  box-sizing: border-box;
+  background-color: var(--x-color-background-facet-header-default);
+  border-color: var(--x-color-border-facet-header-default);
+  color: var(--x-color-text-facet-default);
+  gap: var(--x-size-gap-facet-header-default);
+  padding-top: var(--x-size-padding-top-facet-header-default);
+  padding-bottom: var(--x-size-padding-bottom-facet-header-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-facet-header-default);
+  border-bottom-width: var(--x-size-border-width-bottom-facet-header-default);
+  font-family: var(--x-font-family-facet-default);
+  font-size: var(--x-size-font-facet-default);
+  font-weight: var(--x-number-font-weight-facet-default);
+  line-height: var(--x-size-line-height-facet-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-facet > *:first-child, .x-facet__header {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-flow: row nowrap;
-        flex-flow: row nowrap;
-    -ms-flex-pack: stretch;
-        justify-content: stretch;
-    -ms-flex-align: start;
-        align-items: flex-start;
-    box-sizing: border-box;
-    background-color: var(--x-color-background-facet-header-default);
-    border-color: var(--x-color-border-facet-header-default);
-    color: var(--x-color-text-facet-default);
-    gap: var(--x-size-gap-facet-header-default);
-    -webkit-padding-before: var(--x-size-padding-top-facet-header-default);
-            padding-top: var(--x-size-padding-top-facet-header-default);
-    -webkit-padding-after: var(--x-size-padding-bottom-facet-header-default);
-            padding-bottom: var(--x-size-padding-bottom-facet-header-default);
-    -webkit-padding-start: var(--x-size-padding-left-facet-header-default);
-    -webkit-padding-end: var(--x-size-padding-right-facet-header-default);
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-facet-header-default);
-    border-bottom-width: var(--x-size-border-width-bottom-facet-header-default);
-    font-family: var(--x-font-family-facet-default);
-    font-size: var(--x-size-font-facet-default);
-    font-weight: var(--x-number-font-weight-facet-default);
-    line-height: var(--x-size-line-height-facet-default); }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-facet > *:first-child, .x-facet__header {
-        gap: 0; }
-        .x-facet > *:first-child > *:not(:last-child), .x-facet__header > *:not(:last-child) {
-          margin-right: var(--x-size-gap-facet-header-default); } }
-    .x-facet > *:first-child .x-icon, .x-facet__header .x-icon {
-      --x-size-height-icon: var(--x-size-line-height-facet-default);
-      --x-size-width-icon: var(--x-size-line-height-facet-default); }
-      .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
-        margin-left: auto; }
-
+    gap: 0;
+  }
+  .x-facet > *:first-child > *:not(:last-child), .x-facet__header > *:not(:last-child) {
+    margin-right: var(--x-size-gap-facet-header-default);
+  }
+}
+.x-facet > *:first-child .x-icon, .x-facet__header .x-icon {
+  --x-size-height-icon: var(--x-size-line-height-facet-default);
+  --x-size-width-icon: var(--x-size-line-height-facet-default);
+}
+.x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
+  margin-left: auto;
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -486,8 +638,8 @@
   --x-font-family-facet-default: var(--x-font-family-title3);
   --x-size-font-facet-default: var(--x-size-font-title3);
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3); }
-
+  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -516,41 +668,50 @@
   --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); }
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-filter {
-          padding-left: var(--x-size-padding-left-filter-default); }
+  padding-left: var(--x-size-padding-left-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-          padding-right: var(--x-size-padding-left-filter-default); }
+  padding-right: var(--x-size-padding-left-filter-default);
+}
+
 [dir="ltr"] .x-filter {
-          padding-right: var(--x-size-padding-right-filter-default); }
+  padding-right: var(--x-size-padding-right-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-          padding-left: var(--x-size-padding-right-filter-default); }
+  padding-left: var(--x-size-padding-right-filter-default);
+}
+
 [dir="ltr"] .x-filter {
-  border-right-width: var(--x-size-border-width-right-filter-default); }
+  border-right-width: var(--x-size-border-width-right-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-  border-left-width: var(--x-size-border-width-right-filter-default); }
+  border-left-width: var(--x-size-border-width-right-filter-default);
+}
+
 [dir="ltr"] .x-filter {
-  border-left-width: var(--x-size-border-width-left-filter-default); }
+  border-left-width: var(--x-size-border-width-left-filter-default);
+}
+
 [dir="rtl"] .x-filter {
-  border-right-width: var(--x-size-border-width-left-filter-default); }
+  border-right-width: var(--x-size-border-width-left-filter-default);
+}
+
 .x-filter {
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -ms-flex-pack: start;
-      justify-content: flex-start;
-  -ms-flex-align: start;
-      align-items: flex-start;
+  justify-content: flex-start;
+  align-items: flex-start;
   box-sizing: border-box;
   text-align: left;
   gap: var(--x-size-gap-filter-default);
-  -webkit-padding-before: var(--x-size-padding-top-filter-default);
-          padding-top: var(--x-size-padding-top-filter-default);
-  -webkit-padding-after: var(--x-size-padding-bottom-filter-default);
-          padding-bottom: var(--x-size-padding-bottom-filter-default);
-  -webkit-padding-start: var(--x-size-padding-left-filter-default);
-  -webkit-padding-end: var(--x-size-padding-right-filter-default);
+  padding-top: var(--x-size-padding-top-filter-default);
+  padding-bottom: var(--x-size-padding-bottom-filter-default);
   background-color: var(--x-color-background-filter-default);
   border-color: var(--x-color-border-filter-default);
   color: var(--x-color-text-filter-default);
@@ -562,29 +723,34 @@
   font-size: var(--x-size-font-filter-default);
   font-weight: var(--x-number-font-weight-filter-default);
   line-height: var(--x-size-line-height-filter-default);
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-filter {
-      gap: 0; }
-      .x-filter > *:not(:last-child) {
-        margin-right: var(--x-size-gap-filter-default); } }
-  .x-filter > * {
-    -ms-flex: 0 0 auto;
-        flex: 0 0 auto; }
-  .x-filter__label {
-    -ms-flex: 0 1 auto;
-        flex: 0 1 auto; }
-  .x-filter__count {
-    font-weight: var(--x-number-font-weight-filter-count-default); }
-  .x-filter--is-selected {
-    --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
-    --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
-    --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
-    --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
-    --x-number-font-weight-filter-count-default: var(
-      --x-number-font-weight-filter-count-default-selected
-    ); }
-
+  cursor: pointer;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-filter {
+    gap: 0;
+  }
+  .x-filter > *:not(:last-child) {
+    margin-right: var(--x-size-gap-filter-default);
+  }
+}
+.x-filter > * {
+  flex: 0 0 auto;
+}
+.x-filter__label {
+  flex: 0 1 auto;
+}
+.x-filter__count {
+  font-weight: var(--x-number-font-weight-filter-count-default);
+}
+.x-filter--is-selected {
+  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
+  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
+  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
+  --x-number-font-weight-filter-count-default: var(
+    --x-number-font-weight-filter-count-default-selected
+  );
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -613,28 +779,39 @@
   --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); }
-
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px; }
+  --x-size-min-width-grid-item: 150px;
+}
 
 .x-grid {
   margin: 0;
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
   grid-auto-flow: dense;
+  align-items: stretch;
   list-style: none;
   padding: var(--x-size-padding-grid);
-  gap: var(--x-size-gap-grid); }
-  .x-grid--cols-auto.x-grid__item {
-    min-width: var(--x-size-min-width-grid-item); }
-
+  gap: var(--x-size-gap-grid);
+}
+.x-grid__item {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.x-grid__item > * {
+  flex-grow: 1;
+}
+.x-grid--cols-auto .x-grid__item {
+  min-width: var(--x-size-min-width-grid-item);
+}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px; }
-
+  --x-size-min-width-grid-item: 150px;
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -642,19 +819,16 @@
   --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-size-stroke-width-icon-default: 1px;
+}
 
 .x-icon {
   stroke: var(--x-color-stroke-icon-default);
   fill: var(--x-color-fill-icon-default);
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -ms-flex-align: center;
-      align-items: center;
-  -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 auto;
   vertical-align: middle;
   line-height: var(--x-size-height-icon-default);
   width: var(--x-size-width-icon-default);
@@ -662,8 +836,12 @@
   font-size: var(--x-size-height-icon-default);
   stroke-linecap: var(--x-string-stroke-linecap-icon-default);
   stroke-linejoin: var(--x-string-stroke-linejoin-icon-default);
-  stroke-width: var(--x-size-stroke-width-icon-default); }
-
+  stroke-width: var(--x-size-stroke-width-icon-default);
+}
+.x-icon.x-filled {
+  stroke: none;
+  fill: var(--x-color-stroke-icon-default);
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -671,8 +849,8 @@
   --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-size-stroke-width-icon-default: 1px;
+}
 :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);
@@ -714,26 +892,30 @@
   --x-number-font-weight-input-group-placeholder-default: var(
     --x-number-font-weight-input-group-default
   );
-  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light); }
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-input-group {
-  border-right-width: var(--x-size-border-width-right-input-group-default); }
+  border-right-width: var(--x-size-border-width-right-input-group-default);
+}
+
 [dir="rtl"] .x-input-group {
-  border-left-width: var(--x-size-border-width-right-input-group-default); }
+  border-left-width: var(--x-size-border-width-right-input-group-default);
+}
+
 [dir="ltr"] .x-input-group {
-  border-left-width: var(--x-size-border-width-left-input-group-default); }
+  border-left-width: var(--x-size-border-width-left-input-group-default);
+}
+
 [dir="rtl"] .x-input-group {
-  border-right-width: var(--x-size-border-width-left-input-group-default); }
+  border-right-width: var(--x-size-border-width-left-input-group-default);
+}
+
 .x-input-group {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-flow: row nowrap;
-      flex-flow: row nowrap;
-  -ms-flex-line-pack: center;
-      align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
   box-sizing: border-box;
   min-width: 0;
   gap: var(--x-size-gap-input-group-default);
@@ -744,96 +926,108 @@
   border-top-width: var(--x-size-border-width-top-input-group-default);
   border-bottom-width: var(--x-size-border-width-bottom-input-group-default);
   border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
-  border-style: solid; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-input-group {
-      gap: 0; }
-      .x-input-group > *:not(:last-child) {
-        margin-right: var(--x-size-gap-input-group-default); } }
-  .x-input-group:focus-within {
-    border-color: var(--x-color-border-input-group-default-focus); }
-  .x-input-group > *,
-  .x-input-group > .x-input,
-  .x-input-group > .x-button {
-    -ms-flex: 0 0 auto;
-        flex: 0 0 auto;
-    font-family: var(--x-font-family-input-group-default);
-    font-size: var(--x-size-font-input-group-default);
-    font-weight: var(--x-number-font-weight-input-group-default);
-    line-height: var(--x-size-line-height-input-group-default); }
-  [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
-            padding-left: 0; }
-  [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-            padding-right: 0; }
-  [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
-            padding-right: 0; }
-  [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-            padding-left: 0; }
-  .x-input-group > *:not(.x-input-group__action) {
-    background-color: transparent;
-    color: var(--x-color-text-input-group-default);
-    border: none;
-    -webkit-padding-start: 0;
-    -webkit-padding-end: 0; }
-    [dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
-              padding-left: var(--x-size-padding-left-input-group-default); }
-    [dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
-              padding-right: var(--x-size-padding-left-input-group-default); }
-    .x-input-group > *:not(.x-input-group__action):first-child {
-      -webkit-padding-start: var(--x-size-padding-left-input-group-default); }
-    [dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
-              padding-right: var(--x-size-padding-right-input-group-default); }
-    [dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
-              padding-left: var(--x-size-padding-right-input-group-default); }
-    .x-input-group > *:not(.x-input-group__action):last-child {
-      -webkit-padding-end: var(--x-size-padding-right-input-group-default); }
-  .x-input-group > .x-input {
-    -ms-flex: 1 1 100%;
-        flex: 1 1 100%;
-    min-width: 0;
-    border: none; }
-    .x-input-group > .x-input:-ms-input-placeholder {
-      color: var(--x-color-text-input-group-placeholder-default);
-      font-family: var(--x-font-family-input-group-placeholder-default);
-      font-size: var(--x-size-font-input-group-placeholder-default);
-      font-weight: var(--x-number-font-weight-input-group-placeholder-default);
-      line-height: var(--x-size-line-height-input-group-placeholder-default); }
-    .x-input-group > .x-input::-ms-input-placeholder {
-      color: var(--x-color-text-input-group-placeholder-default);
-      font-family: var(--x-font-family-input-group-placeholder-default);
-      font-size: var(--x-size-font-input-group-placeholder-default);
-      font-weight: var(--x-number-font-weight-input-group-placeholder-default);
-      line-height: var(--x-size-line-height-input-group-placeholder-default); }
-    .x-input-group > .x-input::placeholder {
-      color: var(--x-color-text-input-group-placeholder-default);
-      font-family: var(--x-font-family-input-group-placeholder-default);
-      font-size: var(--x-size-font-input-group-placeholder-default);
-      font-weight: var(--x-number-font-weight-input-group-placeholder-default);
-      line-height: var(--x-size-line-height-input-group-placeholder-default); }
-  .x-input-group > .x-button {
-    height: var(--x-size-height-input-group-default);
-    min-height: var(--x-size-height-input-group-default);
-    margin: calc(var(--x-size-border-width-input-group-default) * -1); }
-    [dir="ltr"] .x-input-group > .x-button:first-child {
-              margin-right: 0; }
-    [dir="rtl"] .x-input-group > .x-button:first-child {
-              margin-left: 0; }
-    .x-input-group > .x-button:first-child {
-      -webkit-margin-end: 0; }
-    [dir="ltr"] .x-input-group > .x-button:last-child {
-              margin-left: 0; }
-    [dir="rtl"] .x-input-group > .x-button:last-child {
-              margin-right: 0; }
-    .x-input-group > .x-button:last-child {
-      -webkit-margin-start: 0; }
-  .x-input-group > .x-button:not(.x-input-group__action) {
-    font-weight: var(--x-number-font-weight-input-group-default-button); }
-  .x-input-group > .x-input-group__action {
-    box-sizing: border-box;
-    padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
-    min-width: var(--x-size-height-input-group-default);
-    border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default); }
-
+  border-style: solid;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-input-group {
+    gap: 0;
+  }
+  .x-input-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-input-group-default);
+  }
+}
+.x-input-group:focus-within {
+  border-color: var(--x-color-border-input-group-default-focus);
+}
+.x-input-group > *,
+.x-input-group > .x-input,
+.x-input-group > .x-button {
+  flex: 0 0 auto;
+  font-family: var(--x-font-family-input-group-default);
+  font-size: var(--x-size-font-input-group-default);
+  font-weight: var(--x-number-font-weight-input-group-default);
+  line-height: var(--x-size-line-height-input-group-default);
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
+  padding-left: 0;
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
+  padding-right: 0;
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
+  padding-right: 0;
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
+  padding-left: 0;
+}
+.x-input-group > *:not(.x-input-group__action) {
+  background-color: transparent;
+  color: var(--x-color-text-input-group-default);
+  border: none;
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
+  padding-left: var(--x-size-padding-left-input-group-default);
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
+  padding-right: var(--x-size-padding-left-input-group-default);
+}
+[dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
+  padding-right: var(--x-size-padding-right-input-group-default);
+}
+[dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
+  padding-left: var(--x-size-padding-right-input-group-default);
+}
+.x-input-group > .x-input {
+  flex: 1 1 100%;
+  min-width: 0;
+  border: none;
+}
+.x-input-group > .x-input::placeholder {
+  color: var(--x-color-text-input-group-placeholder-default);
+  font-family: var(--x-font-family-input-group-placeholder-default);
+  font-size: var(--x-size-font-input-group-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-group-placeholder-default);
+  line-height: var(--x-size-line-height-input-group-placeholder-default);
+}
+.x-input-group > .x-button {
+  height: var(--x-size-height-input-group-default);
+  min-height: var(--x-size-height-input-group-default);
+  margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1);
+}
+.x-input-group > .x-button:not(.x-input-group__action) {
+  font-weight: var(--x-number-font-weight-input-group-default-button);
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-right: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
+  margin-left: 0;
+}
+[dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-left: 0;
+}
+[dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
+  margin-right: 0;
+}
+.x-input-group > .x-input-group__action {
+  box-sizing: border-box;
+  padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
+  min-width: var(--x-size-height-input-group-default);
+  border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:first-child {
+  margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:first-child {
+  margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
+}
+[dir="ltr"] .x-input-group > .x-input-group__action:last-child {
+  margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
+[dir="rtl"] .x-input-group > .x-input-group__action:last-child {
+  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -875,8 +1069,8 @@
   --x-number-font-weight-input-group-placeholder-default: var(
     --x-number-font-weight-input-group-default
   );
-  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light); }
-
+  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -903,36 +1097,48 @@
   --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-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-input {
-          padding-left: var(--x-size-padding-left-input-default); }
+  padding-left: var(--x-size-padding-left-input-default);
+}
+
 [dir="rtl"] .x-input {
-          padding-right: var(--x-size-padding-left-input-default); }
+  padding-right: var(--x-size-padding-left-input-default);
+}
+
 [dir="ltr"] .x-input {
-          padding-right: var(--x-size-padding-right-input-default); }
+  padding-right: var(--x-size-padding-right-input-default);
+}
+
 [dir="rtl"] .x-input {
-          padding-left: var(--x-size-padding-right-input-default); }
+  padding-left: var(--x-size-padding-right-input-default);
+}
+
 [dir="ltr"] .x-input {
-  border-right-width: var(--x-size-border-width-right-input-default); }
+  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); }
+  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); }
+  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); }
+  border-right-width: var(--x-size-border-width-left-input-default);
+}
+
 .x-input {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   height: var(--x-size-height-input-default);
-  -webkit-padding-before: 0;
-          padding-top: 0;
-  -webkit-padding-after: 0;
-          padding-bottom: 0;
-  -webkit-padding-start: var(--x-size-padding-left-input-default);
-  -webkit-padding-end: var(--x-size-padding-right-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);
@@ -943,31 +1149,23 @@
   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:-ms-input-placeholder {
-    color: var(--x-color-text-input-placeholder-default);
-    font-family: var(--x-font-family-input-placeholder-default);
-    font-size: var(--x-size-font-input-placeholder-default);
-    font-weight: var(--x-number-font-weight-input-placeholder-default);
-    line-height: var(--x-size-line-height-input-placeholder-default); }
-  .x-input::-ms-input-placeholder {
-    color: var(--x-color-text-input-placeholder-default);
-    font-family: var(--x-font-family-input-placeholder-default);
-    font-size: var(--x-size-font-input-placeholder-default);
-    font-weight: var(--x-number-font-weight-input-placeholder-default);
-    line-height: var(--x-size-line-height-input-placeholder-default); }
-  .x-input::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); }
-
+  line-height: var(--x-size-line-height-input-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), 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::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-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -994,174 +1192,256 @@
   --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-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
 :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-align-list-stretch: stretch;
+}
 
-@use 'sass:string';
 .x-list {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-flow: var(--x-string-flow-list);
-      flex-flow: var(--x-string-flow-list);
+  flex-flow: var(--x-string-flow-list);
   list-style: none;
   gap: var(--x-size-gap-list);
   margin: 0;
   padding: var(--x-size-padding-list);
-  -ms-flex-pack: var(--x-size-justify-list);
-      justify-content: var(--x-size-justify-list);
-  -ms-flex-align: var(--x-size-align-list);
-      align-items: var(--x-size-align-list);
-  font-family: var(--x-font-family-text);
-  font-size: var(--x-size-font-text);
-  font-weight: var(--x-number-font-weight-text);
-  line-height: var(--x-size-line-height-text);
-  min-width: 0; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
-      gap: 0; }
-      .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
-        margin-bottom: var(--x-size-gap-list); } }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-list.x-list--horizontal {
-      gap: 0; }
-      .x-list.x-list--horizontal > *:not(:last-child) {
-        margin-right: var(--x-size-gap-list); } }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
-      gap: 0; }
-      .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
-        margin-right: var(--x-size-gap-list);
-        margin-bottom: var(--x-size-gap-list); } }
+  justify-content: var(--x-size-justify-list);
+  align-items: var(--x-size-align-list);
+  min-width: 0;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list);
+  }
+  .x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+  }
+  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
+    gap: 0;
+  }
+  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+    margin-bottom: var(--x-size-gap-list);
+  }
+}
 
 .x-list--vertical.x-list {
-  -ms-flex-flow: column nowrap;
-      flex-flow: column nowrap; }
+  flex-flow: column nowrap;
+}
 
 .x-list--horizontal.x-list {
-  -ms-flex-flow: row nowrap;
-      flex-flow: row nowrap; }
+  flex-flow: row nowrap;
+}
 
 .x-list--wrap.x-list {
-  -ms-flex-flow: row wrap;
-      flex-flow: row wrap; }
+  flex-flow: row wrap;
+}
 
 .x-list--wrap-reverse.x-list {
-  -ms-flex-flow: row wrap-reverse;
-      flex-flow: row wrap-reverse; }
+  flex-flow: row wrap-reverse;
+}
 
 .x-list--justify-stretch.x-list {
-  -ms-flex-pack: stretch;
-      justify-content: stretch; }
+  justify-content: stretch;
+}
 
 .x-list--justify-center.x-list {
-  -ms-flex-pack: center;
-      justify-content: center; }
+  justify-content: center;
+}
 
 .x-list--justify-end.x-list {
-  -ms-flex-pack: end;
-      justify-content: flex-end; }
+  justify-content: flex-end;
+}
 
 .x-list--justify-start.x-list {
-  -ms-flex-pack: start;
-      justify-content: flex-start; }
+  justify-content: flex-start;
+}
 
 .x-list--align-stretch.x-list {
-  -ms-flex-align: stretch;
-      align-items: stretch; }
+  align-items: stretch;
+}
 
 .x-list--align-center.x-list {
-  -ms-flex-align: center;
-      align-items: center; }
+  align-items: center;
+}
 
 .x-list--align-baseline.x-list {
-  -ms-flex-align: baseline;
-      align-items: baseline; }
+  align-items: baseline;
+}
 
 .x-list--align-end.x-list {
-  -ms-flex-align: end;
-      align-items: flex-end; }
+  align-items: flex-end;
+}
 
 .x-list--align-start.x-list {
-  -ms-flex-align: start;
-      align-items: flex-start; }
+  align-items: flex-start;
+}
 
 .x-list > .x-list__item--expand {
-  -ms-flex: 1 1 auto;
-      flex: 1 1 auto; }
-
+  flex: 1 1 auto;
+}
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto;
+}
 .x-list.x-list--horizontal > .x-list__item--expand {
-  min-width: 0; }
-
+  min-width: 0;
+}
 .x-list:not(.x-list--horizontal) > .x-list__item--expand {
-  min-height: 0; }
-
+  min-height: 0;
+}
 .x-list > .x-list__item--stretch {
-  -ms-flex-item-align: stretch;
-      align-self: stretch; }
-
+  align-self: stretch;
+}
+.x-list > .x-list__item--flex-none {
+  flex: none;
+}
 .x-list > .x-list__item--01 {
-  -ms-flex: 1 12 auto;
-      flex: 1 12 auto; }
-
+  flex: 1 12 auto;
+}
 .x-list > .x-list__item--02 {
-  -ms-flex: 2 11 auto;
-      flex: 2 11 auto; }
-
+  flex: 2 11 auto;
+}
 .x-list > .x-list__item--03 {
-  -ms-flex: 3 10 auto;
-      flex: 3 10 auto; }
-
+  flex: 3 10 auto;
+}
 .x-list > .x-list__item--04 {
-  -ms-flex: 4 9 auto;
-      flex: 4 9 auto; }
-
+  flex: 4 9 auto;
+}
 .x-list > .x-list__item--05 {
-  -ms-flex: 5 8 auto;
-      flex: 5 8 auto; }
-
+  flex: 5 8 auto;
+}
 .x-list > .x-list__item--06 {
-  -ms-flex: 6 7 auto;
-      flex: 6 7 auto; }
-
+  flex: 6 7 auto;
+}
 .x-list > .x-list__item--07 {
-  -ms-flex: 7 6 auto;
-      flex: 7 6 auto; }
-
+  flex: 7 6 auto;
+}
 .x-list > .x-list__item--08 {
-  -ms-flex: 8 5 auto;
-      flex: 8 5 auto; }
-
+  flex: 8 5 auto;
+}
 .x-list > .x-list__item--09 {
-  -ms-flex: 9 4 auto;
-      flex: 9 4 auto; }
-
+  flex: 9 4 auto;
+}
 .x-list > .x-list__item--10 {
-  -ms-flex: 10 3 auto;
-      flex: 10 3 auto; }
-
+  flex: 10 3 auto;
+}
 .x-list > .x-list__item--11 {
-  -ms-flex: 11 2 auto;
-      flex: 11 2 auto; }
-
+  flex: 11 2 auto;
+}
 .x-list > .x-list__item--12 {
-  -ms-flex: 12 1 auto;
-      flex: 12 1 auto; }
-
+  flex: 12 1 auto;
+}
 :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-align-list-stretch: stretch;
+}
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
+
+[dir="ltr"] .x-message {
+  border-left-width: var(--x-size-border-width-left-message-default);
+}
+
+[dir="rtl"] .x-message {
+  border-right-width: var(--x-size-border-width-left-message-default);
+}
+
+[dir="ltr"] .x-message {
+  border-right-width: var(--x-size-border-width-right-message-default);
+}
+
+[dir="rtl"] .x-message {
+  border-left-width: var(--x-size-border-width-right-message-default);
+}
+
+.x-message {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: var(--x-string-justify-message-default);
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--x-size-gap-message-default);
+  padding: var(--x-size-padding-message-default);
+  background-color: var(--x-color-background-message-default);
+  border-color: var(--x-color-border-message-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-message-default);
+  border-bottom-width: var(--x-size-border-width-bottom-message-default);
+  border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
+  font-family: var(--x-font-family-message-default);
+  font-size: var(--x-size-font-message-default);
+  font-weight: var(--x-number-font-weight-message-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-message {
+    gap: 0;
+  }
+  .x-message > *:not(:last-child) {
+    margin-right: var(--x-size-gap-message-default);
+  }
+}
+.x-message,
+.x-message > a {
+  color: var(--x-color-text-message-default);
+}
+.x-message > p {
+  margin: 0;
+}
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -1190,6 +1470,23 @@
     --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(
@@ -1221,92 +1518,122 @@
     --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-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
 
 .x-option-list {
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -ms-flex-flow: row nowrap;
-      flex-flow: row nowrap;
-  -ms-flex-align: center;
-      align-items: center;
+  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-color: var(--x-color-border-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-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-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);
-      --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-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); }
-
+  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-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-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-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -1335,6 +1662,23 @@
     --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(
@@ -1366,9 +1710,10 @@
     --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-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -1385,35 +1730,42 @@
   --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
   --x-mix-blend-mode-picture-default: none;
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
-  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default); }
+  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
+}
 
 .x-picture {
   display: block;
   overflow: hidden;
   border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
-  background: var(--x-color-background-picture-default); }
-  .x-picture__image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    -o-object-fit: var(--x-object-fit-picture-default);
-       object-fit: var(--x-object-fit-picture-default);
-    mix-blend-mode: var(--x-mix-blend-mode-picture-default); }
-    .x-picture__image--fallback {
-      --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
-      --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default); }
-      .x-picture__image--fallback > rect {
-        fill: var(--x-color-fill-picture-fallback-rect-default); }
-      .x-picture__image--fallback > path {
-        fill: var(--x-color-fill-picture-fallback-path-default); }
-    .x-picture__image--placeholder {
-      --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default);
-      --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default); }
-      .x-picture__image--placeholder > rect {
-        fill: var(--x-color-fill-picture-placeholder-rect-default); }
-      .x-picture__image--placeholder > path {
-        fill: var(--x-color-fill-picture-placeholder-path-default); }
-
+  background: var(--x-color-background-picture-default);
+}
+.x-picture__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--x-object-fit-picture-default);
+  mix-blend-mode: var(--x-mix-blend-mode-picture-default);
+}
+.x-picture__image--fallback {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default);
+}
+.x-picture__image--fallback > rect {
+  fill: var(--x-color-fill-picture-fallback-rect-default);
+}
+.x-picture__image--fallback > path {
+  fill: var(--x-color-fill-picture-fallback-path-default);
+}
+.x-picture__image--placeholder {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default);
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default);
+}
+.x-picture__image--placeholder > rect {
+  fill: var(--x-color-fill-picture-placeholder-rect-default);
+}
+.x-picture__image--placeholder > path {
+  fill: var(--x-color-fill-picture-placeholder-path-default);
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -1430,8 +1782,8 @@
   --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
   --x-mix-blend-mode-picture-default: none;
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
-  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default); }
-
+  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
+}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-picture-default: var(--x-color-border-result-default);
@@ -1447,12 +1799,13 @@
   --x-size-border-width-result-default: 0;
   --x-size-border-width-result-picture-default: 0;
   --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0; }
+  --x-size-border-width-result-description-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] auto [description-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);
@@ -1460,38 +1813,45 @@
   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;
-    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__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:hover .x-result__overlay {
-    opacity: 1; }
-  @media (hover: none) {
-    .x-result .x-result__overlay {
-      opacity: 1; } }
-
+  border-radius: var(--x-size-border-radius-result-default);
+}
+.x-result > * {
+  min-width: 0;
+}
+.x-result__picture {
+  grid-column: result;
+  grid-row: 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__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:hover .x-result__overlay {
+  opacity: 1;
+}
+@media (hover: none) {
+  .x-result .x-result__overlay {
+    opacity: 1;
+  }
+}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-picture-default: var(--x-color-border-result-default);
@@ -1507,358 +1867,617 @@
   --x-size-border-width-result-default: 0;
   --x-size-border-width-result-picture-default: 0;
   --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0; }
-
+  --x-size-border-width-result-description-default: 0;
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
   --x-size-justify-row: stretch;
   --x-size-align-row: center;
   --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0; }
+  --x-size-start-row-item: 0;
+}
 
 .x-row {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: 1fr;
   justify-items: var(--x-size-justify-row);
-  -ms-flex-align: var(--x-size-align-row);
-      align-items: var(--x-size-align-row);
+  align-items: var(--x-size-align-row);
   padding: var(--x-size-padding-row);
   gap: var(--x-size-gap-row);
-  margin: 0; }
-  .x-row__item {
-    grid-column-start: var(--x-size-start-row-item);
-    grid-column-end: span var(--x-size-span-row-item);
-    list-style: none; }
-  .x-row__item--span-1 {
-    --x-size-span-row-item: 1; }
-  .x-row__item--span-2 {
-    --x-size-span-row-item: 2; }
-  .x-row__item--span-3 {
-    --x-size-span-row-item: 3; }
-  .x-row__item--span-4 {
-    --x-size-span-row-item: 4; }
-  .x-row__item--span-5 {
-    --x-size-span-row-item: 5; }
-  .x-row__item--span-6 {
-    --x-size-span-row-item: 6; }
-  .x-row__item--span-7 {
-    --x-size-span-row-item: 7; }
-  .x-row__item--span-8 {
-    --x-size-span-row-item: 8; }
-  .x-row__item--span-9 {
-    --x-size-span-row-item: 9; }
-  .x-row__item--span-10 {
-    --x-size-span-row-item: 10; }
-  .x-row__item--span-11 {
-    --x-size-span-row-item: 11; }
-  .x-row__item--span-12 {
-    --x-size-span-row-item: 12; }
-  .x-row__item--start-1 {
-    --x-size-start-row-item: 1; }
-  .x-row__item--start-2 {
-    --x-size-start-row-item: 2; }
-  .x-row__item--start-3 {
-    --x-size-start-row-item: 3; }
-  .x-row__item--start-4 {
-    --x-size-start-row-item: 4; }
-  .x-row__item--start-5 {
-    --x-size-start-row-item: 5; }
-  .x-row__item--start-6 {
-    --x-size-start-row-item: 6; }
-  .x-row__item--start-7 {
-    --x-size-start-row-item: 7; }
-  .x-row__item--start-8 {
-    --x-size-start-row-item: 8; }
-  .x-row__item--start-9 {
-    --x-size-start-row-item: 9; }
-  .x-row__item--start-10 {
-    --x-size-start-row-item: 10; }
-  .x-row__item--start-11 {
-    --x-size-start-row-item: 11; }
-  .x-row__item--start-12 {
-    --x-size-start-row-item: 12; }
+  margin: 0;
+}
+.x-row__item {
+  grid-column-start: var(--x-size-start-row-item);
+  grid-column-end: span var(--x-size-span-row-item);
+  list-style: none;
+}
+.x-row__item--span-1 {
+  --x-size-span-row-item: 1;
+}
+.x-row__item--span-2 {
+  --x-size-span-row-item: 2;
+}
+.x-row__item--span-3 {
+  --x-size-span-row-item: 3;
+}
+.x-row__item--span-4 {
+  --x-size-span-row-item: 4;
+}
+.x-row__item--span-5 {
+  --x-size-span-row-item: 5;
+}
+.x-row__item--span-6 {
+  --x-size-span-row-item: 6;
+}
+.x-row__item--span-7 {
+  --x-size-span-row-item: 7;
+}
+.x-row__item--span-8 {
+  --x-size-span-row-item: 8;
+}
+.x-row__item--span-9 {
+  --x-size-span-row-item: 9;
+}
+.x-row__item--span-10 {
+  --x-size-span-row-item: 10;
+}
+.x-row__item--span-11 {
+  --x-size-span-row-item: 11;
+}
+.x-row__item--span-12 {
+  --x-size-span-row-item: 12;
+}
+.x-row__item--start-1 {
+  --x-size-start-row-item: 1;
+}
+.x-row__item--start-2 {
+  --x-size-start-row-item: 2;
+}
+.x-row__item--start-3 {
+  --x-size-start-row-item: 3;
+}
+.x-row__item--start-4 {
+  --x-size-start-row-item: 4;
+}
+.x-row__item--start-5 {
+  --x-size-start-row-item: 5;
+}
+.x-row__item--start-6 {
+  --x-size-start-row-item: 6;
+}
+.x-row__item--start-7 {
+  --x-size-start-row-item: 7;
+}
+.x-row__item--start-8 {
+  --x-size-start-row-item: 8;
+}
+.x-row__item--start-9 {
+  --x-size-start-row-item: 9;
+}
+.x-row__item--start-10 {
+  --x-size-start-row-item: 10;
+}
+.x-row__item--start-11 {
+  --x-size-start-row-item: 11;
+}
+.x-row__item--start-12 {
+  --x-size-start-row-item: 12;
+}
 
 .x-row--justify-start {
-  --x-size-justify-row: start; }
+  --x-size-justify-row: start;
+}
 
 .x-row--align-start {
-  --x-size-align-row: start; }
+  --x-size-align-row: start;
+}
 
 .x-row--justify-center {
-  --x-size-justify-row: center; }
+  --x-size-justify-row: center;
+}
 
 .x-row--align-center {
-  --x-size-align-row: center; }
+  --x-size-align-row: center;
+}
 
 .x-row--justify-end {
-  --x-size-justify-row: end; }
+  --x-size-justify-row: end;
+}
 
 .x-row--align-end {
-  --x-size-align-row: end; }
+  --x-size-align-row: end;
+}
 
 .x-row--justify-stretch {
-  --x-size-justify-row: stretch; }
+  --x-size-justify-row: stretch;
+}
 
 .x-row--align-stretch {
-  --x-size-align-row: stretch; }
-
+  --x-size-align-row: stretch;
+}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
   --x-size-justify-row: stretch;
   --x-size-align-row: center;
   --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0; }
-
+  --x-size-start-row-item: 0;
+}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
   --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
   --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70); }
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
 
 .x-scroll {
-  overflow-y: var(--x-string-overflow-scroll); }
-  @media (hover: hover) {
-    .x-scroll {
-      scrollbar-width: auto;
-      scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar); }
-      .x-scroll::-webkit-scrollbar {
-        width: 17px; }
-        .x-scroll::-webkit-scrollbar-track {
-          background: var(--x-color-background-scroll-bar); }
-        .x-scroll::-webkit-scrollbar-thumb {
-          width: 5px;
-          border-radius: 15px;
-          background: var(--x-color-thumb-scroll-bar);
-          background-clip: content-box;
-          border: solid 4px rgba(0, 0, 0, 1e-05); }
-      .x-scroll:hover {
-        --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
-        --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover); } }
-
+  overflow-y: var(--x-string-overflow-scroll);
+}
+@media (hover: hover) {
+  .x-scroll {
+    scrollbar-width: auto;
+    scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
+  }
+  .x-scroll::-webkit-scrollbar {
+    width: 17px;
+  }
+  .x-scroll::-webkit-scrollbar-track {
+    background: var(--x-color-background-scroll-bar);
+  }
+  .x-scroll::-webkit-scrollbar-thumb {
+    width: 5px;
+    border-radius: 15px;
+    background: var(--x-color-thumb-scroll-bar);
+    background-clip: content-box;
+    border: solid 4px rgba(0, 0, 0, 0.00001);
+  }
+  .x-scroll:hover {
+    --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
+    --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
+  }
+}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
   --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
   --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70); }
-
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
 .x-sliding-panel {
-  background-color: var(--x-color-background-sliding-panel); }
-  .x-sliding-panel__button.x-button {
-    --x-size-padding-button: var(--x-size-padding-sliding-panel-button); }
-  .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
-    pointer-events: all; }
-  .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
-    transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow))); }
-  .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
-    transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow))); }
-  .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
-    opacity: 0; }
-  .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
-    opacity: 1;
-    pointer-events: all; }
-  .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
-    opacity: 1;
-    pointer-events: all; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
-    position: absolute;
-    z-index: 1;
-    content: '';
-    pointer-events: none;
-    height: 100%;
-    width: var(--x-size-width-sliding-panel-gradient);
-    opacity: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::before {
-    background: linear-gradient(to right, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
-    left: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
-    background: linear-gradient(to left, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
-    right: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-start)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-end)::after {
-    opacity: 1; }
-  .x-sliding-panel__scroll > * {
-    -ms-flex: 0 0 auto;
-        flex: 0 0 auto; }
-  .x-sliding-panel__scroll > .x-list {
-    --x-string-flow-list: row nowrap; }
-
+  z-index: 0;
+  background-color: var(--x-color-background-sliding-panel);
+}
+.x-sliding-panel__button.x-button {
+  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+  pointer-events: none;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
+  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
+  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
+  opacity: 0;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
+  -webkit-mask: none;
+          mask: none;
+}
+.x-sliding-panel__scroll > * {
+  flex: 0 0 auto;
+}
+.x-sliding-panel__scroll > .x-list {
+  --x-string-flow-list: row nowrap;
+}
 :root {
   --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-color-background-sliding-panel-middle: rgba(255, 255, 255, 0.94);
-  --x-color-background-sliding-panel-end: rgba(255, 255, 255, 0);
   --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02); }
-
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
   --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
   --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
   --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
   --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
   --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
   --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
+  --x-size-border-width-suggestion-group-default: 0;
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
   --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
   --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default); }
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-suggestion-group {
-          padding-left: var(--x-size-padding-left-suggestion-group-default); }
+  padding-left: var(--x-size-padding-left-suggestion-group-default);
+}
+
 [dir="rtl"] .x-suggestion-group {
-          padding-right: var(--x-size-padding-left-suggestion-group-default); }
+  padding-right: var(--x-size-padding-left-suggestion-group-default);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  padding-right: var(--x-size-padding-right-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  padding-left: var(--x-size-padding-right-suggestion-group-default);
+}
+
 [dir="ltr"] .x-suggestion-group {
-          padding-right: var(--x-size-padding-right-suggestion-group-default); }
+  border-left-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
 [dir="rtl"] .x-suggestion-group {
-          padding-left: var(--x-size-padding-right-suggestion-group-default); }
+  border-right-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  border-right-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  border-left-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
 .x-suggestion-group {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-flow: row nowrap;
-      flex-flow: row nowrap;
-  -ms-flex-align: start;
-      align-items: flex-start;
+  flex-flow: row nowrap;
   box-sizing: border-box;
-  border: none;
   background-color: var(--x-color-background-suggestion-group-default);
   color: var(--x-color-text-suggestion-group-default);
+  border-color: var(--x-color-border-suggestion-group-default);
   font-family: var(--x-font-family-suggestion-group-default);
   font-size: var(--x-size-font-suggestion-group-default);
   line-height: var(--x-size-line-height-suggestion-group-default);
   font-weight: var(--x-number-font-weight-suggestion-group-default);
   cursor: pointer;
-  -webkit-padding-before: var(--x-size-padding-top-suggestion-group-default);
-          padding-top: var(--x-size-padding-top-suggestion-group-default);
-  -webkit-padding-after: var(--x-size-padding-bottom-suggestion-group-default);
-          padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
-  -webkit-padding-start: var(--x-size-padding-left-suggestion-group-default);
-  -webkit-padding-end: var(--x-size-padding-right-suggestion-group-default);
-  gap: var(--x-size-gap-suggestion-group-default); }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-suggestion-group {
-      gap: 0; }
-      .x-suggestion-group > *:not(:last-child) {
-        margin-right: var(--x-size-gap-suggestion-group-default); } }
-  .x-suggestion-group .x-suggestion {
-    padding: 0;
-    -ms-flex: 1 1 auto;
-        flex: 1 1 auto; }
-  .x-suggestion-group .x-button {
-    --x-color-background-button-default: transparent;
-    --x-color-border-button-default: transparent;
-    --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
-    --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
-    --x-size-padding-right-button-default: 0;
-    --x-size-padding-left-button-default: 0;
-    border: none; }
-
+  padding-top: var(--x-size-padding-top-suggestion-group-default);
+  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
+  gap: var(--x-size-gap-suggestion-group-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-group-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion-group {
+    gap: 0;
+  }
+  .x-suggestion-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-group-default);
+  }
+}
+.x-suggestion-group .x-suggestion {
+  padding: 0;
+  flex: 1 1 auto;
+  border: none;
+}
+.x-suggestion-group .x-button {
+  --x-color-background-button-default: transparent;
+  --x-color-border-button-default: transparent;
+  --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
+  --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
+  --x-size-padding-right-button-default: 0;
+  --x-size-padding-left-button-default: 0;
+  border: none;
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
   --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
   --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
   --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
   --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
   --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
   --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
+  --x-size-border-width-suggestion-group-default: 0;
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
   --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
   --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default); }
-
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
+}
 :root {
+  --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
   --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
   --x-color-background-suggestion-default: transparent;
+  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
   --x-size-padding-top-suggestion-default: var(--x-size-base-01);
   --x-size-padding-right-suggestion-default: 0;
   --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
   --x-size-padding-left-suggestion-default: 0;
   --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
   --x-font-family-suggestion-default: var(--x-font-family-text);
   --x-size-font-suggestion-default: var(--x-size-font-text);
   --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
   --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
   --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
   --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-matching-part-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-matching-part-default: var(--x-number-font-weight-suggestion-default); }
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-matching: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
+  --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+                  --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+                  --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+                  --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+                  --x-number-font-weight-suggestion-default-matching
+  );
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-suggestion {
-  text-align: left; }
+  text-align: left;
+}
+
 [dir="rtl"] .x-suggestion {
-  text-align: right; }
+  text-align: right;
+}
+
 [dir="ltr"] .x-suggestion {
-          padding-left: var(--x-size-padding-left-suggestion-default); }
+  padding-left: var(--x-size-padding-left-suggestion-default);
+}
+
 [dir="rtl"] .x-suggestion {
-          padding-right: var(--x-size-padding-left-suggestion-default); }
+  padding-right: var(--x-size-padding-left-suggestion-default);
+}
+
 [dir="ltr"] .x-suggestion {
-          padding-right: var(--x-size-padding-right-suggestion-default); }
+  padding-right: var(--x-size-padding-right-suggestion-default);
+}
+
 [dir="rtl"] .x-suggestion {
-          padding-left: var(--x-size-padding-right-suggestion-default); }
+  padding-left: var(--x-size-padding-right-suggestion-default);
+}
+
+[dir="ltr"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-left-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-left-suggestion-default);
+}
+
+[dir="ltr"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-right-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-right-suggestion-default);
+}
+
 .x-suggestion {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-flow: row nowrap;
-      flex-flow: row nowrap;
-  -ms-flex-align: start;
-      align-items: flex-start;
+  flex-flow: row nowrap;
   box-sizing: border-box;
-  border: none;
+  align-items: var(--x-string-align-items-suggestion-default);
   background-color: var(--x-color-background-suggestion-default);
   color: var(--x-color-text-suggestion-default);
+  border-color: var(--x-color-border-suggestion-default);
   font-family: var(--x-font-family-suggestion-default);
   font-size: var(--x-size-font-suggestion-default);
   line-height: var(--x-size-line-height-suggestion-default);
   font-weight: var(--x-number-font-weight-suggestion-default);
   cursor: pointer;
-  -webkit-padding-before: var(--x-size-padding-top-suggestion-default);
-          padding-top: var(--x-size-padding-top-suggestion-default);
-  -webkit-padding-after: var(--x-size-padding-bottom-suggestion-default);
-          padding-bottom: var(--x-size-padding-bottom-suggestion-default);
-  -webkit-padding-start: var(--x-size-padding-left-suggestion-default);
-  -webkit-padding-end: var(--x-size-padding-right-suggestion-default);
-  gap: var(--x-size-gap-suggestion-default); }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-suggestion {
-      gap: 0; }
-      .x-suggestion > *:not(:last-child) {
-        margin-right: var(--x-size-gap-suggestion-default); } }
-  .x-suggestion__query {
-    -ms-flex: 1 1 auto;
-        flex: 1 1 auto; }
-  .x-suggestion__matching-part {
-    font-family: var(--x-font-family-suggestion-matching-part-default);
-    font-size: var(--x-size-font-suggestion-matching-part-default);
-    line-height: var(--x-size-line-height-suggestion-matching-part-default);
-    font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
-    color: var(--x-color-text-suggestion-matching-part-default); }
-
+  padding-top: var(--x-size-padding-top-suggestion-default);
+  padding-bottom: var(--x-size-padding-bottom-suggestion-default);
+  gap: var(--x-size-gap-suggestion-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion {
+    gap: 0;
+  }
+  .x-suggestion > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-default);
+  }
+}
+.x-suggestion__query {
+  flex: 1 1 auto;
+}
+.x-suggestion__matching-part,
+.x-suggestion .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default);
+  font-size: var(--x-size-font-suggestion-matching-part-default);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
+  color: var(--x-color-text-suggestion-matching-part-default);
+}
+.x-suggestion--matching {
+  --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
+  --x-number-font-weight-suggestion-default: var(
+    --x-number-font-weight-suggestion-default-matching
+  );
+  --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
+}
+.x-suggestion > .x-identifier-result {
+  flex: none;
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated {
+  background-color: var(--x-color-background-suggestion-default-curated);
+  color: var(--x-color-text-suggestion-default-curated);
+  border-color: var(--x-color-border-suggestion-default-curated);
+  font-family: var(--x-font-family-suggestion-default-curated);
+  font-size: var(--x-size-font-suggestion-default-curated);
+  line-height: var(--x-size-line-height-suggestion-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default-curated);
+  font-size: var(--x-size-font-suggestion-matching-part-default-curated);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
+  color: var(--x-color-text-suggestion-matching-part-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
+  --x-number-font-weight-suggestion-default-curated: var(
+                  --x-number-font-weight-suggestion-default-matching-curated
+  );
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
+}
 :root {
+  --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
   --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
   --x-color-background-suggestion-default: transparent;
+  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
   --x-size-padding-top-suggestion-default: var(--x-size-base-01);
   --x-size-padding-right-suggestion-default: 0;
   --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
   --x-size-padding-left-suggestion-default: 0;
   --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
   --x-font-family-suggestion-default: var(--x-font-family-text);
   --x-size-font-suggestion-default: var(--x-size-font-text);
   --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
   --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
   --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
   --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-matching-part-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-matching-part-default: var(--x-number-font-weight-suggestion-default); }
-
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-matching: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
+  --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+                  --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+                  --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+                  --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+                  --x-number-font-weight-suggestion-default-matching
+  );
+}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -1866,6 +2485,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -1887,32 +2512,55 @@
   --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default); }
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-tag {
-  border-left-width: var(--x-size-border-width-left-tag-default); }
+  border-left-width: var(--x-size-border-width-left-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-  border-right-width: var(--x-size-border-width-left-tag-default); }
+  border-right-width: var(--x-size-border-width-left-tag-default);
+}
+
 [dir="ltr"] .x-tag {
-  border-right-width: var(--x-size-border-width-right-tag-default); }
+  border-right-width: var(--x-size-border-width-right-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-  border-left-width: var(--x-size-border-width-right-tag-default); }
+  border-left-width: var(--x-size-border-width-right-tag-default);
+}
+
 [dir="ltr"] .x-tag {
-          padding-left: var(--x-size-padding-left-tag-default); }
+  padding-left: var(--x-size-padding-left-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-          padding-right: var(--x-size-padding-left-tag-default); }
+  padding-right: var(--x-size-padding-left-tag-default);
+}
+
 [dir="ltr"] .x-tag {
-          padding-right: var(--x-size-padding-right-tag-default); }
+  padding-right: var(--x-size-padding-right-tag-default);
+}
+
 [dir="rtl"] .x-tag {
-          padding-left: var(--x-size-padding-right-tag-default); }
+  padding-left: var(--x-size-padding-right-tag-default);
+}
+
 .x-tag {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
-      align-items: center;
-  -ms-flex-pack: center;
-      justify-content: center;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   box-sizing: border-box;
   border-style: solid;
@@ -1928,40 +2576,113 @@
   font-weight: var(--x-number-font-weight-tag-default);
   gap: var(--x-size-gap-tag-default);
   min-height: var(--x-size-height-tag-default);
-  -webkit-padding-start: var(--x-size-padding-left-tag-default);
-  -webkit-padding-end: var(--x-size-padding-right-tag-default);
   min-width: calc(3 * var(--x-size-line-height-tag-default));
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-tag {
-      gap: 0; }
-      .x-tag > *:not(:last-child) {
-        margin-right: var(--x-size-gap-tag-default); } }
-  .x-tag.x-filter {
-    --x-color-background-filter: transparent;
-    --x-size-border-width-filter: 0;
-    --x-color-text-filter: var(--x-color-text-tag-default);
-    --x-size-padding-filter: 0;
-    --x-size-gap-filter: var(--x-size-gap-tag-default);
-    --x-font-family-filter: var(--x-font-family-tag-default);
-    --x-size-font-filter: var(--x-size-font-tag-default);
-    --x-number-font-weight-filter: var(--x-number-font-weight-tag-default);
-    --x-size-line-height-filter: var(--x-size-line-height-tag-default); }
-  .x-tag.x-tag.x-tag--is-selected {
-    background-color: var(--x-color-background-tag-default-selected);
-    border-color: var(--x-color-border-tag-default-selected);
-    color: var(--x-color-text-tag-default-selected);
-    line-height: var(--x-size-line-height-tag-default-selected);
-    font-family: var(--x-font-family-tag-default-selected);
-    font-size: var(--x-size-font-tag-default-selected);
-    font-weight: var(--x-number-font-weight-tag-default-selected); }
-    .x-tag.x-tag.x-tag--is-selected.x-filter {
-      --x-color-text-filter: var(--x-color-text-tag-default-selected);
-      --x-font-family-filter: var(--x-font-family-tag-default-selected);
-      --x-size-font-filter: var(--x-size-font-tag-default-selected);
-      --x-number-font-weight-filter: var(--x-number-font-weight-tag-default-selected);
-      --x-size-line-height-filter: var(--x-size-line-height-tag-default-selected); }
-
+  cursor: pointer;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-tag {
+    gap: 0;
+  }
+  .x-tag > *:not(:last-child) {
+    margin-right: var(--x-size-gap-tag-default);
+  }
+}
+.x-tag.x-suggestion {
+  --x-color-background-suggestion-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-default: 0;
+  --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-default: 0;
+  --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
+  --x-font-family-suggestion-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-suggestion-group {
+  --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-group-default: 0;
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-group-default: 0;
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+  --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
+  --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
+  --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-filter {
+  --x-color-background-filter-default: transparent;
+  --x-size-border-width-filter-default: 0;
+  --x-color-text-filter-default: var(--x-color-text-tag-default);
+  --x-size-padding-top-filter-default: 0;
+  --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-filter-default: 0;
+  --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-filter-default: var(--x-size-gap-tag-default);
+  --x-font-family-filter-default: var(--x-font-family-tag-default);
+  --x-size-font-filter-default: var(--x-size-font-tag-default);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
+  --x-size-line-height-filter-default: var(--x-size-line-height-tag-default);
+}
+.x-tag.x-tag.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated);
+  border-color: var(--x-color-border-tag-default-curated);
+  color: var(--x-color-text-tag-default-curated);
+  line-height: var(--x-size-line-height-tag-default-curated);
+  font-family: var(--x-font-family-tag-default-curated);
+  font-size: var(--x-size-font-tag-default-curated);
+  font-weight: var(--x-number-font-weight-tag-default-curated);
+}
+.x-tag.x-tag.x-tag--is-selected {
+  background-color: var(--x-color-background-tag-default-selected);
+  border-color: var(--x-color-border-tag-default-selected);
+  color: var(--x-color-text-tag-default-selected);
+  line-height: var(--x-size-line-height-tag-default-selected);
+  font-family: var(--x-font-family-tag-default-selected);
+  font-size: var(--x-size-font-tag-default-selected);
+  font-weight: var(--x-number-font-weight-tag-default-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated-selected);
+  border-color: var(--x-color-border-tag-default-curated-selected);
+  color: var(--x-color-text-tag-default-curated-selected);
+  line-height: var(--x-size-line-height-tag-default-curated-selected);
+  font-family: var(--x-font-family-tag-default-curated-selected);
+  font-size: var(--x-size-font-tag-default-curated-selected);
+  font-weight: var(--x-number-font-weight-tag-default-curated-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-filter {
+  --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
+  --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
+}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -1969,6 +2690,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -1990,8 +2717,18 @@
   --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default); }
-
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+}
 :root {
   --x-color-text-default: var(--x-color-base-neutral-10);
   --x-font-family-text: var(--x-font-family-base);
@@ -2018,17 +2755,20 @@
   --x-size-font-small: var(--x-size-font-base-xs);
   --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
   --x-size-line-height-small: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-small: none; }
+  --x-string-text-decoration-small: none;
+}
 
+.x,
 .x-text {
   font-family: var(--x-font-family-text);
   font-size: var(--x-size-font-text);
   font-weight: var(--x-number-font-weight-text);
   line-height: var(--x-size-line-height-text);
-  -webkit-text-decoration: var(--x-font-text-decoration);
-          text-decoration: var(--x-font-text-decoration);
+  -webkit-text-decoration: var(--x-string-text-decoration);
+          text-decoration: var(--x-string-text-decoration);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-title1 {
   font-family: var(--x-font-family-title1);
@@ -2038,7 +2778,8 @@
   -webkit-text-decoration: var(--x-string-text-decoration-title1);
           text-decoration: var(--x-string-text-decoration-title1);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-title2 {
   font-family: var(--x-font-family-title2);
@@ -2048,7 +2789,8 @@
   -webkit-text-decoration: var(--x-string-text-decoration-title2);
           text-decoration: var(--x-string-text-decoration-title2);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-title3 {
   font-family: var(--x-font-family-title3);
@@ -2058,7 +2800,8 @@
   -webkit-text-decoration: var(--x-string-text-decoration-title3);
           text-decoration: var(--x-string-text-decoration-title3);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-small {
   font-family: var(--x-font-family-small);
@@ -2068,13 +2811,14 @@
   -webkit-text-decoration: var(--x-string-text-decoration-small);
           text-decoration: var(--x-string-text-decoration-small);
   color: var(--x-color-text-default);
-  margin: 0; }
+  margin: 0;
+}
 
 .x-ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap; }
-
+  white-space: nowrap;
+}
 :root {
   --x-color-text-default: var(--x-color-base-neutral-10);
   --x-font-family-text: var(--x-font-family-base);
@@ -2101,23 +2845,28 @@
   --x-size-font-small: var(--x-size-font-base-xs);
   --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
   --x-size-line-height-small: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-small: none; }
-
+  --x-string-text-decoration-small: none;
+}
 :root {
   --x-size-border-radius-base-none: 0;
   --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px; }
-
+  --x-size-border-width-base: 1px;
+}
 :root {
-  --x-color-base-lead: #36515b;
-  --x-color-base-auxiliary: #667981;
+  --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-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-base-01: 2px;
   --x-size-base-02: 4px;
@@ -2128,10 +2877,20 @@
   --x-size-base-07: 32px;
   --x-size-base-08: 40px;
   --x-size-base-09: 48px;
-  --x-size-base-10: 56px; }
-
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 80px;
+  --x-size-base-13: 80px;
+  --x-size-base-14: 96px;
+  --x-size-base-15: 128px;
+  --x-size-base-16: 152px;
+  --x-size-base-17: 184px;
+  --x-size-base-18: 216px;
+  --x-size-base-19: 280px;
+  --x-size-base-20: 344px;
+}
 :root {
-  --x-font-family-base: 'Montserrat', sans-serif;
+  --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
   --x-size-font-base-s: 14px;
   --x-size-font-base-m: 16px;
@@ -2142,4 +2901,5 @@
   --x-number-font-weight-base-bold: 600;
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
-  --x-size-line-height-base-l: 32px; }
+  --x-size-line-height-base-l: 32px;
+}