@empathyco/x-components 4.1.0-alpha.21 → 4.1.0-alpha.22

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.0-alpha.22](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.21...@empathyco/x-components@4.1.0-alpha.22) (2024-02-21)
+
+
+### Features
+
+* **filters:** update preselected filters component so it reacts to snippetConfig changes (#1404) ([05983f3](https://github.com/empathyco/x/commit/05983f352830b7d52c2b586566938749fa9ce44e))
+
+
+
 ## [4.1.0-alpha.21](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.20...@empathyco/x-components@4.1.0-alpha.21) (2024-02-20)
 
 

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

@@ -1,5 +1,4 @@
 
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -34,6 +33,7 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
+
 .x-static {
   position: static !important;
 }
@@ -3684,52 +3684,6 @@
     --x-number-font-weight-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);
-  --x-color-text-tag-default: var(--x-color-text-default);
-  --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);
-  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-height-tag-default: var(--x-size-base-07);
-  --x-size-padding-right-tag-default: var(--x-size-base-04);
-  --x-size-padding-left-tag-default: var(--x-size-base-04);
-  --x-size-gap-tag-default: var(--x-size-base-02);
-  --x-font-family-tag-default: var(--x-font-family-text);
-  --x-size-font-tag-default: var(--x-size-font-text);
-  --x-size-line-height-tag-default: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
-  --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-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
-  );
-}
 
 [dir="ltr"] .x-tag {
   border-left-width: var(--x-size-border-width-left-tag-default);
@@ -3906,11 +3860,50 @@
   --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
 }
 :root {
-  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-color-background-tag-default: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default: var(--x-color-text-tag-default);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --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);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --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-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-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
@@ -3930,6 +3923,13 @@
   );
   --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
 }
+:root {
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -4516,14 +4516,6 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -4545,6 +4537,14 @@
 .x-row--padding-06 {
   --x-size-padding-row: var(--x-size-padding-row-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -4822,23 +4822,6 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 
 .x-result {
   display: grid;
@@ -4892,6 +4875,23 @@
     opacity: 1;
   }
 }
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
+  --x-size-border-width-result-picture-default: 0;
+}
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
@@ -4941,10 +4941,6 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}
 
 .x-picture--zoom .x-picture-image {
   transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4953,7 +4949,8 @@
   transform: scale(var(--x-number-zoom-scale-picture));
 }
 :root {
-  --x-number-aspect-ratio-picture: 1;
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
 }
 :root {
   --x-number-aspect-ratio-picture: 1;
@@ -4963,6 +4960,9 @@
   aspect-ratio: var(--x-number-aspect-ratio-picture);
   width: 100%;
 }
+:root {
+  --x-number-aspect-ratio-picture: 1;
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5041,10 +5041,6 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
 
 .x-picture--cover.x-picture {
   position: relative;
@@ -5062,10 +5058,8 @@
   height: 100%;
 }
 :root {
-  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
-  --x-mix-blend-mode-picture-colored: multiply;
-  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
-  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
 :root {
   --x-color-background-picture-colored: var(--x-color-base-neutral-95);
@@ -5086,6 +5080,12 @@
 .x-picture--colored.x-picture .x-picture--placeholder {
   --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
 }
+:root {
+  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+  --x-mix-blend-mode-picture-colored: multiply;
+  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
+  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+}
 :root {
   --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5425,51 +5425,6 @@
     --x-number-font-weight-base-regular
   );
 }
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
-}
 
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
@@ -5557,38 +5512,62 @@
   --x-size-border-width-left-option-list-item-default: inherit;
 }
 :root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
-}
-: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);
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+
+.x-modal__overlay {
+  background-color: var(--x-modal-overlay-color) !important;
+  opacity: var(--x-modal-overlay-opacity) !important;
 }
 :root {
   --x-string-justify-message-default: center;
@@ -5661,6 +5640,27 @@
 .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);
