@graphcommerce/next-ui 4.1.3 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Change Log
 
+## 4.2.0
+
+### Minor Changes
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`63f9b56eb`](https://github.com/ho-nl/m2-pwa/commit/63f9b56eb68ba790567ff1427e599fd2c3c8f1ee)
+  Thanks [@paales](https://github.com/paales)! - added responsive size to the Fab component
+
+### Patch Changes
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0)
+  Thanks [@paales](https://github.com/paales)! - Renamed SvgIcon to IconSvg to prevent collisions
+  with MUI
+
+* [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`990df655b`](https://github.com/ho-nl/m2-pwa/commit/990df655b73b469718d6cb5837ee65dfe2ad6a1d)
+  Thanks [@paales](https://github.com/paales)! - `<SearchLink />` a more lightweight (less js)
+  alternative for `<SearchButton />`
+
+## 4.1.5
+
+### Patch Changes
+
+- [#1290](https://github.com/ho-nl/m2-pwa/pull/1290)
+  [`47ae012c1`](https://github.com/ho-nl/m2-pwa/commit/47ae012c10f5762f99019ec38409177632377a98)
+  Thanks [@paales](https://github.com/paales)! - `withTheme` didn’t apply styles correcty
+
+* [#1290](https://github.com/ho-nl/m2-pwa/pull/1290)
+  [`39e28a4cd`](https://github.com/ho-nl/m2-pwa/commit/39e28a4cd6cdfaa4fc6dc4500ae86c14f7069150)
+  Thanks [@paales](https://github.com/paales)! - Allow background color on header
+
+- [#1289](https://github.com/ho-nl/m2-pwa/pull/1289)
+  [`ec8026cc5`](https://github.com/ho-nl/m2-pwa/commit/ec8026cc5a5be8d97a6e5dbf208808154fa1d618)
+  Thanks [@LaurensFranken](https://github.com/LaurensFranken)! - add sx prop to UspsList component
+
+* [#1290](https://github.com/ho-nl/m2-pwa/pull/1290)
+  [`35672d8e8`](https://github.com/ho-nl/m2-pwa/commit/35672d8e87011bf4eb049f449e86e851fc91a525)
+  Thanks [@paales](https://github.com/paales)! - Footer didn't accept sx prop
+
+## 4.1.4
+
+### Patch Changes
+
+- [#1287](https://github.com/ho-nl/m2-pwa/pull/1287)
+  [`d17f97d3a`](https://github.com/ho-nl/m2-pwa/commit/d17f97d3a786c33a99a10e4e949251c52fdbbdac)
+  Thanks [@paales](https://github.com/paales)! - Allow passing sx prop to SidebarGallery and
+  ContentLinks
+
 ## 4.1.3
 
 ### Patch Changes

package/ChipMenu/index.tsx

@@ -1,9 +1,9 @@
 import { Chip, ChipProps, Menu, MenuProps, menuClasses, SxProps, Theme } from '@mui/material'
 import React, { PropsWithChildren, useState } from 'react'
+import { IconSvg } from '../IconSvg'
 import { SectionHeader } from '../SectionHeader'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 
 const { classes, selectors } = extendableComponent('FilterEqual', ['chip'] as const)
@@ -32,9 +32,9 @@ export function ChipMenu(props: ChipMenuProps) {
 
   const [openEl, setOpenEl] = useState<null | HTMLElement>(null)
 
-  let deleteIcon = <SvgIcon src={iconChevronDown} size='medium' />
-  if (selected) deleteIcon = <SvgIcon src={iconCancelAlt} size='medium' fillIcon />
-  if (openEl) deleteIcon = <SvgIcon src={iconChevronUp} size='medium' />
+  let deleteIcon = <IconSvg src={iconChevronDown} size='medium' />
+  if (selected) deleteIcon = <IconSvg src={iconCancelAlt} size='medium' fillIcon />
+  if (openEl) deleteIcon = <IconSvg src={iconChevronUp} size='medium' />
 
   const selectedAndMenuHidden = selected && !openEl && !!selectedLabel
 

package/Footer/Footer.tsx

@@ -18,39 +18,49 @@ const { classes, selectors } = extendableComponent('Footer', [
 ] as const)
 
 export function Footer(props: FooterProps) {
-  const { socialLinks, storeSwitcher, customerService, copyright, ...containerProps } = props
+  const {
+    socialLinks,
+    storeSwitcher,
+    customerService,
+    copyright,
+    sx = [],
+    ...containerProps
+  } = props
 
   return (
     <Container
-      sx={(theme) => ({
-        gridTemplateColumns: '5fr 3fr',
-        borderTop: `1px solid ${theme.palette.divider}`,
-        display: 'grid',
-        alignItems: 'center',
+      sx={[
+        (theme) => ({
+          gridTemplateColumns: '5fr 3fr',
+          borderTop: `1px solid ${theme.palette.divider}`,
+          display: 'grid',
+          alignItems: 'center',
 
-        padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
-        justifyItems: 'center',
-        gridTemplateAreas: `
+          padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
+          justifyItems: 'center',
+          gridTemplateAreas: `
           'switcher switcher'
           'support support'
           'social social'
           'links links'
         `,
-        gap: theme.spacings.md,
-        '& > *': { maxWidth: 'max-content' },
+          gap: theme.spacings.md,
+          '& > *': { maxWidth: 'max-content' },
 
-        [theme.breakpoints.up('sm')]: {
-          gridTemplateAreas: `
+          [theme.breakpoints.up('sm')]: {
+            gridTemplateAreas: `
             'social switcher'
             'links support'
           `,
-          justifyItems: 'start',
-          padding: `${theme.page.vertical} ${theme.page.horizontal}`,
-          gridTemplateColumns: 'auto auto',
-          gridTemplateRows: 'auto',
-          justifyContent: 'space-between',
-        },
-      })}
+            justifyItems: 'start',
+            padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+            gridTemplateColumns: 'auto auto',
+            gridTemplateRows: 'auto',
+            justifyContent: 'space-between',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
       maxWidth={false}
       className={classes.root}
       {...containerProps}

package/Form/InputCheckmark.tsx

@@ -1,8 +1,11 @@
-import { SvgIconProps } from '@mui/material'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { iconCheckmark } from '../icons'
 
-export type InputCheckmarkProps = { show?: boolean; select?: boolean } & Omit<SvgIconProps, 'src'>
+export type InputCheckmarkProps = {
+  show?: boolean
+  select?: boolean
+  children?: React.ReactNode
+} & Omit<IconSvgProps, 'src'>
 
 /**
  * When the `valid` prop is passed it will render a CheckIcon, else it will render children.
@@ -16,7 +19,7 @@ export function InputCheckmark(props: InputCheckmarkProps) {
 
   if (!show) return <>{children}</>
   return (
-    <SvgIcon
+    <IconSvg
       src={iconCheckmark}
       className='InputCheckmark'
       sx={[{ stroke: '#01D26A' }, select && { marginRight: '15px' }]}

package/FramerScroller/SidebarGallery.tsx

@@ -8,14 +8,14 @@ import {
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, useTheme, alpha, Box, styled } from '@mui/material'
+import { Fab, useTheme, alpha, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
+import { IconSvg } from '../IconSvg'
 import { Row } from '../Row'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../icons'
 
 const MotionBox = styled(m.div)({})
@@ -47,10 +47,17 @@ export type SidebarGalleryProps = {
   images: MotionImageAspectProps[]
   aspectRatio?: [number, number]
   routeHash?: string
+  sx?: SxProps<Theme>
 }
 
 export function SidebarGallery(props: SidebarGalleryProps) {
-  const { sidebar, images, aspectRatio: [width, height] = [1, 1], routeHash = 'gallery' } = props
+  const {
+    sidebar,
+    images,
+    aspectRatio: [width, height] = [1, 1],
+    sx,
+    routeHash = 'gallery',
+  } = props
 
   const router = useRouter()
   const prevRoute = usePrevPageRouter()
@@ -109,7 +116,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   return (
     <ScrollerProvider scrollSnapAlign='center'>
-      <Row maxWidth={false} disableGutters className={classes.row}>
+      <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
         <MotionBox
           layout
           className={classes.root}
@@ -220,7 +227,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   boxShadow: theme.shadows[6],
                 }}
               >
-                {!zoomed ? <SvgIcon src={iconFullscreen} /> : <SvgIcon src={iconFullscreenExit} />}
+                {!zoomed ? <IconSvg src={iconFullscreen} /> : <IconSvg src={iconFullscreenExit} />}
               </Fab>
             </MotionBox>
             <Box
@@ -240,7 +247,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 size='small'
                 className={classes.sliderButtons}
               >
-                <SvgIcon src={iconChevronLeft} />
+                <IconSvg src={iconChevronLeft} />
               </ScrollerButton>
             </Box>
             <Box
@@ -259,7 +266,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 size='small'
                 className={classes.sliderButtons}
               >
-                <SvgIcon src={iconChevronRight} />
+                <IconSvg src={iconChevronRight} />
               </ScrollerButton>
             </Box>
 

package/FramerScroller/SidebarSlider.tsx

@@ -7,10 +7,10 @@ import {
 } from '@graphcommerce/framer-scroller'
 import { Box, SxProps, Theme } from '@mui/material'
 import { ReactNode } from 'react'
+import { IconSvg } from '../IconSvg'
 import { Row } from '../Row'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
 const { classes, selectors } = extendableComponent('SidebarSlider', [
@@ -87,7 +87,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 sx={{ display: { xs: 'none', md: 'flex' } }}
                 size={buttonSize}
               >
-                <SvgIcon src={iconChevronLeft} />
+                <IconSvg src={iconChevronLeft} />
               </ScrollerButton>
             </Box>
             <Box
@@ -106,7 +106,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 sx={{ display: { xs: 'none', md: 'flex' } }}
                 size={buttonSize}
               >
-                <SvgIcon src={iconChevronRight} />
+                <IconSvg src={iconChevronRight} />
               </ScrollerButton>
             </Box>
           </Box>

package/IconHeader/index.tsx

@@ -1,6 +1,6 @@
 import { Box, SxProps, Theme, Typography } from '@mui/material'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon, SvgIconProps } from '../SvgIcon/SvgIcon'
 
 // TODO: remove all occurrences. deprecated component
 
@@ -13,7 +13,7 @@ type IconHeaderProps = {
   stayInline?: boolean
   ellipsis?: boolean
   sx?: SxProps<Theme>
-} & Pick<SvgIconProps, 'src'>
+} & Pick<IconSvgProps, 'src'>
 
 type IconHeaderHeadings = 'h2' | 'h4' | 'h5'
 
@@ -71,7 +71,7 @@ export function IconHeader(props: IconHeaderProps) {
           },
         ]}
       >
-        <SvgIcon src={src} />
+        <IconSvg src={src} />
         <Typography
           variant={variants[size]}
           component='h2'

package/{SvgIcon/SvgIcon.tsx → IconSvg/IconSvg.tsx}

@@ -1,11 +1,11 @@
 import { ImageProps, srcToString, StaticImport } from '@graphcommerce/image'
-import { styled, SxProps, Theme, useTheme } from '@mui/material'
+import { styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
 import { ComponentProps, forwardRef } from 'react'
 import { extendableComponent, ExtendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal as rv } from '../Styles/responsiveVal'
 import { svgIconStrokeWidth } from './svgIconStrokeWidth'
 
-const name = 'SvgIcon'
+const name = 'IconSvg'
 const parts = ['root'] as const
 type StyleProps = {
   size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
@@ -16,7 +16,7 @@ const { withState } = extendableComponent<StyleProps, typeof name, typeof parts>
 /** Expose the component to be exendable in your theme.components */
 declare module '@mui/material/styles/components' {
   interface Components {
-    SvgIcon?: ExtendableComponent<StyleProps> & {
+    IconSvg?: ExtendableComponent<StyleProps> & {
       /**
        * To override an icon with your own icon, provide the original src and the replacement src.
        *
@@ -36,7 +36,7 @@ declare module '@mui/material/styles/components' {
   }
 }
 
-export type SvgIconProps = StyleProps &
+export type IconSvgProps = StyleProps &
   Pick<ImageProps, 'src'> &
   Pick<ComponentProps<'svg'>, 'className' | 'style'> & { sx?: SxProps<Theme> }
 
@@ -73,15 +73,15 @@ const Svg = styled('svg', { name, target: name })(() => [
 ])
 
 /**
- * SvgIcon component is supposed to be used in combination with `icons`
+ * IconSvg component is supposed to be used in combination with `icons`
  *
  * @see https://graphcommerce-docs.vercel.app/framework/icons
  */
-export const SvgIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
-  const { src, size, fillIcon, className, ...svgProps } = props
+export const IconSvg = forwardRef<SVGSVGElement, IconSvgProps>((props, ref) => {
+  const { src, size, fillIcon, className, ...svgProps } = useThemeProps({ props, name })
 
   const srcWithOverride =
-    (useTheme().components?.SvgIcon?.overrides ?? []).find(
+    (useTheme().components?.IconSvg?.overrides ?? []).find(
       ([overrideSrc]) => overrideSrc === src,
     )?.[1] ?? src
 
@@ -98,4 +98,7 @@ export const SvgIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
     </Svg>
   )
 })
-SvgIcon.displayName = 'SvgIcon'
+IconSvg.displayName = 'IconSvg'
+
+/** @deprecated SvgIcon is renamed to IconSvg, no API changes */
+export const SvgIcon = IconSvg

package/{SvgIcon → IconSvg}/index.ts

@@ -1,2 +1,2 @@
-export * from './SvgIcon'
+export * from './IconSvg'
 export * from './svgIconStrokeWidth'

package/Layout/components/LayoutHeaderBack.tsx

@@ -3,7 +3,7 @@ import { t } from '@lingui/macro'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
-import { SvgIcon } from '../../SvgIcon/SvgIcon'
+import { IconSvg } from '../../IconSvg'
 import { iconChevronLeft } from '../../icons'
 
 export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
@@ -28,7 +28,7 @@ export default function LayoutHeaderBack(props: BackProps) {
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
 
-  const backIcon = <SvgIcon src={iconChevronLeft} size='medium' />
+  const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && path !== prevUp?.href
 
   let label = t`Back`

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,7 +1,7 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { Trans } from '@lingui/macro'
 import { LinkOrButton } from '../../Button/LinkOrButton'
-import { SvgIcon } from '../../SvgIcon/SvgIcon'
+import { IconSvg } from '../../IconSvg'
 import { iconClose } from '../../icons'
 
 export function useShowClose() {
@@ -19,7 +19,7 @@ export default function LayoutHeaderClose() {
       color='inherit'
       onClick={onClick}
       aria-label='Close'
-      startIcon={<SvgIcon src={iconClose} />}
+      startIcon={<IconSvg src={iconClose} />}
       // className={classes.close}
     >
       <Trans>Close</Trans>

package/Layout/components/LayoutTitle.tsx

@@ -1,7 +1,7 @@
 import { Box, SxProps, Theme, Typography, TypographyProps } from '@mui/material'
 import React from 'react'
+import { IconSvg, IconSvgProps } from '../../IconSvg'
 import { extendableComponent, responsiveVal } from '../../Styles'
-import { SvgIcon, SvgIconProps } from '../../SvgIcon/SvgIcon'
 
 type OwnerState = {
   size?: 'small' | 'medium'
@@ -17,7 +17,7 @@ const { withState } = extendableComponent<OwnerState, 'LayoutTitle', typeof part
 
 export type TitleProps = {
   children: React.ReactNode
-  icon?: SvgIconProps['src']
+  icon?: IconSvgProps['src']
   variant?: TypographyProps['variant']
   component?: React.ElementType
   sx?: SxProps<Theme>
@@ -69,7 +69,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
       ]}
     >
       {icon && (
-        <SvgIcon src={icon} size={size === 'small' ? 'large' : 'xl'} className={classes.icon} />
+        <IconSvg src={icon} size={size === 'small' ? 'large' : 'xl'} className={classes.icon} />
       )}
       <Typography
         ref={ref}

package/LayoutDefault/components/LayoutDefault.tsx

@@ -3,6 +3,7 @@ import { Box, SxProps, Theme } from '@mui/material'
 import { useTransform, useViewportScroll } from 'framer-motion'
 import LayoutProvider from '../../Layout/components/LayoutProvider'
 import { extendableComponent, responsiveVal } from '../../Styles'
+import { useFabSize } from '../../Theme'
 
 export type LayoutDefaultProps = {
   className?: string
@@ -32,7 +33,8 @@ export function LayoutDefault(props: LayoutDefaultProps) {
   const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
 
   const classes = withState({ noSticky })
-  const fabIconSize = responsiveVal(42, 56) // @todo generalize this
+
+  const fabIconSize = useFabSize('responsive')
 
   return (
     <Box
@@ -92,15 +94,12 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               justifyContent: 'space-between',
               width: '100%',
               height: 0,
-              zIndex: 2,
+              zIndex: 'drawer',
               [theme.breakpoints.up('sm')]: {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',
                 marginTop: `calc(${theme.appShell.headerHeightMd} * -1 + calc(${fabIconSize} / 2))`,
-                top: `calc(${theme.appShell.headerHeightMd} / 2 - ${responsiveVal(
-                  42 / 2,
-                  56 / 2,
-                )})`,
+                top: `calc(${theme.appShell.headerHeightMd} / 2 - (${fabIconSize} / 2))`,
               },
               [theme.breakpoints.down('md')]: {
                 position: 'fixed',

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -336,8 +336,12 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
 
+                /**
+                 * The top bar on Google Chrome is about 56 pixels high. If we do not provide this
+                 * padding we'll run into the issue that the user can't scroll to the bottom. We
+                 * can't change this value with JS as that causes much jank
+                 */
                 '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: 56 },
-
                 '&.variantSmBottom.sizeSmFull': { minHeight: 'calc(100vh - 56px)' },
 
                 '&.variantSmBottom': {

package/LayoutParts/DesktopNavBar.tsx

@@ -1,14 +1,14 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { Box, BoxProps } from '@mui/material'
 import React from 'react'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { extendableComponent } from '../Styles/extendableComponent'
-import { SvgIcon, SvgIconProps } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
 export type MenuTabsProps = {
   children: React.ReactNode
-  iconLeft?: SvgIconProps['src']
-  iconRight?: SvgIconProps['src']
+  iconLeft?: IconSvgProps['src']
+  iconRight?: IconSvgProps['src']
 } & Pick<BoxProps, 'sx'>
 
 const { classes, selectors } = extendableComponent('DesktopNavBar', [
@@ -74,7 +74,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
             size='small'
             className={classes.left}
           >
-            <SvgIcon src={iconLeft ?? iconChevronLeft} />
+            <IconSvg src={iconLeft ?? iconChevronLeft} />
           </ScrollerButton>
         </Box>
 
@@ -103,7 +103,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
             size='small'
             className={classes.right}
           >
-            <SvgIcon src={iconRight ?? iconChevronRight} />
+            <IconSvg src={iconRight ?? iconChevronRight} />
           </ScrollerButton>
         </Box>
       </Box>

package/LayoutParts/MenuFab.tsx

@@ -2,9 +2,10 @@ import { Divider, Fab, ListItem, Menu, styled, Box, SxProps, Theme } from '@mui/
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { useFabSize } from '../Theme'
 import { iconMenu, iconClose } from '../icons'
 import { useFabAnimation } from './useFabAnimation'
 
@@ -26,8 +27,6 @@ const { classes, selectors } = extendableComponent('MenuFab', [
   'menu',
 ] as const)
 
-const fabIconSize = responsiveVal(42, 56) // @todo generalize this
-
 export function MenuFab(props: MenuFabProps) {
   const { children, secondary, search, menuIcon, closeIcon, sx = [] } = props
   const router = useRouter()
@@ -40,6 +39,7 @@ export function MenuFab(props: MenuFabProps) {
     router.events.on('routeChangeStart', clear)
     return () => router.events.off('routeChangeStart', clear)
   }, [router])
+  const fabIconSize = useFabSize('responsive')
 
   return (
     <Box sx={[{ width: fabIconSize, height: fabIconSize }, ...(Array.isArray(sx) ? sx : [sx])]}>
@@ -57,6 +57,7 @@ export function MenuFab(props: MenuFabProps) {
           color='inherit'
           aria-label='Open Menu'
           onClick={(event) => setOpenEl(event.currentTarget)}
+          size='responsive'
           sx={(theme) => ({
             boxShadow: 'none',
             '&:hover, &:focus': {
@@ -64,18 +65,16 @@ export function MenuFab(props: MenuFabProps) {
               background: theme.palette.text.primary,
             },
             background: theme.palette.text.primary,
-            width: fabIconSize,
-            height: fabIconSize,
             pointerEvents: 'all',
             color: theme.palette.background.paper,
           })}
           className={classes.fab}
         >
           {closeIcon ?? (
-            <SvgIcon src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
+            <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
           )}
           {menuIcon ?? (
-            <SvgIcon src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
+            <IconSvg src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
           )}
         </Fab>
         <MotionDiv

package/LayoutParts/PlaceholderFab.tsx

@@ -1,8 +1,12 @@
-import { Fab, FabProps, styled } from '@mui/material'
+import { Fab, FabProps } from '@mui/material'
 
-export const PlaceholderFab = styled((props: Omit<FabProps, 'children'>) => (
-  <Fab {...props}>
-    {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
-    <></>
-  </Fab>
-))({ visibility: 'hidden', pointerEvents: 'none' })
+export function PlaceholderFab(props: Omit<FabProps, 'children'>) {
+  const { sx = [] } = props
+  return (
+    <Fab
+      size='responsive'
+      {...props}
+      sx={[{ visibility: 'hidden', pointerEvents: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    />
+  )
+}

package/Pagination/index.tsx

@@ -1,8 +1,8 @@
 import { PaginationProps, Box, SxProps, Theme, IconButton } from '@mui/material'
 import usePagination, { UsePaginationItem } from '@mui/material/usePagination'
 import React from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
 export type PagePaginationProps = {
@@ -41,7 +41,7 @@ export function Pagination(props: PagePaginationProps) {
       aria-label='Previous page'
       className={classes.button}
     >
-      <SvgIcon src={iconChevronLeft} className={classes.icon} size='medium' />
+      <IconSvg src={iconChevronLeft} className={classes.icon} size='medium' />
     </IconButton>
   )
 
@@ -53,7 +53,7 @@ export function Pagination(props: PagePaginationProps) {
       aria-label='Next page'
       className={classes.button}
     >
-      <SvgIcon src={iconChevronRight} className={classes.icon} size='medium' />
+      <IconSvg src={iconChevronRight} className={classes.icon} size='medium' />
     </IconButton>
   )
 

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonProps, styled } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
-import { SvgIcon } from '../../SvgIcon/SvgIcon'
+import { IconSvg } from '../../IconSvg'
 import { iconChevronRight } from '../../icons'
 
 export type ButtonLinkProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
@@ -13,11 +13,11 @@ const ButtonItem = styled(Button)(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   borderRadius: 0,
   justifyContent: 'space-between',
-  ...theme.typography.body1,
+  typography: 'body1',
 }))
 
 export function ButtonLinkListItem(props: ButtonLinkProps) {
-  const { children, url, endIcon = <SvgIcon src={iconChevronRight} />, ...buttonProps } = props
+  const { children, url, endIcon = <IconSvg src={iconChevronRight} />, ...buttonProps } = props
 
   return (
     <PageLink href={url} passHref>

package/Row/ContentLinks/index.tsx

@@ -14,13 +14,18 @@ const parts = ['root', 'scroller', 'title'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export function ContentLinks(props: ContentLinksProps) {
-  const { title, children } = props
+  const { title, children, sx = [] } = props
 
   return (
     <Container
       className={classes.root}
       maxWidth={false}
-      sx={(theme) => ({ marginBottom: `${theme.spacings.md}` })}
+      sx={[
+        (theme) => ({
+          marginBottom: `${theme.spacings.md}`,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       <ScrollerProvider scrollSnapAlign='none'>
         <Scroller

package/Snackbar/MessageSnackbarImpl.tsx

@@ -10,8 +10,8 @@ import {
   Theme,
 } from '@mui/material'
 import React, { useEffect, useState } from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
 
 type Size = 'normal' | 'wide'
@@ -110,14 +110,14 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
                 md: 'min-content 1fr max-content auto',
               },
               typography: 'subtitle1',
-              '&.SvgIcon': {
+              '&.IconSvg': {
                 gridArea: 'children',
               },
             },
           })}
           message={
             <>
-              <SvgIcon src={icon} size='large' />
+              <IconSvg src={icon} size='large' />
               <Box gridArea='children'>{children}</Box>
               {/* </Box> */}
               {action && (
@@ -134,7 +134,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
                   backgroundColor: lighten(theme.palette.background.paper, 0.1),
                 })}
               >
-                <SvgIcon src={iconClose} />
+                <IconSvg src={iconClose} />
               </Fab>
             </>
           }

package/StarRatingField/index.tsx

@@ -1,6 +1,6 @@
 import { RatingProps, Rating } from '@mui/material'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconStar } from '../icons'
 
 export type StarRatingFieldProps = {
@@ -22,7 +22,7 @@ export function StarRatingField(props: StarRatingFieldProps) {
       max={5}
       size='small'
       emptyIcon={
-        <SvgIcon
+        <IconSvg
           src={iconStar}
           size='large'
           className={classes.startEmpty}
@@ -30,7 +30,7 @@ export function StarRatingField(props: StarRatingFieldProps) {
         />
       }
       icon={
-        <SvgIcon
+        <IconSvg
           src={iconStar}
           size='large'
           className={classes.starFull}

package/Styles/withTheme.tsx

@@ -1,4 +1,7 @@
-import { css, Theme, ThemeProvider } from '@mui/material'
+import { SxProps, Theme, ThemeProvider } from '@mui/material'
+import React from 'react'
+
+type WithSx = { sx?: SxProps<Theme> }
 
 /**
  * It will provide a theme for the underlying tree and will set the color/font and backgroundColor
@@ -21,22 +24,37 @@ import { css, Theme, ThemeProvider } from '@mui/material'
  * const MyPage = () => {
  *   return <div>Your regular page content, but now in darkMode</div>
  * }
- *
  * export default withTheme(MyPage, darkTheme)
  * ```
+ *
+ * If you are trying to theme a complete page:
+ *
+ * ```tsx
+ * MyPage.pageOptions = {
+ *   Layout: withTheme(LayoutFull, darkTheme),
+ * } as PageOptions
+ * ```
  */
-export function withTheme(Component: React.FC<{ className?: string }>, theme: Theme) {
-  return (props: Record<string, unknown>) => (
-    <ThemeProvider theme={theme}>
-      <Component
-        {...props}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        css={css({
-          color: theme.palette.text.primary,
-          backgroundColor: theme.palette.background.default,
-          ...(theme.typography.body1 as any),
-        })}
-      />
-    </ThemeProvider>
-  )
+export function withTheme<T>(
+  Component: (value: T & WithSx) => React.ReactElement<any, any> | null,
+  theme: Theme,
+): React.FC<T & WithSx> {
+  return (data: T & WithSx) => {
+    const sx = data.sx ?? []
+    return (
+      <ThemeProvider theme={theme}>
+        <Component
+          {...data}
+          sx={[
+            {
+              typography: 'body1',
+              color: theme.palette.text.primary,
+              backgroundColor: theme.palette.background.default,
+            },
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
+        />
+      </ThemeProvider>
+    )
+  }
 }

package/TextInputNumber/index.tsx

@@ -9,9 +9,9 @@ import {
   Theme,
 } from '@mui/material'
 import { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconMin, iconPlus } from '../icons'
 
 export type IconButtonPropsOmit = Omit<
@@ -123,7 +123,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
             {...DownProps}
             className={`${classes.button} ${DownProps.className ?? ''}`}
           >
-            {DownProps.children ?? <SvgIcon src={iconMin} size='small' />}
+            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
           </IconButton>
         ),
         endAdornment: (
@@ -139,7 +139,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
             {...UpProps}
             className={`${classes.button} ${UpProps.className ?? ''}`}
           >
-            {UpProps.children ?? <SvgIcon src={iconPlus} size='small' />}
+            {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
           </IconButton>
         ),
       }}

package/Theme/DarkLightModeThemeProvider.tsx

@@ -12,7 +12,7 @@ import {
 } from '@mui/material'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { IconSvg } from '../IconSvg'
 import { iconMoon, iconSun } from '../icons'
 
 type Mode = 'dark' | 'light'
@@ -88,7 +88,7 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
   const { currentMode, toggle } = useColorMode()
   return (
     <Fab size='large' color='inherit' onClick={toggle} {...props}>
-      <SvgIcon src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
+      <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
     </Fab>
   )
 }
@@ -105,7 +105,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   return (
     <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>
       <ListItemIcon sx={{ minWidth: 'unset', paddingRight: '8px' }}>
-        <SvgIcon src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
+        <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
       <ListItemText>
         {currentMode === 'light' ? (

package/Theme/MuiFab.ts

@@ -0,0 +1,69 @@
+import { ComponentsVariants, FabProps, Theme, useTheme } from '@mui/material'
+import { responsiveVal } from '../Styles'
+
+type FabSize = NonNullable<FabProps['size']>
+
+type FabSizes = {
+  [key in FabSize]: string
+}
+
+/** Expose the component to be exendable in your theme.components */
+declare module '@mui/material/styles/components' {
+  interface Components {
+    /**
+     * @todo We would rather use MuiFab to override these fields, but I can't get it to work,
+     *   getting 'Subsequent property declarations must have the same type.'
+     */
+    MuiFabExtra?: {
+      sizes?: Partial<FabSizes>
+    }
+  }
+}
+
+const defaultSizes: FabSizes = {
+  /**
+   * Default values picked from MUI:
+   * https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js
+   */
+  small: '40px',
+  medium: '48px',
+  large: '56px',
+  responsive: responsiveVal(40, 56),
+}
+
+function fabSize(size: FabSize, theme: Theme) {
+  return theme.components?.MuiFabExtra?.sizes?.[size] ?? defaultSizes[size]
+}
+
+export const useFabSize = (size: FabSize) => {
+  const theme = useTheme()
+  return fabSize(size, theme)
+}
+
+declare module '@mui/material/Fab' {
+  interface FabPropsSizeOverrides {
+    responsive: true
+  }
+}
+
+function fabWidthHeight(size: FabSize, theme: Theme) {
+  return {
+    width: fabSize(size, theme),
+    height: fabSize(size, theme),
+  }
+}
+
+type FabVariants = NonNullable<ComponentsVariants['MuiFab']>
+
+const sizes: FabSize[] = ['small', 'medium', 'large', 'responsive']
+
+/**
+ * This defines the sizes for the added responsive variant.
+ *
+ * To override the sizes, please do not add variant declarations direcly, but modify
+ * `yourTheme.components.MuiFabExtra.sizes` instead.
+ */
+export const MuiFabSizes: FabVariants = sizes.map((size) => ({
+  props: { size },
+  style: ({ theme }) => fabWidthHeight(size, theme),
+}))

package/Theme/index.ts

@@ -1,5 +1,6 @@
 export * from './MuiSlider'
 export * from './MuiButton'
 export * from './MuiSnackbar'
+export * from './MuiFab'
 export * from './themeDefaults'
 export * from './DarkLightModeThemeProvider'

package/UspList/index.tsx

@@ -1,8 +1,9 @@
-import { Box } from '@mui/material'
+import { Box, SxProps, Theme } from '@mui/material'
 import { extendableComponent } from '../Styles'
 
 export type UspListProps = OwnerState & {
   children: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
 type OwnerState = { size?: 'small' | 'medium' }
@@ -11,24 +12,27 @@ const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function UspList(props: UspListProps) {
-  const { children, size } = props
+  const { children, size, sx = [] } = props
   const classes = withState({ size })
 
   return (
     <Box
       component='ul'
       className={classes.root}
-      sx={(theme) => ({
-        listStyleType: 'none',
-        padding: 0,
-        margin: 0,
-        display: 'grid',
-        alignContent: 'start',
-        rowGap: theme.spacings.xs,
-        '&.sizeSmall': {
-          rowGap: '3px',
-        },
-      })}
+      sx={[
+        (theme) => ({
+          listStyleType: 'none',
+          padding: 0,
+          margin: 0,
+          display: 'grid',
+          alignContent: 'start',
+          rowGap: theme.spacings.xs,
+          '&.sizeSmall': {
+            rowGap: '3px',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       {children}
     </Box>

package/icons/index.tsx

@@ -38,3 +38,4 @@ export { default as iconEmailOutline } from './envelope-alt.svg'
 export { default as icon404 } from './explore.svg'
 export { default as iconSun } from './sun.svg'
 export { default as iconMoon } from './moon.svg'
+export { default as iconPlay } from './play.svg'

package/index.ts

@@ -58,7 +58,7 @@ export * from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField'
 export * from './Stepper/Stepper'
 export * from './Styles'
-export * from './SvgIcon'
+export * from './IconSvg'
 export * from './TextInputNumber'
 export * from './Theme'
 export * from './TimeAgo'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,