From 8c2032f73a6975b8c51c6576909652275719d828 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Wed, 11 Oct 2023 13:14:57 +0200
Subject: [PATCH] fix: use object syntax for keyframes

---
 packages/widget/src/config/theme.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
index b40444a18..ab3938ca1 100644
--- a/packages/widget/src/config/theme.ts
+++ b/packages/widget/src/config/theme.ts
@@ -91,16 +91,16 @@ const shape = {
   borderRadiusSecondary: 8,
 };
 
-const enterKeyframe = keyframes`
-  0% {
-    transform: scale(0);
-    opacity: 0.05;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0.1;
-  }
-`;
+const enterKeyframe = keyframes({
+  '0%': {
+    transform: 'scale(0)',
+    opacity: 0.05,
+  },
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 0.1,
+  },
+});
 
 export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
   const primaryMainColor =
@@ -186,12 +186,12 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
           root: {
             [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
               {
-                animationName: `${enterKeyframe}`,
+                animationName: enterKeyframe,
               },
             [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
               {
                 opacity: 0.1,
-                animationName: `${enterKeyframe}`,
+                animationName: enterKeyframe,
               },
           },
         },