@empathyco/x-components 3.0.0-alpha.34 → 3.0.0-alpha.35

package/docs/API-reference/components/search/x-components.partial-results-list.md

@@ -22,11 +22,11 @@ It also provides the partial result slot to customize the item with the partial
 | -------------------- | --------------------------------------- | ------------------------------------------------------------ |
 | <code>default</code> | (Required) Partial results item content | **partialResult** <code>Partial</code> - Partial Result data |
 
-# Examples
+## Examples
 
 This component loops through an array of partials an exposed a slot to use customize each partial.
 
-## Basic example
+### Basic example
 
 It renders a list of partial results using the default slot:
 
@@ -40,7 +40,7 @@ It renders a list of partial results using the default slot:
 </template>
 ```
 
-## Configuring the number of partials
+### Configuring the number of partials
 
 It sets the maximum partials to show to 3.
 
@@ -54,7 +54,7 @@ It sets the maximum partials to show to 3.
 </template>
 ```
 
-## Rendering usage
+### Rendering usage
 
 It renders a list of partial results using the default slot. It will show the query, the partial
 results and a button to update the query with the partial one.

package/docs/API-reference/components/search/x-components.redirection.md

@@ -23,7 +23,7 @@ website will be more helpful than the set of results returned.
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br /><br /><br /><br />                  |
 
-### Play with the component
+## Play with the component
 
 In this example, a query has been searched in the search input resulting in a case where the
 response has a redirection.

package/docs/API-reference/components/search/x-components.sort-dropdown.md

@@ -29,7 +29,7 @@ also allows to change the selected sort programmatically.
 | <code>toggle</code> | Used to render the contents of the dropdown toggle button. If not provided, it uses<br /> the item slot as fallback.                     | **isOpen** <code>boolean</code> - True if the dropdown is opened, and false if it is closed.<br />**item** <code>Sort</code> - The sort data to render.                                                |
 | <code>item</code>   | (required) Used to render each one of the items content, and as fallback<br /> for the toggle button content slot if it is not provided. | **item** <code>Sort</code> - Sort to render<br />**isHighlighted** <code>boolean</code> - True when the item has the focus.<br />**isSelected** <code>boolean</code> - True when the item is selected. |
 
-# Sort Dropdown
+## Sort Dropdown
 
 The `SortDropdown` component can be used to change the way the search results are ordered.
 

package/docs/API-reference/components/search/x-components.sort-list.md

@@ -22,7 +22,7 @@ also allows to change the selected sort programmatically.
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br />                                    |
 
-# Sort List
+## Sort List
 
 The `SortList` component can be used to change the way the search results are ordered.
 

package/docs/API-reference/components/search/x-components.spellcheck-button.md

