@graphcommerce/next-ui 9.0.0-canary.98 → 9.0.0

package/Intl/DateTimeFormat/TimeFormat.tsx

@@ -1,10 +1,12 @@
-import { DateTimeFormat, DateTimeFormatPropsType } from './DateTimeFormat'
+import type { DateTimeFormatProps } from './DateTimeFormat'
+import { DateTimeFormat } from './DateTimeFormat'
 
-type TimeFormatProps = Omit<
-  DateTimeFormatPropsType,
-  'dateStyle' | 'month' | 'day' | 'era' | 'month' | 'weekday' | 'year'
+export type TimeFormatProps = Omit<
+  DateTimeFormatProps,
+  'dateStyle' | 'month' | 'day' | 'era' | 'weekday' | 'year'
 >
 
+/** @public */
 export function TimeFormat(props: TimeFormatProps) {
   return <DateTimeFormat dateStyle={undefined} {...props} />
 }

package/Intl/DateTimeFormat/index.ts

@@ -1,3 +1,4 @@
 export * from './DateTimeFormat'
 export * from './DateFormat'
 export * from './TimeFormat'
+export * from './useIntlDateTimeFormat'

package/Intl/DateTimeFormat/useIntlDateTimeFormat.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+import { useMemoObject } from '../../hooks/useMemoObject'
+import type { UseIntlLocalesArgumentOptions } from '../useIntlLocalesArgument'
+import { useIntlLocalesArgument } from '../useIntlLocalesArgument'
+
+export type UseIntlDateTimeFormatOptions = Intl.DateTimeFormatOptions &
+  UseIntlLocalesArgumentOptions
+
+export function useIntlDateTimeFormat(props: UseIntlDateTimeFormatOptions) {
+  const [locales, options] = useIntlLocalesArgument(props)
+  const memoOptions = useMemoObject(options)
+  return useMemo(() => new Intl.DateTimeFormat(locales, memoOptions), [locales, memoOptions])
+}

package/Intl/DisplayNames/DisplayNames.tsx

@@ -1,22 +1,14 @@
-import { useMemo } from 'react'
-import { useLocale } from '../../hooks/useLocale'
-import { useMemoObject } from '../../hooks/useMemoObject'
+import type { UseIntlDisplayNamesOptions } from './useIntlDisplayNames'
+import { useIntlDisplayNames } from './useIntlDisplayNames'
 
