@empathyco/x-components 6.0.0-alpha.184 → 6.0.0-alpha.186

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

@@ -9,7 +9,7 @@ Renders a simple filter, emitting the needed events when clicked.
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     filter: {
         type: PropType<SimpleFilterModel>;
         required: true;
@@ -19,7 +19,7 @@ _default: import("vue").DefineComponent<{
         type: PropType<(string | Dictionary<boolean>)[]>;
         default: () => never[];
     };
-}, {
+}>, {
     innerClickEvents: import("vue").ComputedRef<{
         ColumnsNumberProvided?: number | undefined;
         RenderedColumnsNumberChanged?: number | undefined;
@@ -198,7 +198,7 @@ _default: import("vue").DefineComponent<{
         AiOverviewMounted?: void | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     filter: {
         type: PropType<SimpleFilterModel>;
         required: true;
@@ -208,7 +208,9 @@ _default: import("vue").DefineComponent<{
         type: PropType<(string | Dictionary<boolean>)[]>;
         default: () => never[];
     };
-}>>, {
+}>> & Readonly<{}>, {
     cssClasses: (string | Dictionary<boolean>)[];
-}, {}>
+}, {}, {
+    RenderlessFilter: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -14,20 +14,25 @@ Component for use as Layout to be filled with the rest of the Components.
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     asideAnimation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
         default: () => import("vue").DefineComponent;
     };
     devMode: BooleanConstructor;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     asideAnimation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
         default: () => import("vue").DefineComponent;
     };
     devMode: BooleanConstructor;
-}>>, {
-    asideAnimation: string | Function | Record<string, any>;
+}>> & Readonly<{}>, {
     devMode: boolean;
-}, {}>
+    asideAnimation: string | Function | Record<string, any>;
+}, {}, {
+    BaseIdModal: import("vue").DefineComponent<{}, {}, any>;
+    BaseScroll: import("vue").DefineComponent<{}, {}, any>;
+    MainScroll: import("vue").DefineComponent<{}, {}, any>;
+    Scroll: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ Component that slices a list of filters and returns them using the default scope
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
@@ -20,14 +20,14 @@ _default: import("vue").DefineComponent<{
         required: true;
     };
     buttonClass: StringConstructor;
-}, {
+}>, {
     cssClasses: import("vue").ComputedRef<VueCSSClasses>;
     toggleShowMoreFilters: (event: MouseEvent) => void;
     showButton: import("vue").ComputedRef<boolean>;
     difference: import("vue").ComputedRef<number>;
     slicedFilters: import("vue").ComputedRef<Filter[]>;
-    showMoreFilters: import("vue").Ref<boolean>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click:show-less" | "click:show-more")[], "click:show-less" | "click:show-more", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    showMoreFilters: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click:show-less" | "click:show-more")[], "click:show-less" | "click:show-more", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
@@ -38,8 +38,8 @@ _default: import("vue").DefineComponent<{
         required: true;
     };
     buttonClass: StringConstructor;