@@ -16,9 +16,9 @@ intention to set the spellchecked query.
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             |                                           |
 
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 The component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`
 and `UserAcceptedSpellcheckQuery` events.
@@ -27,7 +27,7 @@ and `UserAcceptedSpellcheckQuery` events.
 <SpellcheckButton />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <SpellcheckButton>

package/docs/API-reference/components/search/x-components.spellcheck.md

@@ -19,20 +19,20 @@ The component will only render itself if the `spellcheckedQuery` property has va
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br />                                    |
 
-# Examples
+## Examples
 
 This default spellcheck component expects a query and a spellcheckedQuery to render and pass to its
 default slot.
 
 This two props should be show like a message comparing them.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <Spellcheck />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <Spellcheck>

package/docs/build-search-ui/web-archetype-development-guide.md

@@ -0,0 +1,178 @@
+---
+title: Interface X Archetype Development
+tags:
+  - development
+  - archetype
+  - X Components archetype development
+  - x development
+  - interface x
+  - x components
+  - archetype development
+  - archetype integration
+---
+
+# Interface X Archetype Development
+
+In this tutorial, you’ll learn how to start developing with the Interface X Archetype
+project in your store in a matter of minutes, so you can create a search interface layer based on
+predefined features and components.
+
+For this tutorial, the Empathy Search API is used, but you can use any search API. This guide
+requires knowledge of JavaScript and Vue.js.
+
+::: note Before you begin
+
+To integrate Interface X Archetype as a search UI layer, you need:
+
+- **Empathy Search API** (or any search API that you use to retrieve search data).
+- **Empathy Search Adapter** to communicate with the Empathy Search API (or any search adapter to
+  connect with the search API you are using).
+
+:::
+
+##### Steps to start developing in a X Archetype project:
+
+1. **Clone** the X Archetype project and **initialize** your repository.
+2. Install the **project dependencies** and execute the project.
+3. Configure the **search adapter**.
+4. Configure the **xPlugin**.
+
+## 1. Clone the project and initialize your repository
+
+Clone the [X Archetype project](https://github.com/empathyco/x-archetype.git) from the GitHub
+repository to your target folder. You need a non-initialized repository, so make sure you remove the
+git folder from the cloned project.
+
+```batch
+// Clone the X Archetype project from GitHub
+git clone --depth 1 https://github.com/empathyco/x-archetype.git <your-target-folder>
+
+// Remove the git folder
+rm -rf .git
+```
+
+::: develop
+
+You can use [Degit](https://github.com/Rich-Harris/degit) to clone the git repository without
+downloading the entire git history:
+`npx degit https://github.com/empathyco/x-archetype.git <your-target-folder>`.
+
+:::
+
+Once you have cloned the project and removed the git history from the project, initialize the
+repository from the root directory.
+
+```batch
+// Initialize the repository
+git init
+git remote add origin <your-repository-url>
+git add .
+git commit -m "Initial X-Components Setup"
+git push -u origin main
+```
+
+Then, replace the current repository name (`@empathyco/x-archetype`) with the name of your
+repository in the `package.json` file.
+
+```json
+// Define your repository
+{
+   "name": "<your-repo>",
+   "author": "Empathy Systems Corporation S.L.",
+   …
+ }
+
+```
+
+## 2. Install the dependencies and execute the project
+
+Install the project dependencies via `npm` in the root folder of your cloned repository. Then, you
+can run the project.
+
+```batch
+// Install the dependencies via npm
+npm install
+
+// Execute the project
+npm run serve
+```
+
+::: interact For a full list of the project dependencies, check the
+[`package.json`](https://github.com/empathyco/x-archetype/blob/main/package.json) file in the
+Interface&nbsp;X&nbsp;Archetype repository. :::
+
+## 3. Configure the search adapter
+
+Before using your project, configure the Empathy Search Adapter in the
+`x-archetype/src/adapter/adapter.ts` file, using the Empathy Adapter Builder to make it work with
+the Empathy Search API. The Empathy Search Adapter contains a sample configuration for setup, global
+configurations, or mappers that points to a demo environment. You need to make some adjustments in
+the configuration according to the search features you use in your project.
+
+Export the required search adapter with your configuration as you will need it for the search
+[xPlugin configuration](web-archetype-integration-guide.md#_4-configure-the-plugin).
+
+::: interact For detailed information about other configuration options in the Empathy Search
+Adapter, go to the
+[x-adapter repository](https://github.com/empathyco/x/tree/main/packages/search-adapter). :::
+
+::: note Although you configure the values for the `instance`, `language`, `scope`, and `endpoint`
+options when integrating the project, you can still change these values when the project is
+deployed. Use the `/x-archetype/public/snippet-script.js` file to perform hot changes for `lang`,
+`store`, `device`, and `catalog` parameters.
+
+For example, you may configure the adapter to use EN as `lang` so that when you search, the results
+are displayed in English. However, if you want to deploy the application in Spain, you want the
+`lang` to be ES. You change these values in the `snippet-script.js` file.
+
+:::
+
+## 4. Configure the plugin
+
+The `xPlugin` initializes the properties needed by the X&nbsp;Components. It has key options that
+you can configure in the `/x-archetype/src/x-components/plugin.options.ts` file.
+
+Since the X&nbsp;Archetype project operates as a layer and is designed to be integrated on top of
+any kind of website regardless the chosen technology, the `XInstaller` utility and its
+`installXOptions` object are designed to install the xPlugin, adding the connection between the
+X&nbsp;Components and the search API and bootstrapping the entire application with powerful APIs
+that are available in the `window.X` object.
+
+To configure the xPlugin, run this code:
+
+```typescript
+import { InstallXOptions, XInstaller } from '@empathyco/x-components';
+import App from './App.vue';
+import store from './store';
+import { adapter } from '../adapter';
+
+export const installXOptions: InstallXOptions = {
+  adapter,
+  store,
+  app: App
+};
+
+new XInstaller(installXOptions).init({
+  instance: '<your-search-api-instance>',
+  lang: '<your-application-language>',
+  scope: '<your-application-scope>'
+});
+```
+
+---
+
+### Next steps
+
+Once you have your Interface&nbsp;X&nbsp;Archetype project, you're ready to integrate it in your
+store, or extend the search and discovery experience to meet your business needs:
+
+- [Integrate an Interface&nbsp;X&nbsp;Archetype project into an existing website](web-archetype-integration-guide.md).
+- Change the configuration of [X Components](web-use-x-components-guide.md) or create new ones.
+- Adapt the
+  [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
+  to your branding.
+- Manage
+  [internationalization options](https://github.com/empathyco/x-archetype/blob/main/docs/i18n.md) to
+  support different languages.
+
+<!-- add links to design system and internationalization content pages when ready-->

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -1,5 +1,5 @@
 ---
-title: Integrate Interface X Archetype
+title: Integrate Interface X Archetype into an existing website
 tags:
   - integration
   - archetype
@@ -10,169 +10,177 @@ tags:
   - archetype integration
 ---
 
-# Integrate Interface X Archetype
+# Integrate Interface X Archetype into an existing website
 
-In this tutorial, you’ll learn how to integrate the Interface X Archetype project in your
-store in a matter of minutes so you can develop a search interface layer based on predefined
-features and components.
+Once you have finished developing or extending your search interface using the
+Interface X Archetype project you will probably want to integrate it into your current
+store.
 
-For this tutorial, the Empathy Search API is used, but you can use any search API. This guide
-requires knowledge of JavaScript and Vue.js.
+The integration is a 2-steps process:
 
-::: note Before you begin
+- Load Interface X script.
+- Initialise the Interface X.
 
-To integrate Interface X Archetype as a search UI layer, you need:
+Depending on your business needs, there are 2 different ways of making this integration process:
+auto initialising, or initialising on demand.
 
-- **Empathy Search API** (or any search API that you use to retrieve search data).
-- **Empathy Search Adapter** to communicate with the Empathy Search API (or any search adapter to
-  connect with the search API you are using).
+## Auto initialisation
 
-:::
+This is the easiest way to integrate the Interface X project in a website. The way to do so is
+by first defining an initialisation object or function, and then loading the Interface X
+script.
 
-##### Steps to integrate X Archetype project:
+### 1. Add a snippet configuration
 
-1. **Clone** the X Archetype project and **initialize** your repository.
-2. Install the **project dependencies** and execute the project.
-3. Configure the **search adapter**.
-4. Configure the **xPlugin**.
+The snippet configuration is needed by Interface X to know the API it must use, the language or
+currency it should display the texts in, or tagging parameters to enrich the data and provide better
+insights on how users search.
 
-## 1. Clone the project and initialize your repository
+If your configuration values are easy to retrieve or static, you can simply use an object.
 
-Clone the [X Archetype project](https://github.com/empathyco/x-archetype.git) from the GitHub
-repository to your target folder. You need a non-initialized repository, so make sure you remove the
-git folder from the cloned project.
-
-```batch
-// Clone the X Archetype project from GitHub
-git clone --depth 1 https://github.com/empathyco/x-archetype.git <your-target-folder>
-
-// Remove the git folder
-rm -rf .git
+```js
+window.initX = {
+  instance: 'my-store',
+  env: 'live',
+  scope: 'desktop',
+  lang: 'en',
+  currency: 'EUR',
+  consent: false
+};
 ```
 
-::: develop
-
-You can use [Degit](https://github.com/Rich-Harris/degit) to clone the git repository without
-downloading the entire git history:
-`npx degit https://github.com/empathyco/x-archetype.git <your-target-folder>`.
-
-:::
-
-Once you have cloned the project and removed the git history from the project, initialize the
-repository from the root directory.
-
-```batch
-// Initialize the repository
-git init
-git remote add origin <your-repository-url>
-git add .
-git commit -m "Initial X-Components Setup"
-git push -u origin main
+Otherwise, if you need to retrieve values dynamically, or execute any kind of logic before the
+initialisation you can also use a function:
+
+```js
+window.initX = function () {
+  return {
+    instance: 'my-store',
+    env: location.href.includes('.pre.') ? 'staging' : 'live',
+    scope: 'web',
+    lang: localStorage.get('lang'),
+    currency: localStorage.get('currency'),
+    consent: localStorage.get('consent')
+  };
+};
 ```
 
-Then, replace the current repository name (`@empathyco/x-archetype`) with the name of your
-repository in the `package.json` file.
-
-```json
-// Define your repository
-{
-   "name": "<your-repo>",
-   "author": "Empathy Systems Corporation S.L.",
-   …
- }
-
+You can read more about the [Snippet Configuration](#snippet-configuration) below.
+
+### 2. Load the Interface&nbsp;X script
+
+Once you have defined your snippet configuration either as an object or a function, you can insert
+the Interface&nbsp;X script. This script is hosted in a URL of this shape
+`https://x.<environment?>.empathy.co/<instance>/app.js`.
+
+For example, supposing that `my-store` is the instance, and you want to load the production script,
+you can add to your HTML the following scripts.
+
+```html
+<script>
+  window.initX = {
+    instance: 'my-store',
+    env: 'live',
+    scope: 'desktop',
+    lang: 'en',
+    currency: 'EUR',
+    consent: false
+  };
+</script>
+<script src="https://x.empathy.co/my-store/app.js"></script>
 ```
 
-## 2. Install the dependencies and execute the project
-
-Install the project dependencies via `npm` in the root folder of your cloned repository. Then, you
-can run the project.
-
-```batch
-// Install the dependencies via npm
-npm install
-
-// Execute the project
-npm run serve
+Or if you want to load the staging version, you just have to change the script `src` attribute to
+point to the staging environment:
+
+```html
+<script>
+  window.initX = {
+    instance: 'my-store',
+    env: 'live', // Note that here you are using production API with the staging version of Interface X
+    scope: 'desktop',
+    lang: 'en',
+    currency: 'EUR',
+    consent: false
+  };
+</script>
+<script src="https://x.staging.empathy.co/my-store/app.js"></script>
 ```
 
-::: interact  
-For a full list of the project dependencies, check the
-[`package.json`](https://github.com/empathyco/x-archetype/blob/main/package.json) file in the
-Interface&nbsp;X&nbsp;Archetype repository. :::
+This way, when the Interface&nbsp;X JavaScript file is loaded, it will retrieve the configuration
+from the object or function that you defined before. Nothing else is required.
 
-## 3. Configure the search adapter
+## Initialise on demand
 
-Before using your project, configure the Empathy Search Adapter in the
-`x-archetype/src/adapter/adapter.ts` file, using the Empathy Adapter Builder to make it work with
-the Empathy Search API. The Empathy Search Adapter contains a sample configuration for setup, global
-configurations, or mappers that points to a demo environment. You need to make some adjustments in
-the configuration according to the search features you use in your project.
+If you want to have more manual control on when the Interface&nbsp;X is loaded, you can still do so.
+Instead of defining an initialisation object or function upfront like in
+[Auto initialisation](#auto-initialisation), you can invoke a function with these options that will
+initialise Interface&nbsp;X.
 
-Export the required search adapter with your configuration as you will need it for the search
-[xPlugin configuration](web-archetype-integration-guide.md#_4-configure-the-plugin).
+### 1. Load the Interface&nbsp;X script
 
-::: interact For detailed information about other configuration options in the Empathy Search
-Adapter, go to the
-[x-adapter repository](https://github.com/empathyco/x/tree/main/packages/search-adapter). :::
+First, load the Interface&nbsp;X script. As you may already know, it is hosted in a URL of this
+shape: `https://x.<environment?>.empathy.co/<instance>/app.js`.
 
-::: note Although you configure the values for the `instance`, `language`, `scope`, and `endpoint`
-options when integrating the project, you can still change these values when the project is
-deployed. Use the `/x-archetype/public/snippet-script.js` file to perform hot changes for `lang`,
-`store`, `device`, and `catalog` parameters.
+For example, supposing that `my-store` is the instance, and you want to load the production script,
+you can add to your HTML the following scripts:
 
-For example, you may configure the adapter to use EN as `lang` so that when you search, the results
-are displayed in English. However, if you want to deploy the application in Spain, you want the
-`lang` to be ES. You change these values in the `snippet-script.js` file.
-
-:::
-
-## 4. Configure the plugin
-
-The `xPlugin` initializes the properties needed by the X&nbsp;Components. It has key options that
-you can configure in the `/x-archetype/src/x-components/plugin.options.ts` file.
-
-Since the X&nbsp;Archetype project operates as a layer and is designed to be integrated on top of
-any kind of website regardless the chosen technology, the `XInstaller` utility and its
-`installXOptions` object are designed to install the xPlugin, adding the connection between the
-X&nbsp;Components and the search API and bootstrapping the entire application with powerful APIs
-that are available in the `window.X` object.
-
-To configure the xPlugin, run this code:
-
-```typescript
-import { InstallXOptions, XInstaller } from '@empathyco/x-components';
-import App from './App.vue';
-import store from './store';
-import { adapter } from '../adapter';
-
-export const installXOptions: InstallXOptions = {
-  adapter,
-  store,
-  app: App
-};
-
-new XInstaller(installXOptions).init({
-  instance: '<your-search-api-instance>',
-  lang: '<your-application-language>',
-  scope: '<your-application-scope>'
-});
+```html
+<script src="https://x.empathy.co/my-store/app.js"></script>
 ```
 
----
-
-### Next steps
+For loading the staging version simply change the `src` attribute to the staging environment:
 
-Once you have integrated the Interface&nbsp;X&nbsp;Archetype in your store, you're ready to start
-using the X&nbsp;Archetype as is or extend the search and discovery experience to meet your business
-needs:
+```html
+<script src="https://x.staging.empathy.co/my-store/app.js"></script>
+```
 
-- Change the configuration of [X Components](web-use-x-components-guide.md) or create new ones.
-- Adapt the
-  [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
-  to your branding.
-- Manage
-  [internationalization options](https://github.com/empathyco/x-archetype/blob/main/docs/i18n.md) to
-  support different languages.
+### 2. Initialise Interface&nbsp;X
+
+Loading the Interface&nbsp;X script and not providing a `initX` configuration will make it create an
+initialisation function in the [X API](#x-api) object that you can invoke whenever you want. In this
+example we are calling it immediately after loading the Interface&nbsp;X script, but it can be
+invoked at any time. Note that you should only call this function **once**.
+
+```html
+<script src="https://x.empathy.co/my-store/app.js"></script>
+<script>
+  window.X.init({
+    instance: 'my-store',
+    env: 'live',
+    scope: 'desktop',
+    lang: 'en',
+    currency: 'EUR',
+    consent: false
+  });
+</script>
+```
 
-<!-- add links to design system and internationalization content pages when ready-->
+## Snippet configuration
+
+The snippet configuration allows you to configure certain parts of the Interface&nbsp;X project like
+language, the currency, inform whether the user has given us his consent to process personal data.
+
+| Name                  | Type                                                                                 | Required | Description                                                                                                                                                                                                                                                                                     |
+| --------------------- | ------------------------------------------------------------------------------------ | :------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| instance              | `string`                                                                             |    ✅    | The identifier of the API client instance. Should be provided by Empathy                                                                                                                                                                                                                        |
+| env                   | `'live'` &#124; `'staging'`                                                          |          | The API environment to use. Note that you can use the production version of your Interface&nbsp;X with the staging API, or viceversa.                                                                                                                                                           |
+| scope                 | `string`                                                                             |          | The context name where the search interface is being executed. I.e. `mobile`, `mobile-app`, `tablet`, `desktop`                                                                                                                                                                                 |
+| lang                  | `string`                                                                             |    ✅    | The language to use. By default this lang is used for both the front-end and the API requests                                                                                                                                                                                                   |
+| searchLang            | `string`                                                                             |          | A language to use only for the API requests                                                                                                                                                                                                                                                     |
+| consent               | `boolean`                                                                            |    ✅    | Whether the user has allowed to process its personal data or not. X-Components do not track or process any personal data. This parameter is used to generate a unique session id                                                                                                                |
+| documentDirection     | `'ltr'` &#124; `'rtl'`                                                               |          | The writing direction that the X Components should use                                                                                                                                                                                                                                          |
+| currency              | `string`                                                                             |    ✅    | The currency identifier. Used to configure how prices are shown                                                                                                                                                                                                                                 |
+| callbacks             | `Record<XEventName, (payload: XEventPayload<Event>, metadata: WireMetadata) => void` |          | A record of callbacks where the key is the event to listen, and the value is the callback to be executed whenever the event is emitted. For example, to listen to the `UserAcceptedAQuery` event: `{ UserAcceptedAQuery({ eventPayload }) { console.log('UserAcceptedAQuery', eventPayload); }` |
+| isSpa                 | `boolean`                                                                            |          | True when the X Components archetype is being run on top of an SPA.                                                                                                                                                                                                                             |
+| &lt;extra parameters> | `any`                                                                                |          | Any other parameter to be sent directly to the API calls. For example, some times is needed to filter the search catalog with a warehouse parameter. In that case you can just add `warehouse: <your-warehouse-identifier>` to the snippet config.                                              |
+
+## X API
+
+The X API allows your website to communicate with Interface&X. It is a set of utilities that helps
+to integrate Interface&X into your website.
+
+| Function | Parameters                                                                     | Description                                                 |
+| -------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------- |
+| init     | - [Snippet Configuration](#snippet-configuration) - The initialisation options | [Initialises Interface X on demand](#initialise-on-demand). |
+| search   | - query (Optional) - The query to open Interface&nbsp;X with                   | Opens Interface&nbsp;X with the given search query.         |

package/docs/build-search-ui/web-x-components-integration-guide.md

@@ -15,7 +15,7 @@ in your own project to craft enticing Vue search experiences for your shop in a
 
 ::: interact If you are looking to use the ready-to-go project Interface X Archetype as
 your starting point, see
-**[Integrate Interface X Archetype project](/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.md)**.
+**[Interface X Archetype Development](/develop-empathy-platform/build-search-ui/web-archetypedevelopment-guide.md)**.
 :::
 
 For this tutorial, the Empathy Search API is used, but you can use any search API. This step-by-step
@@ -164,9 +164,9 @@ Vue.use(xPlugin, { adapter, store });
 Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the
 Interface X Components in a project from scratch.
 
-<VideoContent 
+<VideoContent
 title="Want to learn more?"
-source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4" 
+source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4"
 poster="/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg"
 :links="[
   {

package/js/components/animations/animate-width.vue.js

@@ -23,11 +23,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-0b0a53bb_0", { source: ".x-animate-width--enter-active[data-v-0b0a53bb], .x-animate-width--leave-active[data-v-0b0a53bb] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-0b0a53bb], .x-animate-width--leave-to[data-v-0b0a53bb] {\n  width: 0 !important;\n}", map: undefined, media: undefined });
+    inject("data-v-0d2c1ed8_0", { source: ".x-animate-width--enter-active[data-v-0d2c1ed8], .x-animate-width--leave-active[data-v-0d2c1ed8] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-0d2c1ed8], .x-animate-width--leave-to[data-v-0d2c1ed8] {\n  width: 0 !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-0b0a53bb";
+  var __vue_scope_id__ = "data-v-0d2c1ed8";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */