@empathyco/x-components 3.0.0-alpha.363 → 3.0.0-alpha.364

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.364](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.363...@empathyco/x-components@3.0.0-alpha.364) (2023-05-03)
+
+### Features
+
+- migrate modals to vue 3 syntax (#1141)
+  ([d04b522](https://github.com/empathyco/x/commit/d04b522607787bdfe887896a26895d00fdd0d369))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.363](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.362...@empathyco/x-components@3.0.0-alpha.363) (2023-05-03)
 
 ### Features

package/core/index.js

@@ -161,6 +161,7 @@ export { createFetchAndSaveActions } from '../js/store/utils/fetch-and-save-acti
 export { setStatus } from '../js/store/utils/status-store.utils.js';
 export { createStoreEmitters } from '../js/store/utils/store-emitters.utils.js';
 export { RootXStoreModule } from '../js/store/x.module.js';
+export { AnimationProp } from '../js/types/animation-prop.js';
 export { arrayToObject, createEmitterArrayFilter, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
 export { CancelSymbol, cancellablePromise } from '../js/utils/cancellable-promise.js';
 export { clone } from '../js/utils/clone.js';

package/core/index.js.map

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

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

@@ -1,46 +1,51 @@
 :root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
 
-.x-button--ghost.x-button,
-.x-button--ghost .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-ghost);
-  --x-color-border-button-default: var(--x-color-border-button-ghost);
-  --x-color-text-button-default: var(--x-color-text-button-ghost);
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4);
 }
 
-.x-button--ghost.x-button--ghost-start.x-button,
-.x-button--ghost.x-button--ghost-start .x-button {
-  --x-size-padding-left-button-default: 0;
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4);
 }
 
-.x-button--ghost.x-button--ghost-end.x-button,
-.x-button--ghost.x-button--ghost-end .x-button {
-  --x-size-padding-right-button-default: 0;
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  padding: 2px;
+  background: var(--x-color-background-badge-default);
+  color: var(--x-color-text-badge-default);
+  border-color: var(--x-color-border-badge-default);
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+[dir="rtl"] .x-badge {
+  transform: translate(-50%, -50%);
 }
 
-.x-button--pill.x-button,
-.x-button--pill .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-pill
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-pill
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-button-pill
-  );
+.x-badge-container {
+  position: relative;
 }
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -64,27 +69,6 @@
     --x-size-border-radius-bottom-left-button-card
   );
 }
