@empathyco/x-components 3.0.0-alpha.86 → 3.0.0-alpha.89

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.89](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.88...@empathyco/x-components@3.0.0-alpha.89) (2022-04-29)
+
+### Build System
+
+- **deps:** update eslint-plugin dependencies (#447)
+  ([51d60f0](https://github.com/empathyco/x/commit/51d60f0e11fa9667a784bbdb10ba1f39159b382f)),
+  closes [EX-5383](https://searchbroker.atlassian.net/browse/EX-5383)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.88](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.87...@empathyco/x-components@3.0.0-alpha.88) (2022-04-29)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.86](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.85...@empathyco/x-components@3.0.0-alpha.86) (2022-04-19)
 
 ### Features

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css

@@ -218,20 +218,6 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-.x-button--pill.x-button,
-.x-button--pill .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
-  --x-size-border-radius-top-right-button-default: var(
-      --x-size-border-radius-top-right-button-pill
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-      --x-size-border-radius-bottom-right-button-pill
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-      --x-size-border-radius-bottom-left-button-pill
-  );
-}
 :root {
   --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -2725,6 +2711,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);
+}
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
   --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
@@ -7546,24 +7553,17 @@
   text-transform: none;
 }
 
-: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-button--pill.x-button,
+.x-button--pill .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
+  --x-size-border-radius-top-right-button-default: var(
+      --x-size-border-radius-top-right-button-pill
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+      --x-size-border-radius-bottom-right-button-pill
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+      --x-size-border-radius-bottom-left-button-pill
+  );
 }

package/docs/API-reference/api/x-adapter.searchresponse.banners.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-banners: Banner[];
+banners?: Banner[];
 ```

package/docs/API-reference/api/x-adapter.searchresponse.md

@@ -16,13 +16,13 @@ export interface SearchResponse
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [banners](./x-adapter.searchresponse.banners.md) | Banner\[\] |  |
+|  [banners?](./x-adapter.searchresponse.banners.md) | Banner\[\] | <i>(Optional)</i> |
 |  [facets?](./x-adapter.searchresponse.facets.md) | Facet\[\] | <i>(Optional)</i> |
-|  [partialResults](./x-adapter.searchresponse.partialresults.md) | PartialResult\[\] |  |
-|  [promoteds](./x-adapter.searchresponse.promoteds.md) | Promoted\[\] |  |
+|  [partialResults?](./x-adapter.searchresponse.partialresults.md) | PartialResult\[\] | <i>(Optional)</i> |
+|  [promoteds?](./x-adapter.searchresponse.promoteds.md) | Promoted\[\] | <i>(Optional)</i> |
 |  [queryTagging](./x-adapter.searchresponse.querytagging.md) | TaggingInfo |  |
-|  [redirections](./x-adapter.searchresponse.redirections.md) | Redirection\[\] |  |
+|  [redirections?](./x-adapter.searchresponse.redirections.md) | Redirection\[\] | <i>(Optional)</i> |
 |  [results](./x-adapter.searchresponse.results.md) | Result\[\] |  |
-|  [spellcheck](./x-adapter.searchresponse.spellcheck.md) | string |  |
+|  [spellcheck?](./x-adapter.searchresponse.spellcheck.md) | string | <i>(Optional)</i> |
 |  [totalResults](./x-adapter.searchresponse.totalresults.md) | number |  |
 

package/docs/API-reference/api/x-adapter.searchresponse.partialresults.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-partialResults: PartialResult[];
+partialResults?: PartialResult[];
 ```

package/docs/API-reference/api/x-adapter.searchresponse.promoteds.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-promoteds: Promoted[];
+promoteds?: Promoted[];
 ```

package/docs/API-reference/api/x-adapter.searchresponse.redirections.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-redirections: Redirection[];
+redirections?: Redirection[];
 ```

package/docs/API-reference/api/x-adapter.searchresponse.spellcheck.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-spellcheck: string;
+spellcheck?: string;
 ```

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

@@ -4,10 +4,10 @@
 
 ## increasePageAppendingResults variable
 
-Increases the current search state `page` by one.
+Default implementation for the [SearchActions.increasePageAppendingResults()](./x-components.searchactions.increasepageappendingresults.md)<!-- -->.
 
 <b>Signature:</b>
 
 ```typescript
