@empathyco/x-components 3.0.0-alpha.27 → 3.0.0-alpha.30

package/design-system/default-theme.css

@@ -22,12 +22,9 @@
   font-weight: var(--x-number-font-weight-badge-default);
   box-sizing: border-box;
   position: absolute;
-  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;
   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
@@ -80,13 +77,13 @@
 
 @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); }
 [dir="rtl"] .x-button {
@@ -96,18 +93,13 @@
 [dir="rtl"] .x-button {
   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);
@@ -239,13 +231,13 @@
   [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); }
+    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); }
+    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); }
+    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); }
+    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);
@@ -254,18 +246,12 @@
     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);
-    -webkit-padding-before: var(--x-size-padding-top-dropdown-toggle-default);
-            padding-top: var(--x-size-padding-top-dropdown-toggle-default);
-    -webkit-padding-end: var(--x-size-padding-right-dropdown-toggle-default);
-    -webkit-padding-after: var(--x-size-padding-bottom-dropdown-toggle-default);
-            padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
-    -webkit-padding-start: var(--x-size-padding-left-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: -ms-flexbox;
     display: flex;
-    -ms-flex-flow: row nowrap;
-        flex-flow: row nowrap;
+    flex-flow: row nowrap;
     margin: 0;
     cursor: pointer;
     overflow: var(--x-string-overflow-dropdown-toggle-default);
@@ -276,11 +262,9 @@
         .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; }
+      margin-left: auto; }
     [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
-              margin-right: auto; }
-    .x-dropdown__toggle * + .x-icon:last-child {
-      -webkit-margin-start: auto; }
+      margin-right: auto; }
   .x-dropdown__toggle-selected-value {
     color: var(--x-color-text-dropdown-toggle-default-selected); }
   [dir="ltr"] .x-dropdown__items-list {
@@ -312,29 +296,22 @@
       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); }
+    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); }
+    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); }
+    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); }
+    padding-left: var(--x-size-padding-right-dropdown-item-default); }
   .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);
+    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: -ms-flexbox;
     display: flex;
-    -ms-flex-flow: row nowrap;
-        flex-flow: row nowrap;
-    -ms-flex-pack: start;
-        justify-content: flex-start;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
     text-align: left;
     width: 100%;
     margin: 0;
@@ -357,12 +334,10 @@
       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__item .x-icon:last-child {
-      -webkit-margin-start: auto; }
+    [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
@@ -488,12 +463,9 @@
 [dir="rtl"] .x-facet {
   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);
@@ -506,13 +478,13 @@
   [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); }
+    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); }
+    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); }
+    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); }
+    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 {
@@ -522,25 +494,17 @@
   [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: -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;
+    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);
-    -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);
+    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);
@@ -624,13 +588,13 @@
 
 @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); }
 [dir="rtl"] .x-filter {
@@ -640,21 +604,14 @@
 [dir="rtl"] .x-filter {
   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);
@@ -673,11 +630,9 @@
       .x-filter > *:not(:last-child) {
         margin-right: var(--x-size-gap-filter-default); } }
   .x-filter > * {
-    -ms-flex: 0 0 auto;
-        flex: 0 0 auto; }
+    flex: 0 0 auto; }
   .x-filter__label {
-    -ms-flex: 0 1 auto;
-        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 {
@@ -727,11 +682,12 @@
 .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;
   list-style: none;
   padding: var(--x-size-padding-grid);
   gap: var(--x-size-gap-grid); }
-  .x-grid--cols-auto.x-grid__item {
+  .x-grid--cols-auto .x-grid__item {
     min-width: var(--x-size-min-width-grid-item); }
 
 :root {
@@ -751,14 +707,10 @@
 .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);
@@ -830,14 +782,10 @@
 [dir="rtl"] .x-input-group {
   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);
@@ -859,55 +807,35 @@
   .x-input-group > *,
   .x-input-group > .x-input,
   .x-input-group > .x-button {
-    -ms-flex: 0 0 auto;
-        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; }
+    padding-left: 0; }
   [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-            padding-right: 0; }
+    padding-right: 0; }
   [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
-            padding-right: 0; }
+    padding-right: 0; }
   [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
-            padding-left: 0; }
+    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; }
+    border: none; }
     [dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
-              padding-left: var(--x-size-padding-left-input-group-default); }
+      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); }
+      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); }
+      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); }
+      padding-left: var(--x-size-padding-right-input-group-default); }
   .x-input-group > .x-input {
-    -ms-flex: 1 1 100%;
-        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);
@@ -919,17 +847,13 @@
     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; }