-:root {
-  --x-color-background-button-primary: var(--x-color-background-button-default);
-  --x-color-border-button-primary: var(--x-color-border-button-default);
-  --x-color-text-button-primary: var(--x-color-text-button-default);
-  --x-size-border-width-button-primary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
-}
-
-.x-button--primary.x-button,
-.x-button--primary .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-primary);
-  --x-color-border-button-default: var(--x-color-border-button-primary);
-  --x-color-text-button-default: var(--x-color-text-button-primary);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -170,6 +154,71 @@
     margin-right: var(--x-size-gap-button-default);
   }
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
+
+.x-button--ghost.x-button,
+.x-button--ghost .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-ghost);
+  --x-color-border-button-default: var(--x-color-border-button-ghost);
+  --x-color-text-button-default: var(--x-color-text-button-ghost);
+}
+
+.x-button--ghost.x-button--ghost-start.x-button,
+.x-button--ghost.x-button--ghost-start .x-button {
+  --x-size-padding-left-button-default: 0;
+}
+
+.x-button--ghost.x-button--ghost-end.x-button,
+.x-button--ghost.x-button--ghost-end .x-button {
+  --x-size-padding-right-button-default: 0;
+}
+:root {
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
+
+.x-button--pill.x-button,
+.x-button--pill .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-pill
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-pill
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-pill
+  );
+}
+:root {
+  --x-color-background-button-primary: var(--x-color-background-button-default);
+  --x-color-border-button-primary: var(--x-color-border-button-default);
+  --x-color-text-button-primary: var(--x-color-text-button-default);
+  --x-size-border-width-button-primary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
+}
+
+.x-button--primary.x-button,
+.x-button--primary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-primary);
+  --x-color-border-button-default: var(--x-color-border-button-primary);
+  --x-color-text-button-default: var(--x-color-text-button-primary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
+}
 :root {
   --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -1077,15 +1126,6 @@
   --x-size-width-icon-default: var(--x-size-width-icon-l);
   --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
-:root {
-  --x-size-width-icon-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
-
-.x-icon--s {
-  --x-size-width-icon-default: var(--x-size-width-icon-s);
-  --x-size-height-icon-default: var(--x-size-height-icon-s);
-}
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
@@ -1095,6 +1135,15 @@
   --x-size-width-icon-default: var(--x-size-width-icon-m);
   --x-size-height-icon-default: var(--x-size-height-icon-m);
 }
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
+
+.x-icon--s {
+  --x-size-width-icon-default: var(--x-size-width-icon-s);
+  --x-size-height-icon-default: var(--x-size-height-icon-s);
+}
 :root {
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
@@ -2230,6 +2279,77 @@
     margin-bottom: var(--x-size-gap-list-20);
   }
 }
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
+
+[dir="ltr"] .x-message {
+  border-left-width: var(--x-size-border-width-left-message-default);
+}
+
+[dir="rtl"] .x-message {
+  border-right-width: var(--x-size-border-width-left-message-default);
+}
+
+[dir="ltr"] .x-message {
+  border-right-width: var(--x-size-border-width-right-message-default);
+}
+
+[dir="rtl"] .x-message {
+  border-left-width: var(--x-size-border-width-right-message-default);
+}
+
+.x-message {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: var(--x-string-justify-message-default);
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--x-size-gap-message-default);
+  padding: var(--x-size-padding-message-default);
+  background-color: var(--x-color-background-message-default);
+  border-color: var(--x-color-border-message-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-message-default);
+  border-bottom-width: var(--x-size-border-width-bottom-message-default);
+  border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
+  font-family: var(--x-font-family-message-default);
+  font-size: var(--x-size-font-message-default);
+  font-weight: var(--x-number-font-weight-message-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-message {
+    gap: 0;
+  }
+  .x-message > *:not(:last-child) {
+    margin-right: var(--x-size-gap-message-default);
+  }
+}
+.x-message,
+.x-message > a {
+  color: var(--x-color-text-message-default);
+}
+.x-message > p {
+  margin: 0;
+}
 /* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
@@ -2579,77 +2699,6 @@
   background-color: var(--x-modal-overlay-color) !important;
   opacity: var(--x-modal-overlay-opacity) !important;
 }
-:root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
-}
-
-[dir="ltr"] .x-message {
-  border-left-width: var(--x-size-border-width-left-message-default);
-}
-
-[dir="rtl"] .x-message {
-  border-right-width: var(--x-size-border-width-left-message-default);
-}
-
-[dir="ltr"] .x-message {
-  border-right-width: var(--x-size-border-width-right-message-default);
-}
-
-[dir="rtl"] .x-message {
-  border-left-width: var(--x-size-border-width-right-message-default);
-}
-
-.x-message {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: var(--x-string-justify-message-default);
-  align-items: center;
-  box-sizing: border-box;
-  gap: var(--x-size-gap-message-default);
-  padding: var(--x-size-padding-message-default);
-  background-color: var(--x-color-background-message-default);
-  border-color: var(--x-color-border-message-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-message-default);
-  border-bottom-width: var(--x-size-border-width-bottom-message-default);
-  border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
-  font-family: var(--x-font-family-message-default);
-  font-size: var(--x-size-font-message-default);
-  font-weight: var(--x-number-font-weight-message-default);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-message {
-    gap: 0;
-  }
-  .x-message > *:not(:last-child) {
-    margin-right: var(--x-size-gap-message-default);
-  }
-}
-.x-message,
-.x-message > a {
-  color: var(--x-color-text-message-default);
-}
-.x-message > p {
-  margin: 0;
-}
 :root {
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
   --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -4335,6 +4384,21 @@
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
 
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
@@ -4379,21 +4443,6 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
 .x-border-color--lead {
   border-color: var(--x-color-base-lead) !important;
 }
@@ -7651,53 +7700,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
-
-[dir="ltr"] .x-badge {
-  right: calc(var(--x-size-width-badge-default) / 4);
-}
-
-[dir="rtl"] .x-badge {
-  left: calc(var(--x-size-width-badge-default) / 4);
-}
-
-.x-badge {
-  border-radius: var(--x-size-border-radius-badge-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-badge-default);
-  font-size: var(--x-size-font-badge-default);
-  font-weight: var(--x-number-font-weight-badge-default);
-  box-sizing: border-box;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translate(50%, -50%);
-  z-index: 1;
-  /* We dont' want to have the button fully centered in the top right corner, the top right corner
-  of the text is the one that should be aligned with the top right corner of the container. */
-  top: calc(var(--x-size-width-badge-default) / 4);
-  min-width: var(--x-size-width-badge-default);
-  height: var(--x-size-width-badge-default);
-  padding: 2px;
-  background: var(--x-color-background-badge-default);
-  color: var(--x-color-text-badge-default);
-  border-color: var(--x-color-border-badge-default);
-}
-[dir="rtl"] .x-badge {
-  transform: translate(-50%, -50%);
-}
-
-.x-badge-container {
-  position: relative;
-}

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AnimationProp](./x-components.animationprop.md)
+
+## AnimationProp variable
+
+Type for animations props.
+
+**Signature:**
+
+```typescript
+AnimationProp: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>
+```

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

