From 762046c54bcaa8099f01c57fd5f0bbdae509ab25 Mon Sep 17 00:00:00 2001
From: Yannick <yannick.franssen@outlook.com>
Date: Tue, 30 Jan 2024 10:02:17 +0100
Subject: [PATCH] Add default transition animation

---
 docs/package-lock.json | 2 +-
 src/ValkyrieIcon.tsx   | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 5ba9533a0..139fe7613 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -40,7 +40,7 @@
     },
     "..": {
       "name": "@sippy-platform/valkyrie",
-      "version": "1.0.0-alpha.36",
+      "version": "1.0.0-alpha.37",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "html-react-parser": "5.1.1"
diff --git a/src/ValkyrieIcon.tsx b/src/ValkyrieIcon.tsx
index a38eaa738..aa62c1eb0 100644
--- a/src/ValkyrieIcon.tsx
+++ b/src/ValkyrieIcon.tsx
@@ -25,7 +25,7 @@ export default function ValkyrieIcon({
     }
   `;
 
-  const aiClass = css`
+  const viClass = css`
     height: 1em;
     width: 1em;
     min-width: 1em;
@@ -41,6 +41,7 @@ export default function ValkyrieIcon({
 
   const rotateClass = css`
     transform: rotate(${rotate}deg);
+    transition: transform var(--vi-transition-duration, .2s) var(--vi-transition-easing, ease-in-out);
   `;
 
   const flipClass = css`
@@ -53,7 +54,7 @@ export default function ValkyrieIcon({
 
   const spinClass = css`
     svg {
-      animation: ${spinAnimation} var(--ai-animation-duration, 2s) infinite
+      animation: ${spinAnimation} var(--vi-animation-duration, 2s) infinite
         linear;
     }
   `;
@@ -62,7 +63,7 @@ export default function ValkyrieIcon({
     <span
       {...props}
       className={cx({
-        [aiClass]: true,
+        [viClass]: true,
         [rotateClass]: !!rotate,
         [flipClass]: !!flip,
         [spinClass]: spin