@graphcommerce/next-ui 4.8.3 → 4.10.0

package/ActionCard/ActionCard.tsx

@@ -1,6 +1,6 @@
-import { Theme } from '@emotion/react'
-import { SxProps, ButtonBase, Box } from '@mui/material'
+import { SxProps, ButtonBase, Box, Theme } from '@mui/material'
 import React, { FormEvent } from 'react'
+import { extendableComponent } from '../Styles'
 
 export type ActionCardProps = {
   sx?: SxProps<Theme>
@@ -8,61 +8,83 @@ export type ActionCardProps = {
   image?: React.ReactNode
   action?: React.ReactNode
   details?: React.ReactNode
+  price?: React.ReactNode
+  after?: React.ReactNode
   secondaryAction?: React.ReactNode
   onClick?: (e: FormEvent<HTMLElement>, v: string | number) => void
   selected?: boolean
-  hidden?: boolean | (() => boolean)
+  hidden?: boolean
   value: string | number
   reset?: React.ReactNode
+  disabled?: boolean
 }
 
-const actionButtonStyles: SxProps = {
-  '& .MuiButton-root': {
-    '&.MuiButton-textSecondary': {
-      padding: '5px',
-      margin: '-5px',
-      '&:hover': {
-        background: 'none',
-      },
-    },
-  },
+const parts = [
+  'root',
+  'image',
+  'title',
+  'action',
+  'details',
+  'price',
+  'after',
+  'secondaryAction',
+  'reset',
+] as const
+const name = 'ActionCard'
+
+type StateProps = {
+  selected?: boolean
+  hidden?: boolean
+  disabled?: boolean
+  image?: boolean
 }
 
+const { withState, selectors } = extendableComponent<StateProps, typeof name, typeof parts>(
+  name,
+  parts,
+)
+
+export const actionCardSelectors = selectors
+
 export function ActionCard(props: ActionCardProps) {
   const {
     title,
     image,
     action,
     details,
+    price,
+    after,
     secondaryAction,
     sx = [],
     onClick,
     value,
-    selected,
-    hidden,
+    selected = false,
+    hidden = false,
     reset,
+    disabled = false,
   } = props
 
+  const classes = withState({ hidden, disabled, selected, image: Boolean(image) })
+
   const handleClick = (event: FormEvent<HTMLElement>) => onClick?.(event, value)
 
   return (
     <ButtonBase
       component='div'
-      className='ActionCard-root'
+      className={classes.root}
       onClick={handleClick}
+      disabled={disabled}
       sx={[
         (theme) => ({
           display: 'grid',
           width: '100%',
-          gridTemplateColumns: 'min-content',
-          gridTemplateAreas: {
-            xs: `
-              "image title action"
-              "image details details"
-              "image secondaryAction additionalDetails"
-              "additionalContent additionalContent additionalContent"
-            `,
-          },
+          gridTemplateColumns: 'min-content auto auto',
+          gridTemplateAreas: `
+            "image title action"
+            "image details ${price ? 'price' : 'details'}"
+            "image secondaryActio additionalDetails"
+            "after after after"
+          `,
           justifyContent: 'unset',
           typography: 'body1',
           // textAlign: 'left',
@@ -81,10 +103,19 @@ export function ActionCard(props: ActionCardProps) {
             borderBottom: `1px solid ${theme.palette.divider}`,
           },
         }),
-        !!hidden && {
+        !image && {
+          gridTemplateColumns: 'auto auto',
+          gridTemplateAreas: `
+            "title action"
+            "details ${price ? 'price' : 'details'}"
+            "secondaryAction additionalDetails"
+            "after after"
+          `,
+        },
+        hidden && {
           display: 'none',
         },
-        !!selected &&
+        selected &&
           ((theme) => ({
             border: `2px solid ${theme.palette.secondary.main} !important`,
             borderTopLeftRadius: theme.shape.borderRadius,
@@ -93,25 +124,65 @@ export function ActionCard(props: ActionCardProps) {
             borderBottomRightRadius: theme.shape.borderRadius,
             padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
           })),
+        disabled &&
+          ((theme) => ({
+            background: theme.palette.background.default,
+          })),
+
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      {image && <Box sx={{ gridArea: 'image', justifySelf: 'center', padding: 1 }}>{image}</Box>}
-      {title && <Box sx={{ gridArea: 'title', fontWeight: 'bold' }}>{title}</Box>}
-      {action && (
+      {image && (
         <Box
+          className={classes.image}
           sx={{
-            gridArea: 'action',
-            textAlign: 'right',
-            ...actionButtonStyles,
+            gridArea: 'image',
+            display: 'flex',
           }}
         >
+          {image}
+        </Box>
+      )}
+      {title && (
+        <Box className={classes.title} sx={{ gridArea: 'title', display: 'flex' }}>
+          {title}
+        </Box>
+      )}
+      {action && (
+        <Box className={classes.action} sx={{ gridArea: 'action', textAlign: 'right' }}>
           {!selected ? action : reset}
         </Box>
       )}
-      {details && <Box sx={{ gridArea: 'details', color: 'text.secondary' }}>{details}</Box>}
+      {details && (
+        <Box
+          className={classes.details}
+          sx={{
+            gridArea: 'details',
+            color: 'text.secondary',
+          }}
+        >
+          {details}
+        </Box>
+      )}
+
+      {price && !disabled && (
+        <Box
+          className={classes.price}
+          sx={{ gridArea: 'price', textAlign: 'right', typography: 'h5' }}
+        >
+          {price}
+        </Box>
+      )}
+
       {secondaryAction && (
-        <Box sx={{ gridArea: 'secondaryAction', ...actionButtonStyles }}>{secondaryAction}</Box>
+        <Box className={classes.secondaryAction} sx={{ gridArea: 'secondaryAction' }}>
+          {secondaryAction}
+        </Box>
+      )}
+      {after && (
+        <Box className={classes.after} sx={{ gridArea: 'after' }}>
+          {after}
+        </Box>
       )}
     </ButtonBase>
   )

package/ActionCard/ActionCardListForm.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
-export type ActionCardItemRenderer<T> = Pick<ActionCardProps, 'selected' | 'hidden' | 'value'> & {
-  onReset: React.MouseEventHandler<HTMLButtonElement>
+export type ActionCardItemRenderProps<T> = Pick<
+  ActionCardProps,
+  'selected' | 'hidden' | 'value'
+> & {
+  onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
 } & T
 
 export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
@@ -16,14 +19,14 @@ export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
 > &
   Omit<ControllerProps<any>, 'render'> & {
     items: T[]
-    render: React.VFC<ActionCardItemRenderer<T>>
+    render: React.VFC<ActionCardItemRenderProps<T>>
   }
 
 export function ActionCardListForm<T extends ActionCardItemBase>(
   props: ActionCardListFormProps<T>,
 ) {
   const { required, rules, items, render, control, name, errorMessage } = props
-  const RenderItem = render as React.VFC<ActionCardItemRenderer<ActionCardItemBase>>
+  const RenderItem = render as React.VFC<ActionCardItemRenderProps<ActionCardItemBase>>
 
   return (
     <Controller

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log
 
+## 4.10.0
+
+### Minor Changes
+
+- [#1515](https://github.com/graphcommerce-org/graphcommerce/pull/1515) [`371e6cf52`](https://github.com/graphcommerce-org/graphcommerce/commit/371e6cf52916a3b6c44192bd40cc8271bd608832) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - - Shipping method UI improvements in checkout, like working ripple effect, auto select and other styling changes.
+  - Added new inline button variant
+
+* [#1518](https://github.com/graphcommerce-org/graphcommerce/pull/1518) [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - New ActionCardListForm implementation for Payment Methods
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.17
+
+## 4.9.0
+
+### Minor Changes
+
+- [#1503](https://github.com/graphcommerce-org/graphcommerce/pull/1503) [`a9213f1f5`](https://github.com/graphcommerce-org/graphcommerce/commit/a9213f1f5a410d217768386ccb6d9b5ce7bd5782) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Bug fixes for shipping methods in /checkout
+
+### Patch Changes
+
+- [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
+- Updated dependencies [[`ddb6d6329`](https://github.com/graphcommerce-org/graphcommerce/commit/ddb6d6329bfad361b2fbe96402ca2bfc0ab3d98c), [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb)]:
+  - @graphcommerce/framer-scroller@2.1.16
+  - @graphcommerce/framer-next-pages@3.2.3
+  - @graphcommerce/framer-utils@3.1.4
+  - @graphcommerce/image@3.1.7
+
+## 4.8.4
+
+### Patch Changes
+
+- [#1509](https://github.com/graphcommerce-org/graphcommerce/pull/1509) [`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed) Thanks [@paales](https://github.com/paales)! - SidebarGallery improvements (product page):
+
+  - Prevent vertical scrolling
+  - Disable zoom fab when there are no images
+  - Hide scroller dots when there in only one image
+  - Make sure the prev/next buttons are shown as expected
+
+- Updated dependencies [[`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed)]:
+  - @graphcommerce/framer-scroller@2.1.15
+
 ## 4.8.3
 
 ### Patch Changes

package/FramerScroller/SidebarGallery.tsx

@@ -7,8 +7,7 @@ import {
   ScrollerDots,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
-import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, useTheme, alpha, Box, styled, SxProps, Theme } from '@mui/material'
+import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
@@ -61,7 +60,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   const router = useRouter()
   const prevRoute = usePrevPageRouter()
-  const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
   // const classes = useMergedClasses(useStyles({ clientHeight, aspectRatio }).classes, props.classes)
 
   const route = `#${routeHash}`
@@ -114,6 +112,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
   const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin} - ${extraSpacing})`
   const ratio = `calc(${height} / ${width} * 100%)`
 
+  const hasImages = images.length > 0
+
   return (
     <ScrollerProvider scrollSnapAlign='center'>
       <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
@@ -160,7 +160,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 },
               },
               zoomed && {
-                paddingTop: `${clientHeight}px`,
+                paddingTop: `var(--client-size-y)`,
               },
             ]}
             onLayoutAnimationComplete={() => {
@@ -184,7 +184,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   cursor: 'zoom-in',
                 },
                 zoomed && {
-                  height: clientHeight,
+                  height: `var(--client-size-y)`,
                   cursor: 'inherit',
                 },
               ]}
@@ -197,6 +197,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   width={image.width}
                   height={image.height}
                   loading={idx === 0 ? 'eager' : 'lazy'}
+                  sx={{ display: 'block' }}
                   sizes={{
                     0: '100vw',
                     [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
@@ -221,11 +222,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               <Fab
                 size='small'
                 className={classes.toggleIcon}
+                disabled={!hasImages}
                 onMouseUp={toggle}
                 aria-label='Toggle Fullscreen'
-                sx={{
-                  boxShadow: theme.shadows[6],
-                }}
+                sx={{ boxShadow: 6 }}
               >
                 {!zoomed ? <IconSvg src={iconFullscreen} /> : <IconSvg src={iconFullscreenExit} />}
               </Fab>
@@ -286,13 +286,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 },
               }}
             >
-              <ScrollerDots
-                layout
-                sx={{
-                  background: alpha(theme.palette.background.paper, 1),
-                  boxShadow: theme.shadows[6],
-                }}
-              />
+              <ScrollerDots layout sx={{ backgroundColor: 'background.paper', boxShadow: 6 }} />
             </Box>
           </MotionBox>
 

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -151,6 +151,7 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
     if (isPresent) return
     position.set(OverlayPosition.CLOSED)
     clearScrollLock()
+
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     scrollTo({
       x: positions.closed.x.get(),

package/LayoutParts/DesktopHeaderBadge.tsx

@@ -3,6 +3,7 @@ import { Badge, BadgeProps } from '@mui/material'
 /** Note: This should _only_ be used on the Desktop, use a standard Badge for other usecases. */
 export function DesktopHeaderBadge(props: BadgeProps) {
   const { sx = false } = props
+
   return (
     <Badge
       {...props}

package/LayoutParts/DesktopNavActions.tsx

@@ -1,6 +1,6 @@
-import { Box, styled } from '@mui/material'
+import { styled } from '@mui/material'
 
-export const DesktopNavActions = styled(Box, { name: 'DesktopNavActions' })(({ theme }) => ({
+export const DesktopNavActions = styled('div', { name: 'DesktopNavActions' })(({ theme }) => ({
   display: 'none',
   [theme.breakpoints.up('md')]: {
     display: 'grid',

package/LayoutParts/DesktopNavBar.tsx

@@ -14,8 +14,7 @@ export type MenuTabsProps = {
 const { classes, selectors } = extendableComponent('DesktopNavBar', [
   'root',
   'scroller',
-  'leftWrapper',
-  'rightWrapper',
+  'button',
   'left',
   'right',
 ] as const)
@@ -34,6 +33,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
             alignItems: 'center',
             position: 'relative',
             pointerEvents: 'all',
+            gridTemplateColumns: `auto 1fr auto`,
           },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
@@ -51,61 +51,53 @@ export function DesktopNavBar(props: MenuTabsProps) {
           {children}
         </Scroller>
 
-        <Box
-          sx={{
+        <ScrollerButton
+          sxContainer={{
             gridArea: `1 / 1 / 1 / 2`,
             pointerEvents: 'none',
             '& > *': { pointerEvents: 'all' },
           }}
-          className={classes.leftWrapper}
+          sx={{
+            pointerEvents: 'all',
+            boxShadow: 'none',
+            height: 48,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            backgroundColor: 'transparent',
+            backgroundImage: (theme) =>
+              `linear-gradient(to left, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
+          }}
+          direction='left'
+          size='small'
+          className={`${classes.left} ${classes.button}`}
         >
-          <ScrollerButton
-            sx={{
-              pointerEvents: 'all',
-              boxShadow: 'none',
-              height: 48,
-              borderTopLeftRadius: 0,
-              borderBottomLeftRadius: 0,
-              backgroundColor: 'transparent',
-              backgroundImage: (theme) =>
-                `linear-gradient(to left, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
-            }}
-            direction='left'
-            size='small'
-            className={classes.left}
-          >
-            <IconSvg src={iconLeft ?? iconChevronLeft} />
-          </ScrollerButton>
-        </Box>
+          <IconSvg src={iconLeft ?? iconChevronLeft} />
+        </ScrollerButton>
 
-        <Box
-          sx={{
+        <ScrollerButton
+          sxContainer={{
             gridArea: `1 / 3 / 1 / 4`,
             pointerEvents: 'none',
             '& > *': {
               pointerEvents: 'all',
             },
           }}
-          className={classes.rightWrapper}
+          sx={{
+            pointerEvents: 'all',
+            boxShadow: 'none',
+            height: 48,
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+            backgroundColor: 'transparent',
+            backgroundImage: (theme) =>
+              `linear-gradient(to right, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
+          }}
+          direction='right'
+          size='small'
+          className={`${classes.right} ${classes.button}`}
         >
-          <ScrollerButton
-            sx={{
-              pointerEvents: 'all',
-              boxShadow: 'none',
-              height: 48,
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-              backgroundColor: 'transparent',
-              backgroundImage: (theme) =>
-                `linear-gradient(to right, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
-            }}
-            direction='right'
-            size='small'
-            className={classes.right}
-          >
-            <IconSvg src={iconRight ?? iconChevronRight} />
-          </ScrollerButton>
-        </Box>
+          <IconSvg src={iconRight ?? iconChevronRight} />
+        </ScrollerButton>
       </Box>
     </ScrollerProvider>
   )

package/LayoutParts/MenuFab.tsx

@@ -1,4 +1,4 @@
-import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { useIsomorphicLayoutEffect, useMotionValueValue } from '@graphcommerce/framer-utils'
 import {
   Divider,
   Fab,
@@ -13,7 +13,7 @@ import {
 } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { useEffect } from 'react'
+import React, { useEffect, useCallback, useRef } from 'react'
 import { IconSvg } from '../IconSvg'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 import { extendableComponent } from '../Styles/extendableComponent'
@@ -64,7 +64,8 @@ export function MenuFab(props: MenuFabProps) {
     const clear = () => setOpenEl(null)
     router.events.on('routeChangeStart', clear)
     return () => router.events.off('routeChangeStart', clear)
-  }, [router])
+  }, [router.events])
+
   const fabIconSize = useFabSize('responsive')
 
   const classes = withState({ scrolled })

package/Page/CssAndFramerMotionProvider.tsx

@@ -1,5 +1,4 @@
 import { LazyMotion } from 'framer-motion'
-import { EmotionProvider } from '../Styles'
 
 export type GraphCommerceProviderProps = {
   children: React.ReactNode
@@ -15,7 +14,7 @@ export type GraphCommerceProviderProps = {
 export function CssAndFramerMotionProvider({ children }: GraphCommerceProviderProps) {
   return (
     <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
-      <EmotionProvider>{children}</EmotionProvider>
+      {children}
     </LazyMotion>
   )
 }

package/PageMeta/PageMeta.tsx

@@ -1,9 +1,9 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
 import {
   resolveHref,
-  getDomainLocale,
   addBasePath,
   addLocale,
+  getDomainLocale,
 } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
 import { useRouter } from 'next/router'

package/Theme/MuiButton.ts

@@ -4,6 +4,7 @@ import { responsiveVal } from '../Styles/responsiveVal'
 declare module '@mui/material/Button/Button' {
   interface ButtonPropsVariantOverrides {
     pill: true
+    inline: true
   }
 }
 
@@ -126,3 +127,64 @@ export const MuiButtonPill: ButtonVariants = [
     }),
   },
 ]
+
+export const MuiButtonInline: ButtonVariants = [
+  {
+    props: { variant: 'inline', color: 'primary' },
+    style: ({ theme }) => ({
+      color: theme.palette.primary.main,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: `${theme.palette.primary.main}30` },
+    }),
+  },
+  {
+    props: { variant: 'inline', color: 'secondary' },
+    style: ({ theme }) => ({
+      color: theme.palette.secondary.main,
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor: theme.palette.secondary.light,
+      },
+    }),
+  },
+  {
+    props: { variant: 'inline' },
+    style: { textTransform: 'none', fontWeight: 500 },
+  },
+  {
+    props: { variant: 'inline', size: 'small' },
+    style: ({ theme }) => ({
+      margin: `calc(${theme.spacings.xxs} / 2 * -1 )`,
+      padding: '3px 9px',
+
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: 3 },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: 9 },
+    }),
+  },
+  {
+    props: { variant: 'inline', size: 'medium' },
+    style: ({ theme }) => ({
+      margin: `calc(${theme.spacings.xxs} * -1 )`,
+      padding: `${responsiveVal(3, 5)} ${responsiveVal(9, 15)}`,
+
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(9, 15) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(9, 15) },
+    }),
+  },
+  {
+    props: { variant: 'inline', size: 'large' },
+    style: ({ theme }) => ({
+      margin: `calc(${theme.spacings.xs} * -1)`,
+      padding: `${responsiveVal(8, 10)} ${responsiveVal(12, 22)}`,
+
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(16, 24) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(16, 24) },
+    }),
+  },
+  {
+    props: { variant: 'inline', disableRipple: true },
+    style: {
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+]

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.8.3",
+  "version": "4.10.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,31 +19,31 @@
     "@emotion/react": "^11.9.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.2.2",
-    "@graphcommerce/framer-scroller": "2.1.14",
-    "@graphcommerce/framer-utils": "3.1.3",
-    "@graphcommerce/image": "3.1.6",
-    "react-is": "^17.0.0",
+    "@graphcommerce/framer-next-pages": "3.2.3",
+    "@graphcommerce/framer-scroller": "2.1.17",
+    "@graphcommerce/framer-utils": "3.1.4",
+    "@graphcommerce/image": "3.1.7",
+    "react-is": "^18.1.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {
-    "@lingui/react": "^3.13.2",
     "@lingui/core": "^3.13.2",
+    "@lingui/react": "^3.13.2",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
-    "next": "12.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "next": "^12.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.7",
+    "@graphcommerce/eslint-config-pwa": "^4.1.8",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1",
     "@types/react-is": "^17.0.3",
     "type-fest": "^2.12.2",
-    "typescript": "4.6.3"
+    "typescript": "4.7.3"
   }
 }