From 9fce2cd350de8142db52228319e72da69531e73e Mon Sep 17 00:00:00 2001 From: cmy Date: Sun, 25 Apr 2021 15:48:59 +0800 Subject: [PATCH 01/10] feat: upgrade react-router to v6 in dashboard --- packages/dashboard/package.json | 5 +++-- .../components/DashboardFrame/Navigation.tsx | 21 ++++++++++--------- packages/dashboard/src/pages/routes.tsx | 21 +++++++++---------- 3 files changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index 4425051b0f23..45bdd57e6181 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -24,10 +24,11 @@ "async-call-rpc": "^5.1.0", "classnames": "^2.3.1", "color": "^3.1.3", + "history": "^5.0.0", + "react-router": "^6.0.0-beta.0", + "react-router-dom": "^6.0.0-beta.0", "json-stable-stringify": "^1.0.1", "lodash-es": "^4.17.21", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", "react-use": "^17.2.4", "unstated-next": "^1.1.0", "use-subscription": "^1.5.1" diff --git a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx index b09ae2f44e74..ba263c2fc0c0 100644 --- a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx +++ b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx @@ -13,16 +13,17 @@ import { } from '@material-ui/core' import { Masks, AccountBalanceWallet, ExpandLess, ExpandMore, Settings } from '@material-ui/icons' import { useContext } from 'react' -import { useRouteMatch } from 'react-router' +import { useMatch } from 'react-router' import { Link, LinkProps } from 'react-router-dom' -import { Routes } from '../../pages/routes' +import { RoutePaths } from '../../pages/routes' import { DashboardContext } from './context' import { MaskNotSquareIcon } from '@dimensiondev/icons' import { useDashboardI18N } from '../../locales' import { MaskColorVar } from '@dimensiondev/maskbook-theme' function ListItemLinkUnStyled({ nested, ...props }: LinkProps & ListItemProps & { nested?: boolean; to: string }) { - return + // @ts-ignore + return } const ListItemLink = styled(ListItemLinkUnStyled)(({ theme, nested }) => { @@ -82,22 +83,22 @@ export function Navigation({}: NavigationProps) { )} - + - + {t.wallets()} - {expanded ? : } - - + {!!useMatch(RoutePaths.Wallets) ? : } + + - + @@ -105,7 +106,7 @@ export function Navigation({}: NavigationProps) { - + diff --git a/packages/dashboard/src/pages/routes.tsx b/packages/dashboard/src/pages/routes.tsx index 99c610932d3d..f9b1189bd24f 100644 --- a/packages/dashboard/src/pages/routes.tsx +++ b/packages/dashboard/src/pages/routes.tsx @@ -1,7 +1,7 @@ -import { Route, Switch, Redirect } from 'react-router' +import { Route, Routes, Navigate } from 'react-router' import React, { lazy, Suspense } from 'react' import { DashboardFrame } from '../components/DashboardFrame' -export enum Routes { +export enum RoutePaths { Welcome = '/welcome', Personas = '/personas', Wallets = '/wallets', @@ -21,15 +21,14 @@ const Plugins = lazy(() => import('./Plugins')) export function Pages() { return ( - - } /> - )} exact /> - {/* This is intentional. Wallets has subroutes and we want to make it selected in the subroutes */} - )} /> - )} exact /> - )} exact /> - } /> - + + } /> + )} /> + )} /> + )} /> + )} /> + } /> + ) } From fa3cc623ee0f66fdabc1954ee7784058243f14f4 Mon Sep 17 00:00:00 2001 From: cmy Date: Sun, 25 Apr 2021 15:52:21 +0800 Subject: [PATCH 02/10] fix: ci error --- pnpm-lock.yaml | 54 ++++++++++++++++++++++---------------------------- 1 file changed, 24 insertions(+), 30 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 995c422395ed..d2a484b18a5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -157,10 +157,11 @@ importers: babel-loader: ^8.2.2 classnames: ^2.3.1 color: ^3.1.3 + history: ^5.0.0 + react-router: ^6.0.0-beta.0 + react-router-dom: ^6.0.0-beta.0 json-stable-stringify: ^1.0.1 lodash-es: ^4.17.21 - react-router: ^5.2.0 - react-router-dom: ^5.2.0 react-use: ^17.2.4 snowpack: ^3.5.1 unstated-next: ^1.1.0 @@ -181,11 +182,12 @@ importers: color: 3.1.3 json-stable-stringify: 1.0.1 lodash-es: 4.17.21 - react-router: 5.2.0 - react-router-dom: 5.2.0 react-use: 17.2.4 unstated-next: 1.1.0 use-subscription: 1.5.1 + history: 5.0.0 + react-router: 6.0.0-beta.0_history@5.0.0 + react-router-dom: 6.0.0-beta.0_history@5.0.0 devDependencies: '@babel/core': 7.14.3 '@snowpack/plugin-dotenv': 2.1.0 @@ -269,7 +271,6 @@ importers: '@types/puppeteer': ^5.4.2 '@types/qrcode': ^1.3.5 '@types/react-highlight-words': ^0.16.1 - '@types/react-router-dom': ^5.1.6 '@types/react-virtualized-auto-sizer': ^1.0.0 '@types/react-window': ^1.8.3 '@types/remarkable': ^2.0.1 @@ -342,8 +343,6 @@ importers: react-middle-ellipsis: ^1.2.1 react-refresh: ^0.10.0 react-refresh-typescript: ^2.0.1 - react-router: ^5.2.0 - react-router-dom: ^5.2.0 react-test-renderer: ^17.0.1 react-use: ^17.2.4 react-virtualized-auto-sizer: ^1.0.2 @@ -465,8 +464,6 @@ importers: react-feather: 2.0.9 react-highlight-words: 0.17.0 react-middle-ellipsis: 1.2.1 - react-router: 5.2.0 - react-router-dom: 5.2.0 react-use: 17.2.4 react-virtualized-auto-sizer: 1.0.5 react-window: 1.8.6 @@ -13702,6 +13699,12 @@ packages: value-equal: 1.0.1 dev: false + /history/5.0.0: + resolution: {integrity: sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==} + dependencies: + '@babel/runtime': 7.13.17 + dev: false + /hmac-drbg/1.0.1: resolution: {integrity: sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=} dependencies: @@ -19245,35 +19248,26 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-router-dom/5.2.0: - resolution: {integrity: sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==} + /react-router-dom/6.0.0-beta.0_history@5.0.0: + resolution: {integrity: sha512-36yNNGMT8RB9FRPL9nKJi6HKDkgOakU+o/2hHpSzR6e37gN70MpOU6QQlmif4oAWWBwjyGc3ZNOMFCsFuHUY5w==} peerDependencies: - react: '>=15' + history: '>=5' + react: '>=16.8' + react-dom: '>=16.8' dependencies: - '@babel/runtime': 7.13.10 - history: 4.10.1 - loose-envify: 1.4.0 + history: 5.0.0 prop-types: 15.7.2 - react-router: 5.2.0 - tiny-invariant: 1.1.0 - tiny-warning: 1.0.3 + react-router: 6.0.0-beta.0_history@5.0.0 dev: false - /react-router/5.2.0: - resolution: {integrity: sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==} + /react-router/6.0.0-beta.0_history@5.0.0: + resolution: {integrity: sha512-VgMdfpVcmFQki/LZuLh8E/MNACekDetz4xqft+a6fBZvvJnVqKbLqebF7hyoawGrV1HcO5tVaUang2Og4W2j1Q==} peerDependencies: - react: '>=15' + history: '>=5' + react: '>=16.8' dependencies: - '@babel/runtime': 7.13.10 - history: 4.10.1 - hoist-non-react-statics: 3.3.2 - loose-envify: 1.4.0 - mini-create-react-context: 0.4.1_prop-types@15.7.2 - path-to-regexp: 1.8.0 + history: 5.0.0 prop-types: 15.7.2 - react-is: 16.13.1 - tiny-invariant: 1.1.0 - tiny-warning: 1.0.3 dev: false /react-shallow-renderer/16.14.1: From 7d3eb956818962d9c9bfc4297232aff24e3eae30 Mon Sep 17 00:00:00 2001 From: cmy Date: Sun, 25 Apr 2021 22:38:41 +0800 Subject: [PATCH 03/10] fix: resolve ts error with forward ref --- .../components/DashboardFrame/Navigation.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx index ba263c2fc0c0..e657a88187fb 100644 --- a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx +++ b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx @@ -5,25 +5,32 @@ import { ListItemIcon, Collapse, Theme, - ListItemProps, useMediaQuery, experimentalStyled as styled, listItemClasses, listItemIconClasses, } from '@material-ui/core' import { Masks, AccountBalanceWallet, ExpandLess, ExpandMore, Settings } from '@material-ui/icons' -import { useContext } from 'react' +import { forwardRef, useContext, useMemo } from 'react' import { useMatch } from 'react-router' import { Link, LinkProps } from 'react-router-dom' import { RoutePaths } from '../../pages/routes' import { DashboardContext } from './context' import { MaskNotSquareIcon } from '@dimensiondev/icons' import { useDashboardI18N } from '../../locales' +import type { Omit } from '@material-ui/system' import { MaskColorVar } from '@dimensiondev/maskbook-theme' -function ListItemLinkUnStyled({ nested, ...props }: LinkProps & ListItemProps & { nested?: boolean; to: string }) { - // @ts-ignore - return +const ListItemLinkUnStyled = ({ to, ...props }: { to: string; nested?: boolean }) => { + const renderLink = useMemo( + () => + forwardRef>((linkProps, ref) => ( + + )), + [to], + ) + + return } const ListItemLink = styled(ListItemLinkUnStyled)(({ theme, nested }) => { From 734b3d4efda2f392f048095a606238fdc82f5402 Mon Sep 17 00:00:00 2001 From: cmy Date: Fri, 11 Jun 2021 17:07:17 +0800 Subject: [PATCH 04/10] fix: conflict --- pnpm-lock.yaml | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d2a484b18a5a..3dd2fe34293e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -157,11 +157,10 @@ importers: babel-loader: ^8.2.2 classnames: ^2.3.1 color: ^3.1.3 - history: ^5.0.0 - react-router: ^6.0.0-beta.0 - react-router-dom: ^6.0.0-beta.0 json-stable-stringify: ^1.0.1 lodash-es: ^4.17.21 + react-router: ^6.0.0-beta.0 + react-router-dom: ^6.0.0-beta.0 react-use: ^17.2.4 snowpack: ^3.5.1 unstated-next: ^1.1.0 @@ -182,12 +181,11 @@ importers: color: 3.1.3 json-stable-stringify: 1.0.1 lodash-es: 4.17.21 + react-router: 6.0.0-beta.0_history@5.0.0 + react-router-dom: 6.0.0-beta.0_history@5.0.0 react-use: 17.2.4 unstated-next: 1.1.0 use-subscription: 1.5.1 - history: 5.0.0 - react-router: 6.0.0-beta.0_history@5.0.0 - react-router-dom: 6.0.0-beta.0_history@5.0.0 devDependencies: '@babel/core': 7.14.3 '@snowpack/plugin-dotenv': 2.1.0 @@ -13699,12 +13697,6 @@ packages: value-equal: 1.0.1 dev: false - /history/5.0.0: - resolution: {integrity: sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==} - dependencies: - '@babel/runtime': 7.13.17 - dev: false - /hmac-drbg/1.0.1: resolution: {integrity: sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=} dependencies: @@ -19260,6 +19252,28 @@ packages: react-router: 6.0.0-beta.0_history@5.0.0 dev: false + /react-router-dom/6.0.0-beta.0_history@5.0.0: + resolution: {integrity: sha512-36yNNGMT8RB9FRPL9nKJi6HKDkgOakU+o/2hHpSzR6e37gN70MpOU6QQlmif4oAWWBwjyGc3ZNOMFCsFuHUY5w==} + peerDependencies: + history: '>=5' + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + history: 5.0.0 + prop-types: 15.7.2 + react-router: 6.0.0-beta.0_history@5.0.0 + dev: false + + /react-router/6.0.0-beta.0_history@5.0.0: + resolution: {integrity: sha512-VgMdfpVcmFQki/LZuLh8E/MNACekDetz4xqft+a6fBZvvJnVqKbLqebF7hyoawGrV1HcO5tVaUang2Og4W2j1Q==} + peerDependencies: + history: '>=5' + react: '>=16.8' + dependencies: + history: 5.0.0 + prop-types: 15.7.2 + dev: false + /react-router/6.0.0-beta.0_history@5.0.0: resolution: {integrity: sha512-VgMdfpVcmFQki/LZuLh8E/MNACekDetz4xqft+a6fBZvvJnVqKbLqebF7hyoawGrV1HcO5tVaUang2Og4W2j1Q==} peerDependencies: From 069447e7e07fcd7900644496d864c79f980b349f Mon Sep 17 00:00:00 2001 From: cmy Date: Sat, 12 Jun 2021 01:51:55 +0800 Subject: [PATCH 05/10] feat: patch package --- .../components/DashboardFrame/Navigation.tsx | 43 +- .../@material-ui+core+5.0.0-alpha.34.patch | 500 ++++++ .../@material-ui+system+5.0.0-alpha.34.patch | 1388 +++++++++++++++++ 3 files changed, 1913 insertions(+), 18 deletions(-) create mode 100644 patches/@material-ui+core+5.0.0-alpha.34.patch create mode 100644 patches/@material-ui+system+5.0.0-alpha.34.patch diff --git a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx index e657a88187fb..eee21ddf59dc 100644 --- a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx +++ b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx @@ -9,37 +9,41 @@ import { experimentalStyled as styled, listItemClasses, listItemIconClasses, + ListItemButton, + ListItemButtonProps, + listItemButtonClasses, } from '@material-ui/core' import { Masks, AccountBalanceWallet, ExpandLess, ExpandMore, Settings } from '@material-ui/icons' -import { forwardRef, useContext, useMemo } from 'react' +import { useContext } from 'react' import { useMatch } from 'react-router' import { Link, LinkProps } from 'react-router-dom' -import { RoutePaths } from '../../pages/routes' import { DashboardContext } from './context' import { MaskNotSquareIcon } from '@dimensiondev/icons' import { useDashboardI18N } from '../../locales' -import type { Omit } from '@material-ui/system' import { MaskColorVar } from '@dimensiondev/maskbook-theme' +import { RoutePaths } from '../../pages/routes' -const ListItemLinkUnStyled = ({ to, ...props }: { to: string; nested?: boolean }) => { - const renderLink = useMemo( - () => - forwardRef>((linkProps, ref) => ( - - )), - [to], +const ListItemLinkUnStyled = ({ to, ...props }: LinkProps & ListItemButtonProps & { to: string; nested?: boolean }) => { + //TODO: {...props} will get ref type error, perhaps need mui or react-router fix + return ( + + {props.children} + ) - - return } const ListItemLink = styled(ListItemLinkUnStyled)(({ theme, nested }) => { return { - [`&.${listItemClasses.root}`]: { + [`&.${listItemButtonClasses.root}`]: { color: theme.palette.mode === 'light' ? '' : 'rgba(255,255,255,.8)', paddingLeft: nested ? theme.spacing(9) : theme.spacing(2), }, - [`&.${listItemClasses.selected}`]: { + [`&.${listItemButtonClasses.selected}`]: { color: MaskColorVar.linkText, backgroundColor: 'transparent', position: 'relative', @@ -96,19 +100,22 @@ export function Navigation({}: NavigationProps) { - + {t.wallets()} - {!!useMatch(RoutePaths.Wallets) ? : } + {expanded ? : } - + - + diff --git a/patches/@material-ui+core+5.0.0-alpha.34.patch b/patches/@material-ui+core+5.0.0-alpha.34.patch new file mode 100644 index 000000000000..950619c660cb --- /dev/null +++ b/patches/@material-ui+core+5.0.0-alpha.34.patch @@ -0,0 +1,500 @@ +# generated by patch-package 6.4.7 on 2021-06-12 01:45:02 +# +# command: +# npx patch-package @material-ui/core +# +# declared package: +# @material-ui/core: 5.0.0-alpha.34 +# +diff --git a/node_modules/@material-ui/core/ListItemButton/ListItemButton.d.ts b/node_modules/@material-ui/core/ListItemButton/ListItemButton.d.ts +new file mode 100644 +index 0000000..5996855 +--- /dev/null ++++ b/node_modules/@material-ui/core/ListItemButton/ListItemButton.d.ts +@@ -0,0 +1,84 @@ ++import * as React from 'react'; ++import { SxProps } from '@material-ui/system'; ++import { Theme } from '@material-ui/core/styles'; ++import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; ++import { OverrideProps } from '../OverridableComponent'; ++import { ListItemButtonClasses } from './listItemButtonClasses'; ++ ++interface ListItemButtonBaseProps { ++ /** ++ * Defines the `align-items` style property. ++ * @default 'center' ++ */ ++ alignItems?: 'flex-start' | 'center'; ++ /** ++ * If `true`, the list item is focused during the first mount. ++ * Focus will also be triggered if the value changes from false to true. ++ * @default false ++ */ ++ autoFocus?: boolean; ++ /** ++ * The content of the component if a `ListItemSecondaryAction` is used it must ++ * be the last child. ++ */ ++ children?: React.ReactNode; ++ /** ++ * Override or extend the styles applied to the component. ++ */ ++ classes?: Partial; ++ /** ++ * If `true`, compact vertical padding designed for keyboard and mouse input is used. ++ * The prop defaults to the value inherited from the parent List component. ++ * @default false ++ */ ++ dense?: boolean; ++ /** ++ * If `true`, the component is disabled. ++ * @default false ++ */ ++ disabled?: boolean; ++ /** ++ * If `true`, the left and right padding is removed. ++ * @default false ++ */ ++ disableGutters?: boolean; ++ /** ++ * If `true`, a 1px light border is added to the bottom of the list item. ++ * @default false ++ */ ++ divider?: boolean; ++ /** ++ * Use to apply selected styling. ++ * @default false ++ */ ++ selected?: boolean; ++ /** ++ * The system prop that allows defining system overrides as well as additional CSS styles. ++ */ ++ sx?: SxProps; ++} ++ ++export type ListItemButtonTypeMap

