@graphcommerce/next-ui 8.1.0-canary.3 → 8.1.0-canary.30

package/CHANGELOG.md

@@ -1,8 +1,209 @@
 # Change Log
 
-## 8.1.0-canary.3
+## 8.1.0-canary.30
 
-## 8.1.0-canary.2
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+### Minor Changes
+
+- [#2273](https://github.com/graphcommerce-org/graphcommerce/pull/2273) [`77955c5`](https://github.com/graphcommerce-org/graphcommerce/commit/77955c56ac8633ab1c5e0f3ddb25e3a87236e2bb) - Improve Breadcrumbs on Category and Product pages
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.26
+
+### Minor Changes
+
+- [#2274](https://github.com/graphcommerce-org/graphcommerce/pull/2274) [`4a24813`](https://github.com/graphcommerce-org/graphcommerce/commit/4a248130041484833768fe6018f91d05a59522de) - Add props to DarkLightModeThemeProvider to disable dark/light mode or to change the default ssr mode. Save user chosen mode in localStorage
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+### Patch Changes
+
+- [#2274](https://github.com/graphcommerce-org/graphcommerce/pull/2274) [`57131cf`](https://github.com/graphcommerce-org/graphcommerce/commit/57131cfcc43695cc3e22f28912feb2a8439620a7) - Created a cssFlags functionality to allow for conditional rendering based on stored flags in the localStorage
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+### Minor Changes
+
+- [#2209](https://github.com/graphcommerce-org/graphcommerce/pull/2209) [`2872cab`](https://github.com/graphcommerce-org/graphcommerce/commit/2872cabdca9ee4f0378fd411c6a633f71bb92f1f) - Removed useMediaQuery from the wishlist and cart ItemActionCard and replaced it with a new responsive size prop.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+### Patch Changes
+
+- [#2223](https://github.com/graphcommerce-org/graphcommerce/pull/2223) [`d7459fe`](https://github.com/graphcommerce-org/graphcommerce/commit/d7459feb6e6902af09ab9ff766c0b3b1a74fb723) - Updated canonicalize helper for better multi domain support
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.1.0-canary.8
+
+### Patch Changes
+
+- [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`444e446`](https://github.com/graphcommerce-org/graphcommerce/commit/444e446a218cc9da3defb940a6d5cce0229ff845) - Added clear upgrade instructions for linguiLocale
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Added useIsSSR hook that will properly resolve when the page is rendered on the server and on first render, but will return false when a component is rendered on the client directly.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+### Patch Changes
+
+- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
+  ([@paales](https://github.com/paales))
+
+## 8.0.5
+
+### Patch Changes
+
+- [#2236](https://github.com/graphcommerce-org/graphcommerce/pull/2236) [`85fb916`](https://github.com/graphcommerce-org/graphcommerce/commit/85fb916e5ec2a1456a93a59bf92a5f414fee8595) - Solve issue where the inert prop wouldnt be properly forwarded
+  ([@paales](https://github.com/paales))
+
+- [#2235](https://github.com/graphcommerce-org/graphcommerce/pull/2235) [`de99691`](https://github.com/graphcommerce-org/graphcommerce/commit/de9969155e271cc2535147479b80b602a1b9c335) - The Lazyhydrate component to accepts any BoxProps. Replaced `<section>` with a `<Box>` so it doesn't hold symantic meaning.
+
+  Please note: If you've used child selectors to style the section, please make sure you update your styles. ([@carlocarels90](https://github.com/carlocarels90))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`6f3fe60`](https://github.com/graphcommerce-org/graphcommerce/commit/6f3fe60441762d55cb46d587279121e8fe469cdd) - Decreased layout shift on product pages by reserving space for sidebar
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`cde3c31`](https://github.com/graphcommerce-org/graphcommerce/commit/cde3c310abf2ac3c82d1062d5fb0a4c00ba50cff) - Removed unnecessary vendor prefixes
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`4c83636`](https://github.com/graphcommerce-org/graphcommerce/commit/4c836366c324881ee5121c645c5f94fc60e3ebb3) - Prevent horizontal scrollbar on small screens when using SidebarGallery
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2230](https://github.com/graphcommerce-org/graphcommerce/pull/2230) [`1da6b82`](https://github.com/graphcommerce-org/graphcommerce/commit/1da6b82dbb7e1543542d809ea625a8867643ea68) - Fix menu item visibility in accessability tree
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+### Patch Changes
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`6f3fe60`](https://github.com/graphcommerce-org/graphcommerce/commit/6f3fe60441762d55cb46d587279121e8fe469cdd) - Decreased layout shift on product pages by reserving space for sidebar
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`cde3c31`](https://github.com/graphcommerce-org/graphcommerce/commit/cde3c310abf2ac3c82d1062d5fb0a4c00ba50cff) - Removed unnecessary vendor prefixes
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`4c83636`](https://github.com/graphcommerce-org/graphcommerce/commit/4c836366c324881ee5121c645c5f94fc60e3ebb3) - Prevent horizontal scrollbar on small screens when using SidebarGallery
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+### Patch Changes
+
+- [#2236](https://github.com/graphcommerce-org/graphcommerce/pull/2236) [`85fb916`](https://github.com/graphcommerce-org/graphcommerce/commit/85fb916e5ec2a1456a93a59bf92a5f414fee8595) - Solve issue where the inert prop wouldnt be properly forwarded
+  ([@paales](https://github.com/paales))
+
+## 8.0.5-canary.2
+
+### Patch Changes
+
+- [#2235](https://github.com/graphcommerce-org/graphcommerce/pull/2235) [`de99691`](https://github.com/graphcommerce-org/graphcommerce/commit/de9969155e271cc2535147479b80b602a1b9c335) - The Lazyhydrate component to accepts any BoxProps. Replaced `<section>` with a `<Box>` so it doesn't hold symantic meaning.
+
+  Please note: If you've used child selectors to style the section, please make sure you update your styles. ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+### Patch Changes
+
+- [#2230](https://github.com/graphcommerce-org/graphcommerce/pull/2230) [`1da6b82`](https://github.com/graphcommerce-org/graphcommerce/commit/1da6b82dbb7e1543542d809ea625a8867643ea68) - Fix menu item visibility in accessability tree
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.4
+
+### Patch Changes
+
+- [#2228](https://github.com/graphcommerce-org/graphcommerce/pull/2228) [`0c0cacb`](https://github.com/graphcommerce-org/graphcommerce/commit/0c0cacb8725f0a626ea5d3acf154d83c433c3eb7) - apply correct type for the inert property
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+### Patch Changes
+
+- [#2228](https://github.com/graphcommerce-org/graphcommerce/pull/2228) [`0c0cacb`](https://github.com/graphcommerce-org/graphcommerce/commit/0c0cacb8725f0a626ea5d3acf154d83c433c3eb7) - apply correct type for the inert property
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.3
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

package/Config.graphqls

@@ -3,6 +3,11 @@ extend input GraphCommerceConfig {
   Configuration for the SidebarGallery component
   """
   sidebarGallery: SidebarGalleryConfig
+
+  """
+  Configuration for the SidebarGallery component
+  """
+  breadcrumbs: Boolean = false
 }
 
 """

package/FramerScroller/SidebarGallery.tsx

@@ -31,7 +31,14 @@ import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit }
 
 const MotionBox = styled(m.div)({})
 
-type OwnerState = { zoomed: boolean; disableZoom: boolean }
+type SidebarGalleryVariant = 'default' | 'oneColumn'
+
+type OwnerState = {
+  zoomed: boolean
+  disableZoom: boolean
+  sticky: boolean
+  variantMd: SidebarGalleryVariant
+}
 const name = 'SidebarGallery' as const
 const parts = [
   'row',
@@ -60,6 +67,8 @@ export type SidebarGalleryProps = {
   routeHash?: string
   sx?: SxProps<Theme>
   disableZoom?: boolean
+  disableSticky?: boolean
+  variantMd?: SidebarGalleryVariant
 } & Pick<ScrollerButtonProps, 'showButtons'>
 
 export function SidebarGallery(props: SidebarGalleryProps) {
@@ -71,6 +80,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     routeHash = 'gallery',
     showButtons,
     disableZoom = false,
+    disableSticky = false,
+    variantMd = 'default',
   } = props
 
   const router = useRouter()
@@ -103,7 +114,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
-  const classes = withState({ zoomed, disableZoom })
+  const classes = withState({ zoomed, disableZoom, sticky: !disableSticky, variantMd })
   const theme = useTheme()
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
@@ -144,23 +155,31 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               display: 'grid',
               gridTemplate: '"left" "right"',
               [theme.breakpoints.up('md')]: {
-                // gridTemplateColumns: '1fr auto',
-                gridTemplate: '"left right" / 1fr auto',
+                '&:not(.variantMdOneColumn)': {
+                  gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                    theme.page.horizontal
+                  } * 2)`,
+                },
               },
               background:
                 theme.palette.mode === 'light'
                   ? theme.palette.background.image
                   : theme.palette.background.paper,
-              paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
-            },
-            zoomed && {
-              position: 'relative',
-              zIndex: theme.zIndex.modal,
-              marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-              [theme.breakpoints.up('md')]: {
-                marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+
+              '&:not(.variantMdOneColumn)': {
+                paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
+              },
+
+              '&.zoomed': {
+                position: 'relative',
+                zIndex: theme.zIndex.modal,
+                marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
+                [theme.breakpoints.up('md')]: {
+                  marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+                  gridTemplateColumns: '1fr auto',
+                },
+                paddingRight: 0,
               },
-              paddingRight: 0,
             },
           ]}
         >
@@ -178,14 +197,18 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   position: 'relative',
                   paddingTop: `min(${ratio}, ${maxHeight})`,
                   [theme.breakpoints.down('md')]: {
-                    width: '100vw',
+                    width: '100%',
                   },
                   [theme.breakpoints.up('md')]: {
-                    height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
-                      theme.spacings.lg
-                    })`,
-                    position: 'sticky',
-                    top: theme.appShell.headerHeightMd,
+                    '&:not(.variantMdOneColumn)': {
+                      height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
+                        theme.spacings.lg
+                      })`,
+                      '&.sticky': {
+                        position: 'sticky',
+                      },
+                      top: theme.appShell.headerHeightMd,
+                    },
                   },
                 },
                 zoomed && {
@@ -333,7 +356,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 'THUMBNAILS_BOTTOM' ? (
                   <ScrollerThumbnails images={images} />
                 ) : (
-                  <ScrollerDots />
+                  <ScrollerDots layout />
                 )}
               </Box>
             </MotionBox>
@@ -348,11 +371,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 justifyItems: 'start',
                 alignContent: 'center',
                 position: 'relative',
-                [theme.breakpoints.up('md')]: {
-                  width: `calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-                    theme.page.horizontal
-                  } * 2)`,
-                },
               },
               zoomed && {
                 [theme.breakpoints.up('md')]: {
@@ -373,9 +391,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               sx={{
                 boxSizing: 'border-box',
                 width: '100%',
-                padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
-                [theme.breakpoints.up('md')]: {
-                  paddingLeft: theme.spacings.lg,
+                '&:not(.variantMdOneColumn)': {
+                  padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
+                  [theme.breakpoints.up('md')]: {
+                    paddingLeft: theme.spacings.lg,
+                  },
                 },
               }}
             >

package/JsonLd/JsonLd.tsx

@@ -2,14 +2,15 @@ import Head from 'next/head'
 import { safeJsonLdReplacer } from './safeJsonLdReplacer'
 
 export function JsonLd<T extends { '@type': string }>(props: {
+  keyVal?: string
   item: T & { '@context': 'https://schema.org' }
 }) {
-  const { item } = props
+  const { item, keyVal } = props
 
   return (
     <Head>
       <script
-        key='jsonld'
+        key={keyVal ?? 'jsonld'}
         type='application/ld+json'
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: JSON.stringify(item, safeJsonLdReplacer) }}

package/Layout/components/LayoutHeader.tsx

@@ -140,6 +140,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
             '&.divider': {
               marginBottom: 0,
             },
+            '& .LayoutHeaderContent-left': import.meta.graphCommerce.breadcrumbs && {
+              display: 'none',
+            },
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

package/Layout/components/LayoutTitle.tsx

@@ -40,12 +40,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
           alignItems: 'center',
           justifyContent: 'center',
           gap: `6px`,
-          flexFlow: 'unset',
-          [theme.breakpoints.up('md')]: {
-            flexFlow: 'column',
-          },
           '&.sizeSmall': {
-            flexFlow: 'unset',
             overflow: 'hidden',
             '& svg': {
               width: responsiveVal(24, 28),

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -9,6 +9,7 @@ export type LayoutOverlayState = Omit<
   | 'mdSpacingTop'
   | 'smSpacingTop'
   | 'overlayPaneProps'
+  | 'disableInert'
   | 'widthMd'
   | 'widthSm'
 >

package/LazyHydrate/LazyHydrate.tsx

@@ -1,9 +1,10 @@
+import { Box, BoxProps } from '@mui/material'
 import React, { useState, useRef, startTransition, useLayoutEffect, useEffect } from 'react'
 
 // Make sure the server doesn't choke on the useLayoutEffect
 export const useLayoutEffect2 = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
-export type LazyHydrateProps = {
+export type LazyHydrateProps = BoxProps<'div'> & {
   /**
    * The content is always rendered on the server and on the client it uses the server rendered HTML until it is hydrated.
    */
@@ -25,8 +26,8 @@ export type LazyHydrateProps = {
  * This can be a way to improve the TBT of a page.
  */
 export function LazyHydrate(props: LazyHydrateProps) {
-  const { hydrated, children } = props
-  const rootRef = useRef<HTMLElement>(null)
+  const { hydrated, children, ...elementProps } = props
+  const rootRef = useRef<HTMLDivElement>(null)
 
   const [isHydrated, setIsHydrated] = useState(hydrated || false)
   if (!isHydrated && hydrated) setIsHydrated(true)
@@ -58,15 +59,24 @@ export function LazyHydrate(props: LazyHydrateProps) {
   }, [hydrated, isHydrated])
 
   if (isHydrated) {
-    return <section>{children}</section>
+    return <Box {...elementProps}>{children}</Box>
   }
 
   if (typeof window === 'undefined') {
-    return <section data-lazy-hydrate>{children}</section>
+    return (
+      <Box data-lazy-hydrate {...elementProps}>
+        {children}
+      </Box>
+    )
   }
 
   return (
-    // eslint-disable-next-line react/no-danger
-    <section ref={rootRef} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning />
+    <Box
+      ref={rootRef}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: '' }}
+      suppressHydrationWarning
+      {...elementProps}
+    />
   )
 }

package/Navigation/components/NavigationOverlay.tsx

@@ -162,6 +162,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
             }
             right={
               <Fab
+                disabled={!activeAndNotClosing}
                 color='inherit'
                 onClick={handleClose}
                 sx={{ boxShadow: 'none', my: fabMarginY }}

package/Overlay/components/OverlayBase.tsx

@@ -52,6 +52,7 @@ export type LayoutOverlayBaseProps = {
   isPresent: boolean
   safeToRemove?: (() => void) | null | undefined
   overlayPaneProps?: MotionProps
+  disableInert?: boolean
 
   /* For `variantSm='left|right' */
   widthSm?: string | false
@@ -109,6 +110,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     isPresent,
     safeToRemove,
     overlayPaneProps,
+    disableInert,
     widthMd = 'max(800px, 50vw)',
     widthSm = 'max(300px, 80vw)',
   } = props
@@ -247,7 +249,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     const cancelY = scroll.y.on('change', handleScroll)
 
     const ro = new ResizeObserver(handleResize)
-    ro.observe(scrollerRef.current)
+    if (scrollerRef.current) ro.observe(scrollerRef.current)
     ro.observe(beforeRef.current)
     ro.observe(overlayPaneRef.current)
     ro.observe(overlayRef.current)
@@ -363,7 +365,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
-        inert={active ? undefined : 'true'}
+        inert={active ? undefined : ('true' as unknown as boolean)}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -385,7 +387,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
-        inert={active ? undefined : 'true'}
+        inert={disableInert || active ? undefined : ('true' as unknown as boolean)}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}

package/Overlay/components/OverlaySsr.tsx

@@ -31,6 +31,7 @@ export function OverlaySsr(props: OverlayProps) {
     <OverlayContainer active={active} hidden={hidden}>
       <ScrollerProvider {...variantsToScrollSnapType(props)}>
         <OverlayBase
+          disableInert
           variantMd={variantMd}
           variantSm={variantSm}
           active={active}

package/PageMeta/PageMeta.tsx

@@ -70,11 +70,16 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
     if (localeDomain) {
       canonical = localeDomain
     } else {
-      href = addBasePath(addLocale(as, curLocale, router.defaultLocale))
+      const conf = storefrontConfig(router.locale)
+
+      href = addBasePath(
+        addLocale(as, curLocale, conf?.domain ? conf.locale : router.defaultLocale),
+      )
+
+      let siteUrl = conf?.canonicalBaseUrl || import.meta.graphCommerce.canonicalBaseUrl
+
+      if (conf?.domain && !conf?.canonicalBaseUrl) siteUrl = `https://${conf.domain}`
 
-      let siteUrl =
-        storefrontConfig(router.locale)?.canonicalBaseUrl ||
-        import.meta.graphCommerce.canonicalBaseUrl
       if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
 
       canonical = `${siteUrl}${href}`

package/Styles/createEmotionCache.ts

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