message: docs: update with-framer example
diff: @@ -8,6 +8,8 @@ author: segunadebayo
  If you'd like to add some interesting motion interaction or animation to your
  Chakra UI websites or apps, here's a quick tip:
  +If you're using a version of `framer motion` less than `v 3.10.0`:
  +
  ```jsx live=false
  import { Box, forwardRef } from "@chakra-ui/react"
  import { motion, isValidMotionProp } from "framer-motion"
  @@ -39,3 +41,56 @@ function Example() {
  ```
  [![Edit with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakra-ui-motion-box-sbk9e?file=/src/App.tsx)
  +
  +If you're using the latest verion of `framer motion`, which is `>= v 3.10.0`. In
  +this version, `framer-motion` automatically filters out motion-related props
  +forwarded to the provided component.
  +[Reference](https://www.framer.com/api/motion/component/#custom-components)
  +
  +```jsx live=false
  +import { Box, forwardRef } from "@chakra-ui/react"
  +import { motion } from "framer-motion"
  +
  +const MotionBox = motion(Box)
  +
  +function Example() {
  + return (
  + <MotionBox
  + height="40px"
  + bg="red.300"
  + drag="x"
  + dragConstraints={{ left: -100, right: 100 }}
  + whileHover={{ scale: 1.1 }}
  + whileTap={{ scale: 0.9 }}
  + />
  + )
  +}
  +```
  +
  +For TypeScript users, here's what you need to do:
  +
  +```jsx live=false
  +import React from "react"
  +import { Box, forwardRef, HTMLChakraProps } from "@chakra-ui/react"
  +import { motion, HTMLMotionProps } from "framer-motion"
  +
  +type Merge<P, T> = Omit<P, keyof T> & T;
  +type MotionBoxProps = Merge<HTMLChakraProps<"div">, HTMLMotionProps<"div">>;
  +
  +export const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div);
  +
  +function Example() {
  + return (
  + <MotionBox
  + height="40px"
  + bg="red.300"
  + drag="x"
  + dragConstraints={{ left: -100, right: 100 }}
  + whileHover={{ scale: 1.1 }}
  + whileTap={{ scale: 0.9 }}
  + />
  + )
  +}
  +```
  +
  +[![Edit with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakra-ui-motion-box-new-drj95?file=/src/App.tsx)
  