@graphcommerce/next-ui 9.0.4-canary.9 → 9.0.4

package/ActionCard/ActionCard.tsx

@@ -3,7 +3,6 @@ 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'
@@ -95,6 +94,11 @@ 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 {
@@ -117,7 +121,6 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
     layout = 'list',
     error = false,
     slotProps = {},
-    ...other
   } = props
 
   const classes = withState({
@@ -136,132 +139,133 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
       className={classes.root}
       onClick={onClick ? (event) => onClick(event, value) : undefined}
       disabled={disabled}
-      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),
+      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',
             },
-            '&.error': {
-              backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
+            '&.sizeMedium': {
+              px: responsiveVal(10, 14),
+              py: responsiveVal(10, 12),
+              typography: 'body2',
+              display: 'block',
             },
-            '&:focus': {
-              outline: 'none',
-              boxShadow: `0 0 0 4px ${alpha(theme.palette[color].main, theme.palette.action.focusOpacity)}`,
+            '&.sizeLarge': {
+              px: responsiveVal(12, 16),
+              py: responsiveVal(12, 14),
+              display: 'block',
             },
-          },
-          '&.variantOutlined': {
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
-            '&:not(:last-of-type)': {
-              marginBottom: '-2px',
+            '&.sizeResponsive': {
+              px: responsiveVal(8, 16),
+              py: responsiveVal(4, 14),
+              display: { xs: 'flex', md: 'block', lg: 'block' },
+              [theme.breakpoints.down('md')]: { typography: 'body2' },
             },
-            '&.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,
-                ),
+            '&.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),
               },
-              '&: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,
-                ),
+              '&:focus': {
+                outline: 'none',
+                boxShadow: `0 0 0 4px ${alpha(theme.palette[color].main, theme.palette.action.focusOpacity)}`,
               },
             },
-            '&.selected': {
-              borderColor: 'transparent',
-              boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}`,
+            '&.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}`,
+              },
             },
