upgrade framer

docs/blocks/administration/Billing.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { Card } from '../../../src/layout/Card';
 import {

docs/blocks/administration/Pricing.story.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { toggleTheme, Toggle } from '../../../src/form/Toggle';
 import { radioTheme, Radio } from '../../../src/form/Radio';

docs/blocks/administration/Profile.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import {
   Block,

docs/blocks/administration/Team.story.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { Card } from '../../../src/layout/Card';
 import { Tabs, Tab, TabList, TabPanel } from '../../../src/layout/Tabs';

docs/blocks/authentication/ForgotPassword.story.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { Block, Card, Divider, Stack } from '../../../src/layout';

docs/blocks/authentication/Login.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { Block, Card, Divider, Stack } from '../../../src/layout';
 import { Checkbox, Input } from '../../../src/form';

docs/blocks/authentication/Mfa.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { Block } from '../../../src/layout/Block';
 import { Button } from '../../../src/elements/Button';

docs/blocks/authentication/Register.story.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { Block } from '../../../src/layout/Block';

docs/blocks/foundation/EmptyState.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { Card, Divider } from '../../../src/layout';
 import { Button } from '../../../src/elements/Button';
 import { Input } from '../../../src/form/Input';

docs/blocks/foundation/Support.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { Block, Card } from '../../../src/layout';

docs/blocks/foundation/Timeline.story.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import React from 'react';
 import {
   Avatar,

package.json

@@ -71,9 +71,9 @@
     "date-fns": "^3.6.0",
     "ellipsize": "^0.5.1",
     "focus-trap-react": "^10.2.3",
-    "framer-motion": "^10.16.16",
     "fuse.js": "^6.6.2",
     "human-format": "^1.2.0",
+    "motion": "^11.18.0",
     "name-initials": "^0.1.3",
     "pluralize": "^8.0.0",
     "react-fast-compare": "^3.2.2",

src/data/Sort/Sort.tsx

@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren, useCallback } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { DownArrowIcon } from './DownArrowIcon';
 import { getNextDirection, SortDirection } from './utils';
 import { twMerge } from 'tailwind-merge';

src/elements/Avatar/Avatar.story.tsx

@@ -26,7 +26,7 @@ Outline.args = {
 
 export const RoundedWithImage = Template.bind({});
 RoundedWithImage.args = {
-  src: 'https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg',
+  src: 'https://i.pravatar.cc/128',
   size: 50,
   rounded: true
 };

src/elements/Badge/Badge.tsx

@@ -1,5 +1,5 @@
 import React, { FC, forwardRef, LegacyRef } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { BadgeTheme } from './BadgeTheme';
 import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';

src/elements/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { FC, forwardRef, LegacyRef, useContext } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { ButtonGroupContext } from './ButtonGroupContext';
 import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';

src/elements/Loader/DotsLoader.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { DotsLoaderTheme } from './DotsLoaderTheme';
 import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';

src/form/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { Button } from '@/elements/Button';
 import {

src/form/Calendar/CalendarDays/CalendarDays.tsx

@@ -8,7 +8,7 @@ import {
   isNextWeekEmpty,
   isPreviousWeekEmpty
 } from '@/form/Calendar/utils';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn, useComponentTheme } from '@/utils';
 import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';

src/form/Calendar/CalendarRange.tsx

@@ -7,7 +7,7 @@ import {
   sub,
   format
 } from 'date-fns';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { Button } from '@/elements';
 import { CalendarProps } from './Calendar';
 import { CalendarDays } from './CalendarDays';

src/form/Calendar/CalendarYears/CalendarYears.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { Button } from '@/elements';
 import { cn, useComponentTheme } from '@/utils';
 import { CalendarTheme } from '@/form/Calendar/CalendarTheme';

src/form/Checkbox/Checkbox.tsx

@@ -5,7 +5,7 @@ import React, {
   ReactNode,
   useCallback
 } from 'react';
-import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { motion, useMotionValue, useTransform } from 'motion/react';
 import { twMerge } from 'tailwind-merge';
 import { CheckboxTheme } from './CheckboxTheme';
 import { useComponentTheme } from '@/utils';

src/form/Radio/Radio.tsx

@@ -6,7 +6,7 @@ import React, {
   useContext,
   useMemo
 } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { RadioGroupContext } from './RadioGroupContext';
 import { cn, useComponentTheme } from '@/utils';
 import { RadioTheme } from './RadioTheme';

src/form/Range/RangeDouble.tsx

@@ -7,7 +7,7 @@ import React, {
   useMemo,
   useLayoutEffect
 } from 'react';
-import { motion, useMotionValue } from 'framer-motion';
+import { motion, useMotionValue } from 'motion/react';
 import { RangeProps, RangeTooltip } from './RangeTooltip';
 import { twMerge } from 'tailwind-merge';
 import { cn, useComponentTheme } from '@/utils';

src/form/Range/RangeSingle.tsx

@@ -6,7 +6,7 @@ import React, {
   FC,
   useMemo
 } from 'react';
-import { motion, useMotionValue } from 'framer-motion';
+import { motion, useMotionValue } from 'motion/react';
 import { RangeProps, RangeTooltip } from './RangeTooltip';
 import { twMerge } from 'tailwind-merge';
 import { cn, useComponentTheme } from '@/utils';

src/form/Range/RangeTooltip.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { RangeTheme } from './RangeTheme';
 import { useComponentTheme } from '@/utils';
 

src/form/Select/SelectMenu/SelectMenu.tsx

@@ -1,5 +1,5 @@
 import React, { FC, Fragment, useCallback } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { SelectOptionProps, SelectValue } from '@/form/Select/SelectOption';
 import Highlighter from 'react-highlight-words';
 import { GroupOptions, GroupOption } from '@/form/Select/utils';

src/form/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
 import React, { FC, forwardRef, LegacyRef } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { ToggleTheme } from './ToggleTheme';
 import { cn, useComponentTheme } from '@/utils';
 

src/layers/Backdrop/Backdrop.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { cn, useComponentTheme } from '@/utils';
 
 import { BackdropTheme } from './BackdropTheme';

src/layers/ContextMenu/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useState, useCallback, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { ConnectedOverlay, ConnectedOverlayProps } from '@/utils';
 import { useId } from '@/utils';
 import FocusTrap from 'focus-trap-react';

src/layers/Dialog/Dialog.story.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { MotionProps } from 'framer-motion';
+import { MotionProps } from 'motion/react';
 import { Dialog } from './Dialog';
 import { useDialog } from './useDialog';
 import { Button } from '../../elements';

src/layers/Dialog/Dialog.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay';
 import { useId, CloneElement } from '@/utils';
 import FocusTrap from 'focus-trap-react';
-import { motion, MotionProps } from 'framer-motion';
+import { motion, MotionProps } from 'motion/react';
 import { twMerge } from 'tailwind-merge';
 import { DialogHeader, DialogHeaderProps } from './DialogHeader';
 import { useComponentTheme } from '@/utils';

src/layers/Drawer/Drawer.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactElement } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useId, CloneElement } from '@/utils';
 import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay';
-import { motion, MotionProps } from 'framer-motion';
+import { motion, MotionProps } from 'motion/react';
 import { variants } from './variants';
 import { DrawerHeader, DrawerHeaderProps } from './DrawerHeader';
 import { twMerge } from 'tailwind-merge';

src/layers/Menu/Menu.tsx

@@ -4,7 +4,7 @@ import { MiddlewareState, size } from '@floating-ui/react';
 import { ConnectedOverlay, OverlayEvent } from '@/utils/Overlay';
 import { Modifiers, Placement } from '@/utils/Position';
 import { useId } from '@/utils';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { twMerge } from 'tailwind-merge';
 import { MenuTheme } from './MenuTheme';
 import { useComponentTheme } from '@/utils';

src/layers/Notification/Notification.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, useCallback, useEffect, useRef } from 'react';
 import { NotificationOptions } from './NotificationsContext';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { twMerge } from 'tailwind-merge';
 import { NotificationTheme } from './NotificationTheme';
 import { useComponentTheme } from '@/utils';