+}
 /* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
@@ -6039,28 +6039,6 @@
   --x-size-gap-list-19: var(--x-size-base-19);
   --x-size-gap-list-20: var(--x-size-base-20);
 }
-:root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --x-size-gap-list-03: var(--x-size-base-03);
-  --x-size-gap-list-04: var(--x-size-base-04);
-  --x-size-gap-list-05: var(--x-size-base-05);
-  --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07);
-  --x-size-gap-list-08: var(--x-size-base-08);
-  --x-size-gap-list-09: var(--x-size-base-09);
-  --x-size-gap-list-10: var(--x-size-base-10);
-  --x-size-gap-list-11: var(--x-size-base-11);
-  --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13);
-  --x-size-gap-list-14: var(--x-size-base-14);
-  --x-size-gap-list-15: var(--x-size-base-15);
-  --x-size-gap-list-16: var(--x-size-base-16);
-  --x-size-gap-list-17: var(--x-size-base-17);
-  --x-size-gap-list-18: var(--x-size-base-18);
-  --x-size-gap-list-19: var(--x-size-base-19);
-  --x-size-gap-list-20: var(--x-size-base-20);
-}
 
 .x-list--gap-01.x-list {
   gap: var(--x-size-gap-list-01);
@@ -6562,12 +6540,26 @@
   }
 }
 :root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
 }
 :root {
   --x-string-flow-list: column nowrap;
@@ -6718,13 +6710,12 @@
   flex: 12 1 auto;
 }
 :root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
 }
 :root {
   --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6753,13 +6744,13 @@
   );
 }
 :root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
 :root {
   --x-size-padding-left-input-group-line: 0;
@@ -6809,47 +6800,13 @@
   margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
 }
 :root {
-  --x-color-background-input-group-default: var(--x-color-background-input-default);
-  --x-color-border-input-group-default: var(--x-color-border-input-default);
-  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
-  --x-color-text-input-group-default: var(--x-color-text-input-default);
-  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
-  --x-size-height-input-group-default: var(--x-size-height-input-default);
-  --x-size-gap-input-group-default: var(--x-size-base-03);
-  --x-size-padding-left-input-group-default: var(--x-size-base-06);
-  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
-  --x-size-padding-input-group-default-action: var(--x-size-base-03);
-  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-input-group-default
-  );
-  --x-font-family-input-group-default: var(--x-font-family-input-default);
-  --x-size-font-input-group-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
-  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
-  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
-  --x-size-line-height-input-group-placeholder-default: var(
-    --x-size-line-height-input-group-default
-  );
-  --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-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
 }
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -7028,6 +6985,49 @@
 [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);
+  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
+  --x-color-text-input-group-default: var(--x-color-text-input-default);
+  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
+  --x-size-height-input-group-default: var(--x-size-height-input-default);
+  --x-size-gap-input-group-default: var(--x-size-base-03);
+  --x-size-padding-left-input-group-default: var(--x-size-base-06);
+  --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
+  --x-size-padding-input-group-default-action: var(--x-size-base-03);
+  --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-input-group-default
+  );
+  --x-font-family-input-group-default: var(--x-font-family-input-default);
+  --x-size-font-input-group-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
+  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
+  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
+  --x-size-line-height-input-group-placeholder-default: var(
+    --x-size-line-height-input-group-default
+  );
+  --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);
+}
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7156,34 +7156,6 @@
   --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
   --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
 }
-:root {
-  --x-color-background-input-default: var(--x-color-base-neutral-100);
-  --x-color-border-input-default: var(--x-color-base-neutral-70);
-  --x-color-border-input-default-focus: var(--x-color-base-lead);
-  --x-color-text-input-default: var(--x-color-text-default);
-  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
-  --x-size-border-width-input-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
-  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
-  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
-  --x-size-height-input-default: var(--x-size-base-07);
-  --x-size-padding-right-input-default: var(--x-size-base-04);
-  --x-size-padding-left-input-default: var(--x-size-base-04);
-  --x-font-family-input-default: var(--x-font-family-text);
-  --x-size-font-input-default: var(--x-size-font-text);
-  --x-size-line-height-input-default: var(--x-size-line-height-text);
-  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
-  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
-  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
-  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
-  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
-}
 
 [dir="ltr"] .x-input {
   padding-left: var(--x-size-padding-left-input-default);
@@ -7264,6 +7236,34 @@
   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);
+  --x-color-border-input-default-focus: var(--x-color-base-lead);
+  --x-color-text-input-default: var(--x-color-text-default);
+  --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
+  --x-size-border-width-input-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
+  --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
+  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
+  --x-size-height-input-default: var(--x-size-base-07);
+  --x-size-padding-right-input-default: var(--x-size-base-04);
+  --x-size-padding-left-input-default: var(--x-size-base-04);
+  --x-font-family-input-default: var(--x-font-family-text);
+  --x-size-font-input-default: var(--x-size-font-text);
+  --x-size-line-height-input-default: var(--x-size-line-height-text);
+  --x-number-font-weight-input-default: var(--x-number-font-weight-text);
+  --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
+  --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
+  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
+  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
+}
 :root {
   --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7295,18 +7295,14 @@
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
 }
-:root {
-  --x-size-width-icon-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
-}
 
 .x-icon--xl {
   --x-size-width-icon-default: var(--x-size-width-icon-xl);
   --x-size-height-icon-default: var(--x-size-height-icon-xl);
 }
 :root {
-  --x-size-width-icon-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
 }
 :root {
   --x-size-width-icon-s: var(--x-size-base-03);
@@ -7317,6 +7313,10 @@
   --x-size-width-icon-default: var(--x-size-width-icon-s);
   --x-size-height-icon-default: var(--x-size-height-icon-s);
 }
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -7334,15 +7334,15 @@
   --x-size-width-icon-l: var(--x-size-base-06);
   --x-size-height-icon-l: var(--x-size-base-06);
 }
-:root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
-}
 
 .x-icon--l {
   --x-size-width-icon-default: var(--x-size-width-icon-l);
   --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
+:root {
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7387,11 +7387,6 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 
 .x-grid-list {
   margin: 0;
@@ -7413,6 +7408,11 @@
 .x-grid-list--cols-auto .x-grid-list__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-filter--justified.x-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
@@ -8527,6 +8527,13 @@
   --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
   --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
 }
+:root {
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8549,11 +8556,9 @@
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
 }
 :root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
 }
 :root {
   --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
@@ -8578,9 +8583,27 @@
   );
 }
 :root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
+  --x-color-background-button-default: var(--x-color-base-lead);
+  --x-color-border-button-default: var(--x-color-background-button-default);
+  --x-color-text-button-default: var(--x-color-base-neutral-100);
+  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-width-button-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
+  --x-size-height-button-default: var(--x-size-base-08);
+  --x-size-padding-right-button-default: var(--x-size-base-05);
+  --x-size-padding-left-button-default: var(--x-size-base-05);
+  --x-size-gap-button-default: var(--x-size-base-03);
+  --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);
 }
 :root {
   --x-color-background-button-ghost: transparent;
@@ -8627,29 +8650,6 @@
   --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);
 }
-:root {
-  --x-color-background-button-default: var(--x-color-base-lead);
-  --x-color-border-button-default: var(--x-color-background-button-default);
-  --x-color-text-button-default: var(--x-color-base-neutral-100);
-  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-width-button-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
-  --x-size-height-button-default: var(--x-size-base-08);
-  --x-size-padding-right-button-default: var(--x-size-base-05);
-  --x-size-padding-left-button-default: var(--x-size-base-05);
-  --x-size-gap-button-default: var(--x-size-base-03);
-  --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);
-}
 
 [dir="ltr"] .x-button {
   padding-right: var(--x-size-padding-right-button-default);
@@ -8719,6 +8719,16 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
+: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-size-border-radius-button-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8751,16 +8761,6 @@
   --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-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);

package/docs/API-reference/api/x-components.preselectedfilters.created.md

@@ -4,7 +4,7 @@
 
 ## PreselectedFilters.created() method
 
-Emits the provided preselected filters prioritizing the [SnippetConfig](./x-components.snippetconfig.md) over the filters prop.
+Emits the [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) when the component is created.
 
 **Signature:**
 

package/docs/API-reference/api/x-components.preselectedfilters.emitpreselectedfilters.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [PreselectedFilters](./x-components.preselectedfilters.md) &gt; [emitPreselectedFilters](./x-components.preselectedfilters.emitpreselectedfilters.md)
+
+## PreselectedFilters.emitPreselectedFilters() method
+
+Emits the [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) to save the provided filters in the state.
+
+**Signature:**
+
+```typescript
+protected emitPreselectedFilters(): void;
+```
+**Returns:**
+
+void
+

package/docs/API-reference/api/x-components.preselectedfilters.md

@@ -18,11 +18,13 @@ export default class PreselectedFilters extends Vue
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [filters](./x-components.preselectedfilters.filters.md) |  | string\[\] | A list of filters to preselect. |
+|  [preselectedFilters](./x-components.preselectedfilters.preselectedfilters.md) | <p><code>protected</code></p><p><code>readonly</code></p> | string\[\] | Gets the provided preselected filters prioritizing the [SnippetConfig](./x-components.snippetconfig.md) over the filters prop. |
 
 ## Methods
 
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
-|  [created()](./x-components.preselectedfilters.created.md) |  | Emits the provided preselected filters prioritizing the [SnippetConfig](./x-components.snippetconfig.md) over the filters prop. |
+|  [created()](./x-components.preselectedfilters.created.md) |  | Emits the [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) when the component is created. |
+|  [emitPreselectedFilters()](./x-components.preselectedfilters.emitpreselectedfilters.md) | <code>protected</code> | Emits the [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) to save the provided filters in the state. |
 |  [render()](./x-components.preselectedfilters.render.md) |  |  |
 

package/docs/API-reference/api/x-components.preselectedfilters.preselectedfilters.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [PreselectedFilters](./x-components.preselectedfilters.md) &gt; [preselectedFilters](./x-components.preselectedfilters.preselectedfilters.md)
+
+## PreselectedFilters.preselectedFilters property
+
+Gets the provided preselected filters prioritizing the [SnippetConfig](./x-components.snippetconfig.md) over the filters prop.
+
+**Signature:**
+
+```typescript
+protected get preselectedFilters(): string[];
+```

package/js/x-modules/facets/components/preselected-filters.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"preselected-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Component, Inject, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { createRawFilters } from '../../../utils/filters';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n\n  /**\n   * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter\n   * is set in the snippet config or by using the prop of the component.\n   *\n   * @public\n   */\n  @Component\n  export default class PreselectedFilters extends Vue {\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    @Inject()\n    public snippetConfig?: SnippetConfig;\n\n    /**\n     * A list of filters to preselect.\n     *\n     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * component is created.\n     *\n     * @public\n     */\n    @Prop({ default: () => [] })\n    public filters!: string[];\n\n    /**\n     * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the\n     * filters prop.\n     */\n    created(): void {\n      const preselectedFilters = this.snippetConfig?.filters ?? this.filters;\n      if (!isArrayEmpty(preselectedFilters)) {\n        this.$x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters));\n      }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n[`PreselectedFiltersProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts).\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <PreselectedFilters />\n</template>\n\n<script>\n  import { PreselectedFilters } from '@empathyco/x-components';\n  export default {\n    name: 'PreselectedFiltersDemo',\n    components: {\n      PreselectedFilters\n    },\n    provide: {\n      snippetConfig: {\n        filters: ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"']\n      }\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the preselected filters have been configured to use a list of configured filters by\nprop:\n\n```vue\n<template>\n  <PreselectedFilters :filters=\"filters\" />\n</template>\n\n<script>\n  import { PreselectedFilters } from '@empathyco/x-components';\n  export default {\n    name: 'PreselectedFiltersDemo',\n    components: {\n      PreselectedFilters\n    },\n    computed: {\n      filters() {\n        return ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"'];\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"preselected-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { createRawFilters } from '../../../utils/filters';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n\n  /**\n   * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter\n   * is set in the snippet config or by using the prop of the component.\n   *\n   * @public\n   */\n  @Component\n  export default class PreselectedFilters extends Vue {\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    @Inject('snippetConfig')\n    public snippetConfig?: SnippetConfig;\n\n    /**\n     * A list of filters to preselect.\n     *\n     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * component is created.\n     *\n     * @public\n     */\n    @Prop({ default: () => [] })\n    public filters!: string[];\n\n    /**\n     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the\n     * filters prop.\n     *\n     * @returns An array of filter's ids.\n     */\n    protected get preselectedFilters(): string[] {\n      return this.snippetConfig?.filters ?? this.filters;\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save\n     * the provided filters in the state.\n     */\n    @Watch('preselectedFilters')\n    protected emitPreselectedFilters(): void {\n      if (!isArrayEmpty(this.preselectedFilters)) {\n        this.$x.emit('PreselectedFiltersProvided', createRawFilters(this.preselectedFilters));\n      }\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * component is created.\n     */\n    created(): void {\n      this.emitPreselectedFilters();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n[`PreselectedFiltersProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts).\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <PreselectedFilters />\n</template>\n\n<script>\n  import { PreselectedFilters } from '@empathyco/x-components';\n  export default {\n    name: 'PreselectedFiltersDemo',\n    components: {\n      PreselectedFilters\n    },\n    provide: {\n      snippetConfig: {\n        filters: ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"']\n      }\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the preselected filters have been configured to use a list of configured filters by\nprop:\n\n```vue\n<template>\n  <PreselectedFilters :filters=\"filters\" />\n</template>\n\n<script>\n  import { PreselectedFilters } from '@empathyco/x-components';\n  export default {\n    name: 'PreselectedFiltersDemo',\n    components: {\n      PreselectedFilters\n    },\n    computed: {\n      filters() {\n        return ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"'];\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/preselected-filters.vue2.js

@@ -1,5 +1,5 @@
 import { __decorate } from 'tslib';
-import { Inject, Prop, Component } from 'vue-property-decorator';
+import { Inject, Prop, Watch, Component } from 'vue-property-decorator';
 import Vue from 'vue';
 import { createRawFilters } from '../../../utils/filters.js';
 import { isArrayEmpty } from '../../../utils/array.js';
@@ -12,24 +12,42 @@ import { isArrayEmpty } from '../../../utils/array.js';
  */
 let PreselectedFilters = class PreselectedFilters extends Vue {
     /**
-     * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the
+     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
      * filters prop.
+     *
+     * @returns An array of filter's ids.
      */
-    created() {
-        const preselectedFilters = this.snippetConfig?.filters ?? this.filters;
-        if (!isArrayEmpty(preselectedFilters)) {
-            this.$x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters));
+    get preselectedFilters() {
+        return this.snippetConfig?.filters ?? this.filters;
+    }
+    /**
+     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
+     * the provided filters in the state.
+     */
+    emitPreselectedFilters() {
+        if (!isArrayEmpty(this.preselectedFilters)) {
+            this.$x.emit('PreselectedFiltersProvided', createRawFilters(this.preselectedFilters));
         }
     }
+    /**
+     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
+     * component is created.
+     */
+    created() {
+        this.emitPreselectedFilters();
+    }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     render() { }
 };
 __decorate([
-    Inject()
+    Inject('snippetConfig')
 ], PreselectedFilters.prototype, "snippetConfig", void 0);
 __decorate([
     Prop({ default: () => [] })
 ], PreselectedFilters.prototype, "filters", void 0);
+__decorate([
+    Watch('preselectedFilters')
+], PreselectedFilters.prototype, "emitPreselectedFilters", null);
 PreselectedFilters = __decorate([
     Component
 ], PreselectedFilters);

package/js/x-modules/facets/components/preselected-filters.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"preselected-filters.vue2.js","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n  import { Component, Inject, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { createRawFilters } from '../../../utils/filters';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n\n  /**\n   * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter\n   * is set in the snippet config or by using the prop of the component.\n   *\n   * @public\n   */\n  @Component\n  export default class PreselectedFilters extends Vue {\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    @Inject()\n    public snippetConfig?: SnippetConfig;\n\n    /**\n     * A list of filters to preselect.\n     *\n     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * component is created.\n     *\n     * @public\n     */\n    @Prop({ default: () => [] })\n    public filters!: string[];\n\n    /**\n     * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the\n     * filters prop.\n     */\n    created(): void {\n      const preselectedFilters = this.snippetConfig?.filters ?? this.filters;\n      if (!isArrayEmpty(preselectedFilters)) {\n        this.$x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters));\n      }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n"],"names":[],"mappings":";;;;;;AAOE;;;;;AAKG;AAEY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,GAAG,CAAA;AAoBjD;;;AAGG;IACH,OAAO,GAAA;QACL,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;AACvE,QAAA,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;AACrC,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAClF,SAAA;KACF;;AAGD,IAAA,MAAM,MAAW;CAClB,CAAA;AA1BC,UAAA,CAAA;AADC,IAAA,MAAM,EAAE;AAC4B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAWrC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC;AACF,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAlBP,kBAAkB,GAAA,UAAA,CAAA;IADtC,SAAS;AACW,CAAA,EAAA,kBAAkB,CAiCtC,CAAA;aAjCoB,kBAAkB;;;;"}
+{"version":3,"file":"preselected-filters.vue2.js","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { createRawFilters } from '../../../utils/filters';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n\n  /**\n   * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter\n   * is set in the snippet config or by using the prop of the component.\n   *\n   * @public\n   */\n  @Component\n  export default class PreselectedFilters extends Vue {\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    @Inject('snippetConfig')\n    public snippetConfig?: SnippetConfig;\n\n    /**\n     * A list of filters to preselect.\n     *\n     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * component is created.\n     *\n     * @public\n     */\n    @Prop({ default: () => [] })\n    public filters!: string[];\n\n    /**\n     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the\n     * filters prop.\n     *\n     * @returns An array of filter's ids.\n     */\n    protected get preselectedFilters(): string[] {\n      return this.snippetConfig?.filters ?? this.filters;\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save\n     * the provided filters in the state.\n     */\n    @Watch('preselectedFilters')\n    protected emitPreselectedFilters(): void {\n      if (!isArrayEmpty(this.preselectedFilters)) {\n        this.$x.emit('PreselectedFiltersProvided', createRawFilters(this.preselectedFilters));\n      }\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * component is created.\n     */\n    created(): void {\n      this.emitPreselectedFilters();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n"],"names":[],"mappings":";;;;;;AAOE;;;;;AAKG;AAEY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,GAAG,CAAA;AAoBjD;;;;;AAKG;AACH,IAAA,IAAc,kBAAkB,GAAA;QAC9B,OAAO,IAAI,CAAC,aAAa,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;KACpD;AAED;;;AAGG;IAEO,sBAAsB,GAAA;AAC9B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE;AAC1C,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;AACvF,SAAA;KACF;AAED;;;AAGG;IACH,OAAO,GAAA;QACL,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;;AAGD,IAAA,MAAM,MAAW;CAClB,CAAA;AA5CC,UAAA,CAAA;IADC,MAAM,CAAC,eAAe,CAAC;AACa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAWrC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC;AACF,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAiB1B,UAAA,CAAA;IADC,KAAK,CAAC,oBAAoB,CAAC;AAK3B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,CAAA;AAvCkB,kBAAkB,GAAA,UAAA,CAAA;IADtC,SAAS;AACW,CAAA,EAAA,kBAAkB,CAmDtC,CAAA;aAnDoB,kBAAkB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "4.1.0-alpha.21",
+  "version": "4.1.0-alpha.22",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "fb1f2f29e0ab2fcbc6c32bd89450cee79aa985c4"
+  "gitHead": "cc201db88f78a74a4f4b271115c3e140faa425e6"
 }

package/report/x-components.api.json

@@ -37605,7 +37605,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@empathyco/x-components!PreselectedFilters#created:member(1)",
-              "docComment": "/**\n * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the filters prop.\n */\n",
+              "docComment": "/**\n * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the component is created.\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -37633,6 +37633,37 @@
               "isAbstract": false,
               "name": "created"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@empathyco/x-components!PreselectedFilters#emitPreselectedFilters:member(1)",
+              "docComment": "/**\n * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save the provided filters in the state.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "protected emitPreselectedFilters(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": true,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "emitPreselectedFilters"
+            },
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!PreselectedFilters#filters:member",
@@ -37663,6 +37694,36 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!PreselectedFilters#preselectedFilters:member",
+              "docComment": "/**\n * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the filters prop.\n *\n * @returns An array of filter's ids.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "protected get preselectedFilters(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string[]"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "preselectedFilters",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": true,
+              "isAbstract": false
+            },
             {
               "kind": "Method",
               "canonicalReference": "@empathyco/x-components!PreselectedFilters#render:member(1)",

package/report/x-components.api.md

@@ -3554,7 +3554,9 @@ export const popularSearchesXStoreModule: PopularSearchesXStoreModule;
 // @public
 export class PreselectedFilters extends Vue_2 {
     created(): void;
+    protected emitPreselectedFilters(): void;
     filters: string[];
+    protected get preselectedFilters(): string[];
     // (undocumented)
     render(): void;
     // @internal

package/types/x-modules/facets/components/preselected-filters.vue.d.ts

@@ -23,8 +23,20 @@ export default class PreselectedFilters extends Vue {
      */
     filters: string[];
     /**
-     * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the
+     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
      * filters prop.
+     *
+     * @returns An array of filter's ids.
+     */
+    protected get preselectedFilters(): string[];
+    /**
+     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
+     * the provided filters in the state.
+     */
+    protected emitPreselectedFilters(): void;
+    /**
+     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
+     * component is created.
      */
     created(): void;
     render(): void;

package/types/x-modules/facets/components/preselected-filters.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preselected-filters.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAEE,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEnE;;;;;GAKG;AAEH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,GAAG;IACjD;;;;OAIG;IAEI,aAAa,CAAC,EAAE,aAAa,CAAC;IAErC;;;;;;;OAOG;IAEI,OAAO,EAAG,MAAM,EAAE,CAAC;IAE1B;;;OAGG;IACH,OAAO,IAAI,IAAI;IAQf,MAAM,IAAI,IAAI;CACf"}
+{"version":3,"file":"preselected-filters.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAEE,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEnE;;;;;GAKG;AAEH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,GAAG;IACjD;;;;OAIG;IAEI,aAAa,CAAC,EAAE,aAAa,CAAC;IAErC;;;;;;;OAOG;IAEI,OAAO,EAAG,MAAM,EAAE,CAAC;IAE1B;;;;;OAKG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAE3C;IAED;;;OAGG;IAEH,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAMxC;;;OAGG;IACH,OAAO,IAAI,IAAI;IAKf,MAAM,IAAI,IAAI;CACf"}