@graphcommerce/magento-product 9.0.0-canary.98 → 9.0.0

package/components/ProductListItem/ProductListItemImage.tsx

@@ -1,6 +1,8 @@
-import { Image, ImageProps } from '@graphcommerce/image'
+import type { ImageProps } from '@graphcommerce/image'
+import { Image } from '@graphcommerce/image'
 import { Trans } from '@lingui/react'
-import { Box, BoxProps, Skeleton, styled } from '@mui/material'
+import type { BoxProps } from '@mui/material'
+import { Box, Skeleton, styled } from '@mui/material'
 
 const StyledImage = styled(Image)({})
 
@@ -24,7 +26,7 @@ function PlaceHolderContainer(props: BoxProps) {
 
 export type ProductListItemImageProps = {
   aspectRatio?: [number, number]
-  classes: {
+  classes?: {
     image?: string
     placeholder?: string
   }
@@ -33,7 +35,7 @@ export type ProductListItemImageProps = {
 export function ProductListItemImageSkeleton(props: ProductListItemImageProps) {
   const { aspectRatio = [4, 3], classes } = props
   return (
-    <PlaceHolderContainer className={`${classes.placeholder} ${classes.image}`}>
+    <PlaceHolderContainer className={`${classes?.placeholder} ${classes?.image}`}>
       <Skeleton
         animation='wave'
         sx={{
@@ -46,7 +48,7 @@ export function ProductListItemImageSkeleton(props: ProductListItemImageProps) {
   )
 }
 
-type ImageOrPlaceholderProps = ProductListItemImageProps &
+export type ImageOrPlaceholderProps = ProductListItemImageProps &
   Omit<ImageProps, 'alt' | 'src'> & {
     alt?: ImageProps['alt'] | null
     src?: ImageProps['src'] | null
@@ -64,7 +66,7 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
         src={src}
         alt={alt ?? ''}
         {...image}
-        className={classes.image}
+        className={classes?.image}
         sx={[
           {
             objectFit: 'contain',
@@ -78,7 +80,7 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
   }
 
   return (
-    <PlaceHolderContainer className={`${classes.placeholder} ${classes.image}`}>
+    <PlaceHolderContainer className={`${classes?.placeholder} ${classes?.image}`}>
       <Box
         sx={[
           {

package/components/ProductListItem/ProductListItemImageContainer.tsx

@@ -1,7 +1,8 @@
-import { responsiveVal, breakpointVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps } from '@mui/material'
+import { breakpointVal, responsiveVal } from '@graphcommerce/next-ui'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
 
-type ProductImageContainerProps = BoxProps
+export type ProductImageContainerProps = BoxProps
 
 export function ProductImageContainer(props: ProductImageContainerProps) {
   const { sx = [] } = props
@@ -22,7 +23,7 @@ export function ProductImageContainer(props: ProductImageContainerProps) {
           overflow: 'hidden',
           padding: responsiveVal(8, 12),
           '& > picture, & > .ProductListItem-placeholder': {
-            gridArea: `1 / 1 / 3 / 3`,
+            gridArea: '1 / 1 / 3 / 3',
             margin: `calc(${responsiveVal(8, 12)} * -1)`,
             height: 'auto',
           },
@@ -52,7 +53,7 @@ export function ProductListItemImageAreas(props: ProductListsItemImageAreaProps)
     <>
       <Box
         sx={{
-          gridArea: `1 / 1 / 2 / 2`,
+          gridArea: '1 / 1 / 2 / 2',
           zIndex: 1,
         }}
         className={classes.topLeft}
@@ -63,7 +64,7 @@ export function ProductListItemImageAreas(props: ProductListsItemImageAreaProps)
         sx={{
           justifySelf: 'end',
           textAlign: 'right',
-          gridArea: `1 / 2 / 2 / 3`,
+          gridArea: '1 / 2 / 2 / 3',
           zIndex: 1,
         }}
         className={classes.topRight}
@@ -73,7 +74,7 @@ export function ProductListItemImageAreas(props: ProductListsItemImageAreaProps)
       <Box
         sx={{
           alignSelf: 'flex-end',
-          gridArea: `2 / 1 / 3 / 2`,
+          gridArea: '2 / 1 / 3 / 2',
           zIndex: 1,
         }}
         className={classes.bottomLeft}
@@ -84,7 +85,7 @@ export function ProductListItemImageAreas(props: ProductListsItemImageAreaProps)
         sx={{
           textAlign: 'right',
           alignSelf: 'flex-end',
-          gridArea: `2 / 2 / 3 / 3`,
+          gridArea: '2 / 2 / 3 / 3',
           zIndex: 1,
           justifySelf: 'end',
         }}

package/components/ProductListItem/ProductListItemLinkOrDiv.tsx

@@ -1,14 +1,19 @@
-import { NextLink, breakpointVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps, ButtonBase, ButtonBaseProps, SxProps, Theme } from '@mui/material'
+import { breakpointVal, NextLink } from '@graphcommerce/next-ui'
+import type { BoxProps, ButtonBaseProps, SxProps, Theme } from '@mui/material'
+import { Box, ButtonBase } from '@mui/material'
+import React from 'react'
 
-type ProductListItemLinkProps = ButtonBaseProps<typeof NextLink>
-type ProductListItemLinkOrDivProps = ProductListItemLinkProps | BoxProps
+export type ProductListItemLinkProps = ButtonBaseProps<typeof NextLink>
+export type ProductListItemLinkOrDivProps = ProductListItemLinkProps | BoxProps
 
 function isLink(props: ProductListItemLinkOrDivProps): props is ProductListItemLinkProps {
   return 'href' in props
 }
 
-export function ProductListItemLinkOrDiv(props: ProductListItemLinkOrDivProps) {
+export const ProductListItemLinkOrDiv = React.forwardRef<
+  HTMLDivElement | HTMLAnchorElement,
+  ProductListItemLinkOrDivProps
+>((props, ref) => {
   const { sx = [] } = props
 
   const sxProps: SxProps<Theme> = [
@@ -27,8 +32,8 @@ export function ProductListItemLinkOrDiv(props: ProductListItemLinkOrDivProps) {
   ]
 
   return isLink(props) ? (
-    <ButtonBase component={NextLink} {...props} sx={sxProps} />
+    <ButtonBase ref={ref} component={NextLink} {...props} sx={sxProps} focusRipple />
   ) : (
-    <Box {...props} sx={sxProps} />
+    <Box ref={ref} component='div' {...props} sx={sxProps} />
   )
-}
+})

package/components/ProductListItem/ProductListItemTitleAndPrice.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { productListPrice } from '../ProductListPrice'
 
 export type ProductListItemTitleAndPriceProps = {
@@ -23,8 +24,8 @@ export function ProductListItemTitleAndPrice(props: ProductListItemTitleAndPrice
           marginTop: theme.spacings.xs,
           columnGap: 1,
           gridTemplateAreas: {
-            xs: `"title title" "subtitle price"`,
-            md: `"title subtitle price"`,
+            xs: '"title title" "subtitle price"',
+            md: '"title subtitle price"',
           },
           gridTemplateColumns: { xs: 'unset', md: 'auto auto 1fr' },
           justifyContent: 'space-between',

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,34 +1,34 @@
-import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps, Breakpoint, Theme, useTheme } from '@mui/material'
+import { extendableComponent, LazyHydrate, RenderType, responsiveVal } from '@graphcommerce/next-ui'
+import type { BoxProps, Breakpoint, Theme } from '@mui/material'
+import { Box, useTheme } from '@mui/material'
 import { AddProductsToCartForm } from '../AddProductsToCart'
-import { ProductListItemProps } from '../ProductListItem/ProductListItem'
-import { ProductListItemsFragment } from './ProductListItems.gql'
-import { ProductListItemRenderer } from './renderer'
+import type { ProductListItemProps } from '../ProductListItem/ProductListItem'
+import type { ProductListItemsFragment } from './ProductListItems.gql'
+import type { ProductListItemRenderer } from './renderer'
 
 type ComponentState = {
   size?: 'normal' | 'small'
 }
 
-type ColumnConfig = {
+export type ColumnConfig = {
   /**
-   * The total width of the grid, this is used to provde the correct values to the image sizes prop so the right image size is loaded.
+   * The total width of the grid, this is used to provde the correct values to the image sizes prop
+   * so the right image size is loaded.
    *
-   * @default "calc(100vw - ${theme.page.horizontal} * 2)"
+   * @default 'calc(100vw - ${theme.page.horizontal} * 2)'
    */
-  totalWidth?: string
+  maxWidth?: string
   /**
    * Gap between the columns/rows
    *
    * @default theme.spacings.md
    */
   gap?: string
-  /**
-   * Number of columns
-   */
+  /** Number of columns */
   count: number
 }
 
-type ColumnsConfig = Partial<Record<Breakpoint, ColumnConfig>>
+export type ColumnsConfig = Partial<Record<Breakpoint, ColumnConfig>>
 
 export type ProductItemsGridProps = ProductListItemsFragment & {
   renderers: ProductListItemRenderer
@@ -37,6 +37,8 @@ export type ProductItemsGridProps = ProductListItemsFragment & {
   sx?: BoxProps['sx']
   columns?: ((theme: Theme) => ColumnsConfig) | ColumnsConfig
   containerRef?: React.Ref<HTMLDivElement>
+  children?: React.ReactNode
+  maxWidth?: string
 } & Pick<ProductListItemProps, 'onClick' | 'titleComponent'> &
   ComponentState
 
@@ -56,11 +58,14 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     titleComponent,
     onClick,
     columns,
+    children,
+    maxWidth: maxWidthProp,
   } = props
 
   const theme = useTheme()
 
-  const totalWidth = `calc(100vw - ${theme.page.horizontal} * 2)`
+  const maxWidth = maxWidthProp ?? `calc(100vw - ${theme.page.horizontal} * 2)`
+
   const gap = theme.spacings.md
 
   let columnConfig = typeof columns === 'function' ? columns(theme) : columns
@@ -69,7 +74,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     columnConfig = {
       xs: { count: 2 },
       md: { count: 3 },
-      lg: { count: 4, totalWidth: `${theme.breakpoints.values.xl}px` },
+      lg: { count: 4, maxWidth: `${theme.breakpoints.values.xl}px` },
     }
   }
 
@@ -88,7 +93,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
           ...Object.entries(columnConfig).map(([key, column]) => ({
             [theme.breakpoints.up(key as Breakpoint)]: {
               gap: column.gap ?? gap,
-              // width: totalWidth,
+              // maxWidth: column.maxWidth ?? maxWidth,
               gridTemplateColumns: `repeat(${column.count}, 1fr)`,
             },
           })),
@@ -106,8 +111,8 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
               <RenderType
                 renderer={renderers}
                 sizes={Object.fromEntries(
-                  Object.entries(columnConfig ?? {}).map(([key, column]) => {
-                    const totalW = column.totalWidth ?? totalWidth
+                  Object.entries(columnConfig).map(([key, column]) => {
+                    const totalW = column.maxWidth ?? maxWidth
                     const columnGap = column.gap ?? gap
                     return [
                       theme.breakpoints.values[key as Breakpoint],
@@ -123,6 +128,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
             </LazyHydrate>
           ) : null,
         )}
+        {children}
       </Box>
     </AddProductsToCartForm>
   )

package/components/ProductListItems/ProductListParamsProvider.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { productListParamsContext } from '../../context/productListParamsContext'
-import { ProductListParams } from './filterTypes'
+import type { ProductListParams } from './filterTypes'
 
 export function ProductListParamsProvider({
   children,

package/components/ProductListItems/filterTypes.tsx

@@ -1,11 +1,11 @@
 import type {
-  Maybe,
-  Scalars,
-  ProductAttributeFilterInput,
-  ProductAttributeSortInput,
   FilterEqualTypeInput,
   FilterMatchTypeInput,
   FilterRangeTypeInput,
+  Maybe,
+  ProductAttributeFilterInput,
+  ProductAttributeSortInput,
+  Scalars,
   SortEnum,
 } from '@graphcommerce/graphql-mesh'
 

package/components/ProductListItems/filteredProductList.tsx

@@ -6,8 +6,8 @@ import type {
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
 import { useRouter } from 'next/router'
-import { ProductListParams } from './filterTypes'
-import { FilterTypes } from './getFilterTypes'
+import type { ProductListParams } from './filterTypes'
+import type { FilterTypes } from './getFilterTypes'
 
 export function parseParams(
   url: string,

package/components/ProductListItems/getFilterTypes.ts

@@ -1,4 +1,5 @@
-import { gql, ApolloClient, NormalizedCacheObject, TypedDocumentNode } from '@graphcommerce/graphql'
+import type { ApolloClient, NormalizedCacheObject, TypedDocumentNode } from '@graphcommerce/graphql'
+import { gql } from '@graphcommerce/graphql'
 import type { AttributeFrontendInputEnum, Exact } from '@graphcommerce/graphql-mesh'
 import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import { ProductFilterTypesDocument } from './ProductFilterTypes.gql'

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -1,8 +1,9 @@
 import { cloneDeep, useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument, StoreConfigQuery } from '@graphcommerce/magento-store'
-import { ProductListQueryVariables } from '../ProductList/ProductList.gql'
-import { CategoryDefaultFragment } from './CategoryDefault.gql'
-import { ProductListParams } from './filterTypes'
+import type { StoreConfigQuery } from '@graphcommerce/magento-store'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import type { ProductListQueryVariables } from '../ProductList/ProductList.gql'
+import type { CategoryDefaultFragment } from './CategoryDefault.gql'
+import type { ProductListParams } from './filterTypes'
 
 export function useProductListApplyCategoryDefaults(
   params: ProductListParams | undefined,

package/components/ProductListItems/renderer.tsx

@@ -1,5 +1,5 @@
-import { TypeRenderer } from '@graphcommerce/next-ui'
-import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { TypeRenderer } from '@graphcommerce/next-ui'
+import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { ProductListItem } from '../ProductListItem/ProductListItem'
 
 type SkeletonType = { __typename: 'Skeleton'; uid: string }
@@ -8,6 +8,7 @@ export type ProductListItemRenderer = TypeRenderer<ProductListItemFragment | Ske
 
 /**
  * @deprecated Please use productListRenderer from the example directory instead.
+ * @public
  */
 export const renderer: ProductListItemRenderer = {
   Skeleton: ProductListItem,

package/components/ProductListLink/ProductListLink.tsx

@@ -1,9 +1,11 @@
-import { Link, LinkProps } from '@mui/material'
-import PageLink, { LinkProps as PageLinkProps } from 'next/link'
+import type { LinkProps } from '@mui/material'
+import { Link } from '@mui/material'
+import type { LinkProps as PageLinkProps } from 'next/link'
+import PageLink from 'next/link'
 import React from 'react'
 import { useProductListLink } from '../../hooks/useProductListLink'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
-import { ProductListParams } from '../ProductListItems/filterTypes'
+import type { ProductListParams } from '../ProductListItems/filterTypes'
 
 export type ProductListLinkProps = LinkProps &
   ProductListParams & {

package/components/ProductListPagination/ProductListPagination.tsx

@@ -1,8 +1,9 @@
-import { NextLink, PaginationExtended, Pagination } from '@graphcommerce/next-ui'
-import { Link, PaginationProps } from '@mui/material'
+import { NextLink, Pagination, PaginationExtended } from '@graphcommerce/next-ui'
+import type { PaginationProps } from '@mui/material'
+import { Link } from '@mui/material'
 import { productListLink } from '../../hooks/useProductListLink'
-import { ProductListParams } from '../ProductListItems/filterTypes'
-import { ProductListPaginationFragment } from './ProductListPagination.gql'
+import type { ProductListParams } from '../ProductListItems/filterTypes'
+import type { ProductListPaginationFragment } from './ProductListPagination.gql'
 
 export type ProductPaginationProps = ProductListPaginationFragment &
   Omit<PaginationProps, 'count' | 'defaultPage' | 'page' | 'renderItem'> & {
@@ -22,7 +23,7 @@ export function ProductListPagination({
         count={page_info?.total_pages}
         page={page_info?.current_page ?? 1}
         renderLink={(_, icon, btnProps) => {
-          const suffix = btnProps.page === 1 ? '' : `#products`
+          const suffix = btnProps.page === 1 ? '' : '#products'
           return (
             <Link
               {...btnProps}

package/components/ProductListPrice/ProductListPrice.tsx

@@ -1,8 +1,9 @@
-import { InContextMask } from '@graphcommerce/graphql'
+import { PrivateQueryMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Typography, TypographyProps } from '@mui/material'
-import { ProductListPriceFragment } from './ProductListPrice.gql'
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import type { ProductListPriceFragment } from './ProductListPrice.gql'
 
 export const productListPrice = extendableComponent('ProductListPrice', [
   'root',
@@ -20,7 +21,7 @@ export function ProductListPrice(props: ProductListPriceProps) {
   return (
     <Typography component='div' variant='body1' className={classes.root} sx={sx}>
       {regular_price.value !== final_price.value && (
-        <InContextMask
+        <PrivateQueryMask
           component='span'
           sx={{
             textDecoration: 'line-through',
@@ -31,11 +32,15 @@ export function ProductListPrice(props: ProductListPriceProps) {
           className={classes.discountPrice}
         >
           <Money {...regular_price} />
-        </InContextMask>
+        </PrivateQueryMask>
       )}
-      <InContextMask className={classes.finalPrice} component='span' skeleton={{ width: '3.5em' }}>
+      <PrivateQueryMask
+        className={classes.finalPrice}
+        component='span'
+        skeleton={{ width: '3.5em' }}
+      >
         <Money {...final_price} />
-      </InContextMask>
+      </PrivateQueryMask>
     </Typography>
   )
 }

package/components/ProductListSort/ProductListSort.tsx

@@ -1,20 +1,22 @@
-import { useQuery, cloneDeep } from '@graphcommerce/graphql'
+import { cloneDeep, useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
+import type { ChipMenuProps } from '@graphcommerce/next-ui'
+import { ChipMenu, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { ListItem, ListItemText, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { ListItem, ListItemText } from '@mui/material'
 import React from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import { ProductListLink } from '../ProductListLink/ProductListLink'
-import { ProductListSortFragment } from './ProductListSort.gql'
+import type { ProductListSortFragment } from './ProductListSort.gql'
 
 export type ProductListSortProps = ProductListSortFragment &
   Omit<ChipMenuProps, 'selected' | 'selectedLabel' | 'children' | 'label' | 'onDelete'> & {
     sx?: SxProps<Theme>
   }
 
-const name = 'ProductListSort' as const
+const name = 'ProductListSort'
 const parts = ['menu', 'item', 'link'] as const
 const { classes } = extendableComponent(name, parts)
 
@@ -46,7 +48,7 @@ export function ProductListSort(props: ProductListSortProps) {
       selected={selected}
       label={label}
       {...filterMenuProps}
-      selectedLabel={selected ? currentOption?.label ?? '' : label}
+      selectedLabel={selected ? (currentOption?.label ?? '') : label}
       onDelete={selected ? removeFilter : undefined}
       sx={Array.isArray(sx) ? sx : [sx]}
     >

package/components/ProductListSuggestions/ProductListSearchSuggestion.graphql

@@ -0,0 +1,3 @@
+fragment ProductListSearchSuggestion on SearchSuggestion {
+  search
+}

package/components/ProductListSuggestions/ProductListSuggestions.graphql

@@ -1,5 +1,5 @@
 fragment ProductListSuggestions on Products {
   suggestions {
-    search
+    ...ProductListSearchSuggestion
   }
 }

package/components/ProductListSuggestions/ProductListSuggestions.tsx

@@ -3,9 +3,9 @@ import { Trans } from '@lingui/macro'
 import { Box, Link } from '@mui/material'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { useProductFiltersPro } from '../ProductFiltersPro'
-import { ProductListSuggestionsFragment } from './ProductListSuggestions.gql'
+import type { ProductListSuggestionsFragment } from './ProductListSuggestions.gql'
 
-type ProductListSuggestionsProps = {
+export type ProductListSuggestionsProps = {
   products: ProductListSuggestionsFragment
 }
 

package/components/ProductPage/ProductPageAddToCartRow.tsx

@@ -1,5 +1,6 @@
-import { Box, SxProps, Theme } from '@mui/material'
-import { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
 
 export type ProductPageAddToCartRowProps = {
   sx?: SxProps<Theme>
@@ -9,7 +10,7 @@ export type ProductPageAddToCartRowProps = {
   product: UseAddProductsToCartActionFragment
 }
 
-export function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
+function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
   const { sx, children, after } = props
   return (
     <>

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -1,17 +1,19 @@
 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 &
+export type ProductPageBreadcrumbProps = ProductPageBreadcrumbFragment &
   Omit<BreadcrumbsProps, 'children'>
 
 /**
  * @deprecated Please use ProductPageBreadcrumbs
+ * @public
  */
-export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
+export function ProductPageBreadcrumb(props: ProductPageBreadcrumbProps) {
   const { categories, name, ...breadcrumbProps } = props
   const prev = usePrevPageRouter()
 

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/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/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}</>
 }