-export type UseDisplayNamesProps = Intl.DisplayNamesOptions
-
-export function useDisplayNames(props: UseDisplayNamesProps) {
-  const locale = useLocale()
-  const memoOptions = useMemoObject(props)
-  return useMemo(() => new Intl.DisplayNames(locale, memoOptions), [locale, memoOptions])
-}
-
-type DisplayNamesProps = UseDisplayNamesProps & {
+export type DisplayNamesProps = UseIntlDisplayNamesOptions & {
   code: string
 }
 
+/** @public */
 export function DisplayNames(props: DisplayNamesProps) {
   const { code, ...options } = props
-  const formatter = useDisplayNames(options)
+  const formatter = useIntlDisplayNames(options)
 
   return <span suppressHydrationWarning>{formatter.of(code)}</span>
 }

package/Intl/DisplayNames/index.ts

@@ -1 +1,2 @@
 export * from './DisplayNames'
+export * from './useIntlDisplayNames'

package/Intl/DisplayNames/useIntlDisplayNames.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react'
+import { useMemoObject } from '../../hooks/useMemoObject'
+import type { UseIntlLocalesArgumentOptions } from '../useIntlLocalesArgument'
+import { useIntlLocalesArgument } from '../useIntlLocalesArgument'
+
+export type UseIntlDisplayNamesOptions = Intl.DisplayNamesOptions & UseIntlLocalesArgumentOptions
+
+export function useIntlDisplayNames(props: UseIntlDisplayNamesOptions) {
+  const [locales, options] = useIntlLocalesArgument(props)
+  const memoOptions = useMemoObject(options)
+  return useMemo(() => new Intl.DisplayNames(locales, memoOptions), [locales, memoOptions])
+}

package/Intl/{ListFormat.tsx → ListFormat/ListFormat.tsx}

@@ -1,20 +1,15 @@
-import React, { useMemo } from 'react'
-import { useLocale } from '../hooks'
+import React from 'react'
+import type { UseIntlListFormatOptions } from './useIntlListFormat'
+import { useIntlListFormat } from './useIntlListFormat'
 
-type ListFormatProps = {
+export type ListFormatProps = {
   children: React.ReactNode[]
-  listStyle?: Intl.ListFormatOptions['style']
-} & Omit<Intl.ListFormatOptions, 'style'>
+} & UseIntlListFormatOptions
 
+/** @public */
 export function ListFormat(props: ListFormatProps) {
-  const { children, localeMatcher, listStyle: style, type } = props
-
-  const locale = useLocale()
-
-  const formatter = useMemo(
-    () => new Intl.ListFormat(locale, { localeMatcher, style, type }),
-    [locale, localeMatcher, style, type],
-  )
+  const { children, ...options } = props
+  const formatter = useIntlListFormat(options)
 
   const childArray = React.Children.toArray(children)
   const fauxChildren = childArray.map((child, index) => `${index}`) ?? []

package/Intl/ListFormat/index.ts

@@ -0,0 +1,2 @@
+export * from './ListFormat'
+export * from './useIntlListFormat'

package/Intl/ListFormat/useIntlListFormat.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react'
+import { useMemoObject } from '../../hooks'
+import type { UseIntlLocalesArgumentOptions } from '../useIntlLocalesArgument'
+import { useIntlLocalesArgument } from '../useIntlLocalesArgument'
+
+export type UseIntlListFormatOptions = {
+  listStyle?: Intl.ListFormatOptions['style']
+} & Omit<Intl.ListFormatOptions, 'style'> &
+  UseIntlLocalesArgumentOptions
+
+export function useIntlListFormat(props: UseIntlListFormatOptions) {
+  const [locales, options] = useIntlLocalesArgument(props)
+  const memoOptions = useMemoObject({ ...options })
+  return useMemo(() => new Intl.ListFormat(locales, memoOptions), [locales, memoOptions])
+}

package/Intl/NumberFormat/CurrencyFormat.tsx

@@ -1,4 +1,5 @@
-import { NumberFormat, NumberFormatPropsType } from './NumberFormat'
+import type { NumberFormatProps } from './NumberFormat'
+import { NumberFormat } from './NumberFormat'
 
 // https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes
 type Currency =
@@ -182,10 +183,11 @@ type Currency =
   | 'ZMW'
   | 'ZWL'
 
-export type CurrencyFormatProps = Omit<NumberFormatPropsType, 'numberStyle'> & {
+export type CurrencyFormatProps = Omit<NumberFormatProps, 'numberStyle'> & {
   currency: Currency | (string & Record<never, never>)
 }
 
+/** @public */
 export function CurrencyFormat(props: CurrencyFormatProps) {
   return <NumberFormat {...props} numberStyle='currency' />
 }

package/Intl/NumberFormat/NumberFormat.tsx

@@ -1,24 +1,22 @@
-import { Box, SxProps, Theme } from '@mui/material'
-import { useMemo } from 'react'
-import { useLocale } from '../../hooks/useLocale'
-import { useMemoObject } from '../../hooks/useMemoObject'
+import { Box } from '@mui/material'
+import { forwardRef } from 'react'
+import type { UseIntlNumberFormatOptions } from './useIntlNumberFormat'
+import { useIntlNumberFormat } from './useIntlNumberFormat'
 
-export type NumberFormatPropsType = {
-  children?: number | bigint | null | undefined
-  numberStyle: Intl.NumberFormatOptions['style']
-  sx?: SxProps<Theme>
-} & Omit<Intl.NumberFormatOptions, 'style'>
+export type NumberFormatValue = number | bigint | Intl.StringNumericLiteral
 
-export function NumberFormat(props: NumberFormatPropsType) {
-  const { children, numberStyle, ...options } = props
+export type NumberFormatProps = UseIntlNumberFormatOptions & {
+  value: NumberFormatValue
+}
 
-  const memoOptions = useMemoObject({ ...options, style: numberStyle })
-  const locale = useLocale()
-  const formatter = useMemo(() => new Intl.NumberFormat(locale, memoOptions), [locale, memoOptions])
+/** @public */
+export const NumberFormat = forwardRef<HTMLSpanElement, NumberFormatProps>((props, ref) => {
+  const { value, ...options } = props
+  const formatter = useIntlNumberFormat(options)
 
   return (
-    <Box component='span' suppressHydrationWarning>
-      {children ? formatter.format(children) : null}
+    <Box component='span' suppressHydrationWarning ref={ref}>
+      {formatter.format(value)}
     </Box>
   )
-}
+})

package/Intl/NumberFormat/PercentFormat.tsx

@@ -1,5 +1,9 @@
-import { NumberFormat, NumberFormatPropsType } from './NumberFormat'
+import type { NumberFormatProps } from './NumberFormat'
+import { NumberFormat } from './NumberFormat'
 
-export function PercentFormat(props: Omit<NumberFormatPropsType, 'numberStyle'>) {
+export type PercentFormatProps = Omit<NumberFormatProps, 'numberStyle'>
+
+/** @public */
+export function PercentFormat(props: PercentFormatProps) {
   return <NumberFormat {...props} numberStyle='percent' />
 }

package/Intl/NumberFormat/UnitFormat.tsx

@@ -1,8 +1,7 @@
-import { NumberFormatPropsType, NumberFormat } from './NumberFormat'
+import type { NumberFormatProps } from './NumberFormat'
+import { NumberFormat } from './NumberFormat'
 
-/**
- * https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers
- */
+/** https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers */
 type Unit =
   | 'acre'
   | 'bit'
@@ -50,10 +49,11 @@ type Unit =
   | 'yard'
   | 'year'
 
-export type UnitFormatProps = Omit<NumberFormatPropsType, 'numberStyle'> & {
+export type UnitFormatProps = Omit<NumberFormatProps, 'numberStyle'> & {
   unit: Unit | (string & Record<never, never>)
 }
 
+/** @public */
 export function UnitFormat(props: UnitFormatProps) {
   return <NumberFormat {...props} numberStyle='unit' />
 }

package/Intl/NumberFormat/index.ts

@@ -2,3 +2,4 @@ export * from './CurrencyFormat'
 export * from './NumberFormat'
 export * from './UnitFormat'
 export * from './PercentFormat'
+export * from './useIntlNumberFormat'

package/Intl/NumberFormat/useIntlNumberFormat.ts

@@ -0,0 +1,17 @@
+import type { SxProps, Theme } from '@mui/material'
+import { useMemo } from 'react'
+import { useMemoObject } from '../../hooks/useMemoObject'
+import type { UseIntlLocalesArgumentOptions } from '../useIntlLocalesArgument'
+import { useIntlLocalesArgument } from '../useIntlLocalesArgument'
+
+export type UseIntlNumberFormatOptions = {
+  numberStyle: Intl.NumberFormatOptions['style']
+  sx?: SxProps<Theme>
+} & Omit<Intl.NumberFormatOptions, 'style'> &
+  UseIntlLocalesArgumentOptions
+
+export function useIntlNumberFormat(props: UseIntlNumberFormatOptions) {
+  const [locales, { numberStyle, ...options }] = useIntlLocalesArgument(props)
+  const memoOptions = useMemoObject({ ...options, style: numberStyle })
+  return useMemo(() => new Intl.NumberFormat(locales, memoOptions), [locales, memoOptions])
+}

package/Intl/RelativeTimeFormat/RelativeTimeFormat.tsx

@@ -1,27 +1,20 @@
-import { forwardRef, useMemo } from 'react'
-import { useLocale } from '../../hooks/useLocale'
-import { useMemoObject } from '../../hooks/useMemoObject'
+import { forwardRef } from 'react'
 import { relativeTimeFormatUnitAuto } from './relativeTimeFormatAutoUnit'
-
-export function useRelativeTimeFormatter(props: Intl.RelativeTimeFormatOptions) {
-  const locale = useLocale()
-  const memoOptions = useMemoObject(props)
-  return useMemo(() => new Intl.RelativeTimeFormat(locale, memoOptions), [locale, memoOptions])
-}
+import type { UseIntlRelativeTimeFormatOptions } from './useIntlRelativeTimeFormat'
+import { useIntlRelativeTimeFormat } from './useIntlRelativeTimeFormat'
 
 export type RelativeTimeFormatProps = {
   children: number
   unit?: Intl.RelativeTimeFormatUnit
-  styleFormat?: Intl.RelativeTimeFormatStyle
-} & Omit<Intl.RelativeTimeFormatOptions, 'style'>
+} & UseIntlRelativeTimeFormatOptions
 
 /**
  * Alternative: {@link file://./RelativeToTimeFormat.tsx}
  */
 export const RelativeTimeFormat = forwardRef<HTMLSpanElement, RelativeTimeFormatProps>(
   (props, ref) => {
-    const { children, unit, styleFormat, localeMatcher, numeric, ...rest } = props
-    const formatter = useRelativeTimeFormatter({ localeMatcher, numeric, style: styleFormat })
+    const { children, unit, locale, localeMatcher, numeric, styleFormat, ...rest } = props
+    const formatter = useIntlRelativeTimeFormat({ locale, localeMatcher, numeric, styleFormat })
 
     const [value, autoUnit] = relativeTimeFormatUnitAuto({ value: children, unit })
 

package/Intl/RelativeTimeFormat/RelativeToTimeFormat.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useMemo } from 'react'
-import { DateValue, toDate } from '../DateTimeFormat/toDate'
-import { RelativeTimeFormat, RelativeTimeFormatProps } from './RelativeTimeFormat'
+import type { DateValue } from '../DateTimeFormat/toDate'
+import { toDate } from '../DateTimeFormat/toDate'
+import type { RelativeTimeFormatProps } from './RelativeTimeFormat'
+import { RelativeTimeFormat } from './RelativeTimeFormat'
 
 type RelativeToTimeFormatProps = Omit<RelativeTimeFormatProps, 'children'> & {
   /**

package/Intl/RelativeTimeFormat/index.ts

@@ -1,2 +1,3 @@
 export * from './RelativeTimeFormat'
 export * from './RelativeToTimeFormat'
+export * from './useIntlRelativeTimeFormat'

package/Intl/RelativeTimeFormat/useIntlRelativeTimeFormat.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react'
+import { useMemoObject } from '../../hooks/useMemoObject'
+import type { UseIntlLocalesArgumentOptions } from '../useIntlLocalesArgument'
+import { useIntlLocalesArgument } from '../useIntlLocalesArgument'
+
+export type UseIntlRelativeTimeFormatOptions = {
+  styleFormat?: Intl.RelativeTimeFormatStyle
+} & Omit<Intl.RelativeTimeFormatOptions, 'style'> &
+  UseIntlLocalesArgumentOptions
+
+export function useIntlRelativeTimeFormat(props: UseIntlRelativeTimeFormatOptions) {
+  const [locales, { styleFormat, ...options }] = useIntlLocalesArgument(props)
+  const memoOptions = useMemoObject({ ...options, style: styleFormat })
+  return useMemo(() => new Intl.RelativeTimeFormat(locales, memoOptions), [locales, memoOptions])
+}

package/Intl/useIntlLocalesArgument.ts

@@ -0,0 +1,16 @@
+import { useLocale, useMemoObject } from '../hooks'
+
+export type UseIntlLocalesArgumentOptions<T extends object = object> = {
+  /**
+   * @default useLocale()
+   */
+  locale?: Intl.LocalesArgument
+} & T
+
+export function useIntlLocalesArgument<T extends object = object>(
+  props: UseIntlLocalesArgumentOptions<T>,
+) {
+  const { locale, ...options } = props
+  const storeLocale = useLocale()
+  return [useMemoObject(locale ?? storeLocale), options] as const
+}

package/Layout/components/LayoutHeader.tsx

@@ -1,10 +1,13 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
-import { BackProps, LayoutHeaderBack, useShowBack } from './LayoutHeaderBack'
+import type { BackProps } from './LayoutHeaderBack'
+import { LayoutHeaderBack, useShowBack } from './LayoutHeaderBack'
 import { LayoutHeaderClose, useShowClose } from './LayoutHeaderClose'
-import { LayoutHeaderContent, LayoutHeaderContentProps } from './LayoutHeaderContent'
-import { FloatingProps } from './LayoutHeadertypes'
+import type { LayoutHeaderContentProps } from './LayoutHeaderContent'
+import { LayoutHeaderContent } from './LayoutHeaderContent'
+import type { FloatingProps } from './LayoutHeadertypes'
 
 export type LayoutHeaderProps = FloatingProps &
   Omit<LayoutHeaderContentProps, 'left' | 'right'> &

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,13 +1,15 @@
 import {
-  useUp,
-  usePrevUp,
   usePageContext,
   usePrevPageRouter,
+  usePrevUp,
+  useUp,
 } from '@graphcommerce/framer-next-pages'
 import { i18n } from '@lingui/core'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
-import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
+import type { LinkOrButtonProps } from '../../Button/LinkOrButton'
+import { LinkOrButton } from '../../Button/LinkOrButton'
 import { IconSvg } from '../../IconSvg'
 import { responsiveVal } from '../../Styles'
 import { iconChevronLeft } from '../../icons'

package/Layout/components/LayoutHeaderClose.tsx

@@ -6,7 +6,7 @@ import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { useFabSize } from '../../Theme'
 import { iconClose } from '../../icons'
 
-type LayoutHeaderCloseProps = {
+export type LayoutHeaderCloseProps = {
   onClose?: () => void
 }
 

package/Layout/components/LayoutHeaderContent.tsx

@@ -2,9 +2,10 @@ import { useMotionValueValue } from '@graphcommerce/framer-utils'
 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'
 import { useScrollY } from '../hooks/useScrollY'
-import { FloatingProps } from './LayoutHeadertypes'
+import type { FloatingProps } from './LayoutHeadertypes'
 
 const MotionDiv = styled(m.div)({})
 
@@ -30,7 +31,7 @@ type OwnerState = {
   bgColor?: 'paper' | 'default'
 }
 
-const name = 'LayoutHeaderContent' as const
+const name = 'LayoutHeaderContent'
 const parts = ['bg', 'content', 'left', 'center', 'right', 'divider'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
@@ -92,7 +93,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
 
             opacity: 0,
-            transition: `opacity 150ms`,
+            transition: 'opacity 150ms',
             '&.scrolled': {
               opacity: 1,
             },
@@ -104,22 +105,22 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
           ...(Array.isArray(sxBg) ? sxBg : [sxBg]),
         ]}
       />
-      <Box
+      <Container
+        maxWidth={false}
         className={classes.content}
+        sizing='shell'
         ref={ref}
         sx={[
           (theme) => ({
             position: 'absolute',
-            left: 0,
+            inset: 0,
             width: '100%',
             display: 'grid',
-            gridTemplateAreas: `"left center right"`,
+            gridTemplateAreas: '"left center right"',
             gridTemplateColumns: '1fr auto 1fr',
             alignItems: 'center',
             gap: theme.page.horizontal,
-
             height: theme.appShell.headerHeightSm,
-            px: theme.page.horizontal,
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.appBarHeightMd,
             },
@@ -133,14 +134,12 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
 
             '&.floatingSm': {
               [theme.breakpoints.down('md')]: {
-                px: theme.page.horizontal,
                 background: 'none',
                 pointerEvents: 'none',
               },
             },
             '&.floatingMd': {
               [theme.breakpoints.up('md')]: {
-                px: theme.page.horizontal,
                 background: 'none',
                 pointerEvents: 'none',
               },
@@ -177,7 +176,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             overflow: 'hidden',
             justifySelf: 'center',
 
-            transition: `opacity 150ms`,
+            transition: 'opacity 150ms',
             opacity: 0,
             '&.scrolled': {
               opacity: 1,
@@ -243,7 +242,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             {divider}
           </Box>
         )}
-      </Box>
+      </Container>
     </>
   )
 }

package/Layout/components/LayoutProvider.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { layoutContext } from '../context/layoutContext'
-import { LayoutContext } from '../types'
+import type { LayoutContext } from '../types'
 
 export type LayoutProviderProps = {
   children: React.ReactNode

package/Layout/components/LayoutTitle.tsx

@@ -1,6 +1,8 @@
-import { Box, SxProps, Theme, Typography, TypographyProps } from '@mui/material'
+import type { SxProps, Theme, TypographyProps } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import React from 'react'
-import { IconSvg, IconSvgProps } from '../../IconSvg'
+import type { IconSvgProps } from '../../IconSvg'
+import { IconSvg } from '../../IconSvg'
 import { extendableComponent, responsiveVal } from '../../Styles'
 
 type OwnerState = {
@@ -39,7 +41,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          gap: `6px`,
+          gap: '6px',
           '&.sizeSmall': {
             overflow: 'hidden',
             '& svg': {

package/Layout/context/layoutContext.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LayoutContext } from '../types'
+import type { LayoutContext } from '../types'
 
 export const layoutContext = React.createContext<null | LayoutContext>(null)
 layoutContext.displayName = 'layoutContext'

package/Layout/types.ts

@@ -1,4 +1,4 @@
-import { MotionValue } from 'framer-motion'
+import type { MotionValue } from 'framer-motion'
 
 export type LayoutContext = {
   scroll: MotionValue<number>

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,7 +1,8 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { dvh } from '@graphcommerce/framer-utils'
 import { Box, SxProps, Theme } from '@mui/material'
-import { useTransform, useScroll } from 'framer-motion'
+import { useScroll, useTransform } from 'framer-motion'
+import { Container } from '../../Container/Container'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { SkipLink } from '../../SkipLink/SkipLink'
 import { extendableComponent } from '../../Styles'
@@ -48,7 +49,6 @@ export function LayoutDefault(props: LayoutDefaultProps) {
   )
 
   const classes = withState({ noSticky })
-
   const fabIconSize = useFabSize('responsive')
 
   return (
@@ -61,7 +61,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             minHeight: '-webkit-fill-available',
           },
           display: 'grid',
-          gridTemplateRows: `auto auto 1fr auto`,
+          gridTemplateRows: { xs: 'auto 1fr auto', md: 'auto auto 1fr auto' },
           gridTemplateColumns: '100%',
           background: theme.palette.background.default,
         }),
@@ -71,7 +71,9 @@ export function LayoutDefault(props: LayoutDefaultProps) {
       <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
-        <Box
+        <Container
+          sizing='shell'
+          maxWidth={false}
           component='header'
           className={classes.header}
           sx={(theme) => ({
@@ -86,7 +88,6 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             },
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.headerHeightMd,
-              padding: `0 ${theme.page.horizontal} 0`,
               top: 0,
               display: 'flex',
               justifyContent: 'left',
@@ -101,9 +102,11 @@ export function LayoutDefault(props: LayoutDefaultProps) {
           })}
         >
           {header}
-        </Box>
+        </Container>
         {menuFab || cartFab ? (
-          <Box
+          <Container
+            sizing='shell'
+            maxWidth={false}
             className={classes.fabs}
             sx={(theme) => ({
               display: 'flex',
@@ -112,7 +115,6 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               height: 0,
               zIndex: 'speedDial',
               [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 - (${fabIconSize} / 2))`,
@@ -121,7 +123,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
                 position: 'fixed',
                 top: 'unset',
                 bottom: `calc(20px + ${fabIconSize})`,
-                padding: `0 20px`,
+                padding: '0 20px',
                 '@media (max-height: 530px) and (orientation: portrait)': {
                   display: 'none',
                 },
@@ -144,7 +146,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
                 {cartFab}
               </Box>
             )}
-          </Box>
+          </Container>
         ) : (
           <div />
         )}

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,10 +1,11 @@
-import { usePageContext, useGo, useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { useGo, usePageContext, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { useEventCallback } from '@mui/material'
 import { usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
-import { OverlayBase, LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
+import type { LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
+import { OverlayBase } from '../../Overlay/components/OverlayBase'
 import { variantsToScrollSnapType } from '../../Overlay/utils/variantsToScrollSnapType'
 
 export type LayoutOverlayProps = Omit<

package/LayoutOverlay/components/LayoutOverlayHeader.tsx

@@ -1,4 +1,5 @@
-import { LayoutHeaderProps, LayoutHeader } from '../../Layout'
+import type { LayoutHeaderProps } from '../../Layout'
+import { LayoutHeader } from '../../Layout'
 
 export function LayoutOverlayHeader(props: LayoutHeaderProps) {
   const { sx, switchPoint } = props