How to use the framer-motion.motion.div function in framer-motion

import { Flexbox, Typography, Icon, Box, useKeyPress } from '../..';

const Backdrop = styled(Flexbox)`
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;

  ${({ theme }) => theme.media.greaterThan(theme.breakpoints.sm)} {
    background-color: ${({ theme }) => theme.color.modalBackdrop};
  }
`;

export const Dialog = styled(motion.div)`
  box-sizing: border-box;
  padding: ${({ theme }) => theme.spacing.unit(5)}px;
  border: 0;
  background: ${({ theme }) => theme.color.card};

  ${({ theme }) => theme.media.lessThan(theme.breakpoints.sm)} {
    width: 100%;
    height: 100%;
    transform: none !important; /* disables the appear animation */
  }

  ${({ theme }) => theme.media.greaterThan(theme.breakpoints.sm)} {
    width: ${({ theme }) => theme.spacing.unit(120)}px;
    box-shadow: 0 2px 2px 0 ${({ theme }) => theme.color.shadowModal};
  }
`;

})}
          
        
      
    
  );
};

// 
//

const MainContainer = styled.div`
  position: relative;
`;

const TransitionableScreen = styled(motion.div)`
  width: 100%;
  position: absolute;
`;

ScreenTransitionHandler.propTypes = {
  screens: PropTypes.array.isRequired,
  basePath: PropTypes.string.isRequired
};

export default ScreenTransitionHandler;

import { isBoolean, isElement } from '../../common/utils';
import {
  Flexbox,
  Typography,
  Icon,
  Box,
  useKeyPress,
  FadedScroll,
  Portal,
  useMedia,
  Button,
} from '../..';

const displayName = 'Drawer';

const Container = styled(motion.div)`
  box-sizing: border-box;
  padding: ${({ theme }) => theme.spacing.unit(5)}px;
  width: 100%;
  height: 100%;
  background: ${({ theme }) => theme.color.card};
  position: fixed;
  z-index: ${({ theme }) => theme.zIndex.overlay};
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 16px 0 ${({ theme }) => theme.color.shadowModal};

  ${({ theme }) => theme.media.greaterThan(theme.breakpoints.sm)} {
    width: ${({ theme }) => theme.spacing.unit(100)}px;
  }

}

const MainContainer = styled(motion.div)`
  background-color: ${PANEL_COLORS[1]};
  height: ${NAVIGATION_TAB_HEIGHT}px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: ${NAVIGATION_TAB_SPACING}px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
`;

const Text = styled(motion.div)`
  text-transform: uppercase;
  font-size: ${BASE_FONT_SIZE}pt;
  letter-spacing: ${LETTER_SPACING}px;
  font-weight: ${BASE_FONT_WEIGHT};
  margin-left: 10px;
  white-space: nowrap;
`;

export default Tab;

import React from 'react';
import styled from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import { Props } from './FormField.types';
import { VisuallyHidden, FormLabel, Typography, Fieldset, Legend } from '../..';
import { assert } from '../../common/utils';

const hasError = (error?: Props['error']) => error && error !== '';

const Wrapper = styled.div<{ width?: string | number }>`
  ${p => (p.width ? `width: ${p.width};` : 'width: 200px;')}
  display: inline-block;
`;

const BottomWrapper = styled(motion.div)``;
export const FormField: React.FC = React.forwardRef(
  (
    {
      children,
      className,
      error,
      extraInfo,
      fieldId,
      forId,
      group,
      hideLabel,
      label,
      id,
      required = false,
      showRequired = false,
      width,

const { icon, onClick } = this.props;

    const Icon = icon;

    return (
      
        
      
    );
  }
}

const MainContainer = styled(motion.div)`
  background-color: ${PANEL_COLORS[0]};
  -webkit-app-region: no-drag;
  width: ${HEADER_HEIGHT * 0.6}px;
  height: ${HEADER_HEIGHT * 0.6}px;
  margin-right: ${HEADER_HEIGHT * 0.2}px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
`;

export default HeaderButton;

import styled from '@emotion/styled'
import useBaseUrl from '@docusaurus/useBaseUrl'
import * as React from 'react'
import { motion } from 'framer-motion'
import { Overflow } from './Overflow'

const easeInOutCubic = [0.645, 0.045, 0.355, 1]

const StyledFeature = styled(motion.div)`
  color: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  border-radius: 2rem;
`

const Image = styled(motion.img)`
  height: 10rem;
  width: 10rem;
  margin-bottom: 1.5rem;
`

const Title = styled(motion.h3)`