diff --git a/packages/x-components/src/components/base-dropdown.vue b/packages/x-components/src/components/base-dropdown.vue
index 0d233a8465..b40341033d 100644
--- a/packages/x-components/src/components/base-dropdown.vue
+++ b/packages/x-components/src/components/base-dropdown.vue
@@ -78,15 +78,8 @@
 
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import Vue, {
-    computed,
-    defineComponent,
-    nextTick,
-    onBeforeUnmount,
-    PropType,
-    ref,
-    watch
-  } from 'vue';
+  import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';
+  import { AnimationProp } from '../types';
   import { getTargetElement } from '../utils/html';
   import { normalizeString } from '../utils/normalize';
   import { isInRange } from '../utils/number';
@@ -123,7 +116,7 @@
        * so only `<transition>` components are allowed.
        */
       animation: {
-        type: Object as PropType<string | typeof Vue>,
+        type: AnimationProp,
         default: () => NoElement
       },
       /** Time to wait without receiving any keystroke before resetting the items search query. */
diff --git a/packages/x-components/src/components/modals/base-modal.vue b/packages/x-components/src/components/modals/base-modal.vue
index 0b9c3d01a7..c3a365a002 100644
--- a/packages/x-components/src/components/modals/base-modal.vue
+++ b/packages/x-components/src/components/modals/base-modal.vue
@@ -31,16 +31,9 @@
 </template>
 
 <script lang="ts">
-  import Vue, {
-    defineComponent,
-    nextTick,
-    onBeforeUnmount,
-    onMounted,
-    PropType,
-    ref,
-    watch
-  } from 'vue';
+  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import { useDebounce } from '../../composables/use-debounce';
+  import { AnimationProp } from '../../types';
   import { getTargetElement } from '../../utils/html';
   import Fade from '../animations/fade.vue';
   import { NoElement } from '../no-element';
@@ -77,7 +70,7 @@
       referenceSelector: String,
       /** Animation to use for opening/closing the modal.This animation only affects the content. */
       animation: {
-        type: Object as PropType<string | typeof Vue>,
+        type: AnimationProp,
         default: () => NoElement
       },
       /**
@@ -85,7 +78,7 @@
        * a fade transition.
        */
       overlayAnimation: {
-        type: Object as PropType<string | typeof Vue>,
+        type: AnimationProp,
         default: () => Fade
       },
       /** Class inherited by content element. */