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

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -1,6 +1,8 @@
 import { FormAutoSubmit } from '@graphcommerce/ecommerce-ui'
-import { extendableComponent, StickyBelowHeader } from '@graphcommerce/next-ui'
-import { Box, Container, Theme, useMediaQuery } from '@mui/material'
+import { StickyBelowHeader, extendableComponent } from '@graphcommerce/next-ui'
+import type { Theme } from '@mui/material'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { Box, Container, useMediaQuery } from '@mui/material'
 import React from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
@@ -19,7 +21,7 @@ type OwnerProps = {
   headerPosition: 'before'
 }
 
-const name = 'ProductFiltersProLayoutSidebar' as const
+const name = 'ProductFiltersProLayoutSidebar'
 const parts = ['root', 'content'] as const
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 

package/components/ProductFiltersPro/ProductFiltersProLimitChip.tsx

@@ -1,7 +1,9 @@
-import { ActionCardItemBase, ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemBase } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-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 { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -1,9 +1,10 @@
-import { ActionCardItemBase, ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemBase } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 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 { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 

package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx

@@ -1,12 +1,13 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
 import { useProductFilterProHasFiltersApplied } from './useProductFiltersProHasFiltersApplied'
 
 export type ProductFitlersProNoResultProps = { search?: string | null; sx?: SxProps<Theme> }
 
-const name = 'ProductFiltersProNoResults' as const
+const name = 'ProductFiltersProNoResults'
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 

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 { IconSvg, iconCancelAlt } from '@graphcommerce/next-ui'
+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,9 +1,9 @@
 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 { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import {
-  Box,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
+  Box, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   Checkbox,
   ListItem,
   ListItemSecondaryAction,
@@ -14,13 +14,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 +155,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

@@ -1,12 +1,13 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import {
+  IconSvg,
+  extendableComponent,
   iconChevronLeft,
   iconChevronRight,
-  IconSvg,
   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'>
@@ -25,7 +26,7 @@ export function ProductDiscountLabel(props: ProductDiscountLabelProps) {
           }}
           {...boxProps}
         >
-          <PercentFormat>{discount / 100}</PercentFormat>
+          <PercentFormat maximumFractionDigits={0} value={discount / 100} />
         </Box>
       )}
     </>

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 { Skeleton, useEventCallback } 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 { ProductImageContainer, ProductListItemImageAreas } 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 { breakpointVal, responsiveVal } from '@graphcommerce/next-ui'
+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 { 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 }

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