-increasePageAppendingResults: import("../../wiring/wiring.types").AnyWire
+increasePageAppendingResults: SearchXStoreModule['actions']['increasePageAppendingResults']
 ```

package/docs/API-reference/api/x-components.increasepageappendingresultswire.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; [increasePageAppendingResultsWire](./x-components.increasepageappendingresultswire.md)
+
+## increasePageAppendingResultsWire variable
+
+Increases the current search state `page` by one.
+
+<b>Signature:</b>
+
+```typescript
+increasePageAppendingResultsWire: import("../../wiring/wiring.types").AnyWire
+```

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

@@ -435,7 +435,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [identifierHighlightRegexp](./x-components.identifierhighlightregexp.md) | Default implementation for the [IdentifierResultsGetters.identifierHighlightRegexp](./x-components.identifierresultsgetters.identifierhighlightregexp.md) getter. |
 |  [identifierResultsRequest](./x-components.identifierresultsrequest.md) | Default implementation for the [IdentifierResultsGetters.identifierResultsRequest](./x-components.identifierresultsgetters.identifierresultsrequest.md) getter. |
 |  [identifierResultsXModule](./x-components.identifierresultsxmodule.md) | IdentifierResults [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>identifier-results</code> entry point. |
-|  [increasePageAppendingResults](./x-components.increasepageappendingresults.md) | Increases the current search state <code>page</code> by one. |
+|  [increasePageAppendingResults](./x-components.increasepageappendingresults.md) | Default implementation for the [SearchActions.increasePageAppendingResults()](./x-components.searchactions.increasepageappendingresults.md)<!-- -->. |
+|  [increasePageAppendingResultsWire](./x-components.increasepageappendingresultswire.md) | Increases the current search state <code>page</code> by one. |
 |  [infiniteScroll](./x-components.infinitescroll.md) | Custom Vue directive for infinite scroll.<!-- -->This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end the IntersectionObserver triggers that both elements are intersecting.<!-- -->How it works.<!-- -->As a summary, if the scroll reaches the end, the <code>vNode.context.onInfiniteScrollEnd</code> function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.<!-- -->Usage.<!-- -->The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: \* html: will set the <html> as the scrollable container. \* body: will set the <body> as the scrollable container. \* id: will set the DOM element with the provided id as the scrollable container.<!-- -->If no argument is provided the scrollable container fallbacks to the viewport. |
 |  [LightBulbOff](./x-components.lightbulboff.md) |  |
 |  [LightBulbOn](./x-components.lightbulbon.md) |  |
@@ -472,12 +473,15 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [removeHistoryQuery](./x-components.removehistoryquery.md) | Removes a single history query from the history queries. |
 |  [resetAppending](./x-components.resetappending.md) | Resets the search state <code>isAppendingResults</code>. |
 |  [resetSpellcheckQuery](./x-components.resetspellcheckquery.md) | Resets the search state <code>spellcheckedQuery</code> to its initial value, an empty string. |
+|  [resetState](./x-components.resetstate.md) | Default implementation for the [SearchActions.resetState()](./x-components.searchactions.resetstate.md)<!-- -->. |
 |  [resetStateWire](./x-components.resetstatewire.md) | Batches state resets after [SearchGetters.request](./x-components.searchgetters.request.md) parameters update. |
 |  [sanitize](./x-components.sanitize.md) | Sanitize characters from a given string. |
+|  [saveIdentifierResultsOrigin](./x-components.saveidentifierresultsorigin.md) | Default implementation for the [IdentifierResultsActions.saveOrigin()](./x-components.identifierresultsactions.saveorigin.md)<!-- -->. |
 |  [saveIdentifierResultsOriginWire](./x-components.saveidentifierresultsoriginwire.md) | Sets the identifier results state <code>origin</code>. |
-|  [saveOrigin](./x-components.saveorigin.md) | Default implementation for the [IdentifierResultsActions.saveOrigin()](./x-components.identifierresultsactions.saveorigin.md)<!-- -->. |
 |  [saveOriginWire](./x-components.saveoriginwire.md) | Sets the search state <code>origin</code>. |
 |  [saveQuery](./x-components.savequery.md) | Default implementation for the [IdentifierResultsActions.saveQuery()](./x-components.identifierresultsactions.savequery.md)<!-- -->. |
+|  [saveSearchOrigin](./x-components.savesearchorigin.md) | Default implementation for the [SearchActions.saveOrigin()](./x-components.searchactions.saveorigin.md)<!-- -->. |
+|  [saveSearchResponse](./x-components.savesearchresponse.md) | Default implementation for the [SearchActions.saveSearchResponse()](./x-components.searchactions.savesearchresponse.md)<!-- -->. |
 |  [scrollXModule](./x-components.scrollxmodule.md) | Scroll [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>empathize</code> entry point. |
 |  [searchBoxXModule](./x-components.searchboxxmodule.md) | SearchBox [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>search-box</code> entry point. |
 |  [SearchIcon](./x-components.searchicon.md) |  |
@@ -498,7 +502,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [setName](./x-components.setname.md) | Sets the device of the [DeviceXModule](./x-components.devicexmodule.md)<!-- -->. |
 |  [setNextQueriesExtraParams](./x-components.setnextqueriesextraparams.md) | Sets the next queries state <code>params</code>. |
 |  [setNextQueriesQuery](./x-components.setnextqueriesquery.md) | Sets the next queries state <code>query</code>. |
-|  [setPageSize](./x-components.setpagesize.md) | Sets the search state <code>pageSize</code>. |
 |  [setParams](./x-components.setparams.md) | Sets the extra params of the url module. |
 |  [setPendingScrollToWire](./x-components.setpendingscrolltowire.md) | Saves the selector of the item that should be scrolled into the view. |
 |  [setPopularSearchesExtraParams](./x-components.setpopularsearchesextraparams.md) | Sets the popular searches state <code>params</code>. |
@@ -521,6 +524,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [setSearchExtraParams](./x-components.setsearchextraparams.md) | Sets the search state <code>params</code>. |
 |  [setSearchPage](./x-components.setsearchpage.md) | Sets the search state <code>page</code>. |
 |  [setSearchQuery](./x-components.setsearchquery.md) | Sets the search state <code>query</code>. |
+|  [setSearchUrlParams](./x-components.setsearchurlparams.md) | Default implementation for the [SearchActions.setUrlParams()](./x-components.searchactions.seturlparams.md)<!-- -->. |
 |  [setSelectedFilters](./x-components.setselectedfilters.md) | Sets the search state <code>selectedFilters</code>. |
 |  [setSort](./x-components.setsort.md) | Sets the search state <code>sort</code>. |
 |  [setTaggingConfig](./x-components.settaggingconfig.md) | Sets the tagging config state. |

package/docs/API-reference/api/x-components.resetstate.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; [resetState](./x-components.resetstate.md)
+
+## resetState variable
+
+Default implementation for the [SearchActions.resetState()](./x-components.searchactions.resetstate.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+resetState: SearchXStoreModule['actions']['resetState']
+```