+      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; }
+      margin-left: 0; }
     [dir="ltr"] .x-input-group > .x-button:last-child {
-              margin-left: 0; }
+      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; }
+      margin-right: 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 {
@@ -1011,13 +935,13 @@
 
 @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); }
 [dir="rtl"] .x-input {
@@ -1031,12 +955,8 @@
   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);
@@ -1053,18 +973,6 @@
       -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);
@@ -1110,18 +1018,14 @@
 
 @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);
+  justify-content: var(--x-size-justify-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);
@@ -1146,60 +1050,46 @@
         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--horizontal > .x-list__item--expand {
   min-width: 0; }
@@ -1208,60 +1098,46 @@
   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 {
-  -ms-flex: none;
-      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;
@@ -1271,6 +1147,85 @@
   --x-size-align-list: 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); }
+
+@use 'sass:string';
+[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 (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;
@@ -1334,12 +1289,9 @@
   --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;
@@ -1399,6 +1351,7 @@
       --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);
@@ -1505,8 +1458,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    -o-object-fit: var(--x-object-fit-picture-default);
-       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);
@@ -1631,8 +1583,7 @@
   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; }
@@ -1790,8 +1741,7 @@
   .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; }
+    flex: 0 0 auto; }
   .x-sliding-panel__scroll > .x-list {
     --x-string-flow-list: row nowrap; }
 
@@ -1819,20 +1769,17 @@
 
 @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); }
+  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); }
+  padding-left: var(--x-size-padding-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;
+  align-items: flex-start;
   box-sizing: border-box;
   border: none;
   background-color: var(--x-color-background-suggestion-group-default);
@@ -1842,12 +1789,8 @@
   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);
+  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); }
   @media not all and (min-resolution: 0.001dpcm) {
     .x-suggestion-group {
@@ -1856,8 +1799,7 @@
         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; }
+    flex: 1 1 auto; }
   .x-suggestion-group .x-button {
     --x-color-background-button-default: transparent;
     --x-color-border-button-default: transparent;
@@ -1916,20 +1858,17 @@
 [dir="rtl"] .x-suggestion {
   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); }
 .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;
+  align-items: flex-start;
   box-sizing: border-box;
   border: none;
   background-color: var(--x-color-background-suggestion-default);
@@ -1939,12 +1878,8 @@
   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);
+  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); }
   @media not all and (min-resolution: 0.001dpcm) {
     .x-suggestion {
@@ -1952,8 +1887,7 @@
       .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; }
+    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);
@@ -2038,20 +1972,17 @@
 [dir="rtl"] .x-tag {
   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;
@@ -2067,8 +1998,6 @@
   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) {
@@ -2245,6 +2174,7 @@
 :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; }
 
@@ -2257,6 +2187,7 @@
   --x-color-base-neutral-95: #f2f2f2;
   --x-color-base-neutral-100: #ffffff; }
 
+/* Update this value if adding more values */
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -2270,7 +2201,14 @@
   --x-size-base-10: 56px;
   --x-size-base-11: 64px;
   --x-size-base-12: 72px;
-  --x-size-base-13: 80px; }
+  --x-size-base-13: 80px;
+  --x-size-base-14: 96px;
+  --x-size-base-15: 112px;
+  --x-size-base-16: 144px;
+  --x-size-base-17: 176px;
+  --x-size-base-18: 208px;
+  --x-size-base-19: 240px;
+  --x-size-base-20: 272px; }
 
 :root {
   --x-font-family-base: 'Montserrat', sans-serif;