@dtdot/lego 0.19.12 → 1.0.1

package/build/components/ActionMenu/ActionMenu.component.js

@@ -1,9 +1,9 @@
-import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
 import { usePopper } from 'react-popper';
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components';
 import Button from '../Button/Button.component';
 import ActionMenuPanel from './_ActionMenuPanel.component';
 const StyledIcon = styled(FontAwesomeIcon) `

package/build/components/ActionMenu/_ActionMenuItem.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 const ActionMenuItemOuter = styled(motion.div) `
   padding: 12px 16px;

package/build/components/Alert/Alert.component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Status } from '../../theme/theme.types';
-export declare type AlertVariant = Status;
+export type AlertVariant = Status;
 export interface AlertProps {
     variant: AlertVariant;
     message: string;

package/build/components/Badge/Badge.component.d.ts

@@ -4,7 +4,7 @@ interface BadgeSpanProps {
     variant: BadgeVariant;
 }
 export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
-export declare type BadgeVariant = Status;
+export type BadgeVariant = Status;
 export interface BadgeProps {
     children: React.ReactNode;
     variant: BadgeVariant;

package/build/components/Card/Card.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React, { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 import responsive from '../../responsive/responsive';
 import CardContext from './Card.context';

package/build/components/Card/Card.context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 interface CardContextProps {
     size: CardSize;
     actionsRef?: HTMLDivElement;

package/build/components/Card/_CardActions.component.js

@@ -1,6 +1,6 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import React, { useContext, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
 import styled from 'styled-components';
 import CardContext from './Card.context';
 const actionsHeight = 32;

package/build/components/Checklist/Checklist.component.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
 import { motion, LayoutGroup } from 'framer-motion';
+import styled from 'styled-components';
 import ChecklistItem from './_ChecklistItem.component';
 const ListDivider = styled.div `
   width: 100%;

package/build/components/Checklist/_ChecklistItem.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 const Outerlabel = styled(motion.label) `
   position: relative;

package/build/components/ControlGroup/ControlGroup.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ControlGroupVariation = 'focus' | 'submission' | 'comfortable';
+export type ControlGroupVariation = 'focus' | 'submission' | 'comfortable';
 export interface ControlGroupProps {
     children: React.ReactNode;
     variation?: ControlGroupVariation;

package/build/components/ImageUpload/ImageUpload.component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type ImageUploadMode = 'fill' | 'form';
+export type ImageUploadMode = 'fill' | 'form';
 interface ImageUploadProps {
     'name': string;
     'value'?: string;

package/build/components/ImageUpload/ImageUpload.component.js

@@ -1,8 +1,8 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useContext, useRef, useState } from 'react';
 import { faCloudUploadAlt, faExclamationCircle, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styled from 'styled-components';
 import { motion } from 'framer-motion';
+import styled from 'styled-components';
 import FileContext from '../../contexts/File.context';
 import useFormNode from '../Form/useFormNode.hook';
 import Loader from '../Loader/Loader.component';

package/build/components/InlineCard/InlineCard.component.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Status } from '../../theme/theme.types';
-export declare type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
-export declare type DragVariant = Status;
+export type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;

package/build/components/InlineCard/InlineCard.component.js

@@ -1,15 +1,15 @@
-import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useContext, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
 import useMeasure from 'react-use-measure';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
+import styled, { useTheme } from 'styled-components';
 import { responsive } from '../..';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
 import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import InlineCardSelectionContext from './_InlineCardSelection.context';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
 const CardWrapper = styled.div `
   position: relative;
   height: 64px;

package/build/components/InlineCard/InlineCardSelection.component.d.ts

@@ -5,5 +5,5 @@ export interface InlineCardSelectionProps {
     value?: string[];
     onChange?: (value: string[]) => void;
 }
-declare const InlineCardSelection: ({ children, name, value, onChange, }: InlineCardSelectionProps) => JSX.Element;
+declare const InlineCardSelection: ({ children, name, value: propsValue, onChange: propsOnChange, }: InlineCardSelectionProps) => JSX.Element;
 export default InlineCardSelection;

package/build/components/InlineCard/_InlineCardSelection.context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 interface InlineCardSelectionContextProps {
     value?: string[];
     onToggle?: (value: string) => void;

package/build/components/Input/Input.component.js

@@ -1,8 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
-import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useState } from 'react';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
 import styled, { css } from 'styled-components';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';

package/build/components/LiveList/LiveList.component.js

@@ -1,7 +1,7 @@
-import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useCallback, useContext, useEffect } from 'react';
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import useKeypress from '../../hooks/useKeyPress';

package/build/components/LiveList/_LiveListRow.js

@@ -1,10 +1,10 @@
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useContext, useEffect, useRef, useState } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
-import { FocusContext } from './_FocusContext';
 import Input from '../Input/Input.component';
+import { FocusContext } from './_FocusContext';
 const InputContainer = styled(motion.div) `
   position: relative;
   margin: 2px 0;

package/build/components/Menu/Menu.component.js

@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import styled from 'styled-components';
 import responsive from '../../responsive/responsive';
 import MenuContent from './_MenuContent.component';

package/build/components/Menu/_MenuHeading.component.js

@@ -1,6 +1,6 @@
-import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 import styled from 'styled-components';
 import responsive from '../../responsive/responsive';
 const MenuHeadingDiv = styled.div `

package/build/components/Menu/_MenuItem.component.js

@@ -1,6 +1,6 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const MenuItemOuter = styled.div `
   display: flex;
 `;

package/build/components/Menu/_MenuPanel.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type PanelSize = 'sm' | 'md';
+export type PanelSize = 'sm' | 'md';
 export interface MenuPanelProps {
     children: React.ReactNode;
     scrollable?: boolean;

package/build/components/MinimalMenu/MinimalMenu.component.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
-import DesktopMinimalMenuContainer from './desktop/_DesktopMinimalMenuContainer.component';
-import MobileMinimalMenuContainer from './mobile/_MobileMinimalMenuContainer.component';
 import MinimalMenuItem from './_MinimalMenuItem.component';
 import MinimalMenuPage from './_MinimalMenuPage.component';
+import DesktopMinimalMenuContainer from './desktop/_DesktopMinimalMenuContainer.component';
+import MobileMinimalMenuContainer from './mobile/_MobileMinimalMenuContainer.component';
 const MinimalMenu = ({ children }) => {
     const isMobile = useIsScreenSize('mobile');
     if (isMobile) {

package/build/components/MinimalMenu/_MinimalMenuItem.component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
-import MobileMinimalMenuItem from './mobile/_MobileMinimalMenuItem.component';
 import DesktopMinimalMenuItem from './desktop/_DesktopMinimalMenuItem.component';
+import MobileMinimalMenuItem from './mobile/_MobileMinimalMenuItem.component';
 const MinimalMenuItem = ({ icon, active, onClick, 'data-cy': dataCy }) => {
     const isMobile = useIsScreenSize('mobile');
     if (isMobile) {

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuItem.component.js

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { motion } from 'framer-motion';
 import React, { useMemo } from 'react';
+import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 const ItemContainer = styled(motion.div) `
   position: relative;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuContainer.component.js

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
 import React, { useState } from 'react';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
 import MobileMenuBump from './_MobileMenuBump.component';

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuItem.component.js

@@ -1,10 +1,10 @@
-import React, { useContext, useEffect, useRef } from 'react';
-import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useContext, useEffect, useRef } from 'react';
 import { motion } from 'framer-motion';
-import MobileMenuBumpContext from './_MobileMenuBump.context';
-import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
+import styled from 'styled-components';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
+import MobileMenuBumpContext from './_MobileMenuBump.context';
 const ItemContainer = styled.div `
   position: relative;
 

package/build/components/Modal/Modal.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ModalSize = 'sm' | 'md' | 'lg';
+export type ModalSize = 'sm' | 'md' | 'lg';
 export interface ModalProps {
     children: React.ReactNode;
     size?: ModalSize;

package/build/components/Modal/Modal.component.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
 import { motion, AnimatePresence } from 'framer-motion';
+import styled from 'styled-components';
 import { Loader } from '../..';
+import zIndexConstants from '../../constants/zIndex.constants';
 import responsive from '../../responsive/responsive';
 import ModalContext from './_Modal.context';
 import ModalBody from './_ModalBody.component';
 import ModalHeader from './_ModalHeader.component';
-import zIndexConstants from '../../constants/zIndex.constants';
 const getResponsiveSize = (size) => {
     switch (size) {
         case 'sm':

package/build/components/Modal/_ModalHeader.component.js

@@ -1,7 +1,7 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useContext } from 'react';
-import styled from 'styled-components';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled from 'styled-components';
 import ModalContext from './_Modal.context';
 const HeaderContainer = styled.div `
   display: flex;

package/build/components/Notifications/Notifications.component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type NotificationVariant = 'info' | 'success' | 'warn' | 'danger';
+export type NotificationVariant = 'info' | 'success' | 'warn' | 'danger';
 export interface INotification {
     id: string;
     variant: NotificationVariant;

package/build/components/Notifications/Notifications.component.js

@@ -1,10 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import styled from 'styled-components';
 import { Notification, Spacer } from '../..';
-import responsive from '../../responsive/responsive';
 import zIndexConstants from '../../constants/zIndex.constants';
-import { AnimatePresence, motion } from 'framer-motion';
+import responsive from '../../responsive/responsive';
 const NotificationContainer = styled.div `
   position: fixed;
   bottom: 20px;

package/build/components/ProfileImage/ProfileImage.component.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import styled from 'styled-components';
 import IdenticonObj from 'identicon.js';
-import colours from '../../colours/colours';
 import SparkMD5 from 'spark-md5';
+import styled from 'styled-components';
+import colours from '../../colours/colours';
 const ImageContainer = styled.div `
   height: 36px;
   width: 36px;

package/build/components/Spacer/Spacer.component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x';
+export type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x';
 export interface SpacerProps {
     size: SpacerSize;
 }

package/build/components/Table/Table.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TableVariant } from './_Table.context';
-export declare type TableCellVariant = 'tight';
+export type TableCellVariant = 'tight';
 export interface TableProps {
     children: React.ReactNode;
     variant?: TableVariant;

package/build/components/Table/_Table.context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type TableVariant = 'regular' | 'soft';
+export type TableVariant = 'regular' | 'soft';
 export interface TableContextProps {
     variant: TableVariant;
 }

package/build/components/Text/Text.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type TextVariant = 'primary' | 'secondary';
+export type TextVariant = 'primary' | 'secondary';
 export interface TextProps {
     children: React.ReactNode;
     variant?: TextVariant;

package/build/contexts/File.context.js

@@ -1,8 +1,12 @@
 import { createContext } from 'react';
 const FileContext = createContext({
     // eslint-disable-next-line
-    upload: (file) => { throw new Error('ERROR: Upload function must be bound in a context'); },
+    upload: (file) => {
+        throw new Error('ERROR: Upload function must be bound in a context');
+    },
     // eslint-disable-next-line
-    getUrl: (key) => { throw new Error('ERROR: Get URL function must be bound in a context'); },
+    getUrl: (key) => {
+        throw new Error('ERROR: Get URL function must be bound in a context');
+    },
 });
 export default FileContext;

package/build/layouts/Content/Content.layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import ContentHeader from './_ContentHeader.component';
 import ContentContent from './_ContentContent.component';
+import ContentHeader from './_ContentHeader.component';
 const ContentContainer = styled.div ``;
 const ContentLayout = ({ children }) => {
     return React.createElement(ContentContainer, null, children);

package/build/layouts/Content/_ContentContent.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ContentSize = 'sm' | 'md' | 'lg' | 'full';
+export type ContentSize = 'sm' | 'md' | 'lg' | 'full';
 export interface ContentContentActions {
     children: React.ReactNode;
     size?: ContentSize;

package/build/responsive/responsive.d.ts

@@ -1,4 +1,4 @@
-export declare type ScreenSize = 'mobile' | 'tablet' | 'desktop' | 'wide';
+export type ScreenSize = 'mobile' | 'tablet' | 'desktop' | 'wide';
 export interface IStyleBoundFunctions {
     andSmaller: (styled: string | TemplateStringsArray, ...templateArgs: any) => string;
     andLarger: (styled: string | TemplateStringsArray, ...templateArgs: any) => string;

package/build/theme/theme.types.d.ts

@@ -1,5 +1,5 @@
-export declare type ColourVariant = 'primary' | 'secondary' | 'tertiary';
-export declare type Status = 'info' | 'success' | 'warn' | 'danger';
+export type ColourVariant = 'primary' | 'secondary' | 'tertiary';
+export type Status = 'info' | 'success' | 'warn' | 'danger';
 export interface IPalette {
     main: string;
     hover: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.19.12",
+  "version": "1.0.1",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -9,7 +9,8 @@
     "watch": "npm run build -- --watch",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\""
   },
   "author": "Simon Pratt <19920260+simonpratt@users.noreply.github.com>",
   "license": "ISC",
@@ -17,47 +18,52 @@
     "build"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.19.0",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.7",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/react": "^6.1.21",
+    "@dtdot/eslint-config": "^0.0.6",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
+    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/identicon.js": "^2.3.1",
     "@types/qrcode": "^1.5.0",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@types/spark-md5": "^3.0.2",
     "@types/styled-components": "^5.1.26",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
-    "babel-loader": "^8.2.5",
-    "eslint": "^8.23.1",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
+    "babel-loader": "^9.1.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.7.1",
-    "prettier-eslint": "^15.0.1",
+    "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook-addon-styled-component-theme": "^2.0.0",
     "styled-components": "^5.3.5",
-    "typescript": "^4.8.3"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5"
+    "react": "16 - 18",
+    "react-dom": "16 - 18",
+    "styled-components": "5.x"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.11.6",
-    "framer-motion": "^7.3.4",
+    "framer-motion": "^8.0.2",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.5.1",
     "react-popper": "^2.2.5",