-}>> & {
+}>> & Readonly<{
     "onClick:show-less"?: ((...args: any[]) => any) | undefined;
     "onClick:show-more"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -11,7 +11,7 @@ Additionally, this component exposes the following props to modify the classes o
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     scrollFactor: {
         type: NumberConstructor;
         default: number;
@@ -30,7 +30,7 @@ _default: import("vue").DefineComponent<{
     scrollContainerClass: {
         type: PropType<VueCSSClasses>;
     };
-}, {
+}>, {
     arrivedState: {
         left: boolean;
         right: boolean;
@@ -41,13 +41,13 @@ _default: import("vue").DefineComponent<{
         'x-sliding-panel-at-start': boolean;
         'x-sliding-panel-at-end': boolean;
     }>;
-    scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined>;
-    slotContainerWidth: import("vue").Ref<number>;
-    xScroll: import("vue").WritableComputedRef<number>;
+    scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    slotContainerWidth: import("vue").ShallowRef<number, number>;
+    xScroll: import("vue").WritableComputedRef<number, number>;
     slots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     scrollFactor: {
         type: NumberConstructor;
         default: number;
@@ -66,9 +66,9 @@ _default: import("vue").DefineComponent<{
     scrollContainerClass: {
         type: PropType<VueCSSClasses>;
     };
-}>>, {
+}>> & Readonly<{}>, {
     scrollFactor: number;
     showButtons: boolean;
     resetOnContentChange: boolean;
-}, {}>
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -187,5 +187,7 @@ _default: import("vue").DefineComponent<{}, {
         UserClickedAnAiOverviewResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
         AiOverviewMounted: (payload: undefined, metadata: WireMetadata) => unknown;
     }>>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    GlobalXBus: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -7,7 +7,7 @@
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     values: {
         type: PropType<Dictionary<unknown>>;
     };
@@ -15,9 +15,9 @@ _default: import("vue").DefineComponent<{
         type: PropType<Array<keyof SnippetConfig>>;
         default: () => Array<keyof SnippetConfig>;
     };
-}, {
-    extraParams: import("vue").Ref<Record<string, any>>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {
+    extraParams: import("vue").Ref<Record<string, any>, Record<string, any>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     values: {
         type: PropType<Dictionary<unknown>>;
     };
@@ -25,7 +25,9 @@ _default: import("vue").DefineComponent<{
         type: PropType<Array<keyof SnippetConfig>>;
         default: () => Array<keyof SnippetConfig>;
     };
-}>>, {
+}>> & Readonly<{}>, {
     excludedExtraParams: (keyof SnippetConfig)[];
-}, {}>
+}, {}, {
+    ExtraParams: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,23 +9,25 @@ The `SortDropdown` component allows user to select the search results order. Thi
 **Signature:**
 
 ```typescript
-_default: Vue.DefineComponent<{
+_default: Vue.DefineComponent<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
     animation: PropType<string | typeof Vue>;
-}, {
+}>, {
     emitUserClickedASort: (sort: Sort) => void;
-    rootRef: Vue.Ref<Vue.DefineComponent<{}, {}, any> | undefined>;
+    rootRef: Vue.Ref<Vue.DefineComponent<{}, {}, any> | undefined, Vue.DefineComponent<{}, {}, any> | undefined>;
     selectedSort: Vue.ComputedRef<string>;
-}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, "change"[], "change", Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, "change"[], "change", Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
     animation: PropType<string | typeof Vue>;
-}>> & {
+}>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
-}, {}, {}>
+}>, {}, {}, {
+    BaseDropdown: Vue.DefineComponent<{}, {}, any>;
+}, {}, string, Vue.ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,19 +9,19 @@ Component that sorts a list of filters and returns them using the default scoped
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
         required: false;
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => "" | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}> | "", unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
         required: false;
     };
-}>>, {}, {}>
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ The `SortList` component allows user to select the search results order. This co
 **Signature:**
 
 ```typescript
-_default: Vue.DefineComponent<{
+_default: Vue.DefineComponent<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -18,10 +18,10 @@ _default: Vue.DefineComponent<{
         type: PropType<string | typeof Vue>;
         default: () => string;
     };
-}, {
+}>, {
     listItems: Vue.ComputedRef<SortListItem[]>;
     selectedSort: Vue.ComputedRef<string>;
-}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -30,7 +30,9 @@ _default: Vue.DefineComponent<{
         type: PropType<string | typeof Vue>;
         default: () => string;
     };
-}>>, {
+}>> & Readonly<{}>, {
     animation: string | typeof Vue;
-}, {}>
+}, {}, {
+    BaseEventButton: Vue.DefineComponent<{}, {}, any>;
+}, {}, string, Vue.ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ The `SortPickerList` component allows user to select the search results order. T
 **Signature:**
 
 ```typescript
-_default: Vue.DefineComponent<{
+_default: Vue.DefineComponent<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -19,10 +19,10 @@ _default: Vue.DefineComponent<{
         default: () => string;
     };
     buttonClass: StringConstructor;
-}, {
+}>, {
     listItems: Vue.ComputedRef<SortPickerItem[]>;
     selectedSort: Vue.ComputedRef<string>;
-}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -32,7 +32,9 @@ _default: Vue.DefineComponent<{
         default: () => string;
     };
     buttonClass: StringConstructor;
-}>>, {
+}>> & Readonly<{}>, {
     animation: string | typeof Vue;
-}, {}>
+}, {}, {
+    BaseEventButton: Vue.DefineComponent<{}, {}, any>;
+}, {}, string, Vue.ComponentProvideOptions, true, {}, any>
 ```

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

@@ -14,5 +14,5 @@ The component will only render itself if the `spellcheckedQuery` property has va
 _default: import("vue").DefineComponent<{}, {
     query: import("vue").ComputedRef<string>;
     spellcheckedQuery: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -10,8 +10,8 @@ A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-compo
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    el: import("vue").Ref<HTMLElement | undefined>;
+    el: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     spellcheckedQuery: import("vue").ComputedRef<string>;
     emitEvents: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ Renders a transition group wrapping the elements passed in the default slot and
 **Signature:**
 
 ```typescript
-__default__: import("vue").DefineComponent<{
+__default__: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     appear: {
         type: BooleanConstructor;
         default: boolean;
@@ -22,12 +22,12 @@ __default__: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}, {
+}>, {
     name: import("vue").ComputedRef<string>;
     onEnter: (el: Element, done: () => void) => void;
     onAfterEnter: (el: Element) => void;
     transitionDurationInMs: string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     appear: {
         type: BooleanConstructor;
         default: boolean;
@@ -40,9 +40,9 @@ __default__: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & Readonly<{}>, {
     appear: boolean;
     tag: string;
     stagger: number;
-}, {}>
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ This component enables and manages the sending of information to the \[Empathy T
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     storageTTLMs: {
         type: NumberConstructor;
         default: number;
@@ -27,7 +27,7 @@ _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     storageTTLMs: {
         type: NumberConstructor;
         default: number;
@@ -45,10 +45,10 @@ _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-}>>, {
+}>> & Readonly<{}>, {
     storageTTLMs: number;
     storageKey: string;
     queryTaggingDebounceMs: number;
     consent: boolean;
-}, {}>
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingHTMLElement](./x-components.typinghtmlelement.md) &gt; [\_\_timeoutId](./x-components.typinghtmlelement.__timeoutid.md)
+
+## TypingHTMLElement.\_\_timeoutId property
+
+**Signature:**
+
+```typescript
+__timeoutId?: number;
+```

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

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingHTMLElement](./x-components.typinghtmlelement.md)
+
+## TypingHTMLElement interface
+
+**Signature:**
+
+```typescript
+export interface TypingHTMLElement extends HTMLElement 
+```
+**Extends:** HTMLElement
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [\_\_timeoutId?](./x-components.typinghtmlelement.__timeoutid.md) |  | number | _(Optional)_ |
+

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

@@ -12,5 +12,9 @@ This component manages the browser URL parameters to preserve them through reloa
 _default: import("vue").DefineComponent<{}, {
     onPageShow: (event: PageTransitionEvent) => void;
     emitEvents: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    GlobalEvents: new () => {
+        $props: import("vue").VNodeProps & import("vue-global-events").GlobalEventsProps;
+    };
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

package/js/components/animations/animate-scale/animate-scale.style.scss.js

@@ -1,6 +1,6 @@
 import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-animate-scale--enter-active,.x-animate-scale--enter-active *,.x-animate-scale--leave-active,.x-animate-scale--leave-active *{animation-duration:var(--x-duration-animation,.3s);animation-timing-function:linear}.x-animate-scale--enter-active,.x-animate-scale--leave-active{overflow:hidden}.x-animate-scale--enter-active.x-animate-scale--bottom,.x-animate-scale--enter-active.x-animate-scale--bottom-to-top,.x-animate-scale--enter-active.x-animate-scale--top,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom,.x-animate-scale--leave-active.x-animate-scale--bottom,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top,.x-animate-scale--leave-active.x-animate-scale--top,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom{animation-name:containerAnimationY}.x-animate-scale--enter-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--enter-active.x-animate-scale--bottom>*,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--enter-active.x-animate-scale--top>*,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--leave-active.x-animate-scale--bottom>*,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--leave-active.x-animate-scale--top>*{animation-name:contentAnimationY}.x-animate-scale--enter-active.x-animate-scale--left,.x-animate-scale--enter-active.x-animate-scale--left-to-right,.x-animate-scale--enter-active.x-animate-scale--right,.x-animate-scale--enter-active.x-animate-scale--right-to-left,.x-animate-scale--leave-active.x-animate-scale--left,.x-animate-scale--leave-active.x-animate-scale--left-to-right,.x-animate-scale--leave-active.x-animate-scale--right,.x-animate-scale--leave-active.x-animate-scale--right-to-left{animation-name:containerAnimationX}.x-animate-scale--enter-active.x-animate-scale--left-to-right>*,.x-animate-scale--enter-active.x-animate-scale--left>*,.x-animate-scale--enter-active.x-animate-scale--right-to-left>*,.x-animate-scale--enter-active.x-animate-scale--right>*,.x-animate-scale--leave-active.x-animate-scale--left-to-right>*,.x-animate-scale--leave-active.x-animate-scale--left>*,.x-animate-scale--leave-active.x-animate-scale--right-to-left>*,.x-animate-scale--leave-active.x-animate-scale--right>*{animation-name:contentAnimationX}.x-animate-scale--leave-active,.x-animate-scale--leave-active>*{animation-direction:reverse}.x-animate-scale--top.x-animate-scale--enter-active,.x-animate-scale--top.x-animate-scale--enter-active>*,.x-animate-scale--top.x-animate-scale--leave-active,.x-animate-scale--top.x-animate-scale--leave-active>*{transform-origin:top center}.x-animate-scale--bottom.x-animate-scale--enter-active,.x-animate-scale--bottom.x-animate-scale--enter-active>*,.x-animate-scale--bottom.x-animate-scale--leave-active,.x-animate-scale--bottom.x-animate-scale--leave-active>*{transform-origin:bottom center}.x-animate-scale--left.x-animate-scale--enter-active,.x-animate-scale--left.x-animate-scale--enter-active>*,.x-animate-scale--left.x-animate-scale--leave-active,.x-animate-scale--left.x-animate-scale--leave-active>*{transform-origin:left center}.x-animate-scale--right.x-animate-scale--enter-active,.x-animate-scale--right.x-animate-scale--enter-active>*,.x-animate-scale--right.x-animate-scale--leave-active,.x-animate-scale--right.x-animate-scale--leave-active>*{transform-origin:right center}.x-animate-scale--top-to-bottom.x-animate-scale--enter-active,.x-animate-scale--top-to-bottom>.x-animate-scale--enter-active{transform-origin:top center}.x-animate-scale--bottom-to-top.x-animate-scale--enter-active,.x-animate-scale--bottom-to-top>.x-animate-scale--enter-active,.x-animate-scale--top-to-bottom.x-animate-scale--leave-active,.x-animate-scale--top-to-bottom>.x-animate-scale--leave-active{transform-origin:bottom center}.x-animate-scale--bottom-to-top.x-animate-scale--leave-active,.x-animate-scale--bottom-to-top>.x-animate-scale--leave-active{transform-origin:top center}.x-animate-scale--left-to-right.x-animate-scale--enter-active,.x-animate-scale--left-to-right>.x-animate-scale--enter-active{transform-origin:left center}.x-animate-scale--left-to-right.x-animate-scale--leave-active,.x-animate-scale--left-to-right>.x-animate-scale--leave-active,.x-animate-scale--right-to-left.x-animate-scale--enter-active,.x-animate-scale--right-to-left>.x-animate-scale--enter-active{transform-origin:right center}.x-animate-scale--right-to-left.x-animate-scale--leave-active,.x-animate-scale--right-to-left>.x-animate-scale--leave-active{transform-origin:left center}@keyframes containerAnimationY{0%{transform:scaleY(0)}5.5555555556%{transform:scaleY(.0000762079)}11.1111111111%{transform:scaleY(.0012193263)}16.6666666667%{transform:scaleY(.0061728395)}22.2222222222%{transform:scaleY(.0195092212)}27.7777777778%{transform:scaleY(.0476299345)}33.3333333333%{transform:scaleY(.0987654321)}38.8888888889%{transform:scaleY(.1829751562)}44.4444444444%{transform:scaleY(.3121475385)}50%{transform:scaleY(.5)}55.5555555556%{transform:scaleY(.6878524615)}61.1111111111%{transform:scaleY(.8170248438)}66.6666666667%{transform:scaleY(.9012345679)}72.2222222222%{transform:scaleY(.9523700655)}77.7777777778%{transform:scaleY(.9804907788)}83.3333333333%{transform:scaleY(.9938271605)}88.8888888889%{transform:scaleY(.9987806737)}94.4444444444%{transform:scaleY(.9999237921)}to{transform:scaleY(1)}}@keyframes contentAnimationY{0%{transform:scaleY(99999999)}5.5555555556%{transform:scaleY(13122)}11.1111111111%{transform:scaleY(820.125)}16.6666666667%{transform:scaleY(162)}22.2222222222%{transform:scaleY(51.2578125)}27.7777777778%{transform:scaleY(20.9952)}33.3333333333%{transform:scaleY(10.125)}38.8888888889%{transform:scaleY(5.4652228238)}44.4444444444%{transform:scaleY(3.2036132813)}50%{transform:scaleY(2)}55.5555555556%{transform:scaleY(1.4538001329)}61.1111111111%{transform:scaleY(1.2239529895)}66.6666666667%{transform:scaleY(1.1095890411)}72.2222222222%{transform:scaleY(1.0500120029)}77.7777777778%{transform:scaleY(1.019897404)}83.3333333333%{transform:scaleY(1.0062111801)}88.8888888889%{transform:scaleY(1.0012208149)}94.4444444444%{transform:scaleY(1.0000762137)}to{transform:scaleY(1)}}@keyframes containerAnimationX{0%{transform:scaleX(0)}5.5555555556%{transform:scaleX(.0000762079)}11.1111111111%{transform:scaleX(.0012193263)}16.6666666667%{transform:scaleX(.0061728395)}22.2222222222%{transform:scaleX(.0195092212)}27.7777777778%{transform:scaleX(.0476299345)}33.3333333333%{transform:scaleX(.0987654321)}38.8888888889%{transform:scaleX(.1829751562)}44.4444444444%{transform:scaleX(.3121475385)}50%{transform:scaleX(.5)}55.5555555556%{transform:scaleX(.6878524615)}61.1111111111%{transform:scaleX(.8170248438)}66.6666666667%{transform:scaleX(.9012345679)}72.2222222222%{transform:scaleX(.9523700655)}77.7777777778%{transform:scaleX(.9804907788)}83.3333333333%{transform:scaleX(.9938271605)}88.8888888889%{transform:scaleX(.9987806737)}94.4444444444%{transform:scaleX(.9999237921)}to{transform:scaleX(1)}}@keyframes contentAnimationX{0%{transform:scaleX(99999999)}5.5555555556%{transform:scaleX(13122)}11.1111111111%{transform:scaleX(820.125)}16.6666666667%{transform:scaleX(162)}22.2222222222%{transform:scaleX(51.2578125)}27.7777777778%{transform:scaleX(20.9952)}33.3333333333%{transform:scaleX(10.125)}38.8888888889%{transform:scaleX(5.4652228238)}44.4444444444%{transform:scaleX(3.2036132813)}50%{transform:scaleX(2)}55.5555555556%{transform:scaleX(1.4538001329)}61.1111111111%{transform:scaleX(1.2239529895)}66.6666666667%{transform:scaleX(1.1095890411)}72.2222222222%{transform:scaleX(1.0500120029)}77.7777777778%{transform:scaleX(1.019897404)}83.3333333333%{transform:scaleX(1.0062111801)}88.8888888889%{transform:scaleX(1.0012208149)}94.4444444444%{transform:scaleX(1.0000762137)}to{transform:scaleX(1)}}";
+var css = ".x-animate-scale--enter-active,.x-animate-scale--enter-active *,.x-animate-scale--leave-active,.x-animate-scale--leave-active *{animation-duration:var(--x-duration-animation,.3s);animation-timing-function:linear}.x-animate-scale--enter-active,.x-animate-scale--leave-active{overflow:hidden}.x-animate-scale--enter-active.x-animate-scale--bottom,.x-animate-scale--enter-active.x-animate-scale--bottom-to-top,.x-animate-scale--enter-active.x-animate-scale--top,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom,.x-animate-scale--leave-active.x-animate-scale--bottom,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top,.x-animate-scale--leave-active.x-animate-scale--top,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom{animation-name:containerAnimationY}.x-animate-scale--enter-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--enter-active.x-animate-scale--bottom>*,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--enter-active.x-animate-scale--top>*,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--leave-active.x-animate-scale--bottom>*,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--leave-active.x-animate-scale--top>*{animation-name:contentAnimationY}.x-animate-scale--enter-active.x-animate-scale--left,.x-animate-scale--enter-active.x-animate-scale--left-to-right,.x-animate-scale--enter-active.x-animate-scale--right,.x-animate-scale--enter-active.x-animate-scale--right-to-left,.x-animate-scale--leave-active.x-animate-scale--left,.x-animate-scale--leave-active.x-animate-scale--left-to-right,.x-animate-scale--leave-active.x-animate-scale--right,.x-animate-scale--leave-active.x-animate-scale--right-to-left{animation-name:containerAnimationX}.x-animate-scale--enter-active.x-animate-scale--left-to-right>*,.x-animate-scale--enter-active.x-animate-scale--left>*,.x-animate-scale--enter-active.x-animate-scale--right-to-left>*,.x-animate-scale--enter-active.x-animate-scale--right>*,.x-animate-scale--leave-active.x-animate-scale--left-to-right>*,.x-animate-scale--leave-active.x-animate-scale--left>*,.x-animate-scale--leave-active.x-animate-scale--right-to-left>*,.x-animate-scale--leave-active.x-animate-scale--right>*{animation-name:contentAnimationX}.x-animate-scale--leave-active,.x-animate-scale--leave-active>*{animation-direction:reverse}.x-animate-scale--top.x-animate-scale--enter-active,.x-animate-scale--top.x-animate-scale--enter-active>*,.x-animate-scale--top.x-animate-scale--leave-active,.x-animate-scale--top.x-animate-scale--leave-active>*{transform-origin:top center}.x-animate-scale--bottom.x-animate-scale--enter-active,.x-animate-scale--bottom.x-animate-scale--enter-active>*,.x-animate-scale--bottom.x-animate-scale--leave-active,.x-animate-scale--bottom.x-animate-scale--leave-active>*{transform-origin:bottom center}.x-animate-scale--left.x-animate-scale--enter-active,.x-animate-scale--left.x-animate-scale--enter-active>*,.x-animate-scale--left.x-animate-scale--leave-active,.x-animate-scale--left.x-animate-scale--leave-active>*{transform-origin:left center}.x-animate-scale--right.x-animate-scale--enter-active,.x-animate-scale--right.x-animate-scale--enter-active>*,.x-animate-scale--right.x-animate-scale--leave-active,.x-animate-scale--right.x-animate-scale--leave-active>*{transform-origin:right center}.x-animate-scale--top-to-bottom.x-animate-scale--enter-active,.x-animate-scale--top-to-bottom>.x-animate-scale--enter-active{transform-origin:top center}.x-animate-scale--top-to-bottom.x-animate-scale--leave-active,.x-animate-scale--top-to-bottom>.x-animate-scale--leave-active{transform-origin:bottom center}.x-animate-scale--bottom-to-top.x-animate-scale--enter-active,.x-animate-scale--bottom-to-top>.x-animate-scale--enter-active{transform-origin:bottom center}.x-animate-scale--bottom-to-top.x-animate-scale--leave-active,.x-animate-scale--bottom-to-top>.x-animate-scale--leave-active{transform-origin:top center}.x-animate-scale--left-to-right.x-animate-scale--enter-active,.x-animate-scale--left-to-right>.x-animate-scale--enter-active{transform-origin:left center}.x-animate-scale--left-to-right.x-animate-scale--leave-active,.x-animate-scale--left-to-right>.x-animate-scale--leave-active{transform-origin:right center}.x-animate-scale--right-to-left.x-animate-scale--enter-active,.x-animate-scale--right-to-left>.x-animate-scale--enter-active{transform-origin:right center}.x-animate-scale--right-to-left.x-animate-scale--leave-active,.x-animate-scale--right-to-left>.x-animate-scale--leave-active{transform-origin:left center}@keyframes containerAnimationY{0%{transform:scaleY(0)}5.5555555556%{transform:scaleY(.0000762079)}11.1111111111%{transform:scaleY(.0012193263)}16.6666666667%{transform:scaleY(.0061728395)}22.2222222222%{transform:scaleY(.0195092212)}27.7777777778%{transform:scaleY(.0476299345)}33.3333333333%{transform:scaleY(.0987654321)}38.8888888889%{transform:scaleY(.1829751562)}44.4444444444%{transform:scaleY(.3121475385)}50%{transform:scaleY(.5)}55.5555555556%{transform:scaleY(.6878524615)}61.1111111111%{transform:scaleY(.8170248438)}66.6666666667%{transform:scaleY(.9012345679)}72.2222222222%{transform:scaleY(.9523700655)}77.7777777778%{transform:scaleY(.9804907788)}83.3333333333%{transform:scaleY(.9938271605)}88.8888888889%{transform:scaleY(.9987806737)}94.4444444444%{transform:scaleY(.9999237921)}to{transform:scaleY(1)}}@keyframes contentAnimationY{0%{transform:scaleY(99999999)}5.5555555556%{transform:scaleY(13122)}11.1111111111%{transform:scaleY(820.125)}16.6666666667%{transform:scaleY(162)}22.2222222222%{transform:scaleY(51.2578125)}27.7777777778%{transform:scaleY(20.9952)}33.3333333333%{transform:scaleY(10.125)}38.8888888889%{transform:scaleY(5.4652228238)}44.4444444444%{transform:scaleY(3.2036132813)}50%{transform:scaleY(2)}55.5555555556%{transform:scaleY(1.4538001329)}61.1111111111%{transform:scaleY(1.2239529895)}66.6666666667%{transform:scaleY(1.1095890411)}72.2222222222%{transform:scaleY(1.0500120029)}77.7777777778%{transform:scaleY(1.019897404)}83.3333333333%{transform:scaleY(1.0062111801)}88.8888888889%{transform:scaleY(1.0012208149)}94.4444444444%{transform:scaleY(1.0000762137)}to{transform:scaleY(1)}}@keyframes containerAnimationX{0%{transform:scaleX(0)}5.5555555556%{transform:scaleX(.0000762079)}11.1111111111%{transform:scaleX(.0012193263)}16.6666666667%{transform:scaleX(.0061728395)}22.2222222222%{transform:scaleX(.0195092212)}27.7777777778%{transform:scaleX(.0476299345)}33.3333333333%{transform:scaleX(.0987654321)}38.8888888889%{transform:scaleX(.1829751562)}44.4444444444%{transform:scaleX(.3121475385)}50%{transform:scaleX(.5)}55.5555555556%{transform:scaleX(.6878524615)}61.1111111111%{transform:scaleX(.8170248438)}66.6666666667%{transform:scaleX(.9012345679)}72.2222222222%{transform:scaleX(.9523700655)}77.7777777778%{transform:scaleX(.9804907788)}83.3333333333%{transform:scaleX(.9938271605)}88.8888888889%{transform:scaleX(.9987806737)}94.4444444444%{transform:scaleX(.9999237921)}to{transform:scaleX(1)}}@keyframes contentAnimationX{0%{transform:scaleX(99999999)}5.5555555556%{transform:scaleX(13122)}11.1111111111%{transform:scaleX(820.125)}16.6666666667%{transform:scaleX(162)}22.2222222222%{transform:scaleX(51.2578125)}27.7777777778%{transform:scaleX(20.9952)}33.3333333333%{transform:scaleX(10.125)}38.8888888889%{transform:scaleX(5.4652228238)}44.4444444444%{transform:scaleX(3.2036132813)}50%{transform:scaleX(2)}55.5555555556%{transform:scaleX(1.4538001329)}61.1111111111%{transform:scaleX(1.2239529895)}66.6666666667%{transform:scaleX(1.1095890411)}72.2222222222%{transform:scaleX(1.0500120029)}77.7777777778%{transform:scaleX(1.019897404)}83.3333333333%{transform:scaleX(1.0062111801)}88.8888888889%{transform:scaleX(1.0012208149)}94.4444444444%{transform:scaleX(1.0000762137)}to{transform:scaleX(1)}}";
 injectCss(css);
 
 export { css, css as default };

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

@@ -1 +1 @@
-{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      AnimateWidth,\n    }\n  },\n}\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      visible: true,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA,EAHD,MAAK,kBAAkB,EAAA,EAAA;AAAA,IADrC,iBAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      AnimateWidth,\n    }\n  },\n}\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      visible: true,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA,EAHD,MAAK,kBAAkB,EAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAEjC,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/collapse-height.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CollapseHeight',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,oBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AANZ,IAAA,OAAA,EAAAC,OAAA,CASI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AATZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,cAAA,EAAA,SAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CollapseHeight',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,oBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;qBAGR,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/collapse-width.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a width animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CollapseWidth',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,mBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AANZ,IAAA,OAAA,EAAAC,OAAA,CASI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AATZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,cAAA,EAAA,SAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a width animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CollapseWidth',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,mBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;qBAGR,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/cross-fade.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CrossFade',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,eAAA;AAAA,IAAiB,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAD5C,IAAA,OAAA,EAAAC,OAAA,CAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CrossFade',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,eAAA;AAAA,IAAiB,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;qBAExC,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/fade-and-slide.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["_createBlock","_TransitionGroup","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGmB,CAAAC,eAAA,EAAA;AAAA,IAHD,KAAM,EAAA,kBAAA;AAAA,IAAoB,IAAM,EAAA,IAAA,CAAA,IAAA;AAAA,IAAO,GAAK,EAAA,IAAA,CAAA,GAAA;AAAA,IAAM,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAD9E,IAAA,OAAA,EAAAC,OAAA,CAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,QAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["_createBlock","_TransitionGroup","_renderSlot"],"mappings":";;;;;;sBACEA,WAGmB,CAAAC,eAAA,EAAA;AAAA,IAHD,KAAM,EAAA,kBAAA;AAAA,IAAoB,IAAM,EAAA,IAAA,CAAA,IAAA;AAAA,IAAO,GAAK,EAAA,IAAA,CAAA,GAAA;AAAA,IAAM,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;qBAE1E,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/fade.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade.vue.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Fade',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade--enter-active,\n.x-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n}\n\n.x-fade--leave-to,\n.x-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and\nanimate it. The animation just fades in/out the element by changing its opacity.\n\nWrapping a component:\n\n```vue live\n<template>\n  <div>\n    <button @click=\"shouldRender = !shouldRender\">Toggle</button>\n    <Fade>\n      <p v-if=\"shouldRender\">León is southern Spain</p>\n    </Fade>\n  </div>\n</template>\n<script>\nimport { Fade } from '@empathyco/x-components'\nexport default {\n  name: 'FadeAnimationDemo',\n  components: {\n    Fade,\n  },\n  data() {\n    return {\n      shouldRender: false,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,SAAA;AAAA,IAAW,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AADtC,IAAA,OAAA,EAAAC,OAAA,CAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"fade.vue.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Fade',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade--enter-active,\n.x-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n}\n\n.x-fade--leave-to,\n.x-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and\nanimate it. The animation just fades in/out the element by changing its opacity.\n\nWrapping a component:\n\n```vue live\n<template>\n  <div>\n    <button @click=\"shouldRender = !shouldRender\">Toggle</button>\n    <Fade>\n      <p v-if=\"shouldRender\">León is southern Spain</p>\n    </Fade>\n  </div>\n</template>\n<script>\nimport { Fade } from '@empathyco/x-components'\nexport default {\n  name: 'FadeAnimationDemo',\n  components: {\n    Fade,\n  },\n  data() {\n    return {\n      shouldRender: false,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,SAAA;AAAA,IAAW,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;qBAElC,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}