= ++ ExtendButtonBaseTypeMap<{ ++ props: P & ListItemButtonBaseProps; ++ defaultComponent: D; ++ }>; ++ ++/** ++ * ++ * Demos: ++ * ++ * - [Lists](https://material-ui.com/components/lists/) ++ * ++ * API: ++ * ++ * - [ListItemButton API](https://material-ui.com/api/list-item-button/) ++ */ ++declare const ListItemButton: ExtendButtonBase; ++ ++export type ListItemButtonProps< ++ D extends React.ElementType = ListItemButtonTypeMap['defaultComponent'], ++ P = {}, ++> = OverrideProps, D>; ++ ++export default ListItemButton; +diff --git a/node_modules/@material-ui/core/ListItemButton/ListItemButton.js b/node_modules/@material-ui/core/ListItemButton/ListItemButton.js +new file mode 100644 +index 0000000..c959216 +--- /dev/null ++++ b/node_modules/@material-ui/core/ListItemButton/ListItemButton.js +@@ -0,0 +1,245 @@ ++import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; ++import _extends from "@babel/runtime/helpers/esm/extends"; ++import * as React from 'react'; ++import PropTypes from 'prop-types'; ++import clsx from 'clsx'; ++import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; ++import { alpha } from '../styles/colorManipulator'; ++import styled, { rootShouldForwardProp } from '../styles/styled'; ++import useThemeProps from '../styles/useThemeProps'; ++import ButtonBase from '../ButtonBase'; ++import useEnhancedEffect from '../utils/useEnhancedEffect'; ++import useForkRef from '../utils/useForkRef'; ++import ListContext from '../List/ListContext'; ++import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses'; ++import { jsx as _jsx } from "react/jsx-runtime"; ++ ++const overridesResolver = (props, styles) => { ++ const { ++ styleProps ++ } = props; ++ return _extends({}, styles.root, styleProps.dense && styles.dense, styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart, styleProps.divider && styles.divider, !styleProps.disableGutters && styles.gutters); ++}; ++ ++const useUtilityClasses = styleProps => { ++ const { ++ alignItems, ++ classes, ++ dense, ++ disabled, ++ disableGutters, ++ divider, ++ selected ++ } = styleProps; ++ const slots = { ++ root: ['root', dense && 'dense', !disableGutters && 'gutters', divider && 'divider', disabled && 'disabled', alignItems === 'flex-start' && 'alignItemsFlexStart', selected && 'selected'] ++ }; ++ const composedClasses = composeClasses(slots, getListItemButtonUtilityClass, classes); ++ return _extends({}, classes, composedClasses); ++}; ++ ++const ListItemButtonRoot = styled(ButtonBase, { ++ shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes', ++ name: 'MuiListItemButton', ++ slot: 'Root', ++ overridesResolver ++})(({ ++ theme, ++ styleProps ++}) => _extends({ ++ display: 'flex', ++ flexGrow: 1, ++ justifyContent: 'flex-start', ++ alignItems: 'center', ++ position: 'relative', ++ textDecoration: 'none', ++ boxSizing: 'border-box', ++ textAlign: 'left', ++ paddingTop: 8, ++ paddingBottom: 8, ++ transition: theme.transitions.create('background-color', { ++ duration: theme.transitions.duration.shortest ++ }), ++ '&:hover': { ++ textDecoration: 'none', ++ backgroundColor: theme.palette.action.hover, ++ // Reset on touch devices, it doesn't add specificity ++ '@media (hover: none)': { ++ backgroundColor: 'transparent' ++ } ++ }, ++ [`&.${listItemButtonClasses.selected}`]: { ++ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity), ++ [`&.${listItemButtonClasses.focusVisible}`]: { ++ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity) ++ } ++ }, ++ [`&.${listItemButtonClasses.selected}:hover`]: { ++ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity), ++ // Reset on touch devices, it doesn't add specificity ++ '@media (hover: none)': { ++ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity) ++ } ++ }, ++ [`&.${listItemButtonClasses.focusVisible}`]: { ++ backgroundColor: theme.palette.action.focus ++ }, ++ [`&.${listItemButtonClasses.disabled}`]: { ++ opacity: theme.palette.action.disabledOpacity ++ } ++}, styleProps.divider && { ++ borderBottom: `1px solid ${theme.palette.divider}`, ++ backgroundClip: 'padding-box' ++}, styleProps.alignItems === 'flex-start' && { ++ alignItems: 'flex-start' ++}, !styleProps.disableGutters && { ++ paddingLeft: 16, ++ paddingRight: 16 ++}, styleProps.dense && { ++ paddingTop: 4, ++ paddingBottom: 4 ++})); ++const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) { ++ const props = useThemeProps({ ++ props: inProps, ++ name: 'MuiListItemButton' ++ }); ++ ++ const { ++ alignItems = 'center', ++ autoFocus = false, ++ component = 'div', ++ children, ++ dense = false, ++ disableGutters = false, ++ divider = false, ++ focusVisibleClassName, ++ selected = false ++ } = props, ++ other = _objectWithoutPropertiesLoose(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"]); ++ ++ const context = React.useContext(ListContext); ++ const childContext = { ++ dense: dense || context.dense || false, ++ alignItems, ++ disableGutters ++ }; ++ const listItemRef = React.useRef(null); ++ useEnhancedEffect(() => { ++ if (autoFocus) { ++ if (listItemRef.current) { ++ listItemRef.current.focus(); ++ } else if (process.env.NODE_ENV !== 'production') { ++ console.error('Material-UI: Unable to set focus to a ListItem whose component has not been rendered.'); ++ } ++ } ++ }, [autoFocus]); ++ ++ const styleProps = _extends({}, props, { ++ alignItems, ++ dense: childContext.dense, ++ disableGutters, ++ divider, ++ selected ++ }); ++ ++ const classes = useUtilityClasses(styleProps); ++ const handleRef = useForkRef(listItemRef, ref); ++ return /*#__PURE__*/_jsx(ListContext.Provider, { ++ value: childContext, ++ children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({ ++ ref: handleRef, ++ component: component, ++ focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName), ++ styleProps: styleProps ++ }, other, { ++ classes: classes, ++ children: children ++ })) ++ }); ++}); ++process.env.NODE_ENV !== "production" ? ListItemButton.propTypes ++/* remove-proptypes */ ++= { ++ // ----------------------------- Warning -------------------------------- ++ // | These PropTypes are generated from the TypeScript type definitions | ++ // | To update them edit the d.ts file and run "yarn proptypes" | ++ // ---------------------------------------------------------------------- ++ ++ /** ++ * Defines the `align-items` style property. ++ * @default 'center' ++ */ ++ alignItems: PropTypes.oneOf(['center', 'flex-start']), ++ ++ /** ++ * If `true`, the list item is focused during the first mount. ++ * Focus will also be triggered if the value changes from false to true. ++ * @default false ++ */ ++ autoFocus: PropTypes.bool, ++ ++ /** ++ * The content of the component if a `ListItemSecondaryAction` is used it must ++ * be the last child. ++ */ ++ children: PropTypes.node, ++ ++ /** ++ * Override or extend the styles applied to the component. ++ */ ++ classes: PropTypes.object, ++ ++ /** ++ * The component used for the root node. ++ * Either a string to use a HTML element or a component. ++ */ ++ component: PropTypes.elementType, ++ ++ /** ++ * If `true`, compact vertical padding designed for keyboard and mouse input is used. ++ * The prop defaults to the value inherited from the parent List component. ++ * @default false ++ */ ++ dense: PropTypes.bool, ++ ++ /** ++ * If `true`, the component is disabled. ++ * @default false ++ */ ++ disabled: PropTypes.bool, ++ ++ /** ++ * If `true`, the left and right padding is removed. ++ * @default false ++ */ ++ disableGutters: PropTypes.bool, ++ ++ /** ++ * If `true`, a 1px light border is added to the bottom of the list item. ++ * @default false ++ */ ++ divider: PropTypes.bool, ++ ++ /** ++ * This prop can help identify which element has keyboard focus. ++ * The class name will be applied when the element gains the focus through keyboard interaction. ++ * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). ++ * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md). ++ * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components ++ * if needed. ++ */ ++ focusVisibleClassName: PropTypes.string, ++ ++ /** ++ * Use to apply selected styling. ++ * @default false ++ */ ++ selected: PropTypes.bool, ++ ++ /** ++ * The system prop that allows defining system overrides as well as additional CSS styles. ++ */ ++ sx: PropTypes.object ++} : void 0; ++export default ListItemButton; +\ No newline at end of file +diff --git a/node_modules/@material-ui/core/ListItemButton/index.d.ts b/node_modules/@material-ui/core/ListItemButton/index.d.ts +new file mode 100644 +index 0000000..57fdf7f +--- /dev/null ++++ b/node_modules/@material-ui/core/ListItemButton/index.d.ts +@@ -0,0 +1,5 @@ ++export { default } from './ListItemButton'; ++export * from './ListItemButton'; ++ ++export { default as listItemButtonClasses } from './listItemButtonClasses'; ++export * from './listItemButtonClasses'; +diff --git a/node_modules/@material-ui/core/ListItemButton/index.js b/node_modules/@material-ui/core/ListItemButton/index.js +new file mode 100644 +index 0000000..762c1fe +--- /dev/null ++++ b/node_modules/@material-ui/core/ListItemButton/index.js +@@ -0,0 +1,3 @@ ++export { default } from './ListItemButton'; ++export { default as listItemButtonClasses } from './listItemButtonClasses'; ++export * from './listItemButtonClasses'; +\ No newline at end of file +diff --git a/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.d.ts b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.d.ts +new file mode 100644 +index 0000000..3eac17f +--- /dev/null ++++ b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.d.ts +@@ -0,0 +1,22 @@ ++export interface ListItemButtonClasses { ++ /** Styles applied to the root element. */ ++ root: string; ++ /** Pseudo-class applied to the `component`'s `focusVisibleClassName` prop. */ ++ focusVisible: string; ++ /** Styles applied to the component element if dense. */ ++ dense: string; ++ /** Styles applied to the component element if `alignItems="flex-start"`. */ ++ alignItemsFlexStart: string; ++ /** Pseudo-class applied to the inner `component` element if `disabled={true}`. */ ++ disabled: string; ++ /** Styles applied to the inner `component` element if `divider={true}`. */ ++ divider: string; ++ /** Styles applied to the inner `component` element unless `disableGutters={true}`. */ ++ gutters: string; ++ /** Pseudo-class applied to the root element if `selected={true}`. */ ++ selected: string; ++} ++export declare type ListItemButtonClassKey = keyof ListItemButtonClasses; ++export declare function getListItemButtonUtilityClass(slot: string): string; ++declare const listItemButtonClasses: ListItemButtonClasses; ++export default listItemButtonClasses; +diff --git a/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.js b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.js +new file mode 100644 +index 0000000..0daa70f +--- /dev/null ++++ b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.js +@@ -0,0 +1,6 @@ ++import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; ++export function getListItemButtonUtilityClass(slot) { ++ return generateUtilityClass('MuiListItemButton', slot); ++} ++const listItemButtonClasses = generateUtilityClasses('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']); ++export default listItemButtonClasses; +\ No newline at end of file +diff --git a/node_modules/@material-ui/core/index.d.ts b/node_modules/@material-ui/core/index.d.ts +index 18dbae0..3b63196 100644 +--- a/node_modules/@material-ui/core/index.d.ts ++++ b/node_modules/@material-ui/core/index.d.ts +@@ -264,6 +264,9 @@ export * from './List'; + export { default as ListItem } from './ListItem'; + export * from './ListItem'; + ++export { default as ListItemButton } from './ListItemButton'; ++export * from './ListItemButton'; ++ + export { default as ListItemAvatar } from './ListItemAvatar'; + export * from './ListItemAvatar'; + +diff --git a/node_modules/@material-ui/core/index.js b/node_modules/@material-ui/core/index.js +index 239a738..39a60e0 100644 +--- a/node_modules/@material-ui/core/index.js ++++ b/node_modules/@material-ui/core/index.js +@@ -135,6 +135,8 @@ export { default as List } from './List'; + export * from './List'; + export { default as ListItem } from './ListItem'; + export * from './ListItem'; ++export { default as ListItemButton } from './ListItemButton'; ++export * from './ListItemButton'; + export { default as ListItemAvatar } from './ListItemAvatar'; + export * from './ListItemAvatar'; + export { default as ListItemIcon } from './ListItemIcon'; +diff --git a/node_modules/@material-ui/core/legacy/index.js b/node_modules/@material-ui/core/legacy/index.js +index 239a738..39a60e0 100644 +--- a/node_modules/@material-ui/core/legacy/index.js ++++ b/node_modules/@material-ui/core/legacy/index.js +@@ -135,6 +135,8 @@ export { default as List } from './List'; + export * from './List'; + export { default as ListItem } from './ListItem'; + export * from './ListItem'; ++export { default as ListItemButton } from './ListItemButton'; ++export * from './ListItemButton'; + export { default as ListItemAvatar } from './ListItemAvatar'; + export * from './ListItemAvatar'; + export { default as ListItemIcon } from './ListItemIcon'; +diff --git a/node_modules/@material-ui/core/modern/index.js b/node_modules/@material-ui/core/modern/index.js +index 239a738..39a60e0 100644 +--- a/node_modules/@material-ui/core/modern/index.js ++++ b/node_modules/@material-ui/core/modern/index.js +@@ -135,6 +135,8 @@ export { default as List } from './List'; + export * from './List'; + export { default as ListItem } from './ListItem'; + export * from './ListItem'; ++export { default as ListItemButton } from './ListItemButton'; ++export * from './ListItemButton'; + export { default as ListItemAvatar } from './ListItemAvatar'; + export * from './ListItemAvatar'; + export { default as ListItemIcon } from './ListItemIcon'; +diff --git a/node_modules/@material-ui/core/styles/styled.d.ts b/node_modules/@material-ui/core/styles/styled.d.ts +new file mode 100644 +index 0000000..928ed5f +--- /dev/null ++++ b/node_modules/@material-ui/core/styles/styled.d.ts +@@ -0,0 +1,13 @@ ++import { CreateMUIStyled } from '@material-ui/system'; ++import { Theme } from './createTheme'; ++ ++/** ++ * Custom styled utility that has a default MUI theme. ++ * ++ * @param tag HTML tag or component that should serve as base. ++ * @param options Styled options for the created component. ++ * @returns React component that has styles attached to it. ++ */ ++declare const styled: CreateMUIStyled; ++ ++export default styled; +diff --git a/node_modules/@material-ui/core/styles/styled.js b/node_modules/@material-ui/core/styles/styled.js +new file mode 100644 +index 0000000..f539618 +--- /dev/null ++++ b/node_modules/@material-ui/core/styles/styled.js +@@ -0,0 +1,9 @@ ++import { createStyled, shouldForwardProp } from '@material-ui/system'; ++import defaultTheme from './defaultTheme'; ++export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes'; ++export const slotShouldForwardProp = shouldForwardProp; ++const styled = createStyled({ ++ defaultTheme, ++ rootShouldForwardProp ++}); ++export default styled; +\ No newline at end of file diff --git a/patches/@material-ui+system+5.0.0-alpha.34.patch b/patches/@material-ui+system+5.0.0-alpha.34.patch new file mode 100644 index 000000000000..0e9fce3d61b7 --- /dev/null +++ b/patches/@material-ui+system+5.0.0-alpha.34.patch @@ -0,0 +1,1388 @@ +# generated by patch-package 6.4.7 on 2021-06-12 01:44:38 +# +# command: +# npx patch-package @material-ui/system +# +# declared package: +# @material-ui/system: 5.0.0-alpha.34 +# +diff --git a/node_modules/@material-ui/system/createStyled.d.ts b/node_modules/@material-ui/system/createStyled.d.ts +new file mode 100644 +index 0000000..ffe8283 +--- /dev/null ++++ b/node_modules/@material-ui/system/createStyled.d.ts +@@ -0,0 +1,244 @@ ++import * as React from 'react'; ++import * as CSS from 'csstype'; ++import { SxProps } from './styleFunctionSx'; ++import { Theme as DefaultTheme } from './createTheme'; ++ ++export interface SerializedStyles { ++ name: string; ++ styles: string; ++ map?: string; ++ next?: SerializedStyles; ++} ++ ++export type CSSProperties = CSS.PropertiesFallback; ++export type CSSPropertiesWithMultiValues = { ++ [K in keyof CSSProperties]: CSSProperties[K] | Array>; ++}; ++export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject }; ++ ++export interface CSSOthersObject { ++ [propertiesName: string]: unknown | CSSInterpolation; ++} ++export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject }; ++ ++export interface ArrayCSSInterpolation extends Array {} ++ ++export interface CSSOthersObjectForCSSObject { ++ [propertiesName: string]: CSSInterpolation; ++} ++ ++export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {} ++ ++export interface ComponentSelector { ++ __emotion_styles: any; ++} ++ ++export type Keyframes = { ++ name: string; ++ styles: string; ++ anim: number; ++ toString: () => string; ++} & string; ++ ++export type Equal = A extends B ? (B extends A ? T : F) : F; ++ ++export type InterpolationPrimitive = ++ | null ++ | undefined ++ | boolean ++ | number ++ | string ++ | ComponentSelector ++ | Keyframes ++ | SerializedStyles ++ | CSSObject; ++ ++export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation; ++ ++export interface FunctionInterpolation { ++ (props: Props): Interpolation; ++} ++ ++export interface ArrayInterpolation extends Array> {} ++ ++export type Interpolation = ++ | InterpolationPrimitive ++ | ArrayInterpolation ++ | FunctionInterpolation; ++ ++/** ++ * @desc Utility type for getting props type of React component. ++ * It takes `defaultProps` into an account - making props with defaults optional. ++ */ ++export type PropsOf> = ++ JSX.LibraryManagedAttributes>; ++ ++export type Overwrapped = Pick>; ++ ++export interface StyledComponent ++ extends React.FunctionComponent, ++ ComponentSelector { ++ /** ++ * @desc this method is type-unsafe ++ */ ++ withComponent( ++ tag: NewTag, ++ ): StyledComponent; ++ withComponent>( ++ tag: Tag, ++ ): StyledComponent, StyleProps, Theme>; ++} ++ ++export interface StyledOptions { ++ label?: string; ++ shouldForwardProp?(propName: PropertyKey): boolean; ++ target?: string; ++} ++ ++export interface MuiStyledOptions { ++ name?: string; ++ slot?: string; ++ overridesResolver?: (props: any, styles: Record) => Record; ++ skipVariantsResolver?: boolean; ++ skipSx?: boolean; ++} ++ ++/** Same as StyledOptions but shouldForwardProp must be a type guard */ ++export interface FilteringStyledOptions { ++ label?: string; ++ shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps; ++ target?: string; ++} ++ ++/** ++ * @typeparam ComponentProps Props which will be included when withComponent is called ++ * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called ++ */ ++export interface CreateStyledComponent< ++ ComponentProps extends {}, ++ SpecificComponentProps extends {} = {}, ++ JSXProps extends {} = {}, ++> { ++ /** ++ * @typeparam AdditionalProps Additional props to add to your styled component ++ */ ++ ( ++ ...styles: Array< ++ Interpolation< ++ ComponentProps & SpecificComponentProps & AdditionalProps & { theme: DefaultTheme } ++ > ++ > ++ ): StyledComponent; ++ ++ ( ++ template: TemplateStringsArray, ++ ...styles: Array< ++ Interpolation ++ > ++ ): StyledComponent; ++ ++ /** ++ * @typeparam AdditionalProps Additional props to add to your styled component ++ */ ++ ( ++ template: TemplateStringsArray, ++ ...styles: Array< ++ Interpolation< ++ ComponentProps & SpecificComponentProps & AdditionalProps & { theme: DefaultTheme } ++ > ++ > ++ ): StyledComponent; ++} ++ ++export interface CreateMUIStyled { ++ < ++ C extends React.ComponentClass>, ++ ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps, ++ >( ++ component: C, ++ options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions, ++ ): CreateStyledComponent< ++ Pick, ForwardedProps> & { ++ theme?: Theme; ++ as?: React.ElementType; ++ sx?: SxProps; ++ }, ++ {}, ++ { ++ ref?: React.Ref>; ++ } ++ >; ++ ++ >>( ++ component: C, ++ options?: StyledOptions & MuiStyledOptions, ++ ): CreateStyledComponent< ++ PropsOf & { ++ theme?: Theme; ++ as?: React.ElementType; ++ sx?: SxProps; ++ }, ++ {}, ++ { ++ ref?: React.Ref>; ++ } ++ >; ++ ++ < ++ C extends React.JSXElementConstructor>, ++ ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps, ++ >( ++ component: C, ++ options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions, ++ ): CreateStyledComponent< ++ Pick, ForwardedProps> & { ++ theme?: Theme; ++ as?: React.ElementType; ++ sx?: SxProps; ++ } ++ >; ++ ++ >>( ++ component: C, ++ options?: StyledOptions & MuiStyledOptions, ++ ): CreateStyledComponent< ++ PropsOf & { ++ theme?: Theme; ++ as?: React.ElementType; ++ sx?: SxProps; ++ } ++ >; ++ ++ < ++ Tag extends keyof JSX.IntrinsicElements, ++ ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag], ++ >( ++ tag: Tag, ++ options: FilteringStyledOptions & MuiStyledOptions, ++ ): CreateStyledComponent< ++ { ++ theme?: Theme; ++ as?: React.ElementType; ++ sx?: SxProps; ++ }, ++ Pick ++ >; ++ ++ ( ++ tag: Tag, ++ options?: StyledOptions & MuiStyledOptions, ++ ): CreateStyledComponent< ++ { ++ theme?: Theme; ++ as?: React.ElementType; ++ sx?: SxProps; ++ }, ++ JSX.IntrinsicElements[Tag] ++ >; ++} ++ ++export default function createStyled(options?: { ++ defaultTheme?: T; ++ rootShouldForwardProp?: (prop: string) => boolean; ++ slotShouldForwardProp?: (prop: string) => boolean; ++}): CreateMUIStyled; +diff --git a/node_modules/@material-ui/system/createStyled.js b/node_modules/@material-ui/system/createStyled.js +new file mode 100644 +index 0000000..923a28b +--- /dev/null ++++ b/node_modules/@material-ui/system/createStyled.js +@@ -0,0 +1,195 @@ ++"use strict"; ++ ++var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); ++ ++Object.defineProperty(exports, "__esModule", { ++ value: true ++}); ++exports.default = createStyled; ++exports.systemDefaultTheme = exports.shouldForwardProp = void 0; ++ ++var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); ++ ++var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); ++ ++var _styledEngine = _interopRequireDefault(require("@material-ui/styled-engine")); ++ ++var _createTheme = _interopRequireDefault(require("./createTheme")); ++ ++var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx")); ++ ++var _propsToClassKey = _interopRequireDefault(require("./propsToClassKey")); ++ ++function isEmpty(obj) { ++ return Object.keys(obj).length === 0; ++} ++ ++const getStyleOverrides = (name, theme) => { ++ if (theme.components && theme.components[name] && theme.components[name].styleOverrides) { ++ return theme.components[name].styleOverrides; ++ } ++ ++ return null; ++}; ++ ++const getVariantStyles = (name, theme) => { ++ let variants = []; ++ ++ if (theme && theme.components && theme.components[name] && theme.components[name].variants) { ++ variants = theme.components[name].variants; ++ } ++ ++ const variantsStyles = {}; ++ variants.forEach(definition => { ++ const key = (0, _propsToClassKey.default)(definition.props); ++ variantsStyles[key] = definition.style; ++ }); ++ return variantsStyles; ++}; ++ ++const variantsResolver = (props, styles, theme, name) => { ++ var _theme$components, _theme$components$nam; ++ ++ const { ++ styleProps = {} ++ } = props; ++ let variantsStyles = {}; ++ const themeVariants = theme === null || theme === void 0 ? void 0 : (_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.variants; ++ ++ if (themeVariants) { ++ themeVariants.forEach(themeVariant => { ++ let isMatch = true; ++ Object.keys(themeVariant.props).forEach(key => { ++ if (styleProps[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) { ++ isMatch = false; ++ } ++ }); ++ ++ if (isMatch) { ++ variantsStyles = (0, _extends2.default)({}, variantsStyles, styles[(0, _propsToClassKey.default)(themeVariant.props)]); ++ } ++ }); ++ } ++ ++ return variantsStyles; ++}; ++ ++const shouldForwardProp = prop => prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as'; ++ ++exports.shouldForwardProp = shouldForwardProp; ++const systemDefaultTheme = (0, _createTheme.default)(); ++exports.systemDefaultTheme = systemDefaultTheme; ++ ++const lowercaseFirstLetter = string => { ++ return string.charAt(0).toLowerCase() + string.slice(1); ++}; ++ ++function createStyled(input = {}) { ++ const { ++ defaultTheme = systemDefaultTheme, ++ rootShouldForwardProp = shouldForwardProp, ++ slotShouldForwardProp = shouldForwardProp ++ } = input; ++ return (tag, inputOptions = {}) => { ++ const { ++ name: componentName, ++ slot: componentSlot, ++ skipVariantsResolver: inputSkipVariantsResolver, ++ skipSx: inputSkipSx, ++ overridesResolver ++ } = inputOptions, ++ options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots. ++ ++ const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false; ++ const skipSx = inputSkipSx || false; ++ let displayName; ++ let className; ++ ++ if (componentName) { ++ displayName = `${componentName}${componentSlot || ''}`; ++ className = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`; ++ } ++ ++ const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({}, !componentSlot || componentSlot === 'Root' ? { ++ shouldForwardProp: rootShouldForwardProp ++ } : { ++ shouldForwardProp: slotShouldForwardProp ++ }, { ++ label: className || componentName || '' ++ }, options)); ++ ++ const muiStyledResolver = (styleArg, ...expressions) => { ++ const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => { ++ return typeof stylesArg === 'function' ? (_ref) => { ++ let { ++ theme: themeInput ++ } = _ref, ++ other = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["theme"]); ++ return stylesArg((0, _extends2.default)({ ++ theme: isEmpty(themeInput) ? defaultTheme : themeInput ++ }, other)); ++ } : stylesArg; ++ }) : []; ++ let transformedStyleArg = styleArg; ++ ++ if (componentName && overridesResolver) { ++ expressionsWithDefaultTheme.push(props => { ++ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; ++ const styleOverrides = getStyleOverrides(componentName, theme); ++ ++ if (styleOverrides) { ++ return overridesResolver(props, styleOverrides); ++ } ++ ++ return null; ++ }); ++ } ++ ++ if (componentName && overridesResolver && !skipVariantsResolver) { ++ expressionsWithDefaultTheme.push(props => { ++ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; ++ return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName); ++ }); ++ } ++ ++ if (!skipSx) { ++ expressionsWithDefaultTheme.push(props => { ++ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; ++ return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, { ++ theme ++ })); ++ }); ++ } ++ ++ const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length; ++ ++ if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) { ++ const placeholders = new Array(numOfCustomFnsApplied).fill(''); // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles. ++ ++ transformedStyleArg = [...styleArg, ...placeholders]; ++ transformedStyleArg.raw = [...styleArg.raw, ...placeholders]; ++ } else if (typeof styleArg === 'function') { ++ // If the type is function, we need to define the default theme. ++ transformedStyleArg = (_ref2) => { ++ let { ++ theme: themeInput ++ } = _ref2, ++ other = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["theme"]); ++ return styleArg((0, _extends2.default)({ ++ theme: isEmpty(themeInput) ? defaultTheme : themeInput ++ }, other)); ++ }; ++ } ++ ++ const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme); ++ ++ if (displayName) { ++ Component.displayName = displayName; ++ } ++ ++ return Component; ++ }; ++ ++ return muiStyledResolver; ++ }; ++} +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/createTheme/createBreakpoints.d.ts b/node_modules/@material-ui/system/createTheme/createBreakpoints.d.ts +new file mode 100644 +index 0000000..6389985 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/createBreakpoints.d.ts +@@ -0,0 +1,28 @@ ++import { OverridableStringUnion } from '@material-ui/types'; ++ ++export interface BreakpointOverrides {} ++ ++export type Breakpoint = OverridableStringUnion< ++ 'xs' | 'sm' | 'md' | 'lg' | 'xl', ++ BreakpointOverrides ++>; ++export type BreakpointValues = { [key in Breakpoint]: number }; ++export const keys: Breakpoint[]; ++ ++export interface Breakpoints { ++ keys: Breakpoint[]; ++ values: BreakpointValues; ++ up: (key: Breakpoint | number) => string; ++ down: (key: Breakpoint | number) => string; ++ between: (start: Breakpoint | number, end: Breakpoint | number) => string; ++ only: (key: Breakpoint) => string; ++} ++ ++export type BreakpointsOptions = Partial< ++ { ++ unit: string; ++ step: number; ++ } & Breakpoints ++>; ++ ++export default function createBreakpoints(options: BreakpointsOptions): Breakpoints; +diff --git a/node_modules/@material-ui/system/createTheme/createBreakpoints.js b/node_modules/@material-ui/system/createTheme/createBreakpoints.js +new file mode 100644 +index 0000000..02638e7 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/createBreakpoints.js +@@ -0,0 +1,70 @@ ++"use strict"; ++ ++var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); ++ ++Object.defineProperty(exports, "__esModule", { ++ value: true ++}); ++exports.default = createBreakpoints; ++exports.breakpointKeys = void 0; ++ ++var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); ++ ++var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); ++ ++// Sorted ASC by size. That's important. ++// It can't be configured as it's used statically for propTypes. ++const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification. ++ ++exports.breakpointKeys = breakpointKeys; ++ ++function createBreakpoints(breakpoints) { ++ const { ++ // The breakpoint **start** at this value. ++ // For instance with the first breakpoint xs: [xs, sm). ++ values = { ++ xs: 0, ++ sm: 600, ++ md: 960, ++ lg: 1280, ++ xl: 1920 ++ }, ++ unit = 'px', ++ step = 5 ++ } = breakpoints, ++ other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, ["values", "unit", "step"]); ++ const keys = Object.keys(values); ++ ++ function up(key) { ++ const value = typeof values[key] === 'number' ? values[key] : key; ++ return `@media (min-width:${value}${unit})`; ++ } ++ ++ function down(key) { ++ const value = typeof values[key] === 'number' ? values[key] : key; ++ return `@media (max-width:${value - step / 100}${unit})`; ++ } ++ ++ function between(start, end) { ++ const endIndex = keys.indexOf(end); ++ return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`; ++ } ++ ++ function only(key) { ++ if (keys.indexOf(key) + 1 < keys.length) { ++ return between(key, keys[keys.indexOf(key) + 1]); ++ } ++ ++ return up(key); ++ } ++ ++ return (0, _extends2.default)({ ++ keys, ++ values, ++ up, ++ down, ++ between, ++ only, ++ unit ++ }, other); ++} +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/createTheme/createSpacing.d.ts b/node_modules/@material-ui/system/createTheme/createSpacing.d.ts +new file mode 100644 +index 0000000..e754383 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/createSpacing.d.ts +@@ -0,0 +1,10 @@ ++export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray; ++export declare type SpacingArgument = number | string; ++export interface Spacing { ++ (): string; ++ (value: number): string; ++ (topBottom: SpacingArgument, rightLeft: SpacingArgument): string; ++ (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string; ++ (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string; ++} ++export default function createSpacing(spacingInput?: SpacingOptions): Spacing; +diff --git a/node_modules/@material-ui/system/createTheme/createSpacing.js b/node_modules/@material-ui/system/createTheme/createSpacing.js +new file mode 100644 +index 0000000..44dcb89 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/createSpacing.js +@@ -0,0 +1,40 @@ ++"use strict"; ++ ++Object.defineProperty(exports, "__esModule", { ++ value: true ++}); ++exports.default = createSpacing; ++ ++var _spacing = require("../spacing"); ++ ++/* tslint:enable:unified-signatures */ ++function createSpacing(spacingInput = 8) { ++ // Already transformed. ++ if (spacingInput.mui) { ++ return spacingInput; ++ } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. ++ // Smaller components, such as icons, can align to a 4dp grid. ++ // https://material.io/design/layout/understanding-layout.html#usage ++ ++ ++ const transform = (0, _spacing.createUnarySpacing)({ ++ spacing: spacingInput ++ }); ++ ++ const spacing = (...argsInput) => { ++ if (process.env.NODE_ENV !== 'production') { ++ if (!(argsInput.length <= 4)) { ++ console.error(`Material-UI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`); ++ } ++ } ++ ++ const args = argsInput.length === 0 ? [1] : argsInput; ++ return args.map(argument => { ++ const output = transform(argument); ++ return typeof output === 'number' ? `${output}px` : output; ++ }).join(' '); ++ }; ++ ++ spacing.mui = true; ++ return spacing; ++} +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/createTheme/createTheme.d.ts b/node_modules/@material-ui/system/createTheme/createTheme.d.ts +new file mode 100644 +index 0000000..9b9d1c2 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/createTheme.d.ts +@@ -0,0 +1,43 @@ ++import { Breakpoints, BreakpointsOptions } from './createBreakpoints'; ++import { Shape, ShapeOptions } from './shape'; ++import { Spacing, SpacingOptions } from './createSpacing'; ++ ++export { Breakpoint, BreakpointOverrides } from './createBreakpoints'; ++ ++export type Direction = 'ltr' | 'rtl'; ++ ++export interface ThemeOptions { ++ shape?: ShapeOptions; ++ breakpoints?: BreakpointsOptions; ++ direction?: Direction; ++ mixins?: unknown; ++ palette?: Record; ++ shadows?: unknown; ++ spacing?: SpacingOptions; ++ transitions?: unknown; ++ components?: Record; ++ typography?: unknown; ++ zIndex?: Record; ++} ++ ++export interface Theme { ++ shape: Shape; ++ breakpoints: Breakpoints; ++ direction: Direction; ++ palette: Record & { mode: 'light' | 'dark' }; ++ shadows?: unknown; ++ spacing: Spacing; ++ transitions?: unknown; ++ components?: Record; ++ mixins?: unknown; ++ typography?: unknown; ++ zIndex?: unknown; ++} ++ ++/** ++ * Generate a theme base on the options received. ++ * @param options Takes an incomplete theme object and adds the missing parts. ++ * @param args Deep merge the arguments with the about to be returned theme. ++ * @returns A complete, ready to use theme object. ++ */ ++export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme; +diff --git a/node_modules/@material-ui/system/createTheme/createTheme.js b/node_modules/@material-ui/system/createTheme/createTheme.js +new file mode 100644 +index 0000000..2caf071 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/createTheme.js +@@ -0,0 +1,50 @@ ++"use strict"; ++ ++var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); ++ ++Object.defineProperty(exports, "__esModule", { ++ value: true ++}); ++exports.default = void 0; ++ ++var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); ++ ++var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); ++ ++var _utils = require("@material-ui/utils"); ++ ++var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints")); ++ ++var _shape = _interopRequireDefault(require("./shape")); ++ ++var _createSpacing = _interopRequireDefault(require("./createSpacing")); ++ ++function createTheme(options = {}, ...args) { ++ const { ++ breakpoints: breakpointsInput = {}, ++ palette: paletteInput = {}, ++ spacing: spacingInput, ++ shape: shapeInput = {} ++ } = options, ++ other = (0, _objectWithoutPropertiesLoose2.default)(options, ["breakpoints", "palette", "spacing", "shape"]); ++ const breakpoints = (0, _createBreakpoints.default)(breakpointsInput); ++ const spacing = (0, _createSpacing.default)(spacingInput); ++ let muiTheme = (0, _utils.deepmerge)({ ++ breakpoints, ++ direction: 'ltr', ++ components: {}, ++ // Inject component definitions. ++ palette: (0, _extends2.default)({ ++ mode: 'light' ++ }, paletteInput), ++ spacing, ++ shape: (0, _extends2.default)({}, _shape.default, { ++ shapeInput ++ }) ++ }, other); ++ muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme); ++ return muiTheme; ++} ++ ++var _default = createTheme; ++exports.default = _default; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/createTheme/index.d.ts b/node_modules/@material-ui/system/createTheme/index.d.ts +new file mode 100644 +index 0000000..def7508 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/index.d.ts +@@ -0,0 +1,2 @@ ++export { default } from './createTheme'; ++export * from './createTheme'; +diff --git a/node_modules/@material-ui/system/createTheme/index.js b/node_modules/@material-ui/system/createTheme/index.js +new file mode 100644 +index 0000000..fc2a1ef +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/index.js +@@ -0,0 +1,15 @@ ++"use strict"; ++ ++var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); ++ ++Object.defineProperty(exports, "__esModule", { ++ value: true ++}); ++Object.defineProperty(exports, "default", { ++ enumerable: true, ++ get: function () { ++ return _createTheme.default; ++ } ++}); ++ ++var _createTheme = _interopRequireDefault(require("./createTheme")); +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/createTheme/shape.d.ts b/node_modules/@material-ui/system/createTheme/shape.d.ts +new file mode 100644 +index 0000000..073fb7b +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/shape.d.ts +@@ -0,0 +1,9 @@ ++export interface Shape { ++ borderRadius: number | string; ++} ++ ++export type ShapeOptions = Partial; ++ ++declare const shape: Shape; ++ ++export default shape; +diff --git a/node_modules/@material-ui/system/createTheme/shape.js b/node_modules/@material-ui/system/createTheme/shape.js +new file mode 100644 +index 0000000..c2352f1 +--- /dev/null ++++ b/node_modules/@material-ui/system/createTheme/shape.js +@@ -0,0 +1,11 @@ ++"use strict"; ++ ++Object.defineProperty(exports, "__esModule", { ++ value: true ++}); ++exports.default = void 0; ++const shape = { ++ borderRadius: 4 ++}; ++var _default = shape; ++exports.default = _default; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/createStyled.js b/node_modules/@material-ui/system/esm/createStyled.js +new file mode 100644 +index 0000000..1cb2ca1 +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/createStyled.js +@@ -0,0 +1,180 @@ ++import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; ++import _extends from "@babel/runtime/helpers/esm/extends"; ++import styledEngineStyled from '@material-ui/styled-engine'; ++import createTheme from './createTheme'; ++import styleFunctionSx from './styleFunctionSx'; ++import propsToClassKey from './propsToClassKey'; ++ ++function isEmpty(obj) { ++ return Object.keys(obj).length === 0; ++} ++ ++const getStyleOverrides = (name, theme) => { ++ if (theme.components && theme.components[name] && theme.components[name].styleOverrides) { ++ return theme.components[name].styleOverrides; ++ } ++ ++ return null; ++}; ++ ++const getVariantStyles = (name, theme) => { ++ let variants = []; ++ ++ if (theme && theme.components && theme.components[name] && theme.components[name].variants) { ++ variants = theme.components[name].variants; ++ } ++ ++ const variantsStyles = {}; ++ variants.forEach(definition => { ++ const key = propsToClassKey(definition.props); ++ variantsStyles[key] = definition.style; ++ }); ++ return variantsStyles; ++}; ++ ++const variantsResolver = (props, styles, theme, name) => { ++ var _theme$components, _theme$components$nam; ++ ++ const { ++ styleProps = {} ++ } = props; ++ let variantsStyles = {}; ++ const themeVariants = theme === null || theme === void 0 ? void 0 : (_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.variants; ++ ++ if (themeVariants) { ++ themeVariants.forEach(themeVariant => { ++ let isMatch = true; ++ Object.keys(themeVariant.props).forEach(key => { ++ if (styleProps[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) { ++ isMatch = false; ++ } ++ }); ++ ++ if (isMatch) { ++ variantsStyles = _extends({}, variantsStyles, styles[propsToClassKey(themeVariant.props)]); ++ } ++ }); ++ } ++ ++ return variantsStyles; ++}; ++ ++export const shouldForwardProp = prop => prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as'; ++export const systemDefaultTheme = createTheme(); ++ ++const lowercaseFirstLetter = string => { ++ return string.charAt(0).toLowerCase() + string.slice(1); ++}; ++ ++export default function createStyled(input = {}) { ++ const { ++ defaultTheme = systemDefaultTheme, ++ rootShouldForwardProp = shouldForwardProp, ++ slotShouldForwardProp = shouldForwardProp ++ } = input; ++ return (tag, inputOptions = {}) => { ++ const { ++ name: componentName, ++ slot: componentSlot, ++ skipVariantsResolver: inputSkipVariantsResolver, ++ skipSx: inputSkipSx, ++ overridesResolver ++ } = inputOptions, ++ options = _objectWithoutPropertiesLoose(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots. ++ ++ ++ const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false; ++ const skipSx = inputSkipSx || false; ++ let displayName; ++ let className; ++ ++ if (componentName) { ++ displayName = `${componentName}${componentSlot || ''}`; ++ className = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`; ++ } ++ ++ const defaultStyledResolver = styledEngineStyled(tag, _extends({}, !componentSlot || componentSlot === 'Root' ? { ++ shouldForwardProp: rootShouldForwardProp ++ } : { ++ shouldForwardProp: slotShouldForwardProp ++ }, { ++ label: className || componentName || '' ++ }, options)); ++ ++ const muiStyledResolver = (styleArg, ...expressions) => { ++ const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => { ++ return typeof stylesArg === 'function' ? (_ref) => { ++ let { ++ theme: themeInput ++ } = _ref, ++ other = _objectWithoutPropertiesLoose(_ref, ["theme"]); ++ ++ return stylesArg(_extends({ ++ theme: isEmpty(themeInput) ? defaultTheme : themeInput ++ }, other)); ++ } : stylesArg; ++ }) : []; ++ let transformedStyleArg = styleArg; ++ ++ if (componentName && overridesResolver) { ++ expressionsWithDefaultTheme.push(props => { ++ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; ++ const styleOverrides = getStyleOverrides(componentName, theme); ++ ++ if (styleOverrides) { ++ return overridesResolver(props, styleOverrides); ++ } ++ ++ return null; ++ }); ++ } ++ ++ if (componentName && overridesResolver && !skipVariantsResolver) { ++ expressionsWithDefaultTheme.push(props => { ++ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; ++ return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName); ++ }); ++ } ++ ++ if (!skipSx) { ++ expressionsWithDefaultTheme.push(props => { ++ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; ++ return styleFunctionSx(_extends({}, props, { ++ theme ++ })); ++ }); ++ } ++ ++ const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length; ++ ++ if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) { ++ const placeholders = new Array(numOfCustomFnsApplied).fill(''); // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles. ++ ++ transformedStyleArg = [...styleArg, ...placeholders]; ++ transformedStyleArg.raw = [...styleArg.raw, ...placeholders]; ++ } else if (typeof styleArg === 'function') { ++ // If the type is function, we need to define the default theme. ++ transformedStyleArg = (_ref2) => { ++ let { ++ theme: themeInput ++ } = _ref2, ++ other = _objectWithoutPropertiesLoose(_ref2, ["theme"]); ++ ++ return styleArg(_extends({ ++ theme: isEmpty(themeInput) ? defaultTheme : themeInput ++ }, other)); ++ }; ++ } ++ ++ const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme); ++ ++ if (displayName) { ++ Component.displayName = displayName; ++ } ++ ++ return Component; ++ }; ++ ++ return muiStyledResolver; ++ }; ++} +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/createTheme/createBreakpoints.js b/node_modules/@material-ui/system/esm/createTheme/createBreakpoints.js +new file mode 100644 +index 0000000..0429a59 +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/createTheme/createBreakpoints.js +@@ -0,0 +1,57 @@ ++import _extends from "@babel/runtime/helpers/esm/extends"; ++import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; ++// Sorted ASC by size. That's important. ++// It can't be configured as it's used statically for propTypes. ++export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification. ++ ++export default function createBreakpoints(breakpoints) { ++ const { ++ // The breakpoint **start** at this value. ++ // For instance with the first breakpoint xs: [xs, sm). ++ values = { ++ xs: 0, ++ sm: 600, ++ md: 960, ++ lg: 1280, ++ xl: 1920 ++ }, ++ unit = 'px', ++ step = 5 ++ } = breakpoints, ++ other = _objectWithoutPropertiesLoose(breakpoints, ["values", "unit", "step"]); ++ ++ const keys = Object.keys(values); ++ ++ function up(key) { ++ const value = typeof values[key] === 'number' ? values[key] : key; ++ return `@media (min-width:${value}${unit})`; ++ } ++ ++ function down(key) { ++ const value = typeof values[key] === 'number' ? values[key] : key; ++ return `@media (max-width:${value - step / 100}${unit})`; ++ } ++ ++ function between(start, end) { ++ const endIndex = keys.indexOf(end); ++ return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`; ++ } ++ ++ function only(key) { ++ if (keys.indexOf(key) + 1 < keys.length) { ++ return between(key, keys[keys.indexOf(key) + 1]); ++ } ++ ++ return up(key); ++ } ++ ++ return _extends({ ++ keys, ++ values, ++ up, ++ down, ++ between, ++ only, ++ unit ++ }, other); ++} +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/createTheme/createSpacing.js b/node_modules/@material-ui/system/esm/createTheme/createSpacing.js +new file mode 100644 +index 0000000..02d7944 +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/createTheme/createSpacing.js +@@ -0,0 +1,33 @@ ++import { createUnarySpacing } from '../spacing'; ++ ++/* tslint:enable:unified-signatures */ ++export default function createSpacing(spacingInput = 8) { ++ // Already transformed. ++ if (spacingInput.mui) { ++ return spacingInput; ++ } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. ++ // Smaller components, such as icons, can align to a 4dp grid. ++ // https://material.io/design/layout/understanding-layout.html#usage ++ ++ ++ const transform = createUnarySpacing({ ++ spacing: spacingInput ++ }); ++ ++ const spacing = (...argsInput) => { ++ if (process.env.NODE_ENV !== 'production') { ++ if (!(argsInput.length <= 4)) { ++ console.error(`Material-UI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`); ++ } ++ } ++ ++ const args = argsInput.length === 0 ? [1] : argsInput; ++ return args.map(argument => { ++ const output = transform(argument); ++ return typeof output === 'number' ? `${output}px` : output; ++ }).join(' '); ++ }; ++ ++ spacing.mui = true; ++ return spacing; ++} +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/createTheme/createTheme.js b/node_modules/@material-ui/system/esm/createTheme/createTheme.js +new file mode 100644 +index 0000000..de2dbe9 +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/createTheme/createTheme.js +@@ -0,0 +1,36 @@ ++import _extends from "@babel/runtime/helpers/esm/extends"; ++import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; ++import { deepmerge } from '@material-ui/utils'; ++import createBreakpoints from './createBreakpoints'; ++import shape from './shape'; ++import createSpacing from './createSpacing'; ++ ++function createTheme(options = {}, ...args) { ++ const { ++ breakpoints: breakpointsInput = {}, ++ palette: paletteInput = {}, ++ spacing: spacingInput, ++ shape: shapeInput = {} ++ } = options, ++ other = _objectWithoutPropertiesLoose(options, ["breakpoints", "palette", "spacing", "shape"]); ++ ++ const breakpoints = createBreakpoints(breakpointsInput); ++ const spacing = createSpacing(spacingInput); ++ let muiTheme = deepmerge({ ++ breakpoints, ++ direction: 'ltr', ++ components: {}, ++ // Inject component definitions. ++ palette: _extends({ ++ mode: 'light' ++ }, paletteInput), ++ spacing, ++ shape: _extends({}, shape, { ++ shapeInput ++ }) ++ }, other); ++ muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme); ++ return muiTheme; ++} ++ ++export default createTheme; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/createTheme/index.js b/node_modules/@material-ui/system/esm/createTheme/index.js +new file mode 100644 +index 0000000..0676d84 +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/createTheme/index.js +@@ -0,0 +1 @@ ++export { default } from './createTheme'; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/createTheme/shape.js b/node_modules/@material-ui/system/esm/createTheme/shape.js +new file mode 100644 +index 0000000..d781443 +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/createTheme/shape.js +@@ -0,0 +1,4 @@ ++const shape = { ++ borderRadius: 4 ++}; ++export default shape; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/index.js b/node_modules/@material-ui/system/esm/index.js +index f08c267..7c39854 100644 +--- a/node_modules/@material-ui/system/esm/index.js ++++ b/node_modules/@material-ui/system/esm/index.js +@@ -22,3 +22,9 @@ export { default as typography } from './typography'; + export * from './typography'; + export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx'; + export { default as unstable_getThemeValue } from './getThemeValue'; ++export { default as createStyled } from './createStyled'; ++export * from './createStyled'; ++export { default as styled } from './styled'; ++export { default as createTheme } from './createTheme'; ++export { default as createBreakpoints } from './createTheme/createBreakpoints'; ++export { default as shape } from './createTheme/shape'; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/propsToClassKey.js b/node_modules/@material-ui/system/esm/propsToClassKey.js +new file mode 100644 +index 0000000..af9b2ea +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/propsToClassKey.js +@@ -0,0 +1,29 @@ ++import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; ++import { unstable_capitalize as capitalize } from '@material-ui/utils'; ++ ++function isEmpty(string) { ++ return string.length === 0; ++} ++/** ++ * Generates string classKey based on the properties provided. It starts with the ++ * variant if defined, and then it appends all other properties in alphabetical order. ++ * @param {object} props - the properties for which the classKey should be created. ++ */ ++ ++ ++export default function propsToClassKey(props) { ++ const { ++ variant ++ } = props, ++ other = _objectWithoutPropertiesLoose(props, ["variant"]); ++ ++ let classKey = variant || ''; ++ Object.keys(other).sort().forEach(key => { ++ if (key === 'color') { ++ classKey += isEmpty(classKey) ? props[key] : capitalize(props[key]); ++ } else { ++ classKey += `${isEmpty(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`; ++ } ++ }); ++ return classKey; ++} +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/esm/styled.js b/node_modules/@material-ui/system/esm/styled.js +new file mode 100644 +index 0000000..c7f670e +--- /dev/null ++++ b/node_modules/@material-ui/system/esm/styled.js +@@ -0,0 +1,3 @@ ++import createStyled from './createStyled'; ++const styled = createStyled(); ++export default styled; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/index.d.ts b/node_modules/@material-ui/system/index.d.ts +index 15c2d5c..7ba099f 100644 +--- a/node_modules/@material-ui/system/index.d.ts ++++ b/node_modules/@material-ui/system/index.d.ts +@@ -329,3 +329,37 @@ export { + extendSxProp as unstable_extendSxProp, + } from './styleFunctionSx'; + export * from './styleFunctionSx'; ++ ++export { default as createStyled } from './createStyled'; ++export * from './createStyled'; ++ ++export { default as styled } from './styled'; ++export * from './styled'; ++ ++export { default as createTheme } from './createTheme'; ++export * from './createTheme'; ++ ++export { default as createBreakpoints } from './createTheme/createBreakpoints'; ++export * from './createTheme/createBreakpoints'; ++ ++export { SpacingOptions, Spacing } from './createTheme/createSpacing'; ++ ++export { default as shape } from './createTheme/shape'; ++export * from './createTheme/shape'; ++ ++export { default as createStyled } from './createStyled'; ++export * from './createStyled'; ++ ++export { default as styled } from './styled'; ++export * from './styled'; ++ ++export { default as createTheme } from './createTheme'; ++export * from './createTheme'; ++ ++export { default as createBreakpoints } from './createTheme/createBreakpoints'; ++export * from './createTheme/createBreakpoints'; ++ ++export { SpacingOptions, Spacing } from './createTheme/createSpacing'; ++ ++export { default as shape } from './createTheme/shape'; ++export * from './createTheme/shape'; +diff --git a/node_modules/@material-ui/system/index.js b/node_modules/@material-ui/system/index.js +index 3a0bf51..d254250 100644 +--- a/node_modules/@material-ui/system/index.js ++++ b/node_modules/@material-ui/system/index.js +@@ -266,3 +266,49 @@ Object.keys(_typography).forEach(function (key) { + var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx")); + + var _getThemeValue = _interopRequireDefault(require("./getThemeValue")); ++ ++ ++var _createStyled = _interopRequireWildcard(require("./createStyled")); ++ ++Object.keys(_createStyled).forEach(function (key) { ++ if (key === "default" || key === "__esModule") return; ++ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; ++ if (key in exports && exports[key] === _createStyled[key]) return; ++ Object.defineProperty(exports, key, { ++ enumerable: true, ++ get: function () { ++ return _createStyled[key]; ++ } ++ }); ++}); ++ ++var _styled = _interopRequireDefault(require("./styled")); ++ ++var _createTheme = _interopRequireDefault(require("./createTheme")); ++ ++var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints")); ++ ++var _shape = _interopRequireDefault(require("./createTheme/shape")); ++ ++ ++var _createStyled = _interopRequireWildcard(require("./createStyled")); ++ ++Object.keys(_createStyled).forEach(function (key) { ++ if (key === "default" || key === "__esModule") return; ++ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; ++ if (key in exports && exports[key] === _createStyled[key]) return; ++ Object.defineProperty(exports, key, { ++ enumerable: true, ++ get: function () { ++ return _createStyled[key]; ++ } ++ }); ++}); ++ ++var _styled = _interopRequireDefault(require("./styled")); ++ ++var _createTheme = _interopRequireDefault(require("./createTheme")); ++ ++var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints")); ++ ++var _shape = _interopRequireDefault(require("./createTheme/shape")); +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/legacy/index.js b/node_modules/@material-ui/system/legacy/index.js +index 4aa9104..7bc288c 100644 +--- a/node_modules/@material-ui/system/legacy/index.js ++++ b/node_modules/@material-ui/system/legacy/index.js +@@ -27,3 +27,15 @@ export { default as typography } from './typography'; + export * from './typography'; + export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx'; + export { default as unstable_getThemeValue } from './getThemeValue'; ++export { default as createStyled } from './createStyled'; ++export * from './createStyled'; ++export { default as styled } from './styled'; ++export { default as createTheme } from './createTheme'; ++export { default as createBreakpoints } from './createTheme/createBreakpoints'; ++export { default as shape } from './createTheme/shape'; ++export { default as createStyled } from './createStyled'; ++export * from './createStyled'; ++export { default as styled } from './styled'; ++export { default as createTheme } from './createTheme'; ++export { default as createBreakpoints } from './createTheme/createBreakpoints'; ++export { default as shape } from './createTheme/shape'; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/modern/index.js b/node_modules/@material-ui/system/modern/index.js +index 4aa9104..7bc288c 100644 +--- a/node_modules/@material-ui/system/modern/index.js ++++ b/node_modules/@material-ui/system/modern/index.js +@@ -27,3 +27,15 @@ export { default as typography } from './typography'; + export * from './typography'; + export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx'; + export { default as unstable_getThemeValue } from './getThemeValue'; ++export { default as createStyled } from './createStyled'; ++export * from './createStyled'; ++export { default as styled } from './styled'; ++export { default as createTheme } from './createTheme'; ++export { default as createBreakpoints } from './createTheme/createBreakpoints'; ++export { default as shape } from './createTheme/shape'; ++export { default as createStyled } from './createStyled'; ++export * from './createStyled'; ++export { default as styled } from './styled'; ++export { default as createTheme } from './createTheme'; ++export { default as createBreakpoints } from './createTheme/createBreakpoints'; ++export { default as shape } from './createTheme/shape'; +\ No newline at end of file +diff --git a/node_modules/@material-ui/system/styled.d.ts b/node_modules/@material-ui/system/styled.d.ts +new file mode 100644 +index 0000000..164bc4b +--- /dev/null ++++ b/node_modules/@material-ui/system/styled.d.ts +@@ -0,0 +1,5 @@ ++import { CreateMUIStyled } from './createStyled'; ++ ++declare const styled: CreateMUIStyled; ++ ++export default styled; +diff --git a/node_modules/@material-ui/system/styled.js b/node_modules/@material-ui/system/styled.js +new file mode 100644 +index 0000000..94bd7f0 +--- /dev/null ++++ b/node_modules/@material-ui/system/styled.js +@@ -0,0 +1,14 @@ ++"use strict"; ++ ++var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); ++ ++Object.defineProperty(exports, "__esModule", { ++ value: true ++}); ++exports.default = void 0; ++ ++var _createStyled = _interopRequireDefault(require("./createStyled")); ++ ++const styled = (0, _createStyled.default)(); ++var _default = styled; ++exports.default = _default; +\ No newline at end of file From b9b941f542cbb906ef11705a640de912c2d6ead7 Mon Sep 17 00:00:00 2001 From: cmy Date: Sat, 12 Jun 2021 03:02:22 +0800 Subject: [PATCH 06/10] fix: patch error --- .../@material-ui+core+5.0.0-alpha.34.patch | 71 ++++++++++++++++--- 1 file changed, 63 insertions(+), 8 deletions(-) diff --git a/patches/@material-ui+core+5.0.0-alpha.34.patch b/patches/@material-ui+core+5.0.0-alpha.34.patch index 950619c660cb..5f0ec0e0ca84 100644 --- a/patches/@material-ui+core+5.0.0-alpha.34.patch +++ b/patches/@material-ui+core+5.0.0-alpha.34.patch @@ -1,4 +1,4 @@ -# generated by patch-package 6.4.7 on 2021-06-12 01:45:02 +# generated by patch-package 6.4.7 on 2021-06-12 02:45:18 # # command: # npx patch-package @material-ui/core @@ -411,21 +411,21 @@ index 0000000..0daa70f +export default listItemButtonClasses; \ No newline at end of file diff --git a/node_modules/@material-ui/core/index.d.ts b/node_modules/@material-ui/core/index.d.ts -index 18dbae0..3b63196 100644 +index 18dbae0..68ac29c 100644 --- a/node_modules/@material-ui/core/index.d.ts +++ b/node_modules/@material-ui/core/index.d.ts @@ -264,6 +264,9 @@ export * from './List'; export { default as ListItem } from './ListItem'; export * from './ListItem'; - -+export { default as ListItemButton } from './ListItemButton'; + ++export { default as ListItem } from './ListItemButton'; +export * from './ListItemButton'; + export { default as ListItemAvatar } from './ListItemAvatar'; export * from './ListItemAvatar'; - + diff --git a/node_modules/@material-ui/core/index.js b/node_modules/@material-ui/core/index.js -index 239a738..39a60e0 100644 +index 239a738..9ecc300 100644 --- a/node_modules/@material-ui/core/index.js +++ b/node_modules/@material-ui/core/index.js @@ -135,6 +135,8 @@ export { default as List } from './List'; @@ -438,7 +438,7 @@ index 239a738..39a60e0 100644 export * from './ListItemAvatar'; export { default as ListItemIcon } from './ListItemIcon'; diff --git a/node_modules/@material-ui/core/legacy/index.js b/node_modules/@material-ui/core/legacy/index.js -index 239a738..39a60e0 100644 +index 239a738..9ecc300 100644 --- a/node_modules/@material-ui/core/legacy/index.js +++ b/node_modules/@material-ui/core/legacy/index.js @@ -135,6 +135,8 @@ export { default as List } from './List'; @@ -451,7 +451,7 @@ index 239a738..39a60e0 100644 export * from './ListItemAvatar'; export { default as ListItemIcon } from './ListItemIcon'; diff --git a/node_modules/@material-ui/core/modern/index.js b/node_modules/@material-ui/core/modern/index.js -index 239a738..39a60e0 100644 +index 239a738..9ecc300 100644 --- a/node_modules/@material-ui/core/modern/index.js +++ b/node_modules/@material-ui/core/modern/index.js @@ -135,6 +135,8 @@ export { default as List } from './List'; @@ -463,6 +463,61 @@ index 239a738..39a60e0 100644 export { default as ListItemAvatar } from './ListItemAvatar'; export * from './ListItemAvatar'; export { default as ListItemIcon } from './ListItemIcon'; +diff --git a/node_modules/@material-ui/core/styles/components.d.ts b/node_modules/@material-ui/core/styles/components.d.ts +index 1e3ad6a..8ad2968 100644 +--- a/node_modules/@material-ui/core/styles/components.d.ts ++++ b/node_modules/@material-ui/core/styles/components.d.ts +@@ -249,6 +249,10 @@ export interface Components { + defaultProps?: ComponentsProps['MuiListItem']; + styleOverrides?: ComponentsOverrides['MuiListItem']; + }; ++ MuiListItemButton?: { ++ defaultProps?: ComponentsProps['MuiListItemButton']; ++ styleOverrides?: ComponentsOverrides['MuiListItemButton']; ++ }; + MuiListItemAvatar?: { + defaultProps?: ComponentsProps['MuiListItemAvatar']; + styleOverrides?: ComponentsOverrides['MuiListItemAvatar']; +diff --git a/node_modules/@material-ui/core/styles/overrides.d.ts b/node_modules/@material-ui/core/styles/overrides.d.ts +index 5f51945..9e5e1f1 100644 +--- a/node_modules/@material-ui/core/styles/overrides.d.ts ++++ b/node_modules/@material-ui/core/styles/overrides.d.ts +@@ -57,6 +57,7 @@ import { LinkClassKey } from '../Link'; + import { ListClassKey } from '../List'; + import { ListItemAvatarClassKey } from '../ListItemAvatar'; + import { ListItemClassKey } from '../ListItem'; ++import { ListItemButtonClassKey } from '../ListItemButton'; + import { ListItemIconClassKey } from '../ListItemIcon'; + import { ListItemSecondaryActionClassKey } from '../ListItemSecondaryAction'; + import { ListItemTextClassKey } from '../ListItemText'; +@@ -181,6 +182,7 @@ export interface ComponentNameToClassKey { + MuiLink: LinkClassKey; + MuiList: ListClassKey; + MuiListItem: ListItemClassKey; ++ MuiListItemButton: ListItemButtonClassKey; + MuiListItemAvatar: ListItemAvatarClassKey; + MuiListItemIcon: ListItemIconClassKey; + MuiListItemSecondaryAction: ListItemSecondaryActionClassKey; +diff --git a/node_modules/@material-ui/core/styles/props.d.ts b/node_modules/@material-ui/core/styles/props.d.ts +index 1457e0e..543e5bb 100644 +--- a/node_modules/@material-ui/core/styles/props.d.ts ++++ b/node_modules/@material-ui/core/styles/props.d.ts +@@ -57,6 +57,7 @@ import { LinkProps } from '../Link'; + import { ListItemAvatarProps } from '../ListItemAvatar'; + import { ListItemIconProps } from '../ListItemIcon'; + import { ListItemProps } from '../ListItem'; ++import { ListItemButtonProps } from '../ListItemButton'; + import { ListItemSecondaryActionProps } from '../ListItemSecondaryAction'; + import { ListItemTextProps } from '../ListItemText'; + import { ListProps } from '../List'; +@@ -177,6 +178,7 @@ export interface ComponentsPropsList { + MuiLink: LinkProps; + MuiList: ListProps; + MuiListItem: ListItemProps; ++ MuiListItemButton: ListItemButtonProps; + MuiListItemAvatar: ListItemAvatarProps; + MuiListItemIcon: ListItemIconProps; + MuiListItemSecondaryAction: ListItemSecondaryActionProps; diff --git a/node_modules/@material-ui/core/styles/styled.d.ts b/node_modules/@material-ui/core/styles/styled.d.ts new file mode 100644 index 0000000..928ed5f From 02eb77e0c8223590826ab9a981c1edfa93e38af3 Mon Sep 17 00:00:00 2001 From: cmy Date: Sat, 12 Jun 2021 03:12:16 +0800 Subject: [PATCH 07/10] fix: .pnpm-lock --- pnpm-lock.yaml | 54 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 38 insertions(+), 16 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3dd2fe34293e..8187440a3314 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -157,6 +157,7 @@ importers: babel-loader: ^8.2.2 classnames: ^2.3.1 color: ^3.1.3 + history: ^5.0.0 json-stable-stringify: ^1.0.1 lodash-es: ^4.17.21 react-router: ^6.0.0-beta.0 @@ -179,6 +180,7 @@ importers: async-call-rpc: 5.1.0 classnames: 2.3.1 color: 3.1.3 + history: 5.0.0 json-stable-stringify: 1.0.1 lodash-es: 4.17.21 react-router: 6.0.0-beta.0_history@5.0.0 @@ -269,6 +271,7 @@ importers: '@types/puppeteer': ^5.4.2 '@types/qrcode': ^1.3.5 '@types/react-highlight-words': ^0.16.1 + '@types/react-router-dom': ^5.1.6 '@types/react-virtualized-auto-sizer': ^1.0.0 '@types/react-window': ^1.8.3 '@types/remarkable': ^2.0.1 @@ -341,6 +344,8 @@ importers: react-middle-ellipsis: ^1.2.1 react-refresh: ^0.10.0 react-refresh-typescript: ^2.0.1 + react-router: ^5.2.0 + react-router-dom: ^5.2.0 react-test-renderer: ^17.0.1 react-use: ^17.2.4 react-virtualized-auto-sizer: ^1.0.2 @@ -462,6 +467,8 @@ importers: react-feather: 2.0.9 react-highlight-words: 0.17.0 react-middle-ellipsis: 1.2.1 + react-router: 5.2.0 + react-router-dom: 5.2.0 react-use: 17.2.4 react-virtualized-auto-sizer: 1.0.5 react-window: 1.8.6 @@ -6486,7 +6493,7 @@ packages: resolution: {integrity: sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==} dependencies: '@types/history': 4.7.8 - '@types/react': 17.0.3 + '@types/react': 17.0.11 '@types/react-router': 5.1.13 dev: false @@ -6494,7 +6501,7 @@ packages: resolution: {integrity: sha512-ZIuaO9Yrln54X6elg8q2Ivp6iK6p4syPsefEYAhRDAoqNh48C8VYUmB9RkXjKSQAJSJV0mbIFCX7I4vZDcHrjg==} dependencies: '@types/history': 4.7.8 - '@types/react': 17.0.3 + '@types/react': 17.0.11 dev: false /@types/react-syntax-highlighter/11.0.5: @@ -13689,7 +13696,7 @@ packages: /history/4.10.1: resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==} dependencies: - '@babel/runtime': 7.13.10 + '@babel/runtime': 7.14.0 loose-envify: 1.4.0 resolve-pathname: 3.0.0 tiny-invariant: 1.1.0 @@ -13697,6 +13704,12 @@ packages: value-equal: 1.0.1 dev: false + /history/5.0.0: + resolution: {integrity: sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==} + dependencies: + '@babel/runtime': 7.14.0 + dev: false + /hmac-drbg/1.0.1: resolution: {integrity: sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=} dependencies: @@ -16988,7 +17001,7 @@ packages: prop-types: ^15.0.0 react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.13.10 + '@babel/runtime': 7.14.0 prop-types: 15.7.2 tiny-warning: 1.0.3 dev: false @@ -19240,16 +19253,18 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-router-dom/6.0.0-beta.0_history@5.0.0: - resolution: {integrity: sha512-36yNNGMT8RB9FRPL9nKJi6HKDkgOakU+o/2hHpSzR6e37gN70MpOU6QQlmif4oAWWBwjyGc3ZNOMFCsFuHUY5w==} + /react-router-dom/5.2.0: + resolution: {integrity: sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==} peerDependencies: - history: '>=5' - react: '>=16.8' - react-dom: '>=16.8' + react: '>=15' dependencies: - history: 5.0.0 + '@babel/runtime': 7.14.0 + history: 4.10.1 + loose-envify: 1.4.0 prop-types: 15.7.2 - react-router: 6.0.0-beta.0_history@5.0.0 + react-router: 5.2.0 + tiny-invariant: 1.1.0 + tiny-warning: 1.0.3 dev: false /react-router-dom/6.0.0-beta.0_history@5.0.0: @@ -19264,14 +19279,21 @@ packages: react-router: 6.0.0-beta.0_history@5.0.0 dev: false - /react-router/6.0.0-beta.0_history@5.0.0: - resolution: {integrity: sha512-VgMdfpVcmFQki/LZuLh8E/MNACekDetz4xqft+a6fBZvvJnVqKbLqebF7hyoawGrV1HcO5tVaUang2Og4W2j1Q==} + /react-router/5.2.0: + resolution: {integrity: sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==} peerDependencies: - history: '>=5' - react: '>=16.8' + react: '>=15' dependencies: - history: 5.0.0 + '@babel/runtime': 7.14.0 + history: 4.10.1 + hoist-non-react-statics: 3.3.2 + loose-envify: 1.4.0 + mini-create-react-context: 0.4.1_prop-types@15.7.2 + path-to-regexp: 1.8.0 prop-types: 15.7.2 + react-is: 16.13.1 + tiny-invariant: 1.1.0 + tiny-warning: 1.0.3 dev: false /react-router/6.0.0-beta.0_history@5.0.0: From 17bdeba62536d68439d8b174f31d1f08dda76ff0 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Fri, 11 Jun 2021 14:05:46 +0800 Subject: [PATCH 08/10] fix: runtime error --- .../miscs/package-overrides/xhr2-cookies.js | 5 ++-- packages/maskbook/package.json | 2 +- packages/maskbook/webpack.config.ts | 3 +- pnpm-lock.yaml | 29 +++++++++++-------- 4 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/maskbook/miscs/package-overrides/xhr2-cookies.js b/packages/maskbook/miscs/package-overrides/xhr2-cookies.js index 31b8ffeeff4b..5c7550194623 100644 --- a/packages/maskbook/miscs/package-overrides/xhr2-cookies.js +++ b/packages/maskbook/miscs/package-overrides/xhr2-cookies.js @@ -1,3 +1,2 @@ -module.exports = { - XMLHttpRequest, -} +export const XMLHttpRequest = globalThis.XMLHttpRequest +export default globalThis.XMLHttpRequest diff --git a/packages/maskbook/package.json b/packages/maskbook/package.json index f7dadb975827..4a03dd42211d 100644 --- a/packages/maskbook/package.json +++ b/packages/maskbook/package.json @@ -119,7 +119,7 @@ }, "devDependencies": { "@dimensiondev/webextension-shim": "0.0.3-20201120022530-b318b89", - "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", "@sinonjs/text-encoding": "^0.7.1", "@testing-library/react-hooks": "^7.0.0", "@types/elliptic": "^6.4.12", diff --git a/packages/maskbook/webpack.config.ts b/packages/maskbook/webpack.config.ts index 0e9290672c26..34efb6cd19ac 100644 --- a/packages/maskbook/webpack.config.ts +++ b/packages/maskbook/webpack.config.ts @@ -97,6 +97,7 @@ function config(opts: { // By aliasing them to the original position, we can speed up the compile because there is no need to wait tsc build them to the dist folder. '@dimensiondev/dashboard': require.resolve('../dashboard/src/entry.tsx'), '@dimensiondev/maskbook-shared': require.resolve('../shared/src/index.ts'), + '@dimensiondev/maskbook-theme/constants': require.resolve('../theme/src/constants.ts'), '@dimensiondev/maskbook-theme': require.resolve('../theme/src/theme.ts'), '@dimensiondev/icons': require.resolve('../icons/index.ts'), '@dimensiondev/mask-plugin-infra': require.resolve('../plugin-infra/src/index.ts'), @@ -245,7 +246,7 @@ function config(opts: { // overlay is not working in our environment return [ new HotModuleReplacementPlugin(), - !disableReactHMR && new ReactRefreshWebpackPlugin({ overlay: false }), + !disableReactHMR && new ReactRefreshWebpackPlugin({ overlay: false, esModule: true }), ].filter(nonNullable) } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8187440a3314..194863600ea0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -248,7 +248,7 @@ importers: '@ethersproject/strings': ^5.1.0 '@msgpack/msgpack': ^2.7.0 '@openzeppelin/contracts': ^3.2.0 - '@pmmmwh/react-refresh-webpack-plugin': ^0.4.3 + '@pmmmwh/react-refresh-webpack-plugin': ^0.5.0-rc.0 '@popperjs/core': '*' '@servie/events': ^3.0.0 '@sinonjs/text-encoding': ^0.7.1 @@ -496,7 +496,7 @@ importers: z-schema: 5.0.1 devDependencies: '@dimensiondev/webextension-shim': 0.0.3-20201120022530-b318b89 - '@pmmmwh/react-refresh-webpack-plugin': 0.4.3_dae7018c5b5576f32207b1e2608a9d18 + '@pmmmwh/react-refresh-webpack-plugin': 0.5.0-rc.0_dae7018c5b5576f32207b1e2608a9d18 '@sinonjs/text-encoding': 0.7.1 '@testing-library/react-hooks': 7.0.0_react-test-renderer@17.0.2 '@types/enzyme': 3.10.8 @@ -4414,16 +4414,16 @@ packages: webpack: 4.46.0 dev: true - /@pmmmwh/react-refresh-webpack-plugin/0.4.3_dae7018c5b5576f32207b1e2608a9d18: - resolution: {integrity: sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==} - engines: {node: '>= 10.x'} + /@pmmmwh/react-refresh-webpack-plugin/0.5.0-rc.0_dae7018c5b5576f32207b1e2608a9d18: + resolution: {integrity: sha512-oJV/ukrTxm1zjq/D4A3arLSqDMCy4jnIVDYEfe+KX5FX07b0blWmGa3UaqtLYqZsb++V8VnyFlq0OYS3f9yi0g==} + engines: {node: '>= 10.13'} peerDependencies: - '@types/webpack': 4.x - react-refresh: '>=0.8.3 <0.10.0' + '@types/webpack': 4.x || 5.x + react-refresh: ^0.10.0 sockjs-client: ^1.4.0 - type-fest: ^0.13.1 + type-fest: ^1.0.2 webpack: '>=4.43.0 <6.0.0' - webpack-dev-server: 3.x + webpack-dev-server: 3.x || >=4.0.0-beta.0 webpack-hot-middleware: 2.x webpack-plugin-serve: 0.x || 1.x peerDependenciesMeta: @@ -4441,11 +4441,12 @@ packages: optional: true dependencies: ansi-html: 0.0.7 + core-js-pure: 3.11.0 error-stack-parser: 2.0.6 - html-entities: 1.4.0 - native-url: 0.2.6 + html-entities: 2.3.2 + loader-utils: 2.0.0 react-refresh: 0.10.0 - schema-utils: 2.7.1 + schema-utils: 3.0.0 source-map: 0.7.3 webpack: 5.37.1_webpack-cli@4.7.0 webpack-dev-server: 3.11.2_webpack-cli@4.7.0+webpack@5.37.1 @@ -13779,6 +13780,10 @@ packages: resolution: {integrity: sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==} dev: true + /html-entities/2.3.2: + resolution: {integrity: sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==} + dev: true + /html-escaper/2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} dev: true From 884b4f9b70d0396e2e42075a47bd9049422d3286 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Fri, 11 Jun 2021 09:38:36 +0800 Subject: [PATCH 09/10] fix: netlify error --- packages/icons/general/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/general/Search.tsx b/packages/icons/general/Search.tsx index c90291dc0ec9..819a21040da2 100644 --- a/packages/icons/general/Search.tsx +++ b/packages/icons/general/Search.tsx @@ -1,5 +1,5 @@ import { createIcon } from '../utils' -import { MaskColorVar } from '@dimensiondev/maskbook-theme' +import { MaskColorVar } from '@dimensiondev/maskbook-theme/constants' export const SearchIcon = createIcon( 'Search', From a4503fe759b45b6217962d397bbd8769c88392f9 Mon Sep 17 00:00:00 2001 From: cmy Date: Sat, 12 Jun 2021 22:50:26 +0800 Subject: [PATCH 10/10] fix: remove patch and replace Link to navigate in ListItem --- .../components/DashboardFrame/Navigation.tsx | 30 +- .../@material-ui+core+5.0.0-alpha.34.patch | 555 ------- .../@material-ui+system+5.0.0-alpha.34.patch | 1388 ----------------- 3 files changed, 14 insertions(+), 1959 deletions(-) delete mode 100644 patches/@material-ui+core+5.0.0-alpha.34.patch delete mode 100644 patches/@material-ui+system+5.0.0-alpha.34.patch diff --git a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx index eee21ddf59dc..50df84c1bd04 100644 --- a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx +++ b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx @@ -9,41 +9,39 @@ import { experimentalStyled as styled, listItemClasses, listItemIconClasses, - ListItemButton, - ListItemButtonProps, - listItemButtonClasses, + ListItemProps, } from '@material-ui/core' import { Masks, AccountBalanceWallet, ExpandLess, ExpandMore, Settings } from '@material-ui/icons' import { useContext } from 'react' -import { useMatch } from 'react-router' -import { Link, LinkProps } from 'react-router-dom' +import { useMatch, useNavigate } from 'react-router' import { DashboardContext } from './context' import { MaskNotSquareIcon } from '@dimensiondev/icons' import { useDashboardI18N } from '../../locales' import { MaskColorVar } from '@dimensiondev/maskbook-theme' import { RoutePaths } from '../../pages/routes' -const ListItemLinkUnStyled = ({ to, ...props }: LinkProps & ListItemButtonProps & { to: string; nested?: boolean }) => { - //TODO: {...props} will get ref type error, perhaps need mui or react-router fix +const ListItemLinkUnStyled = ({ to, ...props }: ListItemProps & { to: string; nested?: boolean }) => { + const navigate = useNavigate() return ( - - {props.children} - + onClick={(event) => { + navigate(to) + props.onClick?.(event) + }} + /> ) } const ListItemLink = styled(ListItemLinkUnStyled)(({ theme, nested }) => { return { - [`&.${listItemButtonClasses.root}`]: { + [`&.${listItemClasses.root}`]: { color: theme.palette.mode === 'light' ? '' : 'rgba(255,255,255,.8)', paddingLeft: nested ? theme.spacing(9) : theme.spacing(2), + cursor: 'pointer', }, - [`&.${listItemButtonClasses.selected}`]: { + [`&.${listItemClasses.selected}`]: { color: MaskColorVar.linkText, backgroundColor: 'transparent', position: 'relative', diff --git a/patches/@material-ui+core+5.0.0-alpha.34.patch b/patches/@material-ui+core+5.0.0-alpha.34.patch deleted file mode 100644 index 5f0ec0e0ca84..000000000000 --- a/patches/@material-ui+core+5.0.0-alpha.34.patch +++ /dev/null @@ -1,555 +0,0 @@ -# generated by patch-package 6.4.7 on 2021-06-12 02:45:18 -# -# command: -# npx patch-package @material-ui/core -# -# declared package: -# @material-ui/core: 5.0.0-alpha.34 -# -diff --git a/node_modules/@material-ui/core/ListItemButton/ListItemButton.d.ts b/node_modules/@material-ui/core/ListItemButton/ListItemButton.d.ts -new file mode 100644 -index 0000000..5996855 ---- /dev/null -+++ b/node_modules/@material-ui/core/ListItemButton/ListItemButton.d.ts -@@ -0,0 +1,84 @@ -+import * as React from 'react'; -+import { SxProps } from '@material-ui/system'; -+import { Theme } from '@material-ui/core/styles'; -+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; -+import { OverrideProps } from '../OverridableComponent'; -+import { ListItemButtonClasses } from './listItemButtonClasses'; -+ -+interface ListItemButtonBaseProps { -+ /** -+ * Defines the `align-items` style property. -+ * @default 'center' -+ */ -+ alignItems?: 'flex-start' | 'center'; -+ /** -+ * If `true`, the list item is focused during the first mount. -+ * Focus will also be triggered if the value changes from false to true. -+ * @default false -+ */ -+ autoFocus?: boolean; -+ /** -+ * The content of the component if a `ListItemSecondaryAction` is used it must -+ * be the last child. -+ */ -+ children?: React.ReactNode; -+ /** -+ * Override or extend the styles applied to the component. -+ */ -+ classes?: Partial; -+ /** -+ * If `true`, compact vertical padding designed for keyboard and mouse input is used. -+ * The prop defaults to the value inherited from the parent List component. -+ * @default false -+ */ -+ dense?: boolean; -+ /** -+ * If `true`, the component is disabled. -+ * @default false -+ */ -+ disabled?: boolean; -+ /** -+ * If `true`, the left and right padding is removed. -+ * @default false -+ */ -+ disableGutters?: boolean; -+ /** -+ * If `true`, a 1px light border is added to the bottom of the list item. -+ * @default false -+ */ -+ divider?: boolean; -+ /** -+ * Use to apply selected styling. -+ * @default false -+ */ -+ selected?: boolean; -+ /** -+ * The system prop that allows defining system overrides as well as additional CSS styles. -+ */ -+ sx?: SxProps; -+} -+ -+export type ListItemButtonTypeMap

= -+ ExtendButtonBaseTypeMap<{ -+ props: P & ListItemButtonBaseProps; -+ defaultComponent: D; -+ }>; -+ -+/** -+ * -+ * Demos: -+ * -+ * - [Lists](https://material-ui.com/components/lists/) -+ * -+ * API: -+ * -+ * - [ListItemButton API](https://material-ui.com/api/list-item-button/) -+ */ -+declare const ListItemButton: ExtendButtonBase; -+ -+export type ListItemButtonProps< -+ D extends React.ElementType = ListItemButtonTypeMap['defaultComponent'], -+ P = {}, -+> = OverrideProps, D>; -+ -+export default ListItemButton; -diff --git a/node_modules/@material-ui/core/ListItemButton/ListItemButton.js b/node_modules/@material-ui/core/ListItemButton/ListItemButton.js -new file mode 100644 -index 0000000..c959216 ---- /dev/null -+++ b/node_modules/@material-ui/core/ListItemButton/ListItemButton.js -@@ -0,0 +1,245 @@ -+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; -+import _extends from "@babel/runtime/helpers/esm/extends"; -+import * as React from 'react'; -+import PropTypes from 'prop-types'; -+import clsx from 'clsx'; -+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -+import { alpha } from '../styles/colorManipulator'; -+import styled, { rootShouldForwardProp } from '../styles/styled'; -+import useThemeProps from '../styles/useThemeProps'; -+import ButtonBase from '../ButtonBase'; -+import useEnhancedEffect from '../utils/useEnhancedEffect'; -+import useForkRef from '../utils/useForkRef'; -+import ListContext from '../List/ListContext'; -+import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses'; -+import { jsx as _jsx } from "react/jsx-runtime"; -+ -+const overridesResolver = (props, styles) => { -+ const { -+ styleProps -+ } = props; -+ return _extends({}, styles.root, styleProps.dense && styles.dense, styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart, styleProps.divider && styles.divider, !styleProps.disableGutters && styles.gutters); -+}; -+ -+const useUtilityClasses = styleProps => { -+ const { -+ alignItems, -+ classes, -+ dense, -+ disabled, -+ disableGutters, -+ divider, -+ selected -+ } = styleProps; -+ const slots = { -+ root: ['root', dense && 'dense', !disableGutters && 'gutters', divider && 'divider', disabled && 'disabled', alignItems === 'flex-start' && 'alignItemsFlexStart', selected && 'selected'] -+ }; -+ const composedClasses = composeClasses(slots, getListItemButtonUtilityClass, classes); -+ return _extends({}, classes, composedClasses); -+}; -+ -+const ListItemButtonRoot = styled(ButtonBase, { -+ shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes', -+ name: 'MuiListItemButton', -+ slot: 'Root', -+ overridesResolver -+})(({ -+ theme, -+ styleProps -+}) => _extends({ -+ display: 'flex', -+ flexGrow: 1, -+ justifyContent: 'flex-start', -+ alignItems: 'center', -+ position: 'relative', -+ textDecoration: 'none', -+ boxSizing: 'border-box', -+ textAlign: 'left', -+ paddingTop: 8, -+ paddingBottom: 8, -+ transition: theme.transitions.create('background-color', { -+ duration: theme.transitions.duration.shortest -+ }), -+ '&:hover': { -+ textDecoration: 'none', -+ backgroundColor: theme.palette.action.hover, -+ // Reset on touch devices, it doesn't add specificity -+ '@media (hover: none)': { -+ backgroundColor: 'transparent' -+ } -+ }, -+ [`&.${listItemButtonClasses.selected}`]: { -+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity), -+ [`&.${listItemButtonClasses.focusVisible}`]: { -+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity) -+ } -+ }, -+ [`&.${listItemButtonClasses.selected}:hover`]: { -+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity), -+ // Reset on touch devices, it doesn't add specificity -+ '@media (hover: none)': { -+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity) -+ } -+ }, -+ [`&.${listItemButtonClasses.focusVisible}`]: { -+ backgroundColor: theme.palette.action.focus -+ }, -+ [`&.${listItemButtonClasses.disabled}`]: { -+ opacity: theme.palette.action.disabledOpacity -+ } -+}, styleProps.divider && { -+ borderBottom: `1px solid ${theme.palette.divider}`, -+ backgroundClip: 'padding-box' -+}, styleProps.alignItems === 'flex-start' && { -+ alignItems: 'flex-start' -+}, !styleProps.disableGutters && { -+ paddingLeft: 16, -+ paddingRight: 16 -+}, styleProps.dense && { -+ paddingTop: 4, -+ paddingBottom: 4 -+})); -+const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) { -+ const props = useThemeProps({ -+ props: inProps, -+ name: 'MuiListItemButton' -+ }); -+ -+ const { -+ alignItems = 'center', -+ autoFocus = false, -+ component = 'div', -+ children, -+ dense = false, -+ disableGutters = false, -+ divider = false, -+ focusVisibleClassName, -+ selected = false -+ } = props, -+ other = _objectWithoutPropertiesLoose(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"]); -+ -+ const context = React.useContext(ListContext); -+ const childContext = { -+ dense: dense || context.dense || false, -+ alignItems, -+ disableGutters -+ }; -+ const listItemRef = React.useRef(null); -+ useEnhancedEffect(() => { -+ if (autoFocus) { -+ if (listItemRef.current) { -+ listItemRef.current.focus(); -+ } else if (process.env.NODE_ENV !== 'production') { -+ console.error('Material-UI: Unable to set focus to a ListItem whose component has not been rendered.'); -+ } -+ } -+ }, [autoFocus]); -+ -+ const styleProps = _extends({}, props, { -+ alignItems, -+ dense: childContext.dense, -+ disableGutters, -+ divider, -+ selected -+ }); -+ -+ const classes = useUtilityClasses(styleProps); -+ const handleRef = useForkRef(listItemRef, ref); -+ return /*#__PURE__*/_jsx(ListContext.Provider, { -+ value: childContext, -+ children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({ -+ ref: handleRef, -+ component: component, -+ focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName), -+ styleProps: styleProps -+ }, other, { -+ classes: classes, -+ children: children -+ })) -+ }); -+}); -+process.env.NODE_ENV !== "production" ? ListItemButton.propTypes -+/* remove-proptypes */ -+= { -+ // ----------------------------- Warning -------------------------------- -+ // | These PropTypes are generated from the TypeScript type definitions | -+ // | To update them edit the d.ts file and run "yarn proptypes" | -+ // ---------------------------------------------------------------------- -+ -+ /** -+ * Defines the `align-items` style property. -+ * @default 'center' -+ */ -+ alignItems: PropTypes.oneOf(['center', 'flex-start']), -+ -+ /** -+ * If `true`, the list item is focused during the first mount. -+ * Focus will also be triggered if the value changes from false to true. -+ * @default false -+ */ -+ autoFocus: PropTypes.bool, -+ -+ /** -+ * The content of the component if a `ListItemSecondaryAction` is used it must -+ * be the last child. -+ */ -+ children: PropTypes.node, -+ -+ /** -+ * Override or extend the styles applied to the component. -+ */ -+ classes: PropTypes.object, -+ -+ /** -+ * The component used for the root node. -+ * Either a string to use a HTML element or a component. -+ */ -+ component: PropTypes.elementType, -+ -+ /** -+ * If `true`, compact vertical padding designed for keyboard and mouse input is used. -+ * The prop defaults to the value inherited from the parent List component. -+ * @default false -+ */ -+ dense: PropTypes.bool, -+ -+ /** -+ * If `true`, the component is disabled. -+ * @default false -+ */ -+ disabled: PropTypes.bool, -+ -+ /** -+ * If `true`, the left and right padding is removed. -+ * @default false -+ */ -+ disableGutters: PropTypes.bool, -+ -+ /** -+ * If `true`, a 1px light border is added to the bottom of the list item. -+ * @default false -+ */ -+ divider: PropTypes.bool, -+ -+ /** -+ * This prop can help identify which element has keyboard focus. -+ * The class name will be applied when the element gains the focus through keyboard interaction. -+ * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). -+ * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md). -+ * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components -+ * if needed. -+ */ -+ focusVisibleClassName: PropTypes.string, -+ -+ /** -+ * Use to apply selected styling. -+ * @default false -+ */ -+ selected: PropTypes.bool, -+ -+ /** -+ * The system prop that allows defining system overrides as well as additional CSS styles. -+ */ -+ sx: PropTypes.object -+} : void 0; -+export default ListItemButton; -\ No newline at end of file -diff --git a/node_modules/@material-ui/core/ListItemButton/index.d.ts b/node_modules/@material-ui/core/ListItemButton/index.d.ts -new file mode 100644 -index 0000000..57fdf7f ---- /dev/null -+++ b/node_modules/@material-ui/core/ListItemButton/index.d.ts -@@ -0,0 +1,5 @@ -+export { default } from './ListItemButton'; -+export * from './ListItemButton'; -+ -+export { default as listItemButtonClasses } from './listItemButtonClasses'; -+export * from './listItemButtonClasses'; -diff --git a/node_modules/@material-ui/core/ListItemButton/index.js b/node_modules/@material-ui/core/ListItemButton/index.js -new file mode 100644 -index 0000000..762c1fe ---- /dev/null -+++ b/node_modules/@material-ui/core/ListItemButton/index.js -@@ -0,0 +1,3 @@ -+export { default } from './ListItemButton'; -+export { default as listItemButtonClasses } from './listItemButtonClasses'; -+export * from './listItemButtonClasses'; -\ No newline at end of file -diff --git a/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.d.ts b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.d.ts -new file mode 100644 -index 0000000..3eac17f ---- /dev/null -+++ b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.d.ts -@@ -0,0 +1,22 @@ -+export interface ListItemButtonClasses { -+ /** Styles applied to the root element. */ -+ root: string; -+ /** Pseudo-class applied to the `component`'s `focusVisibleClassName` prop. */ -+ focusVisible: string; -+ /** Styles applied to the component element if dense. */ -+ dense: string; -+ /** Styles applied to the component element if `alignItems="flex-start"`. */ -+ alignItemsFlexStart: string; -+ /** Pseudo-class applied to the inner `component` element if `disabled={true}`. */ -+ disabled: string; -+ /** Styles applied to the inner `component` element if `divider={true}`. */ -+ divider: string; -+ /** Styles applied to the inner `component` element unless `disableGutters={true}`. */ -+ gutters: string; -+ /** Pseudo-class applied to the root element if `selected={true}`. */ -+ selected: string; -+} -+export declare type ListItemButtonClassKey = keyof ListItemButtonClasses; -+export declare function getListItemButtonUtilityClass(slot: string): string; -+declare const listItemButtonClasses: ListItemButtonClasses; -+export default listItemButtonClasses; -diff --git a/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.js b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.js -new file mode 100644 -index 0000000..0daa70f ---- /dev/null -+++ b/node_modules/@material-ui/core/ListItemButton/listItemButtonClasses.js -@@ -0,0 +1,6 @@ -+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; -+export function getListItemButtonUtilityClass(slot) { -+ return generateUtilityClass('MuiListItemButton', slot); -+} -+const listItemButtonClasses = generateUtilityClasses('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']); -+export default listItemButtonClasses; -\ No newline at end of file -diff --git a/node_modules/@material-ui/core/index.d.ts b/node_modules/@material-ui/core/index.d.ts -index 18dbae0..68ac29c 100644 ---- a/node_modules/@material-ui/core/index.d.ts -+++ b/node_modules/@material-ui/core/index.d.ts -@@ -264,6 +264,9 @@ export * from './List'; - export { default as ListItem } from './ListItem'; - export * from './ListItem'; - -+export { default as ListItem } from './ListItemButton'; -+export * from './ListItemButton'; -+ - export { default as ListItemAvatar } from './ListItemAvatar'; - export * from './ListItemAvatar'; - -diff --git a/node_modules/@material-ui/core/index.js b/node_modules/@material-ui/core/index.js -index 239a738..9ecc300 100644 ---- a/node_modules/@material-ui/core/index.js -+++ b/node_modules/@material-ui/core/index.js -@@ -135,6 +135,8 @@ export { default as List } from './List'; - export * from './List'; - export { default as ListItem } from './ListItem'; - export * from './ListItem'; -+export { default as ListItemButton } from './ListItemButton'; -+export * from './ListItemButton'; - export { default as ListItemAvatar } from './ListItemAvatar'; - export * from './ListItemAvatar'; - export { default as ListItemIcon } from './ListItemIcon'; -diff --git a/node_modules/@material-ui/core/legacy/index.js b/node_modules/@material-ui/core/legacy/index.js -index 239a738..9ecc300 100644 ---- a/node_modules/@material-ui/core/legacy/index.js -+++ b/node_modules/@material-ui/core/legacy/index.js -@@ -135,6 +135,8 @@ export { default as List } from './List'; - export * from './List'; - export { default as ListItem } from './ListItem'; - export * from './ListItem'; -+export { default as ListItemButton } from './ListItemButton'; -+export * from './ListItemButton'; - export { default as ListItemAvatar } from './ListItemAvatar'; - export * from './ListItemAvatar'; - export { default as ListItemIcon } from './ListItemIcon'; -diff --git a/node_modules/@material-ui/core/modern/index.js b/node_modules/@material-ui/core/modern/index.js -index 239a738..9ecc300 100644 ---- a/node_modules/@material-ui/core/modern/index.js -+++ b/node_modules/@material-ui/core/modern/index.js -@@ -135,6 +135,8 @@ export { default as List } from './List'; - export * from './List'; - export { default as ListItem } from './ListItem'; - export * from './ListItem'; -+export { default as ListItemButton } from './ListItemButton'; -+export * from './ListItemButton'; - export { default as ListItemAvatar } from './ListItemAvatar'; - export * from './ListItemAvatar'; - export { default as ListItemIcon } from './ListItemIcon'; -diff --git a/node_modules/@material-ui/core/styles/components.d.ts b/node_modules/@material-ui/core/styles/components.d.ts -index 1e3ad6a..8ad2968 100644 ---- a/node_modules/@material-ui/core/styles/components.d.ts -+++ b/node_modules/@material-ui/core/styles/components.d.ts -@@ -249,6 +249,10 @@ export interface Components { - defaultProps?: ComponentsProps['MuiListItem']; - styleOverrides?: ComponentsOverrides['MuiListItem']; - }; -+ MuiListItemButton?: { -+ defaultProps?: ComponentsProps['MuiListItemButton']; -+ styleOverrides?: ComponentsOverrides['MuiListItemButton']; -+ }; - MuiListItemAvatar?: { - defaultProps?: ComponentsProps['MuiListItemAvatar']; - styleOverrides?: ComponentsOverrides['MuiListItemAvatar']; -diff --git a/node_modules/@material-ui/core/styles/overrides.d.ts b/node_modules/@material-ui/core/styles/overrides.d.ts -index 5f51945..9e5e1f1 100644 ---- a/node_modules/@material-ui/core/styles/overrides.d.ts -+++ b/node_modules/@material-ui/core/styles/overrides.d.ts -@@ -57,6 +57,7 @@ import { LinkClassKey } from '../Link'; - import { ListClassKey } from '../List'; - import { ListItemAvatarClassKey } from '../ListItemAvatar'; - import { ListItemClassKey } from '../ListItem'; -+import { ListItemButtonClassKey } from '../ListItemButton'; - import { ListItemIconClassKey } from '../ListItemIcon'; - import { ListItemSecondaryActionClassKey } from '../ListItemSecondaryAction'; - import { ListItemTextClassKey } from '../ListItemText'; -@@ -181,6 +182,7 @@ export interface ComponentNameToClassKey { - MuiLink: LinkClassKey; - MuiList: ListClassKey; - MuiListItem: ListItemClassKey; -+ MuiListItemButton: ListItemButtonClassKey; - MuiListItemAvatar: ListItemAvatarClassKey; - MuiListItemIcon: ListItemIconClassKey; - MuiListItemSecondaryAction: ListItemSecondaryActionClassKey; -diff --git a/node_modules/@material-ui/core/styles/props.d.ts b/node_modules/@material-ui/core/styles/props.d.ts -index 1457e0e..543e5bb 100644 ---- a/node_modules/@material-ui/core/styles/props.d.ts -+++ b/node_modules/@material-ui/core/styles/props.d.ts -@@ -57,6 +57,7 @@ import { LinkProps } from '../Link'; - import { ListItemAvatarProps } from '../ListItemAvatar'; - import { ListItemIconProps } from '../ListItemIcon'; - import { ListItemProps } from '../ListItem'; -+import { ListItemButtonProps } from '../ListItemButton'; - import { ListItemSecondaryActionProps } from '../ListItemSecondaryAction'; - import { ListItemTextProps } from '../ListItemText'; - import { ListProps } from '../List'; -@@ -177,6 +178,7 @@ export interface ComponentsPropsList { - MuiLink: LinkProps; - MuiList: ListProps; - MuiListItem: ListItemProps; -+ MuiListItemButton: ListItemButtonProps; - MuiListItemAvatar: ListItemAvatarProps; - MuiListItemIcon: ListItemIconProps; - MuiListItemSecondaryAction: ListItemSecondaryActionProps; -diff --git a/node_modules/@material-ui/core/styles/styled.d.ts b/node_modules/@material-ui/core/styles/styled.d.ts -new file mode 100644 -index 0000000..928ed5f ---- /dev/null -+++ b/node_modules/@material-ui/core/styles/styled.d.ts -@@ -0,0 +1,13 @@ -+import { CreateMUIStyled } from '@material-ui/system'; -+import { Theme } from './createTheme'; -+ -+/** -+ * Custom styled utility that has a default MUI theme. -+ * -+ * @param tag HTML tag or component that should serve as base. -+ * @param options Styled options for the created component. -+ * @returns React component that has styles attached to it. -+ */ -+declare const styled: CreateMUIStyled; -+ -+export default styled; -diff --git a/node_modules/@material-ui/core/styles/styled.js b/node_modules/@material-ui/core/styles/styled.js -new file mode 100644 -index 0000000..f539618 ---- /dev/null -+++ b/node_modules/@material-ui/core/styles/styled.js -@@ -0,0 +1,9 @@ -+import { createStyled, shouldForwardProp } from '@material-ui/system'; -+import defaultTheme from './defaultTheme'; -+export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes'; -+export const slotShouldForwardProp = shouldForwardProp; -+const styled = createStyled({ -+ defaultTheme, -+ rootShouldForwardProp -+}); -+export default styled; -\ No newline at end of file diff --git a/patches/@material-ui+system+5.0.0-alpha.34.patch b/patches/@material-ui+system+5.0.0-alpha.34.patch deleted file mode 100644 index 0e9fce3d61b7..000000000000 --- a/patches/@material-ui+system+5.0.0-alpha.34.patch +++ /dev/null @@ -1,1388 +0,0 @@ -# generated by patch-package 6.4.7 on 2021-06-12 01:44:38 -# -# command: -# npx patch-package @material-ui/system -# -# declared package: -# @material-ui/system: 5.0.0-alpha.34 -# -diff --git a/node_modules/@material-ui/system/createStyled.d.ts b/node_modules/@material-ui/system/createStyled.d.ts -new file mode 100644 -index 0000000..ffe8283 ---- /dev/null -+++ b/node_modules/@material-ui/system/createStyled.d.ts -@@ -0,0 +1,244 @@ -+import * as React from 'react'; -+import * as CSS from 'csstype'; -+import { SxProps } from './styleFunctionSx'; -+import { Theme as DefaultTheme } from './createTheme'; -+ -+export interface SerializedStyles { -+ name: string; -+ styles: string; -+ map?: string; -+ next?: SerializedStyles; -+} -+ -+export type CSSProperties = CSS.PropertiesFallback; -+export type CSSPropertiesWithMultiValues = { -+ [K in keyof CSSProperties]: CSSProperties[K] | Array>; -+}; -+export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject }; -+ -+export interface CSSOthersObject { -+ [propertiesName: string]: unknown | CSSInterpolation; -+} -+export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject }; -+ -+export interface ArrayCSSInterpolation extends Array {} -+ -+export interface CSSOthersObjectForCSSObject { -+ [propertiesName: string]: CSSInterpolation; -+} -+ -+export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {} -+ -+export interface ComponentSelector { -+ __emotion_styles: any; -+} -+ -+export type Keyframes = { -+ name: string; -+ styles: string; -+ anim: number; -+ toString: () => string; -+} & string; -+ -+export type Equal = A extends B ? (B extends A ? T : F) : F; -+ -+export type InterpolationPrimitive = -+ | null -+ | undefined -+ | boolean -+ | number -+ | string -+ | ComponentSelector -+ | Keyframes -+ | SerializedStyles -+ | CSSObject; -+ -+export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation; -+ -+export interface FunctionInterpolation { -+ (props: Props): Interpolation; -+} -+ -+export interface ArrayInterpolation extends Array> {} -+ -+export type Interpolation = -+ | InterpolationPrimitive -+ | ArrayInterpolation -+ | FunctionInterpolation; -+ -+/** -+ * @desc Utility type for getting props type of React component. -+ * It takes `defaultProps` into an account - making props with defaults optional. -+ */ -+export type PropsOf> = -+ JSX.LibraryManagedAttributes>; -+ -+export type Overwrapped = Pick>; -+ -+export interface StyledComponent -+ extends React.FunctionComponent, -+ ComponentSelector { -+ /** -+ * @desc this method is type-unsafe -+ */ -+ withComponent( -+ tag: NewTag, -+ ): StyledComponent; -+ withComponent>( -+ tag: Tag, -+ ): StyledComponent, StyleProps, Theme>; -+} -+ -+export interface StyledOptions { -+ label?: string; -+ shouldForwardProp?(propName: PropertyKey): boolean; -+ target?: string; -+} -+ -+export interface MuiStyledOptions { -+ name?: string; -+ slot?: string; -+ overridesResolver?: (props: any, styles: Record) => Record; -+ skipVariantsResolver?: boolean; -+ skipSx?: boolean; -+} -+ -+/** Same as StyledOptions but shouldForwardProp must be a type guard */ -+export interface FilteringStyledOptions { -+ label?: string; -+ shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps; -+ target?: string; -+} -+ -+/** -+ * @typeparam ComponentProps Props which will be included when withComponent is called -+ * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called -+ */ -+export interface CreateStyledComponent< -+ ComponentProps extends {}, -+ SpecificComponentProps extends {} = {}, -+ JSXProps extends {} = {}, -+> { -+ /** -+ * @typeparam AdditionalProps Additional props to add to your styled component -+ */ -+ ( -+ ...styles: Array< -+ Interpolation< -+ ComponentProps & SpecificComponentProps & AdditionalProps & { theme: DefaultTheme } -+ > -+ > -+ ): StyledComponent; -+ -+ ( -+ template: TemplateStringsArray, -+ ...styles: Array< -+ Interpolation -+ > -+ ): StyledComponent; -+ -+ /** -+ * @typeparam AdditionalProps Additional props to add to your styled component -+ */ -+ ( -+ template: TemplateStringsArray, -+ ...styles: Array< -+ Interpolation< -+ ComponentProps & SpecificComponentProps & AdditionalProps & { theme: DefaultTheme } -+ > -+ > -+ ): StyledComponent; -+} -+ -+export interface CreateMUIStyled { -+ < -+ C extends React.ComponentClass>, -+ ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps, -+ >( -+ component: C, -+ options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions, -+ ): CreateStyledComponent< -+ Pick, ForwardedProps> & { -+ theme?: Theme; -+ as?: React.ElementType; -+ sx?: SxProps; -+ }, -+ {}, -+ { -+ ref?: React.Ref>; -+ } -+ >; -+ -+ >>( -+ component: C, -+ options?: StyledOptions & MuiStyledOptions, -+ ): CreateStyledComponent< -+ PropsOf & { -+ theme?: Theme; -+ as?: React.ElementType; -+ sx?: SxProps; -+ }, -+ {}, -+ { -+ ref?: React.Ref>; -+ } -+ >; -+ -+ < -+ C extends React.JSXElementConstructor>, -+ ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps, -+ >( -+ component: C, -+ options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions, -+ ): CreateStyledComponent< -+ Pick, ForwardedProps> & { -+ theme?: Theme; -+ as?: React.ElementType; -+ sx?: SxProps; -+ } -+ >; -+ -+ >>( -+ component: C, -+ options?: StyledOptions & MuiStyledOptions, -+ ): CreateStyledComponent< -+ PropsOf & { -+ theme?: Theme; -+ as?: React.ElementType; -+ sx?: SxProps; -+ } -+ >; -+ -+ < -+ Tag extends keyof JSX.IntrinsicElements, -+ ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag], -+ >( -+ tag: Tag, -+ options: FilteringStyledOptions & MuiStyledOptions, -+ ): CreateStyledComponent< -+ { -+ theme?: Theme; -+ as?: React.ElementType; -+ sx?: SxProps; -+ }, -+ Pick -+ >; -+ -+ ( -+ tag: Tag, -+ options?: StyledOptions & MuiStyledOptions, -+ ): CreateStyledComponent< -+ { -+ theme?: Theme; -+ as?: React.ElementType; -+ sx?: SxProps; -+ }, -+ JSX.IntrinsicElements[Tag] -+ >; -+} -+ -+export default function createStyled(options?: { -+ defaultTheme?: T; -+ rootShouldForwardProp?: (prop: string) => boolean; -+ slotShouldForwardProp?: (prop: string) => boolean; -+}): CreateMUIStyled; -diff --git a/node_modules/@material-ui/system/createStyled.js b/node_modules/@material-ui/system/createStyled.js -new file mode 100644 -index 0000000..923a28b ---- /dev/null -+++ b/node_modules/@material-ui/system/createStyled.js -@@ -0,0 +1,195 @@ -+"use strict"; -+ -+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); -+ -+Object.defineProperty(exports, "__esModule", { -+ value: true -+}); -+exports.default = createStyled; -+exports.systemDefaultTheme = exports.shouldForwardProp = void 0; -+ -+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); -+ -+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); -+ -+var _styledEngine = _interopRequireDefault(require("@material-ui/styled-engine")); -+ -+var _createTheme = _interopRequireDefault(require("./createTheme")); -+ -+var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx")); -+ -+var _propsToClassKey = _interopRequireDefault(require("./propsToClassKey")); -+ -+function isEmpty(obj) { -+ return Object.keys(obj).length === 0; -+} -+ -+const getStyleOverrides = (name, theme) => { -+ if (theme.components && theme.components[name] && theme.components[name].styleOverrides) { -+ return theme.components[name].styleOverrides; -+ } -+ -+ return null; -+}; -+ -+const getVariantStyles = (name, theme) => { -+ let variants = []; -+ -+ if (theme && theme.components && theme.components[name] && theme.components[name].variants) { -+ variants = theme.components[name].variants; -+ } -+ -+ const variantsStyles = {}; -+ variants.forEach(definition => { -+ const key = (0, _propsToClassKey.default)(definition.props); -+ variantsStyles[key] = definition.style; -+ }); -+ return variantsStyles; -+}; -+ -+const variantsResolver = (props, styles, theme, name) => { -+ var _theme$components, _theme$components$nam; -+ -+ const { -+ styleProps = {} -+ } = props; -+ let variantsStyles = {}; -+ const themeVariants = theme === null || theme === void 0 ? void 0 : (_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.variants; -+ -+ if (themeVariants) { -+ themeVariants.forEach(themeVariant => { -+ let isMatch = true; -+ Object.keys(themeVariant.props).forEach(key => { -+ if (styleProps[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) { -+ isMatch = false; -+ } -+ }); -+ -+ if (isMatch) { -+ variantsStyles = (0, _extends2.default)({}, variantsStyles, styles[(0, _propsToClassKey.default)(themeVariant.props)]); -+ } -+ }); -+ } -+ -+ return variantsStyles; -+}; -+ -+const shouldForwardProp = prop => prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as'; -+ -+exports.shouldForwardProp = shouldForwardProp; -+const systemDefaultTheme = (0, _createTheme.default)(); -+exports.systemDefaultTheme = systemDefaultTheme; -+ -+const lowercaseFirstLetter = string => { -+ return string.charAt(0).toLowerCase() + string.slice(1); -+}; -+ -+function createStyled(input = {}) { -+ const { -+ defaultTheme = systemDefaultTheme, -+ rootShouldForwardProp = shouldForwardProp, -+ slotShouldForwardProp = shouldForwardProp -+ } = input; -+ return (tag, inputOptions = {}) => { -+ const { -+ name: componentName, -+ slot: componentSlot, -+ skipVariantsResolver: inputSkipVariantsResolver, -+ skipSx: inputSkipSx, -+ overridesResolver -+ } = inputOptions, -+ options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots. -+ -+ const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false; -+ const skipSx = inputSkipSx || false; -+ let displayName; -+ let className; -+ -+ if (componentName) { -+ displayName = `${componentName}${componentSlot || ''}`; -+ className = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`; -+ } -+ -+ const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({}, !componentSlot || componentSlot === 'Root' ? { -+ shouldForwardProp: rootShouldForwardProp -+ } : { -+ shouldForwardProp: slotShouldForwardProp -+ }, { -+ label: className || componentName || '' -+ }, options)); -+ -+ const muiStyledResolver = (styleArg, ...expressions) => { -+ const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => { -+ return typeof stylesArg === 'function' ? (_ref) => { -+ let { -+ theme: themeInput -+ } = _ref, -+ other = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["theme"]); -+ return stylesArg((0, _extends2.default)({ -+ theme: isEmpty(themeInput) ? defaultTheme : themeInput -+ }, other)); -+ } : stylesArg; -+ }) : []; -+ let transformedStyleArg = styleArg; -+ -+ if (componentName && overridesResolver) { -+ expressionsWithDefaultTheme.push(props => { -+ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; -+ const styleOverrides = getStyleOverrides(componentName, theme); -+ -+ if (styleOverrides) { -+ return overridesResolver(props, styleOverrides); -+ } -+ -+ return null; -+ }); -+ } -+ -+ if (componentName && overridesResolver && !skipVariantsResolver) { -+ expressionsWithDefaultTheme.push(props => { -+ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; -+ return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName); -+ }); -+ } -+ -+ if (!skipSx) { -+ expressionsWithDefaultTheme.push(props => { -+ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; -+ return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, { -+ theme -+ })); -+ }); -+ } -+ -+ const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length; -+ -+ if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) { -+ const placeholders = new Array(numOfCustomFnsApplied).fill(''); // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles. -+ -+ transformedStyleArg = [...styleArg, ...placeholders]; -+ transformedStyleArg.raw = [...styleArg.raw, ...placeholders]; -+ } else if (typeof styleArg === 'function') { -+ // If the type is function, we need to define the default theme. -+ transformedStyleArg = (_ref2) => { -+ let { -+ theme: themeInput -+ } = _ref2, -+ other = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["theme"]); -+ return styleArg((0, _extends2.default)({ -+ theme: isEmpty(themeInput) ? defaultTheme : themeInput -+ }, other)); -+ }; -+ } -+ -+ const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme); -+ -+ if (displayName) { -+ Component.displayName = displayName; -+ } -+ -+ return Component; -+ }; -+ -+ return muiStyledResolver; -+ }; -+} -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/createTheme/createBreakpoints.d.ts b/node_modules/@material-ui/system/createTheme/createBreakpoints.d.ts -new file mode 100644 -index 0000000..6389985 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/createBreakpoints.d.ts -@@ -0,0 +1,28 @@ -+import { OverridableStringUnion } from '@material-ui/types'; -+ -+export interface BreakpointOverrides {} -+ -+export type Breakpoint = OverridableStringUnion< -+ 'xs' | 'sm' | 'md' | 'lg' | 'xl', -+ BreakpointOverrides -+>; -+export type BreakpointValues = { [key in Breakpoint]: number }; -+export const keys: Breakpoint[]; -+ -+export interface Breakpoints { -+ keys: Breakpoint[]; -+ values: BreakpointValues; -+ up: (key: Breakpoint | number) => string; -+ down: (key: Breakpoint | number) => string; -+ between: (start: Breakpoint | number, end: Breakpoint | number) => string; -+ only: (key: Breakpoint) => string; -+} -+ -+export type BreakpointsOptions = Partial< -+ { -+ unit: string; -+ step: number; -+ } & Breakpoints -+>; -+ -+export default function createBreakpoints(options: BreakpointsOptions): Breakpoints; -diff --git a/node_modules/@material-ui/system/createTheme/createBreakpoints.js b/node_modules/@material-ui/system/createTheme/createBreakpoints.js -new file mode 100644 -index 0000000..02638e7 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/createBreakpoints.js -@@ -0,0 +1,70 @@ -+"use strict"; -+ -+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); -+ -+Object.defineProperty(exports, "__esModule", { -+ value: true -+}); -+exports.default = createBreakpoints; -+exports.breakpointKeys = void 0; -+ -+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); -+ -+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); -+ -+// Sorted ASC by size. That's important. -+// It can't be configured as it's used statically for propTypes. -+const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification. -+ -+exports.breakpointKeys = breakpointKeys; -+ -+function createBreakpoints(breakpoints) { -+ const { -+ // The breakpoint **start** at this value. -+ // For instance with the first breakpoint xs: [xs, sm). -+ values = { -+ xs: 0, -+ sm: 600, -+ md: 960, -+ lg: 1280, -+ xl: 1920 -+ }, -+ unit = 'px', -+ step = 5 -+ } = breakpoints, -+ other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, ["values", "unit", "step"]); -+ const keys = Object.keys(values); -+ -+ function up(key) { -+ const value = typeof values[key] === 'number' ? values[key] : key; -+ return `@media (min-width:${value}${unit})`; -+ } -+ -+ function down(key) { -+ const value = typeof values[key] === 'number' ? values[key] : key; -+ return `@media (max-width:${value - step / 100}${unit})`; -+ } -+ -+ function between(start, end) { -+ const endIndex = keys.indexOf(end); -+ return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`; -+ } -+ -+ function only(key) { -+ if (keys.indexOf(key) + 1 < keys.length) { -+ return between(key, keys[keys.indexOf(key) + 1]); -+ } -+ -+ return up(key); -+ } -+ -+ return (0, _extends2.default)({ -+ keys, -+ values, -+ up, -+ down, -+ between, -+ only, -+ unit -+ }, other); -+} -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/createTheme/createSpacing.d.ts b/node_modules/@material-ui/system/createTheme/createSpacing.d.ts -new file mode 100644 -index 0000000..e754383 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/createSpacing.d.ts -@@ -0,0 +1,10 @@ -+export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray; -+export declare type SpacingArgument = number | string; -+export interface Spacing { -+ (): string; -+ (value: number): string; -+ (topBottom: SpacingArgument, rightLeft: SpacingArgument): string; -+ (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string; -+ (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string; -+} -+export default function createSpacing(spacingInput?: SpacingOptions): Spacing; -diff --git a/node_modules/@material-ui/system/createTheme/createSpacing.js b/node_modules/@material-ui/system/createTheme/createSpacing.js -new file mode 100644 -index 0000000..44dcb89 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/createSpacing.js -@@ -0,0 +1,40 @@ -+"use strict"; -+ -+Object.defineProperty(exports, "__esModule", { -+ value: true -+}); -+exports.default = createSpacing; -+ -+var _spacing = require("../spacing"); -+ -+/* tslint:enable:unified-signatures */ -+function createSpacing(spacingInput = 8) { -+ // Already transformed. -+ if (spacingInput.mui) { -+ return spacingInput; -+ } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. -+ // Smaller components, such as icons, can align to a 4dp grid. -+ // https://material.io/design/layout/understanding-layout.html#usage -+ -+ -+ const transform = (0, _spacing.createUnarySpacing)({ -+ spacing: spacingInput -+ }); -+ -+ const spacing = (...argsInput) => { -+ if (process.env.NODE_ENV !== 'production') { -+ if (!(argsInput.length <= 4)) { -+ console.error(`Material-UI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`); -+ } -+ } -+ -+ const args = argsInput.length === 0 ? [1] : argsInput; -+ return args.map(argument => { -+ const output = transform(argument); -+ return typeof output === 'number' ? `${output}px` : output; -+ }).join(' '); -+ }; -+ -+ spacing.mui = true; -+ return spacing; -+} -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/createTheme/createTheme.d.ts b/node_modules/@material-ui/system/createTheme/createTheme.d.ts -new file mode 100644 -index 0000000..9b9d1c2 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/createTheme.d.ts -@@ -0,0 +1,43 @@ -+import { Breakpoints, BreakpointsOptions } from './createBreakpoints'; -+import { Shape, ShapeOptions } from './shape'; -+import { Spacing, SpacingOptions } from './createSpacing'; -+ -+export { Breakpoint, BreakpointOverrides } from './createBreakpoints'; -+ -+export type Direction = 'ltr' | 'rtl'; -+ -+export interface ThemeOptions { -+ shape?: ShapeOptions; -+ breakpoints?: BreakpointsOptions; -+ direction?: Direction; -+ mixins?: unknown; -+ palette?: Record; -+ shadows?: unknown; -+ spacing?: SpacingOptions; -+ transitions?: unknown; -+ components?: Record; -+ typography?: unknown; -+ zIndex?: Record; -+} -+ -+export interface Theme { -+ shape: Shape; -+ breakpoints: Breakpoints; -+ direction: Direction; -+ palette: Record & { mode: 'light' | 'dark' }; -+ shadows?: unknown; -+ spacing: Spacing; -+ transitions?: unknown; -+ components?: Record; -+ mixins?: unknown; -+ typography?: unknown; -+ zIndex?: unknown; -+} -+ -+/** -+ * Generate a theme base on the options received. -+ * @param options Takes an incomplete theme object and adds the missing parts. -+ * @param args Deep merge the arguments with the about to be returned theme. -+ * @returns A complete, ready to use theme object. -+ */ -+export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme; -diff --git a/node_modules/@material-ui/system/createTheme/createTheme.js b/node_modules/@material-ui/system/createTheme/createTheme.js -new file mode 100644 -index 0000000..2caf071 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/createTheme.js -@@ -0,0 +1,50 @@ -+"use strict"; -+ -+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); -+ -+Object.defineProperty(exports, "__esModule", { -+ value: true -+}); -+exports.default = void 0; -+ -+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); -+ -+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); -+ -+var _utils = require("@material-ui/utils"); -+ -+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints")); -+ -+var _shape = _interopRequireDefault(require("./shape")); -+ -+var _createSpacing = _interopRequireDefault(require("./createSpacing")); -+ -+function createTheme(options = {}, ...args) { -+ const { -+ breakpoints: breakpointsInput = {}, -+ palette: paletteInput = {}, -+ spacing: spacingInput, -+ shape: shapeInput = {} -+ } = options, -+ other = (0, _objectWithoutPropertiesLoose2.default)(options, ["breakpoints", "palette", "spacing", "shape"]); -+ const breakpoints = (0, _createBreakpoints.default)(breakpointsInput); -+ const spacing = (0, _createSpacing.default)(spacingInput); -+ let muiTheme = (0, _utils.deepmerge)({ -+ breakpoints, -+ direction: 'ltr', -+ components: {}, -+ // Inject component definitions. -+ palette: (0, _extends2.default)({ -+ mode: 'light' -+ }, paletteInput), -+ spacing, -+ shape: (0, _extends2.default)({}, _shape.default, { -+ shapeInput -+ }) -+ }, other); -+ muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme); -+ return muiTheme; -+} -+ -+var _default = createTheme; -+exports.default = _default; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/createTheme/index.d.ts b/node_modules/@material-ui/system/createTheme/index.d.ts -new file mode 100644 -index 0000000..def7508 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/index.d.ts -@@ -0,0 +1,2 @@ -+export { default } from './createTheme'; -+export * from './createTheme'; -diff --git a/node_modules/@material-ui/system/createTheme/index.js b/node_modules/@material-ui/system/createTheme/index.js -new file mode 100644 -index 0000000..fc2a1ef ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/index.js -@@ -0,0 +1,15 @@ -+"use strict"; -+ -+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); -+ -+Object.defineProperty(exports, "__esModule", { -+ value: true -+}); -+Object.defineProperty(exports, "default", { -+ enumerable: true, -+ get: function () { -+ return _createTheme.default; -+ } -+}); -+ -+var _createTheme = _interopRequireDefault(require("./createTheme")); -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/createTheme/shape.d.ts b/node_modules/@material-ui/system/createTheme/shape.d.ts -new file mode 100644 -index 0000000..073fb7b ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/shape.d.ts -@@ -0,0 +1,9 @@ -+export interface Shape { -+ borderRadius: number | string; -+} -+ -+export type ShapeOptions = Partial; -+ -+declare const shape: Shape; -+ -+export default shape; -diff --git a/node_modules/@material-ui/system/createTheme/shape.js b/node_modules/@material-ui/system/createTheme/shape.js -new file mode 100644 -index 0000000..c2352f1 ---- /dev/null -+++ b/node_modules/@material-ui/system/createTheme/shape.js -@@ -0,0 +1,11 @@ -+"use strict"; -+ -+Object.defineProperty(exports, "__esModule", { -+ value: true -+}); -+exports.default = void 0; -+const shape = { -+ borderRadius: 4 -+}; -+var _default = shape; -+exports.default = _default; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/createStyled.js b/node_modules/@material-ui/system/esm/createStyled.js -new file mode 100644 -index 0000000..1cb2ca1 ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/createStyled.js -@@ -0,0 +1,180 @@ -+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; -+import _extends from "@babel/runtime/helpers/esm/extends"; -+import styledEngineStyled from '@material-ui/styled-engine'; -+import createTheme from './createTheme'; -+import styleFunctionSx from './styleFunctionSx'; -+import propsToClassKey from './propsToClassKey'; -+ -+function isEmpty(obj) { -+ return Object.keys(obj).length === 0; -+} -+ -+const getStyleOverrides = (name, theme) => { -+ if (theme.components && theme.components[name] && theme.components[name].styleOverrides) { -+ return theme.components[name].styleOverrides; -+ } -+ -+ return null; -+}; -+ -+const getVariantStyles = (name, theme) => { -+ let variants = []; -+ -+ if (theme && theme.components && theme.components[name] && theme.components[name].variants) { -+ variants = theme.components[name].variants; -+ } -+ -+ const variantsStyles = {}; -+ variants.forEach(definition => { -+ const key = propsToClassKey(definition.props); -+ variantsStyles[key] = definition.style; -+ }); -+ return variantsStyles; -+}; -+ -+const variantsResolver = (props, styles, theme, name) => { -+ var _theme$components, _theme$components$nam; -+ -+ const { -+ styleProps = {} -+ } = props; -+ let variantsStyles = {}; -+ const themeVariants = theme === null || theme === void 0 ? void 0 : (_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.variants; -+ -+ if (themeVariants) { -+ themeVariants.forEach(themeVariant => { -+ let isMatch = true; -+ Object.keys(themeVariant.props).forEach(key => { -+ if (styleProps[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) { -+ isMatch = false; -+ } -+ }); -+ -+ if (isMatch) { -+ variantsStyles = _extends({}, variantsStyles, styles[propsToClassKey(themeVariant.props)]); -+ } -+ }); -+ } -+ -+ return variantsStyles; -+}; -+ -+export const shouldForwardProp = prop => prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as'; -+export const systemDefaultTheme = createTheme(); -+ -+const lowercaseFirstLetter = string => { -+ return string.charAt(0).toLowerCase() + string.slice(1); -+}; -+ -+export default function createStyled(input = {}) { -+ const { -+ defaultTheme = systemDefaultTheme, -+ rootShouldForwardProp = shouldForwardProp, -+ slotShouldForwardProp = shouldForwardProp -+ } = input; -+ return (tag, inputOptions = {}) => { -+ const { -+ name: componentName, -+ slot: componentSlot, -+ skipVariantsResolver: inputSkipVariantsResolver, -+ skipSx: inputSkipSx, -+ overridesResolver -+ } = inputOptions, -+ options = _objectWithoutPropertiesLoose(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots. -+ -+ -+ const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false; -+ const skipSx = inputSkipSx || false; -+ let displayName; -+ let className; -+ -+ if (componentName) { -+ displayName = `${componentName}${componentSlot || ''}`; -+ className = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`; -+ } -+ -+ const defaultStyledResolver = styledEngineStyled(tag, _extends({}, !componentSlot || componentSlot === 'Root' ? { -+ shouldForwardProp: rootShouldForwardProp -+ } : { -+ shouldForwardProp: slotShouldForwardProp -+ }, { -+ label: className || componentName || '' -+ }, options)); -+ -+ const muiStyledResolver = (styleArg, ...expressions) => { -+ const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => { -+ return typeof stylesArg === 'function' ? (_ref) => { -+ let { -+ theme: themeInput -+ } = _ref, -+ other = _objectWithoutPropertiesLoose(_ref, ["theme"]); -+ -+ return stylesArg(_extends({ -+ theme: isEmpty(themeInput) ? defaultTheme : themeInput -+ }, other)); -+ } : stylesArg; -+ }) : []; -+ let transformedStyleArg = styleArg; -+ -+ if (componentName && overridesResolver) { -+ expressionsWithDefaultTheme.push(props => { -+ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; -+ const styleOverrides = getStyleOverrides(componentName, theme); -+ -+ if (styleOverrides) { -+ return overridesResolver(props, styleOverrides); -+ } -+ -+ return null; -+ }); -+ } -+ -+ if (componentName && overridesResolver && !skipVariantsResolver) { -+ expressionsWithDefaultTheme.push(props => { -+ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; -+ return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName); -+ }); -+ } -+ -+ if (!skipSx) { -+ expressionsWithDefaultTheme.push(props => { -+ const theme = isEmpty(props.theme) ? defaultTheme : props.theme; -+ return styleFunctionSx(_extends({}, props, { -+ theme -+ })); -+ }); -+ } -+ -+ const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length; -+ -+ if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) { -+ const placeholders = new Array(numOfCustomFnsApplied).fill(''); // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles. -+ -+ transformedStyleArg = [...styleArg, ...placeholders]; -+ transformedStyleArg.raw = [...styleArg.raw, ...placeholders]; -+ } else if (typeof styleArg === 'function') { -+ // If the type is function, we need to define the default theme. -+ transformedStyleArg = (_ref2) => { -+ let { -+ theme: themeInput -+ } = _ref2, -+ other = _objectWithoutPropertiesLoose(_ref2, ["theme"]); -+ -+ return styleArg(_extends({ -+ theme: isEmpty(themeInput) ? defaultTheme : themeInput -+ }, other)); -+ }; -+ } -+ -+ const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme); -+ -+ if (displayName) { -+ Component.displayName = displayName; -+ } -+ -+ return Component; -+ }; -+ -+ return muiStyledResolver; -+ }; -+} -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/createTheme/createBreakpoints.js b/node_modules/@material-ui/system/esm/createTheme/createBreakpoints.js -new file mode 100644 -index 0000000..0429a59 ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/createTheme/createBreakpoints.js -@@ -0,0 +1,57 @@ -+import _extends from "@babel/runtime/helpers/esm/extends"; -+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; -+// Sorted ASC by size. That's important. -+// It can't be configured as it's used statically for propTypes. -+export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification. -+ -+export default function createBreakpoints(breakpoints) { -+ const { -+ // The breakpoint **start** at this value. -+ // For instance with the first breakpoint xs: [xs, sm). -+ values = { -+ xs: 0, -+ sm: 600, -+ md: 960, -+ lg: 1280, -+ xl: 1920 -+ }, -+ unit = 'px', -+ step = 5 -+ } = breakpoints, -+ other = _objectWithoutPropertiesLoose(breakpoints, ["values", "unit", "step"]); -+ -+ const keys = Object.keys(values); -+ -+ function up(key) { -+ const value = typeof values[key] === 'number' ? values[key] : key; -+ return `@media (min-width:${value}${unit})`; -+ } -+ -+ function down(key) { -+ const value = typeof values[key] === 'number' ? values[key] : key; -+ return `@media (max-width:${value - step / 100}${unit})`; -+ } -+ -+ function between(start, end) { -+ const endIndex = keys.indexOf(end); -+ return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`; -+ } -+ -+ function only(key) { -+ if (keys.indexOf(key) + 1 < keys.length) { -+ return between(key, keys[keys.indexOf(key) + 1]); -+ } -+ -+ return up(key); -+ } -+ -+ return _extends({ -+ keys, -+ values, -+ up, -+ down, -+ between, -+ only, -+ unit -+ }, other); -+} -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/createTheme/createSpacing.js b/node_modules/@material-ui/system/esm/createTheme/createSpacing.js -new file mode 100644 -index 0000000..02d7944 ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/createTheme/createSpacing.js -@@ -0,0 +1,33 @@ -+import { createUnarySpacing } from '../spacing'; -+ -+/* tslint:enable:unified-signatures */ -+export default function createSpacing(spacingInput = 8) { -+ // Already transformed. -+ if (spacingInput.mui) { -+ return spacingInput; -+ } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. -+ // Smaller components, such as icons, can align to a 4dp grid. -+ // https://material.io/design/layout/understanding-layout.html#usage -+ -+ -+ const transform = createUnarySpacing({ -+ spacing: spacingInput -+ }); -+ -+ const spacing = (...argsInput) => { -+ if (process.env.NODE_ENV !== 'production') { -+ if (!(argsInput.length <= 4)) { -+ console.error(`Material-UI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`); -+ } -+ } -+ -+ const args = argsInput.length === 0 ? [1] : argsInput; -+ return args.map(argument => { -+ const output = transform(argument); -+ return typeof output === 'number' ? `${output}px` : output; -+ }).join(' '); -+ }; -+ -+ spacing.mui = true; -+ return spacing; -+} -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/createTheme/createTheme.js b/node_modules/@material-ui/system/esm/createTheme/createTheme.js -new file mode 100644 -index 0000000..de2dbe9 ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/createTheme/createTheme.js -@@ -0,0 +1,36 @@ -+import _extends from "@babel/runtime/helpers/esm/extends"; -+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; -+import { deepmerge } from '@material-ui/utils'; -+import createBreakpoints from './createBreakpoints'; -+import shape from './shape'; -+import createSpacing from './createSpacing'; -+ -+function createTheme(options = {}, ...args) { -+ const { -+ breakpoints: breakpointsInput = {}, -+ palette: paletteInput = {}, -+ spacing: spacingInput, -+ shape: shapeInput = {} -+ } = options, -+ other = _objectWithoutPropertiesLoose(options, ["breakpoints", "palette", "spacing", "shape"]); -+ -+ const breakpoints = createBreakpoints(breakpointsInput); -+ const spacing = createSpacing(spacingInput); -+ let muiTheme = deepmerge({ -+ breakpoints, -+ direction: 'ltr', -+ components: {}, -+ // Inject component definitions. -+ palette: _extends({ -+ mode: 'light' -+ }, paletteInput), -+ spacing, -+ shape: _extends({}, shape, { -+ shapeInput -+ }) -+ }, other); -+ muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme); -+ return muiTheme; -+} -+ -+export default createTheme; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/createTheme/index.js b/node_modules/@material-ui/system/esm/createTheme/index.js -new file mode 100644 -index 0000000..0676d84 ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/createTheme/index.js -@@ -0,0 +1 @@ -+export { default } from './createTheme'; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/createTheme/shape.js b/node_modules/@material-ui/system/esm/createTheme/shape.js -new file mode 100644 -index 0000000..d781443 ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/createTheme/shape.js -@@ -0,0 +1,4 @@ -+const shape = { -+ borderRadius: 4 -+}; -+export default shape; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/index.js b/node_modules/@material-ui/system/esm/index.js -index f08c267..7c39854 100644 ---- a/node_modules/@material-ui/system/esm/index.js -+++ b/node_modules/@material-ui/system/esm/index.js -@@ -22,3 +22,9 @@ export { default as typography } from './typography'; - export * from './typography'; - export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx'; - export { default as unstable_getThemeValue } from './getThemeValue'; -+export { default as createStyled } from './createStyled'; -+export * from './createStyled'; -+export { default as styled } from './styled'; -+export { default as createTheme } from './createTheme'; -+export { default as createBreakpoints } from './createTheme/createBreakpoints'; -+export { default as shape } from './createTheme/shape'; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/propsToClassKey.js b/node_modules/@material-ui/system/esm/propsToClassKey.js -new file mode 100644 -index 0000000..af9b2ea ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/propsToClassKey.js -@@ -0,0 +1,29 @@ -+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; -+import { unstable_capitalize as capitalize } from '@material-ui/utils'; -+ -+function isEmpty(string) { -+ return string.length === 0; -+} -+/** -+ * Generates string classKey based on the properties provided. It starts with the -+ * variant if defined, and then it appends all other properties in alphabetical order. -+ * @param {object} props - the properties for which the classKey should be created. -+ */ -+ -+ -+export default function propsToClassKey(props) { -+ const { -+ variant -+ } = props, -+ other = _objectWithoutPropertiesLoose(props, ["variant"]); -+ -+ let classKey = variant || ''; -+ Object.keys(other).sort().forEach(key => { -+ if (key === 'color') { -+ classKey += isEmpty(classKey) ? props[key] : capitalize(props[key]); -+ } else { -+ classKey += `${isEmpty(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`; -+ } -+ }); -+ return classKey; -+} -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/esm/styled.js b/node_modules/@material-ui/system/esm/styled.js -new file mode 100644 -index 0000000..c7f670e ---- /dev/null -+++ b/node_modules/@material-ui/system/esm/styled.js -@@ -0,0 +1,3 @@ -+import createStyled from './createStyled'; -+const styled = createStyled(); -+export default styled; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/index.d.ts b/node_modules/@material-ui/system/index.d.ts -index 15c2d5c..7ba099f 100644 ---- a/node_modules/@material-ui/system/index.d.ts -+++ b/node_modules/@material-ui/system/index.d.ts -@@ -329,3 +329,37 @@ export { - extendSxProp as unstable_extendSxProp, - } from './styleFunctionSx'; - export * from './styleFunctionSx'; -+ -+export { default as createStyled } from './createStyled'; -+export * from './createStyled'; -+ -+export { default as styled } from './styled'; -+export * from './styled'; -+ -+export { default as createTheme } from './createTheme'; -+export * from './createTheme'; -+ -+export { default as createBreakpoints } from './createTheme/createBreakpoints'; -+export * from './createTheme/createBreakpoints'; -+ -+export { SpacingOptions, Spacing } from './createTheme/createSpacing'; -+ -+export { default as shape } from './createTheme/shape'; -+export * from './createTheme/shape'; -+ -+export { default as createStyled } from './createStyled'; -+export * from './createStyled'; -+ -+export { default as styled } from './styled'; -+export * from './styled'; -+ -+export { default as createTheme } from './createTheme'; -+export * from './createTheme'; -+ -+export { default as createBreakpoints } from './createTheme/createBreakpoints'; -+export * from './createTheme/createBreakpoints'; -+ -+export { SpacingOptions, Spacing } from './createTheme/createSpacing'; -+ -+export { default as shape } from './createTheme/shape'; -+export * from './createTheme/shape'; -diff --git a/node_modules/@material-ui/system/index.js b/node_modules/@material-ui/system/index.js -index 3a0bf51..d254250 100644 ---- a/node_modules/@material-ui/system/index.js -+++ b/node_modules/@material-ui/system/index.js -@@ -266,3 +266,49 @@ Object.keys(_typography).forEach(function (key) { - var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx")); - - var _getThemeValue = _interopRequireDefault(require("./getThemeValue")); -+ -+ -+var _createStyled = _interopRequireWildcard(require("./createStyled")); -+ -+Object.keys(_createStyled).forEach(function (key) { -+ if (key === "default" || key === "__esModule") return; -+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; -+ if (key in exports && exports[key] === _createStyled[key]) return; -+ Object.defineProperty(exports, key, { -+ enumerable: true, -+ get: function () { -+ return _createStyled[key]; -+ } -+ }); -+}); -+ -+var _styled = _interopRequireDefault(require("./styled")); -+ -+var _createTheme = _interopRequireDefault(require("./createTheme")); -+ -+var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints")); -+ -+var _shape = _interopRequireDefault(require("./createTheme/shape")); -+ -+ -+var _createStyled = _interopRequireWildcard(require("./createStyled")); -+ -+Object.keys(_createStyled).forEach(function (key) { -+ if (key === "default" || key === "__esModule") return; -+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; -+ if (key in exports && exports[key] === _createStyled[key]) return; -+ Object.defineProperty(exports, key, { -+ enumerable: true, -+ get: function () { -+ return _createStyled[key]; -+ } -+ }); -+}); -+ -+var _styled = _interopRequireDefault(require("./styled")); -+ -+var _createTheme = _interopRequireDefault(require("./createTheme")); -+ -+var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints")); -+ -+var _shape = _interopRequireDefault(require("./createTheme/shape")); -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/legacy/index.js b/node_modules/@material-ui/system/legacy/index.js -index 4aa9104..7bc288c 100644 ---- a/node_modules/@material-ui/system/legacy/index.js -+++ b/node_modules/@material-ui/system/legacy/index.js -@@ -27,3 +27,15 @@ export { default as typography } from './typography'; - export * from './typography'; - export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx'; - export { default as unstable_getThemeValue } from './getThemeValue'; -+export { default as createStyled } from './createStyled'; -+export * from './createStyled'; -+export { default as styled } from './styled'; -+export { default as createTheme } from './createTheme'; -+export { default as createBreakpoints } from './createTheme/createBreakpoints'; -+export { default as shape } from './createTheme/shape'; -+export { default as createStyled } from './createStyled'; -+export * from './createStyled'; -+export { default as styled } from './styled'; -+export { default as createTheme } from './createTheme'; -+export { default as createBreakpoints } from './createTheme/createBreakpoints'; -+export { default as shape } from './createTheme/shape'; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/modern/index.js b/node_modules/@material-ui/system/modern/index.js -index 4aa9104..7bc288c 100644 ---- a/node_modules/@material-ui/system/modern/index.js -+++ b/node_modules/@material-ui/system/modern/index.js -@@ -27,3 +27,15 @@ export { default as typography } from './typography'; - export * from './typography'; - export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx'; - export { default as unstable_getThemeValue } from './getThemeValue'; -+export { default as createStyled } from './createStyled'; -+export * from './createStyled'; -+export { default as styled } from './styled'; -+export { default as createTheme } from './createTheme'; -+export { default as createBreakpoints } from './createTheme/createBreakpoints'; -+export { default as shape } from './createTheme/shape'; -+export { default as createStyled } from './createStyled'; -+export * from './createStyled'; -+export { default as styled } from './styled'; -+export { default as createTheme } from './createTheme'; -+export { default as createBreakpoints } from './createTheme/createBreakpoints'; -+export { default as shape } from './createTheme/shape'; -\ No newline at end of file -diff --git a/node_modules/@material-ui/system/styled.d.ts b/node_modules/@material-ui/system/styled.d.ts -new file mode 100644 -index 0000000..164bc4b ---- /dev/null -+++ b/node_modules/@material-ui/system/styled.d.ts -@@ -0,0 +1,5 @@ -+import { CreateMUIStyled } from './createStyled'; -+ -+declare const styled: CreateMUIStyled; -+ -+export default styled; -diff --git a/node_modules/@material-ui/system/styled.js b/node_modules/@material-ui/system/styled.js -new file mode 100644 -index 0000000..94bd7f0 ---- /dev/null -+++ b/node_modules/@material-ui/system/styled.js -@@ -0,0 +1,14 @@ -+"use strict"; -+ -+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); -+ -+Object.defineProperty(exports, "__esModule", { -+ value: true -+}); -+exports.default = void 0; -+ -+var _createStyled = _interopRequireDefault(require("./createStyled")); -+ -+const styled = (0, _createStyled.default)(); -+var _default = styled; -+exports.default = _default; -\ No newline at end of file