src/layers/Notification/Notifications.tsx

@@ -7,7 +7,7 @@ import React, {
   useMemo,
   JSXElementConstructor
 } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { twMerge } from 'tailwind-merge';
 
 import { Notification } from './Notification';

src/layers/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState, useRef, useEffect, ReactNode } from 'react';
 import { ConnectedOverlay, TriggerTypes } from '@/utils/Overlay';
 import { Modifiers, Placement, ReferenceObject } from '@/utils/Position';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { twMerge } from 'tailwind-merge';
 import { useTooltipState } from './useTooltipState';
 import { TooltipTheme } from './TooltipTheme';

src/layout/Collapse/Collapse.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from 'motion/react';
 import { CollapseTheme } from './CollapseTheme';
 import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';

src/layout/Motion/MotionGroup.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-import { HTMLMotionProps, motion } from 'framer-motion';
+import { HTMLMotionProps, motion } from 'motion/react';
 
 export const groupVariants = {
   initial: {

src/layout/Motion/MotionItem.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-import { HTMLMotionProps, motion } from 'framer-motion';
+import { HTMLMotionProps, motion } from 'motion/react';
 
 export const verticalVariant = {
   initial: {

src/layout/Tabs/Tab.tsx

@@ -2,7 +2,7 @@ import React, { FC, PropsWithChildren } from 'react';
 import { Button } from '@/elements/Button';
 import { TabsTheme } from './TabsTheme';
 import { useComponentTheme, cn } from '@/utils';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 export interface TabProps extends PropsWithChildren {
   /**