@thecb/components 11.2.7-beta.0 → 11.2.7-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.7-beta.0",
+  "version": "11.2.7-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -100,7 +100,7 @@
     "@types/styled-components": "^5.1.34",
     "core-js": "^3.22.5",
     "formatted-input": "^1.0.0",
-    "framer-motion": "^1.11.0",
+    "framer-motion": "12.4.7",
     "numeral": "^2.0.6",
     "polished": "^4.0.3",
     "ramda": "^0.27.0",

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -1,6 +1,5 @@
 import React, { useContext, forwardRef } from "react";
 import styled, { ThemeContext } from "styled-components";
-import { linear } from "@popmotion/easing";
 import Text from "../text";
 import { Box, Center, Motion } from "../layouts";
 import { fallbackValues } from "./ButtonWithAction.theme";
@@ -9,23 +8,7 @@ import SpinnerIcon from "../../../deprecated/spinner";
 import { noop } from "../../../util/general";
 import { createThemeValues } from "../../../util/themeUtils";
 
-const variants = {
-  fixed: {
-    rotate: "0deg"
-  },
-  rotate: {
-    rotate: "360deg",
-    transition: {
-      rotate: {
-        ease: linear,
-        duration: 1000,
-        loop: Infinity
-      }
-    }
-  }
-};
-
-const SpinnerContainer = styled.div`
+const SpinnerContainer = styled(Motion)`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -33,18 +16,9 @@ const SpinnerContainer = styled.div`
   justify-content: center;
 `;
 
-const SpinnerIconWrapper = styled(Motion)``;
-
 const Spinner = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIconWrapper
-      padding="0"
-      variants={variants}
-      initial="fixed"
-      animate="rotate"
-    >
-      <SpinnerIcon color={color} isMobile={isMobile} />
-    </SpinnerIconWrapper>
+    <SpinnerIcon color={color} isMobile={isMobile} />
   </SpinnerContainer>
 );
 

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { easeIn, easeOut } from "@popmotion/easing";
 import { Box, Motion } from "../../atoms/layouts";
 import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
@@ -11,11 +10,11 @@ const menuVariants = {
     right: "100vw",
     transition: {
       right: {
-        ease: easeOut,
+        ease: "easeOut",
         duration: 500
       },
       left: {
-        ease: easeOut,
+        ease: "easeOut",
         duration: 500
       }
     }
@@ -25,11 +24,11 @@ const menuVariants = {
     right: "0",
     transition: {
       left: {
-        ease: easeIn,
+        ease: "easeIn",
         duration: 500
       },
       right: {
-        ease: easeIn,
+        ease: "easeIn",
         duration: 500
       }
     }

package/src/deprecated/spinner/Spinner.js

@@ -1,23 +1,6 @@
 import React from "react";
 import styled from "styled-components";
 import { Motion } from "../../components/atoms/layouts";
-import { linear } from "@popmotion/easing";
-
-const rotateVariants = {
-  fixed: {
-    rotate: "0deg"
-  },
-  rotate: {
-    rotate: "360deg",
-    transition: {
-      rotate: {
-        ease: linear,
-        duration: 1000,
-        loop: Infinity
-      }
-    }
-  }
-};
 
 export const SpinnerContainer = styled.div`
   width: 100%;
@@ -35,10 +18,10 @@ export const SpinnerIconWrapper = styled(Motion)`
 const SpinnerIcon = ({ color, isMobile }) => (
   <SpinnerContainer>
     <SpinnerIconWrapper
-      initial="fixed"
-      animate="rotate"
+      initial={{ rotate: 0 }}
+      animate={{ rotate: 360 }}
+      transition={{ duration: 1, ease: "linear", repeat: Infinity }}
       isMobile={isMobile}
-      variants={rotateVariants}
     >
       <svg
         viewBox={`0 0 24 24`}