@graphcommerce/next-ui 7.1.0-canary.9 → 8.0.0-canary.100

package/Navigation/components/NavigationFab.tsx

@@ -1,5 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, styled, Box, SxProps, Theme, FabProps } from '@mui/material'
+import { Fab, styled, Box, SxProps, Theme, FabProps, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
@@ -35,6 +35,8 @@ export function NavigationFab(props: NavigationFabProps) {
   const scrollY = useScrollY()
   const scrolled = useMotionValueValue(scrollY, (y) => y > 10)
 
+  const theme = useTheme()
+
   useEffect(() => {
     const clear = () => setOpenEl(null)
     router.events.on('routeChangeStart', clear)
@@ -54,19 +56,19 @@ export function NavigationFab(props: NavigationFabProps) {
     >
       <MotionDiv
         className={classes.wrapper}
-        sx={(theme) => ({
+        sx={{
           [theme.breakpoints.down('md')]: {
             opacity: '1 !important',
             transform: 'none !important',
           },
-        })}
+        }}
         style={{ opacity }}
       >
         <Fab
           color='inherit'
           aria-label='Open Menu'
           size='responsive'
-          sx={(theme) => ({
+          sx={{
             boxShadow: 'none',
             '&:hover, &:focus': {
               boxShadow: 'none',
@@ -75,7 +77,7 @@ export function NavigationFab(props: NavigationFabProps) {
             background: theme.palette.text.primary,
             pointerEvents: 'all',
             color: theme.palette.background.paper,
-          })}
+          }}
           className={classes.fab}
           {...fabProps}
         >
@@ -87,7 +89,7 @@ export function NavigationFab(props: NavigationFabProps) {
           )}
         </Fab>
         <MotionDiv
-          sx={(theme) => ({
+          sx={{
             pointerEvents: 'none',
             borderRadius: '99em',
             position: 'absolute',
@@ -96,7 +98,7 @@ export function NavigationFab(props: NavigationFabProps) {
             boxShadow: theme.shadows[6],
             top: 0,
             [theme.breakpoints.down('md')]: { opacity: '1 !important' },
-          })}
+          }}
           className={classes.shadow}
           style={{ opacity: shadowOpacity }}
         />

package/Navigation/components/NavigationOverlay.tsx

@@ -2,7 +2,7 @@ import { useMotionValueValue, useMotionSelector, dvw } from '@graphcommerce/fram
 import { i18n } from '@lingui/core'
 import { useTheme, Box, Fab, SxProps, Theme, useEventCallback, styled } from '@mui/material'
 import { m } from 'framer-motion'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import type { LiteralUnion } from 'type-fest'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
@@ -71,6 +71,8 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
     } else selection.set([])
   })
 
+  const a11yFocusRef = useRef<HTMLButtonElement | null>(null)
+
   const selectedLevel = useMotionValueValue(selection, (s) => (s === false ? -1 : s.length))
   const selectionValue = useMotionValueValue(selection, (s) => (s ? s.join('') : s))
   const activeAndNotClosing = useMotionSelector([selection, closing], ([s, c]) =>
@@ -79,6 +81,10 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
 
   useEffect(() => {
     animating.set(true)
+
+    if (activeAndNotClosing) {
+      a11yFocusRef.current?.focus()
+    }
   }, [activeAndNotClosing, animating])
 
   const afterClose = useEventCallback(() => {
@@ -161,6 +167,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                 sx={{ boxShadow: 'none', my: fabMarginY }}
                 size='responsive'
                 aria-label={i18n._(/* i18n */ 'Close')}
+                ref={a11yFocusRef}
               >
                 <IconSvg src={iconClose} size='large' aria-hidden />
               </Fab>
@@ -178,6 +185,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
             (theme) => ({
               display: 'grid',
               alignItems: !stretchColumns ? 'start' : undefined,
+              justifyContent: 'end',
               [theme.breakpoints.down('md')]: {
                 width:
                   sizeSm !== 'floating'

package/Navigation/components/NavigationProvider.tsx

@@ -1,6 +1,8 @@
-import { MotionConfig, useMotionValue } from 'framer-motion'
+import { MotionConfig, useMotionValue, useTransform } from 'framer-motion'
 import React, { useMemo } from 'react'
 import { isElement } from 'react-is'
+import { LazyHydrate } from '../../LazyHydrate'
+import { nonNullable } from '../../RenderType/nonNullable'
 import {
   NavigationNode,
   NavigationContextType,
@@ -9,8 +11,9 @@ import {
   NavigationNodeType,
   NavigationNodeComponent,
 } from '../hooks/useNavigation'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
 
-export type NavigationProviderProps = {
+export type NavigationProviderBaseProps = {
   items: (NavigationNode | React.ReactElement)[]
   hideRootOnNavigate?: boolean
   closeAfterNavigate?: boolean
@@ -20,9 +23,9 @@ export type NavigationProviderProps = {
   serverRenderDepth?: number
 }
 
-const nonNullable = <T,>(value: T): value is NonNullable<T> => value !== null && value !== undefined
+export type NavigationProviderProps = NavigationProviderBaseProps & { hold?: boolean }
 
-export const NavigationProvider = React.memo<NavigationProviderProps>((props) => {
+const NavigationProviderBase = React.memo<NavigationProviderBaseProps>((props) => {
   const {
     items,
     hideRootOnNavigate = true,
@@ -73,3 +76,14 @@ export const NavigationProvider = React.memo<NavigationProviderProps>((props) =>
     </MotionConfig>
   )
 })
+
+export function NavigationProvider(props: NavigationProviderProps) {
+  const { selection } = props
+  const hydrateManually = useMotionValueValue(selection, (s) => s !== false)
+
+  return (
+    <LazyHydrate hydrated={hydrateManually}>
+      <NavigationProviderBase {...props} />
+    </LazyHydrate>
+  )
+}

package/Overlay/components/OverlayBase.tsx

@@ -311,7 +311,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   const handleEscape = (e: KeyboardEvent | Event) => {
     if (active && (e as KeyboardEvent)?.key === 'Escape') closeOverlay()
   }
-  useDomEvent(windowRef, 'keyup', handleEscape, { passive: true })
+  useDomEvent(windowRef, 'keydown', handleEscape, { passive: true })
 
   const dragging = useMotionValue(false)
   const scrollerElementRef = scrollerRef as React.RefObject<HTMLElement>

package/Overlay/components/index.ts

@@ -1,2 +1,3 @@
 export * from './OverlayBase'
 export * from './Overlay'
+export * from './OverlayStickyBottom'

package/Page/CssAndFramerMotionProvider.tsx

@@ -1,9 +1,8 @@
 import { GlobalStyles } from '@mui/material'
 import { LazyMotion } from 'framer-motion'
+import { EmotionProvider, EmotionProviderProps } from '../Styles/EmotionProvider'
 
-export type GraphCommerceProviderProps = {
-  children: React.ReactNode
-}
+export type CssAndFramerMotionProviderProps = EmotionProviderProps
 
 /**
  * For [@emotion/core](https://emotion.sh/docs/introduction) and
@@ -12,22 +11,25 @@ export type GraphCommerceProviderProps = {
  * - Wrapps the app to lazily load framer-motion.
  * - Wrapps the app to have Emotion CSS styles
  */
-export function CssAndFramerMotionProvider({ children }: GraphCommerceProviderProps) {
+export function CssAndFramerMotionProvider(props: CssAndFramerMotionProviderProps) {
+  const { children, emotionCache } = props
   return (
-    <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
-      {children}
-      <GlobalStyles
-        styles={{
-          ':root': {
-            '--client-size-y': '100vh',
-            '--client-size-x': '100vw',
-            '@supports(height: 100dvh)': {
-              '--client-size-y': '100dvh',
-              '--client-size-x': '100dvw',
+    <EmotionProvider emotionCache={emotionCache}>
+      <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
+        {children}
+        <GlobalStyles
+          styles={{
+            ':root': {
+              '--client-size-y': '100vh',
+              '--client-size-x': '100vw',
+              '@supports(height: 100dvh)': {
+                '--client-size-y': '100dvh',
+                '--client-size-x': '100dvw',
+              },
             },
-          },
-        }}
-      />
-    </LazyMotion>
+          }}
+        />
+      </LazyMotion>
+    </EmotionProvider>
   )
 }

package/PageMeta/PageMeta.tsx

@@ -2,8 +2,8 @@ import { usePageContext } from '@graphcommerce/framer-next-pages'
 import { addBasePath } from 'next/dist/client/add-base-path'
 import { addLocale } from 'next/dist/client/add-locale'
 import { getDomainLocale } from 'next/dist/client/get-domain-locale'
+import { resolveHref } from 'next/dist/client/resolve-href'
 import { NextRouter } from 'next/dist/shared/lib/router/router'
-import { resolveHref } from 'next/dist/shared/lib/router/utils/resolve-href'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import type {} from '@graphcommerce/next-config'
@@ -60,18 +60,25 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
     const curLocale = router.locale
 
     // Copied from here https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/client/link.tsx#L512
-    const localeDomain =
-      router.isLocaleDomain &&
-      getDomainLocale(as, curLocale, router && router.locales, router.domainLocales)
-
-    href = localeDomain || addBasePath(addLocale(as, curLocale, router.defaultLocale))
-
-    let siteUrl =
-      storefrontConfig(router.locale)?.canonicalBaseUrl ||
-      import.meta.graphCommerce.canonicalBaseUrl
-    if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
-
-    canonical = `${siteUrl}${href}`
+    const localeDomain = getDomainLocale(
+      as,
+      curLocale,
+      router && router.locales,
+      router.domainLocales,
+    )
+
+    if (localeDomain) {
+      canonical = localeDomain
+    } else {
+      href = addBasePath(addLocale(as, curLocale, router.defaultLocale))
+
+      let siteUrl =
+        storefrontConfig(router.locale)?.canonicalBaseUrl ||
+        import.meta.graphCommerce.canonicalBaseUrl
+      if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
+
+      canonical = `${siteUrl}${href}`
+    }
   }
 
   if (!canonical.startsWith('http')) {

package/RenderType/filterNonNullableKeys.ts

@@ -1,26 +1,23 @@
-import type { OptionalKeysOf, Simplify } from 'type-fest'
+import type { OptionalKeysOf } from 'type-fest'
 
-export type RequiredKeys<
-  T extends Record<string, unknown>,
-  Keys extends OptionalKeysOf<T>,
-> = Simplify<
-  Omit<T, Keys> & {
-    [K in Keys]: NonNullable<T[K]>
-  }
->
+export type RequiredKeys<T extends Record<string, unknown>, Keys extends OptionalKeysOf<T>> = Omit<
+  T,
+  Keys
+> & { [K in Keys]: NonNullable<T[K]> }
 
 export function filterNonNullableKeys<
   T extends Record<string, unknown>,
   Keys extends OptionalKeysOf<T>,
->(items: (T | null | undefined)[] | null | undefined, values: Keys[] = []) {
+>(
+  items: (T | null | undefined)[] | null | undefined,
+  values: Keys[] = [],
+): RequiredKeys<T, Keys>[] {
   if (!items) return []
 
-  const result = items.filter(
+  return items.filter(
     (item) =>
       item !== null &&
       typeof item !== 'undefined' &&
       values.every((v) => item?.[v] !== null && typeof item?.[v] !== 'undefined'),
-  )
-
-  return result as RequiredKeys<T, Keys>[]
+  ) as RequiredKeys<T, Keys>[]
 }

package/Row/ColumnOne/variant/VariantMessage.tsx

@@ -0,0 +1,12 @@
+import {
+  DismissibleSnackbar,
+  DismissibleSnackbarProps,
+} from '../../../Snackbar/DismissibleSnackbar'
+
+export type VariantMessageProps = DismissibleSnackbarProps
+
+export function VariantMessage(props: VariantMessageProps) {
+  const { ...rest } = props
+
+  return <DismissibleSnackbar variant='pill' severity='info' disableBackdropClick {...rest} />
+}

package/Row/ColumnOne/variant/index.ts

@@ -0,0 +1 @@
+export * from './VariantMessage'

package/Row/index.ts

@@ -1,6 +1,7 @@
 export * from './Row'
 export * from './ButtonLinkList'
 export * from './ColumnOne/ColumnOne'
+export * from './ColumnOne/variant'
 export * from './ColumnOneBoxed/ColumnOneBoxed'
 export * from './ColumnOneCentered/ColumnOneCentered'
 export * from './ColumnThree/ColumnThree'

package/SkipLink/SkipLink.tsx

@@ -0,0 +1,38 @@
+import { Trans } from '@lingui/react'
+import { Link } from '@mui/material'
+
+export function SkipLink() {
+  const setFocus = (e) => {
+    e.preventDefault()
+    globalThis.document.querySelector<HTMLDivElement>('#skip-nav')?.focus()
+    globalThis.document.querySelector<HTMLDivElement>('#skip-nav')?.scrollIntoView()
+  }
+
+  return (
+    <Link
+      href='#skip-nav'
+      tabIndex={0}
+      onClick={setFocus}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          setFocus(e)
+        }
+      }}
+      sx={(theme) => ({
+        position: 'absolute',
+        top: theme.page.vertical,
+        zIndex: '-1',
+        marginLeft: theme.page.horizontal,
+        padding: theme.spacings.xxs,
+        backgroundColor: theme.palette.background.paper,
+        border: theme.palette.text.primary,
+        borderRadius: theme.shape.borderRadius,
+        '&:focus': {
+          zIndex: 9999,
+        },
+      })}
+    >
+      <Trans id='Skip to main content' />
+    </Link>
+  )
+}

package/Snackbar/DismissibleSnackbar.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { MessageSnackbar } from './MessageSnackbar'
+import { MessageSnackbarProps } from './MessageSnackbarImpl'
+
+export type DismissibleSnackbarProps = MessageSnackbarProps & {
+  id: string
+  storageType?: 'localStorage' | 'sessionStorage'
+}
+export function DismissibleSnackbar(props: DismissibleSnackbarProps) {
+  const { storageType = 'localStorage', id, onClose, ...rest } = props
+  const messageId = `DismissibleSnackbar_${id}`
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(!globalThis[storageType]?.getItem(messageId))
+  }, [messageId, storageType])
+
+  return (
+    <MessageSnackbar
+      {...rest}
+      open={open}
+      onClose={() => {
+        globalThis[storageType]?.setItem(messageId, `${Date.now()}`)
+        onClose?.()
+      }}
+    />
+  )
+}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -14,6 +14,7 @@ import React, { useEffect, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent, breakpointVal } from '../Styles'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
+import iconInfo from '../icons/info.svg'
 
 type Size = 'normal' | 'wide'
 type Variant = 'contained' | 'pill'
@@ -34,6 +35,10 @@ type OwnerState = {
   size?: Size
   severity?: 'success' | 'info' | 'warning' | 'error'
   variant?: Variant
+  /**
+   * Setting this to true allows interaction with the rest of the page without closing the Snackbar
+   */
+  disableBackdropClick?: boolean
 }
 
 const name = 'MessageSnackbarImpl' as const
@@ -56,6 +61,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     onClose,
     severity = 'info',
     sx,
+    disableBackdropClick,
     ...snackbarProps
   } = props
 
@@ -65,7 +71,11 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     setShowSnackbar(!!open)
   }, [open])
 
-  const hideSnackbar = () => {
+  const hideSnackbar = (event: React.SyntheticEvent | Event, reason?: string) => {
+    if (disableBackdropClick && reason === 'clickaway') {
+      return
+    }
+
     setShowSnackbar(false)
     onClose?.()
   }
@@ -80,6 +90,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
   }
 
   let icon = iconCheckmark
+  if (severity === 'info') icon = iconInfo
   if (severity === 'error') icon = iconSadFace
 
   return (
@@ -91,7 +102,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
         open={showSnackbar}
         autoHideDuration={autoHide ? 5000 : null}
         className={classes.root}
-        sx={sx}
+        sx={[
+          {
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'auto' },
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
         onClose={hideSnackbar}
       >
         <SnackbarContent

package/Styles/EmotionProvider.tsx

@@ -1,14 +1,14 @@
-import createCache from '@emotion/cache'
 import type { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
+import { createEmotionCache } from './createEmotionCache'
 
-let muiCache: EmotionCache | undefined
-export const createMuiCache = () => {
-  muiCache = createCache({ key: 'mui' })
-  return muiCache
-}
+export type EmotionProviderProps = { children?: React.ReactNode; emotionCache?: EmotionCache }
+
+const clientSideEmotionCache = createEmotionCache()
 
 /** Provider that is supposed to be used in your `pages/_app.tsx` */
-export function EmotionProvider({ children }: { children: React.ReactNode }) {
-  return <CacheProvider value={muiCache ?? createMuiCache()}>{children}</CacheProvider>
+export function EmotionProvider(props: EmotionProviderProps) {
+  const { children, emotionCache = clientSideEmotionCache } = props
+
+  return <CacheProvider value={emotionCache}>{children}</CacheProvider>
 }

package/Styles/createEmotionCache.ts

@@ -0,0 +1,14 @@
+import createCache from '@emotion/cache'
+
+export const createEmotionCache = () => {
+  let insertionPoint: HTMLElement | undefined
+
+  if (typeof window !== 'undefined') {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    )
+    insertionPoint = emotionInsertionPoint ?? undefined
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint })
+}

package/Styles/withEmotionCache.tsx

@@ -1,36 +1,46 @@
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 // eslint-disable-next-line @next/next/no-document-import-in-page
+import { AppType } from 'next/app'
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import { createMuiCache } from './EmotionProvider'
+import { EmotionProviderProps } from './EmotionProvider'
+import { createEmotionCache } from './createEmotionCache'
 
 export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
 
 export function withEmotionCache(Document: typeof NextDocument): typeof NextDocument {
   return class DocumentWithEmotionCache extends Document {
     static async getInitialProps(ctx: DocumentContext) {
-      const emotionServer = createEmotionServer(createMuiCache())
-      const initialProps = await Document.getInitialProps(ctx)
+      const cache = createEmotionCache()
+      const emotionServer = createEmotionServer(cache)
+
+      const originalRenderPage = ctx.renderPage
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp:
+            (App: React.ComponentType<React.ComponentProps<AppType> & EmotionProviderProps>) =>
+            (props) => <App emotionCache={cache} {...props} />,
+        })
 
-      const emotionStyleTags = emotionServer
-        .extractCriticalToChunks(initialProps.html)
-        .styles.filter(({ css }) => css !== '')
-        .map((style) => (
-          <style
-            data-emotion={`${style.key} ${style.ids.join(' ')}`}
-            key={style.key}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: style.css }}
-          />
-        ))
+      const initialProps = await Document.getInitialProps(ctx)
+      // This is important. It prevents Emotion to render invalid HTML.
+      // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+      const emotionStyles = emotionServer.extractCriticalToChunks(initialProps.html)
+      const emotionStyleTags = emotionStyles.styles.map((style) => (
+        <style
+          data-emotion={`${style.key} ${style.ids.join(' ')}`}
+          key={style.key}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: style.css }}
+        />
+      ))
 
-      const props: DocumentInitialProps & EmotionCacheProps = {
+      return {
         ...initialProps,
         emotionStyleTags,
       }
-      return props
     }
   }
 }

package/TextInputNumber/TextInputNumber.tsx

@@ -32,6 +32,9 @@ const name = 'TextInputNumber' as const
 const parts = ['quantity', 'quantityInput', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
+/**
+ * @deprecated Please us NumberFieldElement
+ */
 export function TextInputNumber(props: TextInputNumberProps) {
   const {
     DownProps = {},
@@ -102,6 +105,9 @@ export function TextInputNumber(props: TextInputNumberProps) {
           width: responsiveVal(90, 120),
         },
         {
+          '& input[type=number]': {
+            MozAppearance: 'textfield',
+          },
           '& .MuiOutlinedInput-root': {
             px: '3px',
             display: 'grid',
@@ -159,8 +165,8 @@ export function TextInputNumber(props: TextInputNumberProps) {
         updateDisabled(e.target)
       }}
       inputProps={{
-        ...inputProps,
         'aria-label': i18n._(/* i18n */ 'Number'),
+        ...inputProps,
         sx: [
           {
             typography: 'body1',

package/Theme/MuiButton.ts

@@ -1,4 +1,4 @@
-import { ComponentsVariants } from '@mui/material'
+import { ComponentsVariants, Theme } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
 declare module '@mui/material/Button/Button' {
@@ -8,7 +8,7 @@ declare module '@mui/material/Button/Button' {
   }
 }
 
-type ButtonVariants = NonNullable<ComponentsVariants['MuiButton']>
+type ButtonVariants = NonNullable<ComponentsVariants<Theme>['MuiButton']>
 
 export const MuiButtonResponsive: ButtonVariants = [
   {

package/Theme/MuiChip.ts

@@ -1,4 +1,4 @@
-import { ComponentsVariants, darken } from '@mui/material'
+import { ComponentsVariants, Theme, darken } from '@mui/material'
 import { responsiveVal } from '../Styles'
 
 declare module '@mui/material/Chip/Chip' {
@@ -10,7 +10,7 @@ declare module '@mui/material/Chip/Chip' {
   }
 }
 
-type ChipVariants = NonNullable<ComponentsVariants['MuiChip']>
+type ChipVariants = NonNullable<ComponentsVariants<Theme>['MuiChip']>
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const MuiChip: ChipVariants = [

package/Theme/MuiFab.ts

@@ -64,7 +64,7 @@ function fabWidthHeight(size: FabSize, theme: Theme) {
   }
 }
 
-type FabVariants = NonNullable<ComponentsVariants['MuiFab']>
+type FabVariants = NonNullable<ComponentsVariants<Theme>['MuiFab']>
 
 const sizes: FabSize[] = [
   'smaller',

package/Theme/MuiSlider.ts

@@ -1,11 +1,11 @@
-import { ComponentsVariants } from '@mui/material'
+import { ComponentsVariants, Theme } from '@mui/material'
 
 declare module '@mui/material/Slider/Slider' {
   interface SliderPropsSizeOverrides {
     large: true
   }
 }
-type SliderVariants = NonNullable<ComponentsVariants['MuiSlider']>
+type SliderVariants = NonNullable<ComponentsVariants<Theme>['MuiSlider']>
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const MuiSlider: SliderVariants = [