@graphcommerce/next-ui 9.1.0-canary.54 → 9.1.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.1.0-canary.55
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`87fc3c2`](https://github.com/graphcommerce-org/graphcommerce/commit/87fc3c28165c7c66b48882b0f044bbc9b63b9846) - Created new Tabs and TabItem component to be used for MultiCart setup ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`286a20e`](https://github.com/graphcommerce-org/graphcommerce/commit/286a20e01f2a565f058415fa1c8dfbb2eeb3163b) - Added an OverlayCloseButton and implemented it for various locations. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`65dcefb`](https://github.com/graphcommerce-org/graphcommerce/commit/65dcefb8740166fd5df662e0e895c65d70273393) - Solve hydration error because multiple literals could be in a DateTimeFormat ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`88fd114`](https://github.com/graphcommerce-org/graphcommerce/commit/88fd11485f9368e79d277fa45942e58214f794a6) - Created a LayoutOverlayHeader2 that does not support any floating modes or something and thus is simpler to customize. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`23793aa`](https://github.com/graphcommerce-org/graphcommerce/commit/23793aab26455b1bea0d1b3b37c96a228b656bc4) - Prevent excessive rerender when multiple images with the same url are in a product ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`a419257`](https://github.com/graphcommerce-org/graphcommerce/commit/a4192571eb2332630ba3d103f61ff69dac8b2e5c) - Solve issue where the sidebar wasn't 100% width on the PDP on mobile ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/FramerScroller/SidebarGallery.tsx

@@ -242,7 +242,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               >
                 {images.map((image, idx) => (
                   <MotionImageAspect
-                    key={typeof image.src === 'string' ? image.src : idx}
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={idx}
                     layout
                     layoutDependency={zoomed}
                     src={image.src}
@@ -362,7 +363,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             className={classes.sidebarWrapper}
             sx={[
               {
-                width: sidebarSize,
+                width: { xs: '100%', md: sidebarSize },
                 gridArea: 'right',
                 boxSizing: 'content-box',
                 display: 'grid',

package/Intl/DateTimeFormat/DateTimeFormat.tsx

@@ -19,8 +19,9 @@ export function DateTimeFormat(props: DateTimeFormatProps) {
   return (
     <Box component='span' className='DateTimeFormat' suppressHydrationWarning sx={sx}>
       {dateValue &&
-        formatter.formatToParts(dateValue).map((part) => (
-          <span className={part.type} key={part.type} suppressHydrationWarning>
+        formatter.formatToParts(dateValue).map((part, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <span className={part.type} key={`${part.type}-${index}`} suppressHydrationWarning>
             {part.value}
           </span>
         ))}

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,13 +1,16 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { i18n } from '@lingui/core'
-import { Fab } from '@mui/material'
+import { Fab, type ButtonProps } from '@mui/material'
 import { useState } from 'react'
+import { Button } from '../../Button'
+import type { FabProps } from '../../Fab'
 import { iconClose } from '../../icons'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { useFabSize } from '../../Theme'
 
 export type LayoutHeaderCloseProps = {
   onClose?: () => void
+  size?: FabProps['size']
 }
 
 export function useShowClose() {
@@ -16,29 +19,29 @@ export function useShowClose() {
 }
 
 export function LayoutHeaderClose(props: LayoutHeaderCloseProps) {
-  const { onClose } = props
+  const { onClose, size = 'responsive' } = props
   const { closeSteps } = usePageContext()
   const [disabled, setDisabled] = useState(false)
   const go = useGo(closeSteps * -1)
   const onClick = () => {
     setDisabled(true)
-
     return onClose ? onClose() : go()
   }
 
-  const fabSize = useFabSize('responsive')
-  const svgSize = useIconSvgSize('large')
+  const fabSize = useFabSize(size)
+  const svgSize = useIconSvgSize(size === 'large' ? 'large' : 'medium')
 
   return (
     <Fab
       onClick={onClick}
+      className='LayoutHeaderClose-root'
       sx={{
         boxShadow: 'none',
         marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
         marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
         background: 'none',
       }}
-      size='responsive'
+      size={size}
       disabled={disabled}
       aria-label={i18n._(/* i18n */ 'Close')}
     >

package/LayoutOverlay/components/LayoutOverlayHeader2.tsx

@@ -0,0 +1,213 @@
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import React, { useRef } from 'react'
+import type { BackProps } from '../../Layout/components/LayoutHeaderBack'
+import { LayoutHeaderBack, useShowBack } from '../../Layout/components/LayoutHeaderBack'
+import { LayoutHeaderClose, useShowClose } from '../../Layout/components/LayoutHeaderClose'
+import { extendableComponent } from '../../Styles'
+import { sxx } from '../../utils/sxx'
+
+export type LayoutOverlayHeader2Props = Pick<BackProps, 'disableBackNavigation'> & {
+  /** Main content to display in the center */
+  children: React.ReactNode
+
+  disableChildrenPadding?: boolean
+
+  /** Button to display on the left side of the title */
+  primary?: React.ReactNode
+
+  /** Button to display on the right side of the title */
+  secondary?: React.ReactNode
+
+  /** Hide the back button */
+  hideBackButton?: boolean
+
+  /** Justify alignment for center content */
+  justify?: 'start' | 'center' | 'end'
+
+  /** Custom styles for the root element */
+  sx?: SxProps<Theme>
+
+  closeLocation?: 'left' | 'right'
+
+  size?: 'small' | 'responsive'
+}
+
+const name = 'LayoutOverlayHeader2'
+const parts = ['root', 'bg', 'content', 'left', 'center', 'right'] as const
+
+type State = {
+  left: boolean
+  right: boolean
+  childrenPadding: boolean
+  size: 'small' | 'responsive'
+}
+
+const { withState } = extendableComponent<State, typeof name, typeof parts>(name, parts)
+
+export const LayoutOverlayHeader2 = React.memo<LayoutOverlayHeader2Props>((props) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const {
+    children,
+    hideBackButton = false,
+    primary,
+    secondary,
+    justify = 'center',
+    closeLocation = 'right',
+    sx = [],
+    disableBackNavigation,
+    disableChildrenPadding = false,
+    size = 'responsive',
+  } = props
+
+  const showBack = useShowBack() && !hideBackButton
+  const showClose = useShowClose()
+
+  const close = showClose && <LayoutHeaderClose size={size === 'small' ? 'small' : 'responsive'} />
+  const back = showBack && <LayoutHeaderBack disableBackNavigation={disableBackNavigation} />
+
+  let left = secondary
+  let right = primary
+
+  if (back && !secondary) left = back
+
+  // Handle close button positioning based on closeLocation
+  if (close && closeLocation === 'left' && !left) left = close
+  if (close && closeLocation === 'right' && !right) right = close
+  if (close && closeLocation === 'right' && !left && right) left = close
+  if (!left && !right && !children) return null
+
+  const classes = withState({
+    left: !!left,
+    right: !!right,
+    childrenPadding: !disableChildrenPadding,
+    size,
+  })
+
+  return (
+    <Box
+      className={classes.root}
+      sx={sxx(
+        (theme) => ({
+          zIndex: children ? theme.zIndex.appBar : theme.zIndex.appBar - 2,
+          position: 'sticky',
+          left: 0,
+          right: 0,
+          top: 0,
+          marginTop: 0,
+
+          // Special positioning for bottom overlays
+          [theme.breakpoints.down('md')]: {
+            height: theme.appShell.headerHeightSm,
+            '.variantSmBottom.sizeSmFull &, .variantSmBottom.sizeSmMinimal &': {
+              top: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
+            },
+          },
+          [theme.breakpoints.up('md')]: {
+            height: theme.appShell.appBarHeightMd,
+            '.variantMdBottom.sizeMdFull &, .variantMdBottom.sizeMdMinimal &': {
+              top: `calc(${theme.appShell.appBarHeightMd} * 0.5 * -1)`,
+            },
+
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+            },
+          },
+        }),
+        sx,
+      )}
+    >
+      <Box
+        className={classes.content}
+        ref={ref}
+        sx={sxx((theme) => ({
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          display: 'grid',
+          alignItems: 'center',
+          gap: theme.spacings.xs,
+          height: theme.appShell.headerHeightSm,
+          [theme.breakpoints.up('md')]: {
+            height: theme.appShell.appBarHeightMd,
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+            },
+          },
+
+          // Default: center only
+          gridTemplateAreas: '"center"',
+          gridTemplateColumns: '1fr',
+
+          // Left only
+          '&.left:not(.right)': {
+            gridTemplateAreas: '"left center"',
+            gridTemplateColumns: justify === 'center' ? '1fr max-content' : 'auto 1fr',
+          },
+
+          // Right only
+          '&.right:not(.left)': {
+            gridTemplateAreas: '"center right"',
+            gridTemplateColumns: justify === 'center' ? 'max-content 1fr' : '1fr auto',
+          },
+
+          // Both left and right
+          '&.left.right': {
+            gridTemplateAreas: '"left center right"',
+            gridTemplateColumns: justify === 'center' ? '1fr max-content 1fr' : 'auto 1fr auto',
+          },
+        }))}
+      >
+        {left && (
+          <Box
+            className={classes.left}
+            sx={(theme) => ({
+              pl: theme.spacings.sm,
+              display: 'grid',
+              gridAutoFlow: 'column',
+              gap: theme.spacings.sm,
+              gridArea: 'left',
+              justifyContent: 'start',
+            })}
+          >
+            {left}
+          </Box>
+        )}
+
+        <Box
+          className={classes.center}
+          sx={(theme) => ({
+            display: 'grid',
+            gridAutoFlow: 'column',
+            gap: theme.spacings.sm,
+            gridArea: 'center',
+            overflow: 'hidden',
+            height: '100%',
+            '&.childrenPadding:not(.right)': { pr: theme.spacings.sm },
+            '&.childrenPadding:not(.left)': { pl: theme.spacings.sm },
+          })}
+        >
+          {children}
+        </Box>
+
+        {right && (
+          <Box
+            className={classes.right}
+            sx={(theme) => ({
+              '& > *': { width: 'min-content' },
+              display: 'grid',
+              gridAutoFlow: 'column',
+              gap: theme.spacings.sm,
+              gridArea: 'right',
+              justifyContent: 'end',
+              pr: theme.spacings.sm,
+            })}
+          >
+            {right}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+})

package/LayoutOverlay/index.ts

@@ -1,2 +1,3 @@
 export * from './components/LayoutOverlay'
 export * from './components/LayoutOverlayHeader'
+export * from './components/LayoutOverlayHeader2'

package/Overlay/components/OverlayCloseButton.tsx

@@ -0,0 +1,25 @@
+import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
+import { i18n } from '@lingui/core'
+import { useState } from 'react'
+import { Button, type ButtonProps } from '../../Button'
+
+export function OverlayCloseButton(props: ButtonProps) {
+  const { disabled, ...buttonProps } = props
+  const { closeSteps } = usePageContext()
+  const [isDisabled, setIsDisabled] = useState(disabled)
+  const go = useGo(closeSteps * -1)
+
+  const onClick = () => {
+    setIsDisabled(true)
+    go()
+  }
+
+  return (
+    <Button
+      onClick={onClick}
+      disabled={isDisabled}
+      aria-label={i18n._(/* i18n */ 'Close overlay')}
+      {...buttonProps}
+    />
+  )
+}

package/Overlay/components/OverlayHeader2.tsx

@@ -0,0 +1,26 @@
+import { LayoutTitle, type TitleProps } from '../../Layout'
+import { LayoutHeaderClose } from '../../Layout/components/LayoutHeaderClose'
+import { LayoutOverlayHeader2, type LayoutOverlayHeader2Props } from '../../LayoutOverlay'
+
+export type OverlayHeader2Props = Omit<LayoutOverlayHeader2Props, 'hideBackButton'> & {
+  onClose: () => void
+  icon?: TitleProps['icon']
+}
+
+export function OverlayHeader2(props: OverlayHeader2Props) {
+  const { children, onClose, primary, secondary, icon, ...rest } = props
+
+  return (
+    <LayoutOverlayHeader2
+      hideBackButton
+      size='small'
+      primary={primary ?? <LayoutHeaderClose onClose={onClose} size='small' />}
+      secondary={primary ? <LayoutHeaderClose onClose={onClose} size='small' /> : secondary}
+      {...rest}
+    >
+      <LayoutTitle size='small' component='span' icon={icon}>
+        {children}
+      </LayoutTitle>
+    </LayoutOverlayHeader2>
+  )
+}

package/Overlay/components/index.ts

@@ -1,4 +1,6 @@
-export * from './OverlayBase'
 export * from './Overlay'
-export * from './OverlayStickyBottom'
+export * from './OverlayBase'
+export * from './OverlayCloseButton'
 export * from './OverlayHeader'
+export * from './OverlayHeader2'
+export * from './OverlayStickyBottom'

package/Tabs/TabItem.tsx

@@ -0,0 +1,134 @@
+import { Box, ButtonBase, type SxProps, type Theme } from '@mui/material'
+import { alpha, useTheme } from '@mui/material/styles'
+import { forwardRef } from 'react'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { responsiveVal } from '../Styles/responsiveVal'
+import { sxx } from '../utils/sxx'
+
+export type TabItemVariant = 'chrome'
+
+export type TabItemProps = {
+  /** Whether this tab is selected */
+  selected: boolean
+  /** Content to display inside the tab */
+  children: React.ReactNode
+  /** Click handler */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+
+  /** Spacing for the tab */
+  spacing?: string
+  /** Custom styling */
+  sx?: SxProps<Theme>
+  /** Whether to disable ripple effect */
+  disableRipple?: boolean
+  /** Additional className */
+  className?: string
+
+  color: (theme: Theme) => string
+  variant?: 'chrome'
+}
+
+type State = {
+  selected: boolean
+  variant: 'chrome'
+}
+
+const name = 'TabItem'
+const parts = ['root', 'content'] as const
+const { withState } = extendableComponent<State, typeof name, typeof parts>(name, parts)
+
+export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>((props, ref) => {
+  const {
+    selected,
+    children,
+    onClick,
+    spacing = responsiveVal(4, 20),
+    sx,
+    disableRipple = true,
+    className,
+    color = (theme) => theme.palette.background.default,
+    variant = 'chrome',
+    ...other
+  } = props
+
+  const classes = withState({ selected, variant })
+
+  return (
+    <Box
+      ref={ref}
+      component={ButtonBase}
+      onClick={selected ? undefined : onClick}
+      className={`${classes.root} ${className ?? ''}`}
+      disableRipple={selected || disableRipple}
+      role='tab'
+      aria-selected={selected}
+      // tabindex={0}
+      sx={sxx(
+        (theme) => ({
+          position: 'relative',
+          textDecoration: 'none',
+          color: 'text.primary',
+          typography: 'subtitle1',
+          mt: spacing,
+          height: `calc(100% - ${spacing})`,
+          pb: spacing,
+          mx: `calc(${spacing} / 2)`,
+          transition: 'background-color 0.2s ease-in-out',
+
+          '&:hover:not(.selected) .TabItem-content': {
+            bgcolor: alpha(color(theme), 0.5),
+          },
+          '&:focus:not(.selected) .TabItem-content': {
+            bgcolor: alpha(color(theme), 0.5),
+          },
+          '&::before': {
+            opacity: 0,
+            transition: 'opacity 0.2s ease-in-out',
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            left: '-10px',
+            width: '10px',
+            height: '10px',
+            background: `radial-gradient(circle at top left, transparent 10px, ${color(theme)} 10px)`,
+          },
+          '&::after': {
+            opacity: 0,
+            transition: 'opacity 0.2s ease-in-out',
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            right: '-10px',
+            width: '10px',
+            height: '10px',
+            background: `radial-gradient(circle at top right, transparent 10px, ${color(theme)} 10px)`,
+          },
+          borderStartStartRadius: '0.5em',
+          borderStartEndRadius: '0.5em',
+          '&.selected': {
+            bgcolor: color(theme),
+            '&::before': { opacity: 1 },
+            '&::after': { opacity: 1 },
+          },
+        }),
+        sx,
+      )}
+      {...other}
+    >
+      <Box
+        className={classes.content}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%',
+          px: spacing,
+          gap: `calc(${spacing} / 2)`,
+          borderRadius: '0.5em',
+          transition: 'background-color 0.2s ease-in-out',
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+})

package/Tabs/Tabs.tsx

@@ -0,0 +1,124 @@
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Box, type SxProps, type Theme } from '@mui/material'
+import React from 'react'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+import { IconSvg } from '../IconSvg'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { sxx } from '../utils/sxx'
+
+export type TabsProps = {
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+  /** Additional content to show before tabs */
+  startContent?: React.ReactNode
+  /** Additional content to show after tabs */
+  endContent?: React.ReactNode
+  /** Whether to show separators between tabs */
+  showSeparators?: boolean
+  /** Custom separator component */
+  separator?: React.ReactNode
+}
+
+const { classes } = extendableComponent('Tabs', ['root', 'scroller', 'left', 'right', 'button'])
+
+export function Tabs(props: TabsProps) {
+  const { children, sx, startContent, endContent, showSeparators = true, separator } = props
+
+  const defaultSeparator = (
+    <Box
+      className='separator'
+      sx={{ width: '2px', height: '1em', bgcolor: 'divider', mx: '-1px' }}
+    />
+  )
+
+  const separatorElement = separator ?? defaultSeparator
+
+  return (
+    <Box
+      className={classes.root}
+      sx={sxx(
+        {
+          alignItems: 'stretch',
+          position: 'relative',
+          pointerEvents: 'all',
+          gridTemplateColumns: 'auto 1fr auto',
+          display: 'grid',
+          gridAutoFlow: 'column',
+        },
+        sx,
+      )}
+    >
+      <ScrollerProvider scrollSnapAlign='none'>
+        <Scroller
+          hideScrollbar
+          sx={{
+            gridArea: '1 / 1 / 1 / 4',
+            gridAutoColumns: 'min-content',
+            alignItems: 'center',
+            // Hide the Separator that comes before or after the selected tab.
+            '& .separator': { transition: 'opacity 0.2s ease-in-out' },
+            '& .TabItem-root.selected + .separator': { opacity: 0 },
+            '& .separator:has(+ .TabItem-root.selected)': { opacity: 0 },
+            // Same for hover:
+            '& .TabItem-root:hover + .separator': { opacity: 0 },
+            '& .separator:has(+ .TabItem-root:hover)': { opacity: 0 },
+          }}
+          className={classes.scroller}
+          role='tablist'
+        >
+          {startContent}
+
+          {showSeparators && startContent && separatorElement}
+
+          {React.Children.map(children, (child, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <React.Fragment key={index}>
+              {showSeparators && index > 0 && separatorElement}
+              {child}
+            </React.Fragment>
+          ))}
+
+          {showSeparators && endContent && separatorElement}
+
+          {endContent}
+        </Scroller>
+
+        <ScrollerButton
+          sxContainer={{
+            gridArea: '1 / 1 / 1 / 2',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'all' },
+          }}
+          sx={{ pointerEvents: 'all' }}
+          direction='left'
+          size='small'
+          tabIndex={-1}
+          className={`${classes.left} ${classes.button}`}
+        >
+          <IconSvg src={iconChevronLeft} />
+        </ScrollerButton>
+
+        <ScrollerButton
+          sxContainer={{
+            gridArea: '1 / 3 / 1 / 4',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'all' },
+          }}
+          sx={{ pointerEvents: 'all' }}
+          direction='right'
+          size='small'
+          tabIndex={-1}
+          className={`${classes.right} ${classes.button}`}
+        >
+          <IconSvg src={iconChevronRight} />
+        </ScrollerButton>
+      </ScrollerProvider>
+    </Box>
+  )
+}

package/index.ts

@@ -59,6 +59,8 @@ export * from './Stepper/Stepper'
 export * from './Styles'
 export * from './TextInputNumber/TextInputNumber'
 export * from './Theme'
+export * from './Tabs/TabItem'
+export * from './Tabs/Tabs'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "9.1.0-canary.55",
   "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.1.0-canary.54",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.54",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.54",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.54",
-    "@graphcommerce/image": "^9.1.0-canary.54",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.54",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.55",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.55",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.55",
+    "@graphcommerce/image": "^9.1.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",