-            '&.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,
-              )}`,
+            '&.selected': {
+              zIndex: 1,
             },
-            '&:focus': {
-              boxShadow: `inset 0 0 0 1px ${theme.palette.divider},0 0 0 4px ${alpha(
-                theme.palette[color].main,
-                theme.palette.action.hoverOpacity,
-              )}`,
+            '&:focus, &.selected:focus, &.error:focus': {
+              zIndex: 2,
             },
-            '&.error': {
-              boxShadow: `inset 0 0 0 2px ${theme.palette.error.main}`,
+            '&.disabled': {
+              background: theme.palette.action.disabledBackground,
+              opacity: theme.palette.action.disabledOpacity,
+              color: theme.palette.action.disabled,
             },
-          },
-          '&.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,
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ],
         slotProps.root?.sx,
       )}
       {...slotProps.root}
-      {...other}
     >
       <Box
         className={classes.rootInner}
-        sx={sxx(
+        sx={combineSx(
           {
             display: 'flex',
             flexDirection: 'row',
@@ -285,7 +289,10 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           {image && (
             <Box
               className={classes.image}
-              sx={sxx({ display: 'flex', pr: '15px', alignSelf: 'center' }, slotProps.image?.sx)}
+              sx={combineSx(
+                { display: 'flex', pr: '15px', alignSelf: 'center' },
+                slotProps.image?.sx,
+              )}
               {...slotProps.image}
             >
               {image}
@@ -301,7 +308,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             {title && (
               <Box
                 className={classes.title}
-                sx={sxx(
+                sx={combineSx(
                   {
                     '&.sizeSmall': { typography: 'body1' },
                     '&.sizeMedium': { typography: 'body1' },
@@ -318,7 +325,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             {details && (
               <Box
                 className={classes.details}
-                sx={sxx({ color: 'text.secondary' }, slotProps.details?.sx)}
+                sx={combineSx({ color: 'text.secondary' }, slotProps.details?.sx)}
                 {...slotProps.details}
               >
                 {details}
@@ -327,7 +334,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             {secondaryAction && (
               <Box
                 className={classes.secondaryAction}
-                sx={sxx({}, slotProps.secondaryAction?.sx)}
+                sx={combineSx({}, slotProps.secondaryAction?.sx)}
                 {...slotProps.secondaryAction}
               >
                 {secondaryAction}
@@ -337,7 +344,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
         </Box>
         <Box
           className={classes.end}
-          sx={sxx(
+          sx={combineSx(
             {
               display: 'flex',
               flexDirection: 'column',
@@ -351,7 +358,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           {action && (
             <Box
               className={classes.action}
-              sx={sxx(
+              sx={combineSx(
                 (theme) => ({ marginBottom: '5px', color: theme.palette[color].main }),
                 slotProps.action?.sx,
               )}
@@ -363,7 +370,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           {price && !disabled && (
             <Box
               className={classes.price}
-              sx={sxx(
+              sx={combineSx(
                 {
                   textAlign: 'right',
                   typography: 'body1',
@@ -381,7 +388,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
         </Box>
       </Box>
       {after && (
-        <Box className={classes.after} sx={sxx({}, slotProps.after?.sx)} {...slotProps.after}>
+        <Box className={classes.after} sx={combineSx({}, slotProps.after?.sx)} {...slotProps.after}>
           {after}
         </Box>
       )}

package/ActionCard/ActionCardAccordion.tsx

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

package/Breadcrumbs/BreadcrumbsList.tsx

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

package/CHANGELOG.md

@@ -1,40 +1,26 @@
 # Change Log
 
-## 9.0.4-canary.9
-
-## 9.0.4-canary.8
-
-## 9.0.4-canary.7
-
-## 9.0.4-canary.6
+## 9.0.4
 
 ### 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))
+- [#2503](https://github.com/graphcommerce-org/graphcommerce/pull/2503) [`cf9a54e`](https://github.com/graphcommerce-org/graphcommerce/commit/cf9a54e300378a0ca77aa7e39e4a95788359028d) - Solve issue where ActionCard would crash the whole app because it forwarded components to string attributes ([@paales](https://github.com/paales))
 
-## 9.0.4-canary.5
+## 9.0.3
 
-## 9.0.4-canary.4
+## 9.0.3-canary.0
 
-## 9.0.4-canary.3
-
-## 9.0.4-canary.2
-
-### Patch Changes
+## 9.0.2
 
-- [#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.2-canary.0
 
-- [#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
+## 9.0.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
+- [#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))
 
-## 9.0.1
+## 9.0.1-canary.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,5 +1,6 @@
 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'
@@ -73,17 +74,13 @@ export const Container = React.forwardRef(
       <Box
         {...rest}
         ref={ref}
-        className={[className, classes.root].filter((v) => !!v).join(' ')}
+        className={clsx(className, classes.root)}
         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 { styled, Typography } from '@mui/material'
+import { Typography, styled } 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,7 +8,9 @@ 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,11 +5,13 @@ 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,7 +1,9 @@
 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,12 +10,14 @@ 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,8 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-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 { Box, styled, SxProps, Theme } from '@mui/material'
+import { LayoutProps, m } from 'framer-motion'
 import React, { useRef } from 'react'
 import { Container } from '../../Container/Container'
 import { extendableComponent } from '../../Styles'

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,7 +1,6 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { dvh } from '@graphcommerce/framer-utils'
-import type { SxProps, Theme } from '@mui/material'
-import { Box } from '@mui/material'
+import { Box, SxProps, Theme } 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,7 +57,9 @@ 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).
  */
-function MediaQueryBase(props: MediaQueryProps) {
+export function MediaQuery<Component extends React.ElementType = 'div'>(
+  props: MediaQueryProps<Component>,
+) {
   const { query, sx, children, display = 'contents', ...elementProps } = props
 
   const theme = useTheme()
@@ -107,7 +109,3 @@ function MediaQueryBase(props: MediaQueryProps) {
     />
   )
 }
-
-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 { alpha, Box, ListItemButton, styled, useEventCallback } from '@mui/material'
+import { Box, ListItemButton, alpha, 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,7 +15,9 @@ 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, lighten, Typography, useEventCallback } from '@mui/material'
+import { Badge, Chip, Typography, lighten, 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,4 +1,3 @@
-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
@@ -7,6 +6,7 @@ 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,6 +8,7 @@ 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, lighten, Portal, Snackbar, SnackbarContent } from '@mui/material'
+import { Box, Fab, Portal, Snackbar, SnackbarContent, lighten } 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,7 +29,9 @@ 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,7 +10,5 @@ export const createEmotionCache = () => {
     insertionPoint = emotionInsertionPoint ?? undefined
   }
 
-  const cache = createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
-  cache.compat = true
-  return cache
+  return createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
 }

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 { createEmotionCache } from './createEmotionCache'
 import type { EmotionProviderProps } from './EmotionProvider'
+import { createEmotionCache } from './createEmotionCache'
 
 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,7 +29,9 @@ 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 type { Breakpoint } from '@mui/material'
+import { Breakpoint } from '@mui/material'
 
 export {}
 

package/Theme/themeDefaults.ts

@@ -1,5 +1,3 @@
-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'
@@ -39,11 +37,3 @@ 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 { alpha, Button } from '@mui/material'
+import { Button, alpha } from '@mui/material'
 import type { FormEvent } from 'react'
 import React from 'react'
 import { extendableComponent } from '../Styles'

package/hooks/memoDeep.ts

@@ -6,8 +6,7 @@ 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,7 +2,9 @@ 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.9",
+  "version": "9.0.4",
   "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.9",
-    "@graphcommerce/framer-next-pages": "^9.0.4-canary.9",
-    "@graphcommerce/framer-scroller": "^9.0.4-canary.9",
-    "@graphcommerce/framer-utils": "^9.0.4-canary.9",
-    "@graphcommerce/image": "^9.0.4-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.9",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4",
+    "@graphcommerce/framer-next-pages": "^9.0.4",
+    "@graphcommerce/framer-scroller": "^9.0.4",
+    "@graphcommerce/framer-utils": "^9.0.4",
+    "@graphcommerce/image": "^9.0.4",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4",
     "@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,14 +1,15 @@
 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,10 +9,8 @@ import type { SxProps, Theme } from '@mui/material'
  * sxx({ position: 'absolute', right: 0, top: 0 }, props.sx)
  * ```
  */
-export const sxx = (
-  ...sxPropsArray: (SxProps<Theme> | undefined | null | false)[]
-): SxProps<Theme> =>
+export const sxx = (...sxPropsArray: (SxProps<Theme> | undefined)[]): SxProps<Theme> =>
   sxPropsArray
-    .filter((v) => !!v)
+    .filter((v) => v !== undefined)
     .map((sx) => (Array.isArray(sx) ? sx : [sx]))
     .flat(1)