@@ -2,21 +2,26 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseEventsModalClose](./x-components.baseeventsmodalclose.md)
 
-## BaseEventsModalClose class
+## BaseEventsModalClose variable
 
 Component contains an event button that emits [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicked. It has a default slot to customize its contents.
 
 **Signature:**
 
 ```typescript
-export default class BaseEventsModalClose extends Vue 
+_default: import("vue").DefineComponent<{
+    closingEvent: {
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        default: string;
+    };
+}, {
+    events: import("vue").ComputedRef<Partial<XEventsTypes>>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    closingEvent: {
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        default: string;
+    };
+}>>, {
+    closingEvent: "UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection";
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [closingEvent](./x-components.baseeventsmodalclose.closingevent.md) | <code>protected</code> | [PropsWithType](./x-components.propswithtype.md)<!-- -->&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, void&gt; |  |
-|  [events](./x-components.baseeventsmodalclose.events.md) | <p><code>protected</code></p><p><code>readonly</code></p> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; |  |
-

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

@@ -2,21 +2,26 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseEventsModalOpen](./x-components.baseeventsmodalopen.md)
 
-## BaseEventsModalOpen class
+## BaseEventsModalOpen variable
 
 Component contains an event button that emits [XEventsTypes.UserClickedOpenEventsModal](./x-components.xeventstypes.userclickedopeneventsmodal.md) when clicked. It has a default slot to customize its contents.
 
 **Signature:**
 
 ```typescript
-export default class BaseEventsModalOpen extends Vue 
+_default: import("vue").DefineComponent<{
+    openingEvent: {
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        default: string;
+    };
+}, {
+    events: import("vue").ComputedRef<Partial<XEventsTypes>>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    openingEvent: {
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        default: string;
+    };
+}>>, {
+    openingEvent: "UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection";
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [events](./x-components.baseeventsmodalopen.events.md) | <p><code>protected</code></p><p><code>readonly</code></p> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; |  |
-|  [openingEvent](./x-components.baseeventsmodalopen.openingevent.md) | <code>protected</code> | [PropsWithType](./x-components.propswithtype.md)<!-- -->&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, void&gt; |  |
-

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

@@ -2,26 +2,24 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseIdModalClose](./x-components.baseidmodalclose.md)
 
-## BaseIdModalClose class
+## BaseIdModalClose variable
 
 Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function.
 
 **Signature:**
 
 ```typescript
-export default class BaseIdModalClose extends Vue 
+_default: import("vue").DefineComponent<{
+    modalId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    emitCloseModalEvent: ({ target }: Event) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    modalId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [modalId](./x-components.baseidmodalclose.modalid.md) | <code>protected</code> | string | The modalId of the modal that will be closed. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [emitCloseModalEvent({ target })](./x-components.baseidmodalclose.emitclosemodalevent.md) | <code>protected</code> | Emits the [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md) event with the modalId as payload. |
-