fix: now using the correct method to instantiate motion since its constructor is deprecated in favor of the create method

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx

@@ -32,8 +32,8 @@ import type {
 } from "@/types/components/myPages/myPage/accountPage"
 import type { Reward } from "@/types/components/myPages/rewards"
 
-const MotionOverlay = motion(ModalOverlay)
-const MotionModal = motion(Modal)
+const MotionOverlay = motion.create(ModalOverlay)
+const MotionModal = motion.create(Modal)
 
 const thirtyMinutesInMs = 1000 * 60 * 30
 

apps/scandic-web/components/Modal/index.tsx

@@ -26,8 +26,8 @@ import { modalContentVariants } from "./variants"
 
 import styles from "./modal.module.css"
 
-const MotionOverlay = motion(ModalOverlay)
-const MotionModal = motion(AriaModal)
+const MotionOverlay = motion.create(ModalOverlay)
+const MotionModal = motion.create(AriaModal)
 
 function InnerModal({
   animation,

apps/scandic-web/components/MyPages/Surprises/Client.tsx

@@ -30,7 +30,7 @@ import styles from "./surprises.module.css"
 import type { SurprisesProps } from "@/types/components/blocks/surprises"
 import type { Surprise } from "@/types/components/myPages/rewards"
 
-const MotionModal = motion(Modal)
+const MotionModal = motion.create(Modal)
 
 export default function SurprisesNotification({
   surprises: initialData,

packages/design-system/lib/components/RateCard/Modal/index.tsx

@@ -21,8 +21,8 @@ import styles from './modal.module.css'
 import { Typography } from '../../Typography'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 
-const MotionOverlay = motion(ModalOverlay)
-const MotionModal = motion(AriaModal)
+const MotionOverlay = motion.create(ModalOverlay)
+const MotionModal = motion.create(AriaModal)
 
 function InnerModal({
   animation,