@graphcommerce/magento-product 9.0.0-canary.101 → 9.0.0-canary.104

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -1,9 +1,10 @@
 import { usePrevPageRouter } from '@graphcommerce/framer-next-pages'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Breadcrumbs, BreadcrumbsProps, Link, Typography } from '@mui/material'
+import type { BreadcrumbsProps } from '@mui/material'
+import { Breadcrumbs, Link, Typography } from '@mui/material'
 import { productPageCategory } from '../ProductPageCategory/productPageCategory'
-import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
+import type { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 
 type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment &
   Omit<BreadcrumbsProps, 'children'>

package/components/ProductPageBreadcrumb/ProductPageBreadcrumbs.tsx

@@ -3,12 +3,12 @@ import { categoryToBreadcrumbs } from '@graphcommerce/magento-category'
 import { Breadcrumbs } from '@graphcommerce/next-ui'
 import { BreadcrumbsJsonLd } from '@graphcommerce/next-ui/Breadcrumbs/BreadcrumbsJsonLd'
 import { jsonLdBreadcrumb } from '@graphcommerce/next-ui/Breadcrumbs/jsonLdBreadcrumb'
-import { BreadcrumbsProps } from '@mui/material'
+import type { BreadcrumbsProps } from '@mui/material'
 import { useRouter } from 'next/router'
-import { BreadcrumbList } from 'schema-dts'
+import type { BreadcrumbList } from 'schema-dts'
 import { productLink } from '../../hooks/useProductLink'
 import { productPageCategory } from '../ProductPageCategory/productPageCategory'
-import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
+import type { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 
 export type ProductPageBreadcrumbsProps = Omit<BreadcrumbsProps, 'children'> & {
   breadcrumbsAmount?: number

package/components/ProductPageCategory/productPageCategory.ts

@@ -1,4 +1,4 @@
-import { ProductPageCategoryFragment } from './ProductPageCategory.gql'
+import type { ProductPageCategoryFragment } from './ProductPageCategory.gql'
 
 /**
  * Get the most siginifcant category a product is in.

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -1,14 +1,15 @@
+import type { ColumnTwoWithTopProps } from '@graphcommerce/next-ui'
 import {
   ColumnTwoWithTop,
-  ColumnTwoWithTopProps,
-  extendableComponent,
-  breakpointVal,
   LazyHydrate,
+  breakpointVal,
+  extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme, Typography } from '@mui/material'
-import { Variant } from '@mui/material/styles/createTypography'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Typography } from '@mui/material'
+import type { Variant } from '@mui/material/styles/createTypography'
 import { ProductPageName } from '../ProductPageName'
-import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
+import type { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
 
 export type ProductPageDescriptionProps = ProductPageDescriptionFragment &
   Omit<ColumnTwoWithTopProps, 'top' | 'left'> & {

package/components/ProductPageGallery/ProductImage.tsx

@@ -1,5 +1,5 @@
 import { Image } from '@graphcommerce/image'
-import { ProductImageFragment } from './ProductImage.gql'
+import type { ProductImageFragment } from './ProductImage.gql'
 
 export function ProductImage(props: ProductImageFragment) {
   const { url, label } = props

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -1,10 +1,6 @@
-import {
-  nonNullable,
-  SidebarGallery,
-  SidebarGalleryProps,
-  TypeRenderer,
-} from '@graphcommerce/next-ui'
-import { ProductPageGalleryFragment } from './ProductPageGallery.gql'
+import type { SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
+import { SidebarGallery, nonNullable } from '@graphcommerce/next-ui'
+import type { ProductPageGalleryFragment } from './ProductPageGallery.gql'
 
 export type ProductPageGalleryRenderers = TypeRenderer<
   NonNullable<NonNullable<ProductPageGalleryFragment['media_gallery']>[0]>

package/components/ProductPageGallery/ProductVideo.tsx

@@ -1,4 +1,4 @@
-import { ProductVideoFragment } from './ProductVideo.gql'
+import type { ProductVideoFragment } from './ProductVideo.gql'
 
 export function ProductVideo(props: ProductVideoFragment) {
   const { video_content } = props

package/components/ProductPageMeta/ProductPageMeta.tsx

@@ -1,7 +1,7 @@
 import { PageMeta } from '@graphcommerce/magento-store'
-import { PageMetaProps } from '@graphcommerce/next-ui'
+import type { PageMetaProps } from '@graphcommerce/next-ui'
 import { productLink } from '../../hooks/useProductLink'
-import { ProductPageMetaFragment } from './ProductPageMeta.gql'
+import type { ProductPageMetaFragment } from './ProductPageMeta.gql'
 
 export type ProductPageMetaProps = { product: ProductPageMetaFragment } & Pick<
   PageMetaProps,

package/components/ProductPageName/ProductPageName.tsx

@@ -1,10 +1,10 @@
-import { ProductPageNameFragment } from './ProductPageName.gql'
+import type { ProductPageNameFragment } from './ProductPageName.gql'
 
 export type ProductPageNameProps = {
   product: ProductPageNameFragment
 }
 
-export const ProductPageName = (props: ProductPageNameProps) => {
+export function ProductPageName(props: ProductPageNameProps) {
   const { product } = props
   return <>{product.name}</>
 }

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -2,13 +2,12 @@ import { useWatch } from '@graphcommerce/ecommerce-ui'
 import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { AddToCartItemSelector } from '../AddProductsToCart'
+import { useFormAddProductsToCart } from '../AddProductsToCart'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
-import {
-  UseCustomizableOptionPriceProps,
-  useCustomizableOptionPrice,
-} from './useCustomizableOptionPrice'
+import type { UseCustomizableOptionPriceProps } from './useCustomizableOptionPrice'
+import { useCustomizableOptionPrice } from './useCustomizableOptionPrice'
 
 export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector &
   UseCustomizableOptionPriceProps

package/components/ProductPagePrice/ProductPagePriceTiers.tsx

@@ -2,8 +2,8 @@ import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { SxProps, Theme } from '@mui/material'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export type ProductPagePriceTiersProps = {
   sx?: SxProps<Theme>

package/components/ProductPagePrice/getProductTierPrice.ts

@@ -1,5 +1,5 @@
-import { MoneyFragment } from '@graphcommerce/magento-store'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { MoneyFragment } from '@graphcommerce/magento-store'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export function getProductTierPrice(
   price: Pick<ProductPagePriceFragment, 'price_tiers'>,

package/components/ProductPagePrice/useCustomizableOptionPrice.ts

@@ -1,15 +1,16 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { MoneyFragment } from '@graphcommerce/magento-store'
+import type { MoneyFragment } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/next-ui'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
-import {
-  productCustomizableSelectors,
+import type { AddToCartItemSelector } from '../AddProductsToCart'
+import { useFormAddProductsToCart } from '../AddProductsToCart'
+import type {
+  AnyOption,
   CustomizableProductOptionBase,
   OptionValueSelector,
-  AnyOption,
   SelectorsProp,
 } from '../ProductCustomizable/productCustomizableSelectors'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import { productCustomizableSelectors } from '../ProductCustomizable/productCustomizableSelectors'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
 
 export type UseCustomizableOptionPriceProps = {

package/components/ProductScroller/ProductScroller.tsx

@@ -1,18 +1,11 @@
-import { ItemScroller, ItemScrollerProps, RenderType, responsiveVal } from '@graphcommerce/next-ui'
-import {
-  Box,
-  Container,
-  ContainerProps,
-  SxProps,
-  Theme,
-  Typography,
-  TypographyProps,
-  useTheme,
-} from '@mui/material'
+import type { ItemScrollerProps } from '@graphcommerce/next-ui'
+import { ItemScroller, RenderType, responsiveVal } from '@graphcommerce/next-ui'
+import type { ContainerProps, SxProps, Theme, TypographyProps } from '@mui/material'
+import { Box, Container, Typography, useTheme } from '@mui/material'
 import React, { forwardRef, useContext } from 'react'
 import { AddProductsToCartContext, AddProductsToCartForm } from '../AddProductsToCart'
-import { ProductListItemProps } from '../ProductListItem/ProductListItem'
-import { ProductListItemRenderer, ProductListItemType } from '../ProductListItems/renderer'
+import type { ProductListItemProps } from '../ProductListItem/ProductListItem'
+import type { ProductListItemRenderer, ProductListItemType } from '../ProductListItems/renderer'
 
 export type ProductScrollerProps = {
   title?: React.ReactNode
@@ -22,7 +15,8 @@ export type ProductScrollerProps = {
   sx?: SxProps<Theme>
   containerProps?: ContainerProps
   titleProps?: TypographyProps
-  itemScrollerProps?: ItemScrollerProps
+  itemScrollerProps?: Omit<ItemScrollerProps, 'children'>
+  sizes?: string
 }
 export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
   (props: ProductScrollerProps, ref) => {
@@ -35,6 +29,7 @@ export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
       containerProps,
       titleProps,
       itemScrollerProps,
+      sizes = responsiveVal(200, 300),
     } = props
 
     const theme = useTheme()
@@ -61,7 +56,7 @@ export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
                   renderer={productListRenderer}
                   {...item}
                   imageOnly={imageOnly}
-                  sizes={responsiveVal(200, 300)}
+                  sizes={sizes}
                 />
               ))}
             </ItemScroller>

package/components/ProductShortDescription/ProductShortDescription.tsx

@@ -1,6 +1,7 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { SxProps, Theme, Typography } from '@mui/material'
-import { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Typography } from '@mui/material'
+import type { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
 
 export type ProductShortDescriptionProps = {
   product: ProductShortDescriptionFragment

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -1,7 +1,7 @@
-import { breakpointVal, iconOrderBefore, IconSvg } from '@graphcommerce/next-ui'
+import { IconSvg, breakpointVal, iconOrderBefore } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, darken, lighten } from '@mui/material'
-import { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
+import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
 
 type ProductSidebarDeliveryProps = {
   product?: UseAddProductsToCartActionFragment
@@ -39,7 +39,7 @@ export function ProductSidebarDelivery(props: ProductSidebarDeliveryProps) {
           "image title"
           ".     subtitle"
         `,
-        gridTemplateColumns: `min-content auto`,
+        gridTemplateColumns: 'min-content auto',
         columnGap: theme.spacings.xxs,
         background:
           theme.palette.mode === 'light'

package/components/ProductSpecs/ProductSpecs.tsx

@@ -1,6 +1,7 @@
-import { responsiveVal, Row, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ProductSpecsFragment } from './ProductSpecs.gql'
+import { Row, SectionContainer, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ProductSpecsFragment } from './ProductSpecs.gql'
 import { ProductSpecsAggregations } from './ProductSpecsAggregations'
 import { ProductSpecsCustomAttributes } from './ProductSpecsCustomAttributes'
 
@@ -10,7 +11,7 @@ export type ProductSpecsProps = ProductSpecsFragment & {
   children?: React.ReactNode
 }
 
-const name = 'ProductSpecs' as const
+const name = 'ProductSpecs'
 const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 

package/components/ProductSpecs/ProductSpecsAggregations.tsx

@@ -1,8 +1,8 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import { ProductSpecsFragment } from './ProductSpecs.gql'
+import type { ProductSpecsFragment } from './ProductSpecs.gql'
 
-const name = 'ProductSpecs' as const
+const name = 'ProductSpecs'
 const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 

package/components/ProductSpecs/ProductSpecsCustomAttributes.tsx

@@ -1,10 +1,10 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { extendableComponent, ListFormat } from '@graphcommerce/next-ui'
+import { ListFormat, extendableComponent } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import { ProductSpecsFragment } from './ProductSpecs.gql'
+import type { ProductSpecsFragment } from './ProductSpecs.gql'
 import { ProductSpecsTypesDocument } from './ProductSpecsTypes.gql'
 
-const name = 'ProductSpecs' as const
+const name = 'ProductSpecs'
 const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -1,6 +1,7 @@
-import { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
-import { GetStaticPathsResult } from 'next'
-import { ProductStaticPathsDocument, ProductStaticPathsQuery } from './ProductStaticPaths.gql'
+import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { GetStaticPathsResult } from 'next'
+import type { ProductStaticPathsQuery } from './ProductStaticPaths.gql'
+import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
 
 type Return = GetStaticPathsResult<{ url: string }>
 

package/components/ProductStaticPaths/getSitemapPaths.ts

@@ -1,4 +1,4 @@
-import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
 import { canonicalize, nonNullable } from '@graphcommerce/next-ui'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
@@ -24,7 +24,7 @@ export async function getSitemapPaths(
 
   const options = { locale, defaultLocale, pathname: '/', isLocaleDomain: false }
   const lastmod = new Date().toISOString()
-  const changefreq = 'daily' as const
+  const changefreq = 'daily'
   const priority = 0.7
 
   const paths = (await Promise.all(result))

package/components/ProductWeight/ProductWeight.tsx

@@ -1,7 +1,8 @@
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { UnitFormat, UnitFormatProps } from '@graphcommerce/next-ui'
-import { ProductWeightFragment } from './ProductWeight.gql'
+import type { UnitFormatProps } from '@graphcommerce/next-ui'
+import { UnitFormat } from '@graphcommerce/next-ui'
+import type { ProductWeightFragment } from './ProductWeight.gql'
 
 export type ProductWeightProps = Omit<UnitFormatProps, 'unit'> & { product: ProductWeightFragment }
 
@@ -14,9 +15,5 @@ export function ProductWeight(props: ProductWeightProps) {
 
   const unit = conf?.storeConfig?.weight_unit === 'lbs' ? 'pound' : 'kilogram'
 
-  return (
-    <UnitFormat unit={unit} {...rest}>
-      {product.weight}
-    </UnitFormat>
-  )
+  return <UnitFormat unit={unit} {...rest} value={product.weight} />
 }

package/context/productListParamsContext.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProductListParams } from '../components/ProductListItems/filterTypes'
+import type { ProductListParams } from '../components/ProductListItems/filterTypes'
 
 export const productListParamsContext = React.createContext<{
   params: ProductListParams

package/hooks/useProductLink.ts

@@ -1,4 +1,4 @@
-import { ProductLinkFragment } from './ProductLink.gql'
+import type { ProductLinkFragment } from './ProductLink.gql'
 
 export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 

package/hooks/useProductList.ts

@@ -1,30 +1,27 @@
 import { debounce } from '@graphcommerce/ecommerce-ui'
-import {
-  ApolloClient,
-  useQuery,
-  useInContextQuery,
-  getInContextInput,
-} from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
+import { getInContextInput, useInContextQuery, useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { showPageLoadIndicator } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
-import {
+import type {
   FilterFormProviderProps,
-  ProductFiltersDocument,
   ProductFiltersQuery,
   ProductFiltersQueryVariables,
 } from '../components'
-import {
-  ProductListDocument,
+import { ProductFiltersDocument } from '../components'
+import type {
   ProductListQuery,
   ProductListQueryVariables,
 } from '../components/ProductList/ProductList.gql'
-import { CategoryDefaultFragment } from '../components/ProductListItems/CategoryDefault.gql'
-import { ProductListParams, toProductListParams } from '../components/ProductListItems/filterTypes'
+import { ProductListDocument } from '../components/ProductList/ProductList.gql'
+import type { CategoryDefaultFragment } from '../components/ProductListItems/CategoryDefault.gql'
+import type { ProductListParams } from '../components/ProductListItems/filterTypes'
+import { toProductListParams } from '../components/ProductListItems/filterTypes'
 import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
 import {
-  productListApplyCategoryDefaults,
   categoryDefaultsToProductListFilters,
+  productListApplyCategoryDefaults,
   useProductListApplyCategoryDefaults,
 } from '../components/ProductListItems/productListApplyCategoryDefaults'
 
@@ -37,7 +34,7 @@ export const prefetchProductList = debounce(
     variables: ProductListQueryVariables,
     filtersVariables: ProductFiltersQueryVariables,
     next: Next,
-    client: ApolloClient<any>,
+    client: ApolloClient<unknown>,
     shallow: boolean,
   ) => {
     if (!shallow) return next(shallow)

package/hooks/useProductListLink.ts

@@ -1,9 +1,11 @@
+import type {
+  ProductFilterParams,
+  ProductListParams,
+} from '../components/ProductListItems/filterTypes'
 import {
   isFilterTypeEqual,
   isFilterTypeMatch,
   isFilterTypeRange,
-  ProductFilterParams,
-  ProductListParams,
   toFilterParams,
 } from '../components/ProductListItems/filterTypes'
 
@@ -17,15 +19,15 @@ export function productListLinkFromFilter(props: ProductFilterParams): string {
   if (isSearch) urlBase = search ? `search/${search}` : 'search'
 
   // base url path generation
-  let paginateSort = ``
-  let query = ``
+  let paginateSort = ''
+  let query = ''
 
   if (currentPage && currentPage > 1) paginateSort += `/page/${currentPage}`
 
   // todo(paales): How should the URL look like with multiple sorts?
   // Something like: /sort/position,price/dir/asc,asc
   if (sort) query += `/sort/${sort}`
-  if (dir) query += `/dir/desc`
+  if (dir) query += '/dir/desc'
   if (pageSize) query += `/page-size/${pageSize}`
 
   // Apply filters

package/hooks/useProductListLinkReplace.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { ProductListParams } from '../components/ProductListItems/filterTypes'
+import type { ProductListParams } from '../components/ProductListItems/filterTypes'
 import { productListLink } from './useProductListLink'
 import { useProductListParamsContext } from './useProductListParamsContext'
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.101",
+  "version": "9.0.0-canary.104",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,23 +18,23 @@
     "typescript": "5.6.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.101",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.101",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.101",
-    "@graphcommerce/graphql": "^9.0.0-canary.101",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.101",
-    "@graphcommerce/image": "^9.0.0-canary.101",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.101",
-    "@graphcommerce/magento-store": "^9.0.0-canary.101",
-    "@graphcommerce/next-ui": "^9.0.0-canary.101",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.104",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.104",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.104",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.104",
+    "@graphcommerce/graphql": "^9.0.0-canary.104",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.104",
+    "@graphcommerce/image": "^9.0.0-canary.104",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.104",
+    "@graphcommerce/magento-store": "^9.0.0-canary.104",
+    "@graphcommerce/next-ui": "^9.0.0-canary.104",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.104",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.104",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/test/productURL.fixture.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { test as base } from '@graphcommerce/magento-store/test/apolloClientStore.fixture'
 import { ProductStaticPathsDocument } from '../components/ProductStaticPaths/ProductStaticPaths.gql'
-import { ProductTypenames } from '../components/ProductStaticPaths/getProductStaticPaths'
+import type { ProductTypenames } from '../components/ProductStaticPaths/getProductStaticPaths'
 import { productLink } from '../hooks/useProductLink'
 
 type ProductUrls = {

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "exclude": ["**/node_modules", "**/.*/"],
   "include": ["**/*.ts", "**/*.tsx"],
-  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json",
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
 }