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

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,8 +1,10 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
-import { ActionCard, ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import { ActionCard, ChipOverlayOrPopper } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
+import type { UseProductFiltersProSortProps } from './useProductFiltersProSort'
+import { useProductFiltersProSort } from './useProductFiltersProSort'
 
 export type ProductListActionSortProps = UseProductFiltersProSortProps &
   Omit<

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,4 +1,4 @@
-import { SortEnum } from '@graphcommerce/graphql-mesh'
+import type { SortEnum } from '@graphcommerce/graphql-mesh'
 import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
 
 type Props = {

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,9 +1,10 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
+import type { UseProductFiltersProSortProps } from './useProductFiltersProSort'
+import { useProductFiltersProSort } from './useProductFiltersProSort'
 
 export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps & {
   sx?: SxProps<Theme>

package/components/ProductFiltersPro/activeAggregations.ts

@@ -1,6 +1,6 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
 
 export function excludeCategory(aggregations: ProductListFiltersFragment['aggregations']) {
   return filterNonNullableKeys(aggregations).filter(

package/components/ProductFiltersPro/applyAggregationCount.ts

@@ -1,6 +1,6 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
 
 /**
  * Apply aggregation count to aggregation options:

package/components/ProductFiltersPro/useProductFiltersProClearAllAction.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
 export function useProductFiltersProClearAllAction() {

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -4,9 +4,9 @@ import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { useMemo } from 'react'
-import { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
-import { ProductListSortFragment } from '../ProductListSort'
+import type { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductListSortFragment } from '../ProductListSort'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { ProductListActionSortProps } from './ProductFiltersProSortChip'
 import { ProductFiltersProSortDirectionArrow } from './ProductFiltersProSortDirectionArrow'

package/components/ProductListCount/ProductListCount.tsx

@@ -1,7 +1,8 @@
 import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Divider, SxProps, Theme, Typography } from '@mui/material'
-import { ProductListCountFragment } from './ProductListCount.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
+import type { ProductListCountFragment } from './ProductListCount.gql'
 
 const { classes, selectors } = extendableComponent('ProductListCount', [
   'root',

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,11 +1,12 @@
 import { cloneDeep } from '@graphcommerce/graphql'
 import { iconCancelAlt, IconSvg } from '@graphcommerce/next-ui'
-import { Chip, ChipProps, SxProps, Theme } from '@mui/material'
+import type { ChipProps, SxProps, Theme } from '@mui/material'
+import { Chip } from '@mui/material'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import { ProductListLink } from '../ProductListLink/ProductListLink'
-import { FilterIn } from './FilterEqualType'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { FilterIn } from './FilterEqualType'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
 export type FilterCheckboxTypeProps = Filter &

package/components/ProductListFilters/FilterEqualType.tsx

@@ -1,6 +1,7 @@
 import { cloneDeep } from '@graphcommerce/graphql'
 import type { FilterEqualTypeInput } from '@graphcommerce/graphql-mesh'
-import { responsiveVal, extendableComponent, ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
+import type { ChipMenuProps } from '@graphcommerce/next-ui'
+import { responsiveVal, extendableComponent, ChipMenu } from '@graphcommerce/next-ui'
 import {
   Box,
   // eslint-disable-next-line @typescript-eslint/no-restricted-imports
@@ -14,13 +15,13 @@ import type { SetRequired } from 'type-fest'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import { ProductListLink } from '../ProductListLink/ProductListLink'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type OwnerState = {
   isColor: boolean
   isActive: boolean
 }
-const componentName = 'FilterEqual' as const
+const componentName = 'FilterEqual'
 const parts = [
   'listItem',
   'listItemInnerContainer',
@@ -155,7 +156,7 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
                       },
                       [`& .${listItemTextClasses.secondary}`]: {
                         color: theme.palette.grey[500],
-                        marginLeft: `4px`,
+                        marginLeft: '4px',
                         fontSize: theme.typography.pxToRem(11),
                         display: 'inline',
                       },

package/components/ProductListFilters/FilterRangeType.tsx

@@ -1,14 +1,15 @@
 import { cloneDeep } from '@graphcommerce/graphql'
 import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } 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'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type FilterRangeTypeProps = NonNullable<
   NonNullable<ProductListFiltersFragment['aggregations']>[0]

package/components/ProductListFilters/ProductListFilters.tsx

@@ -1,9 +1,9 @@
-import { ChipMenuProps } from '@graphcommerce/next-ui'
-import { FilterTypes } from '../ProductListItems/getFilterTypes'
+import type { ChipMenuProps } from '@graphcommerce/next-ui'
+import type { FilterTypes } from '../ProductListItems/getFilterTypes'
 import { FilterCheckboxType } from './FilterCheckboxType'
 import { FilterEqualType } from './FilterEqualType'
 import { FilterRangeType } from './FilterRangeType'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 export type ProductFiltersProps = ProductListFiltersFragment & {
   filterTypes: FilterTypes

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -6,7 +6,8 @@ import {
   useScrollY,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Box, styled, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React, { useEffect, useRef, useState } from 'react'
 
@@ -17,7 +18,7 @@ export type ProductListFiltersContainerProps = { children: React.ReactNode; sx?:
 type OwnerState = {
   isSticky: boolean
 }
-const name = 'ProductListFiltersContainer' as const
+const name = 'ProductListFiltersContainer'
 const parts = [
   'wrapper',
   'container',

package/components/ProductListItem/ProductDiscountLabel.tsx

@@ -1,6 +1,7 @@
 import { PercentFormat } from '@graphcommerce/next-ui'
-import { Box, BoxProps } from '@mui/material'
-import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 
 export type ProductDiscountLabelProps = Pick<ProductListItemFragment, 'price_range'> &
   Omit<BoxProps, 'children'>

package/components/ProductListItem/ProductListItem.tsx

@@ -1,27 +1,22 @@
-import { ImageProps } from '@graphcommerce/image'
+import type { ImageProps } from '@graphcommerce/image'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { SxProps, Theme, useEventCallback, Skeleton } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { useEventCallback, Skeleton } from '@mui/material'
 import React from 'react'
-import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
 import { ProductDiscountLabel } from './ProductDiscountLabel'
-import {
-  ProductListItemImageProps,
-  ProductListItemImage,
-  ProductListItemImageSkeleton,
-} from './ProductListItemImage'
-import {
+import type { ProductListItemImageProps } from './ProductListItemImage'
+import { ProductListItemImage, ProductListItemImageSkeleton } from './ProductListItemImage'
+import type {
   ProductListItemImageAreaKeys,
   ProductListsItemImageAreaProps,
-  ProductListItemImageAreas,
-  ProductImageContainer,
 } from './ProductListItemImageContainer'
+import { ProductListItemImageAreas, ProductImageContainer } from './ProductListItemImageContainer'
 import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
-import {
-  ProductListItemTitleAndPrice,
-  ProductListItemTitleAndPriceProps,
-} from './ProductListItemTitleAndPrice'
+import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
+import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
 
 const { classes, selectors } = extendableComponent('ProductListItem', [
   'root',

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)({})
 

package/components/ProductListItem/ProductListItemImageContainer.tsx

@@ -1,5 +1,6 @@
 import { responsiveVal, breakpointVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps } from '@mui/material'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
 
 type ProductImageContainerProps = BoxProps
 
@@ -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,5 +1,6 @@
 import { NextLink, breakpointVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps, ButtonBase, ButtonBaseProps, SxProps, Theme } from '@mui/material'
+import type { BoxProps, ButtonBaseProps, SxProps, Theme } from '@mui/material'
+import { Box, ButtonBase } from '@mui/material'
 
 type ProductListItemLinkProps = ButtonBaseProps<typeof NextLink>
 type ProductListItemLinkOrDivProps = ProductListItemLinkProps | BoxProps

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,9 +1,10 @@
 import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps, Breakpoint, Theme, useTheme } from '@mui/material'
+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'

package/components/ProductListItems/ProductListParamsProvider.tsx

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

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 }

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 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 { 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',

package/components/ProductListSort/ProductListSort.tsx

@@ -1,20 +1,22 @@
 import { useQuery, cloneDeep } 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/ProductListSuggestions.tsx

@@ -3,7 +3,7 @@ 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 = {
   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>

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,
 } 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 { nonNullable, SidebarGallery } 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,