@graphcommerce/next-ui 9.0.4-canary.0 → 9.0.4-canary.10

package/ActionCard/ActionCard.tsx

@@ -3,6 +3,7 @@ import { alpha, Box, ButtonBase, lighten } from '@mui/material'
 import React from 'react'
 import { extendableComponent, responsiveVal } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
+import { sxx } from '../utils/sxx'
 
 type Variants = 'outlined' | 'default'
 type Size = 'large' | 'medium' | 'small' | 'responsive'
@@ -94,11 +95,6 @@ export const actionCardImageSizes = {
   responsive: responsiveVal(60, 120),
 }
 
-const combineSx = (defaultSx: SxProps<Theme>, slotSx?: SxProps<Theme>) => [
-  ...(Array.isArray(defaultSx) ? defaultSx : [defaultSx]),
-  ...(Array.isArray(slotSx) ? slotSx : [slotSx]),
-]
-
 /** @public */
 export function ActionCard<C extends React.ElementType = typeof Box>(props: ActionCardProps<C>) {
   const {
@@ -140,126 +136,124 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
       className={classes.root}
       onClick={onClick ? (event) => onClick(event, value) : undefined}
       disabled={disabled}
-      sx={combineSx(
-        [
-          (theme) => ({
-            ...breakpointVal(
-              'borderRadius',
-              theme.shape.borderRadius * 1.5,
-              theme.shape.borderRadius * 3,
-              theme.breakpoints.values,
-            ),
-            '&.sizeSmall': {
-              px: responsiveVal(8, 12),
-              py: responsiveVal(4, 6),
-              display: 'flex',
-              typography: 'body2',
+      sx={sxx(
+        (theme) => ({
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 1.5,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          '&.sizeSmall': {
+            px: responsiveVal(8, 12),
+            py: responsiveVal(4, 6),
+            display: 'flex',
+            typography: 'body2',
+          },
+          '&.sizeMedium': {
+            px: responsiveVal(10, 14),
+            py: responsiveVal(10, 12),
+            typography: 'body2',
+            display: 'block',
+          },
+          '&.sizeLarge': {
+            px: responsiveVal(12, 16),
+            py: responsiveVal(12, 14),
+            display: 'block',
+          },
+          '&.sizeResponsive': {
+            px: responsiveVal(8, 16),
+            py: responsiveVal(4, 14),
+            display: { xs: 'flex', md: 'block', lg: 'block' },
+            [theme.breakpoints.down('md')]: { typography: 'body2' },
+          },
+          '&.variantDefault': {
+            position: 'relative',
+            '&.selected': {
+              backgroundColor:
+                theme.palette.mode === 'light'
+                  ? alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+                  : lighten(theme.palette.background.default, theme.palette.action.hoverOpacity),
             },
-            '&.sizeMedium': {
-              px: responsiveVal(10, 14),
-              py: responsiveVal(10, 12),
-              typography: 'body2',
-              display: 'block',
+            '&.error': {
+              backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
             },
-            '&.sizeLarge': {
-              px: responsiveVal(12, 16),
-              py: responsiveVal(12, 14),
-              display: 'block',
+            '&:focus': {
+              outline: 'none',
+              boxShadow: `0 0 0 4px ${alpha(theme.palette[color].main, theme.palette.action.focusOpacity)}`,
             },
-            '&.sizeResponsive': {
-              px: responsiveVal(8, 16),
-              py: responsiveVal(4, 14),
-              display: { xs: 'flex', md: 'block', lg: 'block' },
-              [theme.breakpoints.down('md')]: { typography: 'body2' },
+          },
+          '&.variantOutlined': {
+            backgroundColor: theme.palette.background.paper,
+            boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
+            '&:not(:last-of-type)': {
+              marginBottom: '-2px',
             },
-            '&.variantDefault': {
-              position: 'relative',
-              '&.selected': {
-                backgroundColor:
-                  theme.palette.mode === 'light'
-                    ? alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
-                    : lighten(theme.palette.background.default, theme.palette.action.hoverOpacity),
-              },
-              '&.error': {
-                backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
+            '&.layoutList': {
+              borderRadius: 0,
+              '&:first-of-type': {
+                ...breakpointVal(
+                  'borderTopLeftRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+                ...breakpointVal(
+                  'borderTopRightRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
               },
-              '&:focus': {
-                outline: 'none',
-                boxShadow: `0 0 0 4px ${alpha(theme.palette[color].main, theme.palette.action.focusOpacity)}`,
-              },
-            },
-            '&.variantOutlined': {
-              backgroundColor: theme.palette.background.paper,
-              boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
-              '&:not(:last-of-type)': {
-                marginBottom: '-2px',
-              },
-              '&.layoutList': {
-                borderRadius: 0,
-                '&:first-of-type': {
-                  ...breakpointVal(
-                    'borderTopLeftRadius',
-                    theme.shape.borderRadius * 3,
-                    theme.shape.borderRadius * 4,
-                    theme.breakpoints.values,
-                  ),
-                  ...breakpointVal(
-                    'borderTopRightRadius',
-                    theme.shape.borderRadius * 3,
-                    theme.shape.borderRadius * 4,
-                    theme.breakpoints.values,
-                  ),
-                },
-                '&:last-of-type': {
-                  ...breakpointVal(
-                    'borderBottomLeftRadius',
-                    theme.shape.borderRadius * 3,
-                    theme.shape.borderRadius * 4,
-                    theme.breakpoints.values,
-                  ),
-                  ...breakpointVal(
-                    'borderBottomRightRadius',
-                    theme.shape.borderRadius * 3,
-                    theme.shape.borderRadius * 4,
-                    theme.breakpoints.values,
-                  ),
-                },
-              },
-              '&.selected': {
-                borderColor: 'transparent',
-                boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}`,
-              },
-              '&.selected:focus, &.error:focus': {
-                borderColor: 'transparent',
-                boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}, 0 0 0 4px ${alpha(
-                  theme.palette[color].main,
-                  theme.palette.action.hoverOpacity,
-                )}`,
-              },
-              '&:focus': {
-                boxShadow: `inset 0 0 0 1px ${theme.palette.divider},0 0 0 4px ${alpha(
-                  theme.palette[color].main,
-                  theme.palette.action.hoverOpacity,
-                )}`,
-              },
-              '&.error': {
-                boxShadow: `inset 0 0 0 2px ${theme.palette.error.main}`,
+              '&:last-of-type': {
+                ...breakpointVal(
+                  'borderBottomLeftRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+                ...breakpointVal(
+                  'borderBottomRightRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
               },
             },
             '&.selected': {
-              zIndex: 1,
+              borderColor: 'transparent',
+              boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}`,
             },
-            '&:focus, &.selected:focus, &.error:focus': {
-              zIndex: 2,
+            '&.selected:focus, &.error:focus': {
+              borderColor: 'transparent',
+              boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}, 0 0 0 4px ${alpha(
+                theme.palette[color].main,
+                theme.palette.action.hoverOpacity,
+              )}`,
             },
-            '&.disabled': {
-              background: theme.palette.action.disabledBackground,
-              opacity: theme.palette.action.disabledOpacity,
-              color: theme.palette.action.disabled,
+            '&:focus': {
+              boxShadow: `inset 0 0 0 1px ${theme.palette.divider},0 0 0 4px ${alpha(
+                theme.palette[color].main,
+                theme.palette.action.hoverOpacity,
+              )}`,
             },
-          }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ],
+            '&.error': {
+              boxShadow: `inset 0 0 0 2px ${theme.palette.error.main}`,
+            },
+          },
+          '&.selected': {
+            zIndex: 1,
+          },
+          '&:focus, &.selected:focus, &.error:focus': {
+            zIndex: 2,
+          },
+          '&.disabled': {
+            background: theme.palette.action.disabledBackground,
+            opacity: theme.palette.action.disabledOpacity,
+            color: theme.palette.action.disabled,
+          },
+        }),
+        sx,
         slotProps.root?.sx,
       )}
       {...slotProps.root}
@@ -267,7 +261,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
     >
       <Box
         className={classes.rootInner}
-        sx={combineSx(
+        sx={sxx(
           {
             display: 'flex',
             flexDirection: 'row',
@@ -291,10 +285,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           {image && (
             <Box
               className={classes.image}
-              sx={combineSx(
-                { display: 'flex', pr: '15px', alignSelf: 'center' },
-                slotProps.image?.sx,
-              )}
+              sx={sxx({ display: 'flex', pr: '15px', alignSelf: 'center' }, slotProps.image?.sx)}
               {...slotProps.image}
             >
               {image}
@@ -310,7 +301,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             {title && (
               <Box
                 className={classes.title}
-                sx={combineSx(
+                sx={sxx(
                   {
                     '&.sizeSmall': { typography: 'body1' },
                     '&.sizeMedium': { typography: 'body1' },
@@ -327,7 +318,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             {details && (
               <Box
                 className={classes.details}
-                sx={combineSx({ color: 'text.secondary' }, slotProps.details?.sx)}
+                sx={sxx({ color: 'text.secondary' }, slotProps.details?.sx)}
                 {...slotProps.details}
               >
                 {details}
@@ -336,7 +327,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             {secondaryAction && (
               <Box
                 className={classes.secondaryAction}
-                sx={combineSx({}, slotProps.secondaryAction?.sx)}
+                sx={sxx({}, slotProps.secondaryAction?.sx)}
                 {...slotProps.secondaryAction}
               >
                 {secondaryAction}
@@ -346,7 +337,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
         </Box>
         <Box
           className={classes.end}
-          sx={combineSx(
+          sx={sxx(
             {
               display: 'flex',
               flexDirection: 'column',
@@ -360,7 +351,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           {action && (
             <Box
               className={classes.action}
-              sx={combineSx(
+              sx={sxx(
                 (theme) => ({ marginBottom: '5px', color: theme.palette[color].main }),
                 slotProps.action?.sx,
               )}
@@ -372,7 +363,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           {price && !disabled && (
             <Box
               className={classes.price}
-              sx={combineSx(
+              sx={sxx(
                 {
                   textAlign: 'right',
                   typography: 'body1',
@@ -390,7 +381,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
         </Box>
       </Box>
       {after && (
-        <Box className={classes.after} sx={combineSx({}, slotProps.after?.sx)} {...slotProps.after}>
+        <Box className={classes.after} sx={sxx({}, slotProps.after?.sx)} {...slotProps.after}>
           {after}
         </Box>
       )}

package/ActionCard/ActionCardAccordion.tsx

@@ -2,8 +2,9 @@ import type { SxProps, Theme } from '@mui/material'
 import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material'
 import type { ReactNode } from 'react'
 import { useState } from 'react'
-import { IconSvg } from '../IconSvg'
 import { iconChevronDown } from '../icons'
+import { IconSvg } from '../IconSvg'
+import { sxx } from '../utils/sxx'
 
 export type ActionCardAccordionProps = {
   summary: ReactNode
@@ -25,7 +26,7 @@ export function ActionCardAccordion(props: ActionCardAccordionProps) {
       expanded={expanded}
       variant='outlined'
       disableGutters
-      sx={[
+      sx={sxx(
         (theme) => ({
           backgroundColor: 'transparent ',
           '&.Mui-expanded': { my: 0 },
@@ -34,8 +35,8 @@ export function ActionCardAccordion(props: ActionCardAccordionProps) {
           borderBottom: `1px solid ${theme.palette.divider}`,
           '&:not(.Mui-expanded)': { borderBottom: `1px solid ${theme.palette.divider}` },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <AccordionSummary
         onClick={(e) => e.preventDefault()}

package/ActionCard/ActionCardList.tsx

@@ -4,9 +4,9 @@ import { Alert } from '@mui/material'
 import React from 'react'
 import { isFragment } from 'react-is'
 import { Button } from '../Button'
+import { iconChevronDown } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { iconChevronDown } from '../icons'
 import type { ActionCardProps } from './ActionCard'
 import { ActionCardLayout } from './ActionCardLayout'
 

package/Breadcrumbs/Breadcrumbs.tsx

@@ -19,8 +19,8 @@ import dynamic from 'next/dynamic'
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
 import { Button } from '../Button'
-import { IconSvg } from '../IconSvg'
 import { iconClose, iconEllypsis } from '../icons'
+import { IconSvg } from '../IconSvg'
 import type { BreadcrumbsType } from './types'
 
 const BreadcrumbsPopper = dynamic(

package/Breadcrumbs/BreadcrumbsList.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/react'
-import { Box, Link, alpha, useTheme } from '@mui/material'
+import { alpha, Box, Link, useTheme } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 import { useEffect, useRef } from 'react'
 import type { BreadcrumbsType } from './types'

package/CHANGELOG.md

@@ -1,22 +1,42 @@
 # Change Log
 
-## 9.0.4-canary.0
+## 9.0.4-canary.10
 
-## 9.0.3
+## 9.0.4-canary.9
 
-## 9.0.3-canary.0
+## 9.0.4-canary.8
 
-## 9.0.2
+## 9.0.4-canary.7
 
-## 9.0.2-canary.0
+## 9.0.4-canary.6
 
-## 9.0.1
+### Patch Changes
+
+- [#2478](https://github.com/graphcommerce-org/graphcommerce/pull/2478) [`32bccbb`](https://github.com/graphcommerce-org/graphcommerce/commit/32bccbba4b000247d7e01e487f6d48b6dec07fb5) - Nesting multiple Containers will not increase the padding, will only be applied once. ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.5
+
+## 9.0.4-canary.4
+
+## 9.0.4-canary.3
+
+## 9.0.4-canary.2
 
 ### Patch Changes
 
-- [#2463](https://github.com/graphcommerce-org/graphcommerce/pull/2463) [`db3e142`](https://github.com/graphcommerce-org/graphcommerce/commit/db3e142d6f8b09a0f6b67a06e664b23946a71173) - Fix issue where layout title would be left aligned ([@FrankHarland](https://github.com/FrankHarland))
+- [#2473](https://github.com/graphcommerce-org/graphcommerce/pull/2473) [`8df172e`](https://github.com/graphcommerce-org/graphcommerce/commit/8df172e4fa1364892d53bc96a437d037d245de35) - Do not warn about `:first-child` since all css is hoisted out of the components. ([@paales](https://github.com/paales))
 
-## 9.0.1-canary.1
+- [#2473](https://github.com/graphcommerce-org/graphcommerce/pull/2473) [`b076b2a`](https://github.com/graphcommerce-org/graphcommerce/commit/b076b2ae4881bebf1d2debd5333a83f220c26ca7) - Also accept false as value for sxx ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.1
+
+### Patch Changes
+
+- [#2470](https://github.com/graphcommerce-org/graphcommerce/pull/2470) [`8f047a0`](https://github.com/graphcommerce-org/graphcommerce/commit/8f047a0860f9b915717f6db52be64805094d0b09) - Modify the type that is exposed for createTheme, should be faster for TypeScript to check. ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.0
+
+## 9.0.1
 
 ### Patch Changes
 

package/ChipMenu/ChipMenu.tsx

@@ -1,10 +1,10 @@
 import type { ChipProps, MenuProps, SxProps, Theme } from '@mui/material'
 import { Chip, Menu, menuClasses } from '@mui/material'
 import React, { useState } from 'react'
+import { iconCancelAlt, iconChevronDown, iconChevronUp } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { SectionHeader } from '../SectionHeader/SectionHeader'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { iconCancelAlt, iconChevronDown, iconChevronUp } from '../icons'
 
 export type ChipMenuProps = Omit<ChipProps<'button'>, 'children' | 'component'> & {
   selectedLabel?: React.ReactNode

package/Container/Container.tsx

@@ -1,6 +1,5 @@
 import { Box, useTheme } from '@mui/material'
 import type { ContainerProps } from '@mui/material'
-import clsx from 'clsx'
 import React from 'react'
 import type { LiteralUnion } from 'type-fest'
 import { extendableComponent } from '../Styles/extendableComponent'
@@ -74,13 +73,17 @@ export const Container = React.forwardRef(
       <Box
         {...rest}
         ref={ref}
-        className={clsx(className, classes.root)}
+        className={[className, classes.root].filter((v) => !!v).join(' ')}
         sx={[
           {
+            width: '100%',
             pl: !breakoutLeft ? padding : undefined,
             pr: !breakoutRight ? padding : undefined,
             '&.breakoutLeft': { pl: 'unset' },
             '&.breakoutRight': { pr: 'unset' },
+
+            // Nesting containers will not have padding applied.
+            '.MuiContainer-root &': { pl: 0, pr: 0 },
           },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}

package/Form/FormHeader.tsx

@@ -1,4 +1,4 @@
-import { Typography, styled } from '@mui/material'
+import { styled, Typography } from '@mui/material'
 
 export const FormHeader = styled(Typography, { name: 'FormHeader' })(({ theme }) => ({
   marginBottom: `calc(${theme.spacings.xxs} * -1)`,

package/Form/InputCheckmark.tsx

@@ -1,6 +1,6 @@
+import { iconCheckmark } from '../icons'
 import type { IconSvgProps } from '../IconSvg'
 import { IconSvg } from '../IconSvg'
-import { iconCheckmark } from '../icons'
 
 export type InputCheckmarkProps = {
   show?: boolean

package/FramerScroller/ItemScroller.tsx

@@ -2,10 +2,10 @@ import type { ScrollerButtonProps } from '@graphcommerce/framer-scroller'
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
+import { iconChevronLeft, iconChevronRight } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent, responsiveVal } from '../Styles'
 import { useFabSize } from '../Theme'
-import { iconChevronLeft, iconChevronRight } from '../icons'
 
 const { classes } = extendableComponent('ItemScroller', [
   'root',

package/Intl/RelativeTimeFormat/RelativeTimeFormat.tsx

@@ -8,9 +8,7 @@ export type RelativeTimeFormatProps = {
   unit?: Intl.RelativeTimeFormatUnit
 } & UseIntlRelativeTimeFormatOptions
 
-/**
- * Alternative: {@link file://./RelativeToTimeFormat.tsx}
- */
+/** Alternative: {@link file://./RelativeToTimeFormat.tsx} */
 export const RelativeTimeFormat = forwardRef<HTMLSpanElement, RelativeTimeFormatProps>(
   (props, ref) => {
     const { children, unit, locale, localeMatcher, numeric, styleFormat, ...rest } = props

package/Intl/RelativeTimeFormat/RelativeToTimeFormat.tsx

@@ -5,13 +5,11 @@ import type { RelativeTimeFormatProps } from './RelativeTimeFormat'
 import { RelativeTimeFormat } from './RelativeTimeFormat'
 
 type RelativeToTimeFormatProps = Omit<RelativeTimeFormatProps, 'children'> & {
-  /**
-   * Date to format a relative value for.
-   */
+  /** Date to format a relative value for. */
   children: DateValue
   /**
-   * If provided, the component will format a relative value to this date.
-   * Else, it will format a relative value to the current date.
+   * If provided, the component will format a relative value to this date. Else, it will format a
+   * relative value to the current date.
    */
   to?: DateValue
 }

package/Intl/useIntlLocalesArgument.ts

@@ -1,9 +1,7 @@
 import { useLocale, useMemoObject } from '../hooks'
 
 export type UseIntlLocalesArgumentOptions<T extends object = object> = {
-  /**
-   * @default useLocale()
-   */
+  /** @default useLocale() */
   locale?: Intl.LocalesArgument
 } & T
 

package/Layout/components/LayoutHeaderBack.tsx

@@ -10,14 +10,12 @@ import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
 import type { LinkOrButtonProps } from '../../Button/LinkOrButton'
 import { LinkOrButton } from '../../Button/LinkOrButton'
+import { iconChevronLeft } from '../../icons'
 import { IconSvg } from '../../IconSvg'
 import { responsiveVal } from '../../Styles'
-import { iconChevronLeft } from '../../icons'
 
 export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'> & {
-  /**
-   * Will not use `router.back()` if available, and will always use the `up.href`
-   */
+  /** Will not use `router.back()` if available, and will always use the `up.href` */
   disableBackNavigation?: boolean
 }
 

package/Layout/components/LayoutHeaderClose.tsx

@@ -2,9 +2,9 @@ import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { i18n } from '@lingui/core'
 import { Fab } from '@mui/material'
 import { useState } from 'react'
+import { iconClose } from '../../icons'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { useFabSize } from '../../Theme'
-import { iconClose } from '../../icons'
 
 export type LayoutHeaderCloseProps = {
   onClose?: () => void

package/Layout/components/LayoutHeaderContent.tsx

@@ -1,6 +1,8 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Box, styled, SxProps, Theme } from '@mui/material'
-import { LayoutProps, m } from 'framer-motion'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, styled } from '@mui/material'
+import type { LayoutProps } from 'framer-motion'
+import { m } from 'framer-motion'
 import React, { useRef } from 'react'
 import { Container } from '../../Container/Container'
 import { extendableComponent } from '../../Styles'

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,6 +1,7 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { dvh } from '@graphcommerce/framer-utils'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useScroll, useTransform } from 'framer-motion'
 import { Container } from '../../Container/Container'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'

package/LayoutParts/DesktopNavBar.tsx

@@ -1,11 +1,11 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import type { BoxProps } from '@mui/material'
 import React from 'react'
+import { iconChevronLeft, iconChevronRight } from '../icons'
 import type { IconSvgProps } from '../IconSvg'
 import { IconSvg } from '../IconSvg'
 import { MediaQuery } from '../MediaQuery'
 import { extendableComponent } from '../Styles/extendableComponent'
-import { iconChevronLeft, iconChevronRight } from '../icons'
 
 export type MenuTabsProps = {
   children: React.ReactNode

package/MediaQuery/MediaQuery.tsx

@@ -57,9 +57,7 @@ export type MediaQueryProps<C extends React.ElementType = 'div'> = BoxProps<C> &
  * hydrates the component if the query matches. If it doesn't match, it will NOT render the
  * component (and thus not execute the JS).
  */
-export function MediaQuery<Component extends React.ElementType = 'div'>(
-  props: MediaQueryProps<Component>,
-) {
+function MediaQueryBase(props: MediaQueryProps) {
   const { query, sx, children, display = 'contents', ...elementProps } = props
 
   const theme = useTheme()
@@ -109,3 +107,7 @@ export function MediaQuery<Component extends React.ElementType = 'div'>(
     />
   )
 }
+
+export const MediaQuery = MediaQueryBase as <C extends React.ElementType = 'div'>(
+  props: MediaQueryProps<C>,
+) => React.ReactNode

package/Navigation/components/NavigationFab.tsx

@@ -4,12 +4,12 @@ import { Box, Fab, styled, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
+import { iconClose, iconMenu } from '../../icons'
 import { IconSvg } from '../../IconSvg'
 import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { useFabAnimation } from '../../LayoutParts/useFabAnimation'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
-import { iconClose, iconMenu } from '../../icons'
 
 const MotionDiv = styled(m.div)({})
 

package/Navigation/components/NavigationItem.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Box, ListItemButton, alpha, styled, useEventCallback } from '@mui/material'
+import { alpha, Box, ListItemButton, styled, useEventCallback } from '@mui/material'
 import React from 'react'
+import { useMatchMedia } from '../../hooks'
+import { iconChevronRight } from '../../icons'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { NextLink } from '../../Theme'
-import { useMatchMedia } from '../../hooks'
-import { iconChevronRight } from '../../icons'
 import type { NavigationNode } from '../hooks/useNavigation'
 import {
   isNavigationButton,

package/Navigation/components/NavigationOverlay.tsx

@@ -5,14 +5,14 @@ import { Box, Fab, styled, useEventCallback, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
 import React, { useEffect, useRef } from 'react'
 import type { LiteralUnion } from 'type-fest'
+import { useMatchMedia } from '../../hooks'
+import { iconChevronLeft, iconClose } from '../../icons'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
 import { LayoutTitle } from '../../Layout/components/LayoutTitle'
 import { OverlaySsr } from '../../Overlay/components/OverlaySsr'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
-import { useMatchMedia } from '../../hooks'
-import { iconChevronLeft, iconClose } from '../../icons'
 import { useNavigation } from '../hooks/useNavigation'
 import type { mouseEventPref } from './NavigationItem'
 import { NavigationList } from './NavigationList'

package/Navigation/components/NavigationProvider.tsx

@@ -15,9 +15,7 @@ import { NavigationContext, NavigationNodeType } from '../hooks/useNavigation'
 export type NavigationProviderBaseProps = {
   items: (NavigationNode | React.ReactElement)[]
   hideRootOnNavigate?: boolean
-  /**
-   * @deprecated No longer used
-   */
+  /** @deprecated No longer used */
   closeAfterNavigate?: boolean
   children?: React.ReactNode
   animationDuration?: number

package/OverlayOrPopperChip/OverlayOrPopperChip.tsx

@@ -1,9 +1,9 @@
 import type { ChipProps, SxProps, Theme } from '@mui/material'
-import { Badge, Chip, Typography, lighten, useEventCallback } from '@mui/material'
+import { Badge, Chip, lighten, Typography, useEventCallback } from '@mui/material'
 import React, { useState } from 'react'
+import { iconChevronDown, iconChevronUp } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { responsiveVal } from '../Styles'
-import { iconChevronDown, iconChevronUp } from '../icons'
 import type { OverlayOrPopperPanelProps } from './OverlayOrPopperPanel'
 import { OverlayOrPopperPanel } from './OverlayOrPopperPanel'
 

package/OverlayOrPopperChip/OverlayPanelActions.tsx

@@ -1,12 +1,12 @@
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { Box, Button, Fab, Typography } from '@mui/material'
+import { iconClose } from '../icons'
 import { IconSvg, useIconSvgSize } from '../IconSvg'
 import { LayoutOverlayHeader } from '../LayoutOverlay'
 import { OverlayStickyBottom } from '../Overlay/components/OverlayStickyBottom'
 import { extendableComponent } from '../Styles'
 import { useFabSize } from '../Theme'
-import { iconClose } from '../icons'
 import type { PanelActionsProps } from './types'
 
 const { classes } = extendableComponent(

package/OverlayOrPopperChip/PopperPanelActions.tsx

@@ -1,11 +1,11 @@
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { Box, Button, Fab, Typography } from '@mui/material'
+import { iconClose } from '../icons'
 import { IconSvg, useIconSvgSize } from '../IconSvg'
 import { LayoutHeader } from '../Layout'
 import { OverlayStickyBottom } from '../Overlay/components/OverlayStickyBottom'
 import { useFabSize } from '../Theme'
-import { iconClose } from '../icons'
 import type { PanelActionsProps } from './types'
 
 export function PopperPanelActions(props: PanelActionsProps) {

package/Page/types.ts

@@ -1,3 +1,4 @@
+import type { ParsedUrlQuery } from 'querystring'
 import type { UpPage } from '@graphcommerce/framer-next-pages/types'
 // todo: remove references to GraphQL
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -6,7 +7,6 @@ import type {
   GetServerSideProps as GetServerSidePropsNext,
   GetStaticProps as GetStaticPropsNext,
 } from 'next'
-import type { ParsedUrlQuery } from 'querystring'
 
 type AnyObj = Record<string, unknown>
 

package/Pagination/Pagination.tsx

@@ -4,9 +4,9 @@ import { Box, IconButton } from '@mui/material'
 import type { UsePaginationItem } from '@mui/material/usePagination'
 import usePagination from '@mui/material/usePagination'
 import React from 'react'
+import { iconChevronLeft, iconChevronRight } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { iconChevronLeft, iconChevronRight } from '../icons'
 
 export type PagePaginationProps = {
   count: number

package/Pagination/PaginationExtended.tsx

@@ -1,9 +1,9 @@
 import type { PaginationProps, PaginationRenderItemParams, SxProps, Theme } from '@mui/material'
 import { Box, Pagination, PaginationItem } from '@mui/material'
+import { iconChevronLeft, iconChevronRight } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 import { NextLink } from '../Theme'
-import { iconChevronLeft, iconChevronRight } from '../icons'
 
 export type PaginationExtendedProps = {
   count: number

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,9 +1,9 @@
 import type { ListItemButtonProps } from '@mui/material'
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import React from 'react'
+import { iconChevronRight } from '../../icons'
 import { IconSvg } from '../../IconSvg'
 import { NextLink } from '../../Theme'
-import { iconChevronRight } from '../../icons'
 
 export type ButtonLinkListItemProps = {
   endIcon?: React.ReactNode

package/Row/RowLinks/RowLinks.tsx

@@ -8,7 +8,6 @@ import { iconChevronLeft, iconChevronRight } from '../../icons'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
-import { Row } from '../Row'
 
 export type RowLinksProps = {
   title: string

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,12 +1,12 @@
 import { i18n } from '@lingui/core'
 import type { SnackbarProps, SxProps, Theme } from '@mui/material'
-import { Box, Fab, Portal, Snackbar, SnackbarContent, lighten } from '@mui/material'
+import { Box, Fab, lighten, Portal, Snackbar, SnackbarContent } from '@mui/material'
 import React, { useEffect, useState } from 'react'
+import { iconCheckmark, iconClose, iconSadFace } from '../icons'
+import iconInfo from '../icons/info.svg'
 import type { IconSvgProps } from '../IconSvg'
 import { IconSvg } from '../IconSvg'
 import { breakpointVal, extendableComponent } from '../Styles'
-import { iconCheckmark, iconClose, iconSadFace } from '../icons'
-import iconInfo from '../icons/info.svg'
 
 type Size = 'normal' | 'wide'
 type Variant = 'contained' | 'pill'
@@ -29,9 +29,7 @@ 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
-   */
+  /** Setting this to true allows interaction with the rest of the page without closing the Snackbar */
   disableBackdropClick?: boolean
   disableClose?: boolean
   disableIcon?: boolean

package/StarRatingField/StarRatingField.tsx

@@ -1,8 +1,8 @@
 import type { RatingProps } from '@mui/material'
 import { Rating } from '@mui/material'
+import { iconStar } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { iconStar } from '../icons'
 
 export type StarRatingFieldProps = {
   id?: string

package/Styles/createEmotionCache.ts

@@ -10,5 +10,7 @@ export const createEmotionCache = () => {
     insertionPoint = emotionInsertionPoint ?? undefined
   }
 
-  return createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
+  const cache = createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
+  cache.compat = true
+  return cache
 }

package/Styles/withEmotionCache.tsx

@@ -5,8 +5,8 @@ import type { AppType } from 'next/app'
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type { DocumentContext } from 'next/document'
-import type { EmotionProviderProps } from './EmotionProvider'
 import { createEmotionCache } from './createEmotionCache'
+import type { EmotionProviderProps } from './EmotionProvider'
 
 export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
 

package/TextInputNumber/TextInputNumber.tsx

@@ -8,10 +8,10 @@ import {
 } from '@mui/material'
 import type { ChangeEvent, Ref } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { iconMin, iconPlus } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { iconMin, iconPlus } from '../icons'
 
 export type IconButtonPropsOmit = Omit<
   IconButtonProps,
@@ -29,9 +29,7 @@ const name = 'TextInputNumber'
 const parts = ['quantity', 'quantityInput', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-/**
- * @deprecated Please us NumberFieldElement
- */
+/** @deprecated Please us NumberFieldElement */
 export function TextInputNumber(props: TextInputNumberProps) {
   const {
     DownProps = {},

package/Theme/NextLink.tsx

@@ -15,8 +15,8 @@ export type LinkProps = AnchorWithoutLinkProps & Partial<NextLinkPropsBase> & {
  * This is a wrapper around the Next.js Link component which can be used with MUI's Link component
  * or any ButtonBase derivative.
  *
- * By default you can use the props provided by the Link or Button component, but you can pass
- * any next/link specific props like `prefetch`, `replace`, `scroll`, `shallow`
+ * By default you can use the props provided by the Link or Button component, but you can pass any
+ * next/link specific props like `prefetch`, `replace`, `scroll`, `shallow`
  *
  * ```typescript
  * const button = (
@@ -40,9 +40,9 @@ export const NextLink = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) =>
   const isFullUrl = href.includes(':') || href.startsWith('//')
 
   /**
-   * When an internal link is provided and it is on the same domain, extract the locale
-   * from the URL and make the URL relative without the locale. Prevents Next.js prefixing
-   * again with the current locale.
+   * When an internal link is provided and it is on the same domain, extract the locale from the URL
+   * and make the URL relative without the locale. Prevents Next.js prefixing again with the current
+   * locale.
    */
   if (!locale && isFullUrl && href.startsWith(canonicalBaseUrl)) {
     const url = new URL(href)

package/Theme/createTheme.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '@mui/material'
+import type { Breakpoint } from '@mui/material'
 
 export {}
 

package/Theme/themeDefaults.ts

@@ -1,3 +1,5 @@
+import type { Components, Theme, ThemeOptions } from '@mui/material'
+import { createTheme as createMuiTheme } from '@mui/material'
 import type { Shadows } from '@mui/material/styles/shadows'
 import { spreadVal } from '../Styles/spreadVal'
 import { breakpoints } from './breakpoints'
@@ -37,3 +39,11 @@ export const themeBaseDefaults = {
   spreadVal,
   shadows,
 }
+
+// https://github.com/tjx666/ts-perf-issue#createtheme
+export const createTheme = createMuiTheme as unknown as (
+  baseTheme: ThemeOptions,
+  options?: {
+    components: Components<Theme>
+  },
+) => Theme

package/ToggleButton/ToggleButton.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ButtonProps } from '@mui/material'
-import { Button, alpha } from '@mui/material'
+import { alpha, Button } from '@mui/material'
 import type { FormEvent } from 'react'
 import React from 'react'
 import { extendableComponent } from '../Styles'

package/hooks/memoDeep.ts

@@ -6,7 +6,8 @@ import { memo } from 'react'
 /**
  * This is a deep comparison version of React's `memo` function.
  *
- * This method isn't too expensive to run, but will be rerun every time a parent component is rendered.
+ * This method isn't too expensive to run, but will be rerun every time a parent component is
+ * rendered.
  *
  * This should probably only be used as the result of a performance profiling session.
  */

package/hooks/useIsSsr.ts

@@ -2,9 +2,7 @@ import { useSyncExternalStore } from 'react'
 
 const emptySubscribe = () => () => {}
 
-/**
- * This method will return true on the server and during hydration and false after that.
- */
+/** This method will return true on the server and during hydration and false after that. */
 export function useIsSSR() {
   return useSyncExternalStore(
     emptySubscribe,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.0",
+  "version": "9.0.4-canary.10",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -24,13 +24,13 @@
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.0",
-    "@graphcommerce/framer-next-pages": "^9.0.4-canary.0",
-    "@graphcommerce/framer-scroller": "^9.0.4-canary.0",
-    "@graphcommerce/framer-utils": "^9.0.4-canary.0",
-    "@graphcommerce/image": "^9.0.4-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.10",
+    "@graphcommerce/framer-next-pages": "^9.0.4-canary.10",
+    "@graphcommerce/framer-scroller": "^9.0.4-canary.10",
+    "@graphcommerce/framer-utils": "^9.0.4-canary.10",
+    "@graphcommerce/image": "^9.0.4-canary.10",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.10",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.10",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/cssFlags.tsx

@@ -35,7 +35,7 @@ export function getCssFlag(flagName: string) {
  * Example:
  *
  * ```tsx
- * <Box sx={{ [cssFlagSelector('dark')]: { color: 'white' } }} />
+ * ;<Box sx={{ [cssFlagSelector('dark')]: { color: 'white' } }} />
  * ```
  */
 export const cssFlag = <T extends string>(flagName: T) => `html[data-${flagName}] &` as const
@@ -46,7 +46,7 @@ export const cssFlag = <T extends string>(flagName: T) => `html[data-${flagName}
  * Example:
  *
  * ```tsx
- * <Box sx={{ [cssNotFlagSelector('dark')]: { color: 'black' } }} />
+ * ;<Box sx={{ [cssNotFlagSelector('dark')]: { color: 'black' } }} />
  * ```
  */
 export const cssNotFlag = <T extends string>(flagName: T) =>

package/utils/normalizeLocale.ts

@@ -1,15 +1,14 @@
 import { storefrontConfig, storefrontConfigDefault } from './storefrontConfig'
 
 /**
- * To support using multiple storefronts using the same language locale (which
- * next.js does not support), we use an additional 'tag' in the locale code in
- * which we specify a unique string (i.e. a Magento store code).
+ * To support using multiple storefronts using the same language locale (which next.js does not
+ * support), we use an additional 'tag' in the locale code in which we specify a unique string (i.e.
+ * a Magento store code).
  *
- * This makes next.js happy, as it still follows the BCP47 spec. However, the
- * Intl API and other places may not accept this as a valid locale.
+ * This makes next.js happy, as it still follows the BCP47 spec. However, the Intl API and other
+ * places may not accept this as a valid locale.
  *
- * Use this method to get a 'normalized' locale that can safely be used in such
- * places.
+ * Use this method to get a 'normalized' locale that can safely be used in such places.
  */
 export function normalizeLocale(locale: string | undefined = storefrontConfigDefault().locale) {
   const linguiLocale = storefrontConfig(locale)?.linguiLocale

package/utils/robots.ts

@@ -3,8 +3,8 @@ import type { GetServerSidePropsContext } from 'next'
 type Stringifyable = boolean | string | number | null | undefined
 
 /**
- * Tagged template literal for robots.txt that will automatically stringify values and indent them correctly.
- * https://developers.google.com/search/docs/crawling-indexing/robots/robots_txt#syntax
+ * Tagged template literal for robots.txt that will automatically stringify values and indent them
+ * correctly. https://developers.google.com/search/docs/crawling-indexing/robots/robots_txt#syntax
  */
 export function robotsTxt(strings: TemplateStringsArray, ...values: Stringifyable[]) {
   return strings

package/utils/sxx.ts

@@ -9,8 +9,10 @@ import type { SxProps, Theme } from '@mui/material'
  * sxx({ position: 'absolute', right: 0, top: 0 }, props.sx)
  * ```
  */
-export const sxx = (...sxPropsArray: (SxProps<Theme> | undefined)[]): SxProps<Theme> =>
+export const sxx = (
+  ...sxPropsArray: (SxProps<Theme> | undefined | null | false)[]
+): SxProps<Theme> =>
   sxPropsArray
-    .filter((v) => v !== undefined)
+    .filter((v) => !!v)
     .map((sx) => (Array.isArray(sx) ? sx : [sx]))
     .flat(1)