package/docs/API-reference/api/{x-components.saveorigin.md → x-components.saveidentifierresultsorigin.md}

@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [saveOrigin](./x-components.saveorigin.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [saveIdentifierResultsOrigin](./x-components.saveidentifierresultsorigin.md)
 
-## saveOrigin variable
+## saveIdentifierResultsOrigin variable
 
 Default implementation for the [IdentifierResultsActions.saveOrigin()](./x-components.identifierresultsactions.saveorigin.md)<!-- -->.
 

package/docs/API-reference/api/x-components.savesearchorigin.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; [saveSearchOrigin](./x-components.savesearchorigin.md)
+
+## saveSearchOrigin variable
+
+Default implementation for the [SearchActions.saveOrigin()](./x-components.searchactions.saveorigin.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+saveOrigin: SearchXStoreModule['actions']['saveOrigin']
+```

package/docs/API-reference/api/x-components.savesearchresponse.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; [saveSearchResponse](./x-components.savesearchresponse.md)
+
+## saveSearchResponse variable
+
+Default implementation for the [SearchActions.saveSearchResponse()](./x-components.searchactions.savesearchresponse.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+saveSearchResponse: SearchXStoreModule['actions']['saveSearchResponse']
+```

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

@@ -22,5 +22,6 @@ export interface SearchActions
 |  [increasePageAppendingResults()](./x-components.searchactions.increasepageappendingresults.md) | Checks if there are more pages of results to load. If there are, then increases the page number in state and set to <code>true</code> the [SearchState.isAppendResults](./x-components.searchstate.isappendresults.md) flag. |
 |  [resetState(watchedRequest)](./x-components.searchactions.resetstate.md) | Batches state resets in a single action after [SearchGetters.request](./x-components.searchgetters.request.md) parameters update. |
 |  [saveOrigin(originInit)](./x-components.searchactions.saveorigin.md) | Creates a [QueryOrigin](./x-components.queryorigin.md) and saves it. |
+|  [saveSearchResponse(response)](./x-components.searchactions.savesearchresponse.md) | Saves the [SearchResponse](./x-adapter.searchresponse.md)<!-- -->. |
 |  [setUrlParams(urlParams)](./x-components.searchactions.seturlparams.md) | Checks if the url has params on it and then updates the state with these values. |
 

package/docs/API-reference/api/x-components.searchactions.savesearchresponse.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SearchActions](./x-components.searchactions.md) &gt; [saveSearchResponse](./x-components.searchactions.savesearchresponse.md)
+
+## SearchActions.saveSearchResponse() method
+
+Saves the [SearchResponse](./x-adapter.searchresponse.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+saveSearchResponse(response: SearchResponse): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  response | SearchResponse | The [SearchResponse](./x-adapter.searchresponse.md) to save. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.setsearchurlparams.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; [setSearchUrlParams](./x-components.setsearchurlparams.md)
+
+## setSearchUrlParams variable
+
+Default implementation for the [SearchActions.setUrlParams()](./x-components.searchactions.seturlparams.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+setUrlParams: SearchXStoreModule['actions']['setUrlParams']
+```

package/docs/API-reference/api/x-components.snippetconfigextraparams.excludedextraparams.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; [SnippetConfigExtraParams](./x-components.snippetconfigextraparams.md) &gt; [excludedExtraParams](./x-components.snippetconfigextraparams.excludedextraparams.md)
+
+## SnippetConfigExtraParams.excludedExtraParams property
+
+Collection of properties from the snippet config to exclude from the extra params object.
+
+<b>Signature:</b>
+
+```typescript
+protected excludedExtraParams: Array<keyof SnippetConfig>;
+```

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

@@ -17,5 +17,6 @@ export default class SnippetConfigExtraParams extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [excludedExtraParams](./x-components.snippetconfigextraparams.excludedextraparams.md) |  | Array&lt;keyof [SnippetConfig](./x-components.snippetconfig.md)<!-- -->&gt; | Collection of properties from the snippet config to exclude from the extra params object. |
 |  [values?](./x-components.snippetconfigextraparams.values.md) |  | Dictionary&lt;unknown&gt; | <i>(Optional)</i> A Dictionary where the keys are the extra param names and its values. |
 

package/docs/API-reference/components/extra-params/x-components.snippet-config-extra-params.md

@@ -11,9 +11,10 @@ objects of every x-module.
 
 ## Props
 
-| Name                | Description                                                           | Type                    | Default       |
-| ------------------- | --------------------------------------------------------------------- | ----------------------- | ------------- |
-| <code>values</code> | A Dictionary where the keys are the extra param names and its values. | <code>Dictionary</code> | <code></code> |
+| Name                             | Description                                                                                    | Type                    | Default                                                                                                                                                                                                        |
+| -------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>values</code>              | A Dictionary where the keys are the extra param names and its values.                          | <code>Dictionary</code> | <code></code>                                                                                                                                                                                                  |
+| <code>excludedExtraParams</code> | Collection of properties from the snippet config to exclude from the<br />extra params object. | <code>Array</code>      | <code>(): Array<keyof SnippetConfig> => [<br /> 'callbacks',<br /> 'productId',<br /> 'instance',<br /> 'lang',<br /> 'searchLang',<br /> 'consent',<br /> 'documentDirection',<br /> 'currency'<br />]</code> |
 
 ## See it in action
 

package/docs/build-search-ui/README.md

@@ -6,13 +6,15 @@ tags:
   - use x components
   - x components
   - interface x
+  - x archetype
+  - archetype
 ---
 
 ::: slot left-intro-column
 
-## Getting started with Interface X Components
+## Getting started with Interface X
 
-Start building your search and discovery experience in a few simple steps:
+Start building your search and discovery experience:
 
 :::
 
@@ -22,12 +24,12 @@ Start building your search and discovery experience in a few simple steps:
 
 :::
 
-- **Discover more about the [Interface X ecosystem](#the-interface-x-ecosystem)** and how
-  Interface X works.
+- **Discover the [Interface X ecosystem](#the-interface-x-ecosystem)** and how Interface X
+  works.
+- **[Develop using Interface X](#develop-with-interface-x)** inside your project.
 - **[Integrate the Interface X Archetype](#integrate-interface-x-archetype)** in your store web
   application.
-- **[Develop using the Interface X](#develop-with-interface-x)** inside your current project.
-- **[How to use and configure the Interface X Components](#how-to-use-and-configure-the-interface-x-components)**
+- **[Use and configure the Interface X Components](#use-and-configure-the-interface-x-components)**
   in your project.
 
 <!-- 3. Style your UI. 4. Translate your search experience-->
@@ -43,25 +45,15 @@ numerous components to choose from, and the catalog evolves quickly with new exp
 Check out the **[open source project in GitHub](https://github.com/empathyco/x)**.
 
 Interested in learning more about how Interface&nbsp;X works? Discover more about its
-**[architecture](x-architecture/README.md)**.
-
-## Integrate Interface X Archetype
-
-Once you have finished developing or extending your search interface using the
-Interface&nbsp;X&nbsp;Archetype project you will probably want to integrate it into your current
-store. The integration of an existing Archetype into your project is pretty straightforward. You
-will need to load the generated Javascript into your website and initialise it.
-
-To start integrating an existent Archetype into your project please visit
-[extended guide about Archetype integration](web-archetype-integration-guide.md).
+**[architecture](web-x-architecture.md)**.
 
 ## Develop with Interface X
 
-You can use the Interface X in a project in two ways:
+You can use the Interface&nbsp;X in a project in two ways:
 
 - using the separate **Interface&nbsp;X&nbsp;Archetype** project, an out-of-the-box project with all
-  you need to get up and running fast, or
-- integrating the individual **Interface&nbsp;X&nbsp;Components** library in your Vue project for a
+  you need to get up and running fast
+- importing the individual **Interface&nbsp;X&nbsp;Components** library in your Vue project for a
   more custom approach.
 
 ::: note
@@ -73,9 +65,9 @@ You can use Empathy Search API, Elasticsearch, or Solr endpoints with both appro
 ##### Develop via Interface X Archetype
 
 The **[Interface&nbsp;X&nbsp;Archetype](https://github.com/empathyco/x-archetype)** project is the
-perfect combination of all the existing X&nbsp;Components. Instead of starting from a completely
-blank canvas, ramp up quickly with an already working search and discovery experience. This is the
-perfect solution for most cases. But don’t worry! It’s still super flexible! You’re still able to:
+perfect combination of all the existing X&nbsp;Components. It allows you to ramp up quickly with an
+already working search and discovery experience, instead of starting from a completely blank canvas.
+This is the perfect solution for most cases as you can use it as a springboard to:
 
 - Change the default styles for styles that match your application through design tokens or custom
   CSS.
@@ -86,33 +78,46 @@ perfect solution for most cases. But don’t worry! It’s still super flexible!
 - Create new components or modify the existing ones.
 
 To start developing the X&nbsp;Archetype project, see
-**[Develop via Interface X Archetype](web-archetype-development-guide.md)**.
+**[Develop using Interface&nbsp;X&nbsp;Archetype](web-archetype-development-guide.md)**.
 
 ##### Develop via Interface X Components library
 
 This is the more deep and flexible use of the
-**[Interface X Components library](https://github.com/empathyco/x/tree/main/packages/x-components)**,
+**[Interface&nbsp;X&nbsp;Components library](https://github.com/empathyco/x/tree/main/packages/x-components)**,
 allowing you to import any components you desire into your Vue application. It lets you connect,
 customize, extend, style, or even create new components without any limitations. This is the way to
-go if you like to look under the hood!
+go if you like to look under the hood.
 
 - Mix and match with other Vue components.
 - Implement in Vue or React projects.
 - Extend component behavior with your own development.
 - Determine styles using design tokens or custom CSS.
 
-To get started with the X Components library, check out
-**[Develop using Interface X Components library](web-x-components-integration-guide.md)**.
+To get started with the X&nbsp;Components library, check out
+**[Develop using Interface&nbsp;X&nbsp;Components library](web-x-components-development-guide.md)**.
+
+## Integrate Interface X Archetype
+
+With the **[Interface&nbsp;X&nbsp;Archetype](https://github.com/empathyco/x-archetype)** you have an
+isolated search layer up and running in your store web application in a matter of minutes.
+
+To integrate the Interface&nbsp;X&nbsp;Archetype into your project, just **load** the generated
+JavaScript file into your website and **initialize** it.
+
+Check out
+**[Integrate InterfaceX&nbsp;Archetype into an existing website](web-archetype-integration-guide.md)**,
+to integrate the X&nbsp;Archetype project.
+
+## Use and configure the Interface X Components
 
-## How to use and configure the Interface X Components
+To use the Interface&nbsp;X&nbsp;Components, just **import** and **register** the component,
+**include** it in your template, and you’re ready to go.
 
-Using the Interface&nbsp;X&nbsp;Components is a piece of cake! Just import and register the
-component, include it in your template, and you’re ready to go! What’s more, each component offers
-multiple configuration parameters to play around with, allowing you greater flexibility over the
-experience.
+What’s more, each component offers multiple configuration parameters to play around with, giving you
+greater flexibility over the experience.
 
 Unsure how to start? Check out
-**[How to use & configure Interface X Components in your project](web-how-to-use-x-components-guide.md)**.
+**[How to use and configure Interface&nbsp;X&nbsp;Components in your project](web-how-to-use-x-components-guide.md)**.
 
 <!--
 ## Style your UI