From 8c3fb1180ced38bfc135ecfa655fbea9fc854eda Mon Sep 17 00:00:00 2001
From: Cody Olsen <stipsan@gmail.com>
Date: Mon, 9 Dec 2024 14:54:57 +0100
Subject: [PATCH] fix: use `motion.create` instead of `motion()`

---
 src/core/constants.ts                       | 2 +-
 src/core/primitives/popover/popoverCard.tsx | 4 ++--
 src/core/primitives/tooltip/tooltipCard.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/core/constants.ts b/src/core/constants.ts
index 446a178de..f1b022bed 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -1,4 +1,4 @@
-import {Transition, Variant} from 'framer-motion'
+import type {Transition, Variant} from 'framer-motion'
 
 /**
  * @internal
diff --git a/src/core/primitives/popover/popoverCard.tsx b/src/core/primitives/popover/popoverCard.tsx
index fb1290028..9a5b5b250 100644
--- a/src/core/primitives/popover/popoverCard.tsx
+++ b/src/core/primitives/popover/popoverCard.tsx
@@ -1,6 +1,6 @@
 import {Strategy} from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {MotionProps, motion} from 'framer-motion'
+import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
@@ -15,7 +15,7 @@ import {
   DEFAULT_POPOVER_MARGINS,
 } from './constants'
 
-const MotionCard = styled(motion(Card))`
+const MotionCard = styled(motion.create(Card))`
   &:not([hidden]) {
     display: flex;
   }
diff --git a/src/core/primitives/tooltip/tooltipCard.tsx b/src/core/primitives/tooltip/tooltipCard.tsx
index 7bca2422c..ae8128c27 100644
--- a/src/core/primitives/tooltip/tooltipCard.tsx
+++ b/src/core/primitives/tooltip/tooltipCard.tsx
@@ -1,5 +1,5 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {MotionProps, motion} from 'framer-motion'
+import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
@@ -12,7 +12,7 @@ import {
   DEFAULT_TOOLTIP_ARROW_WIDTH,
 } from './constants'
 
-const MotionCard = styled(motion(Card))`
+const MotionCard = styled(motion.create(Card))`
   & > * {
     opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
     will-change: opacity;