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

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -1,10 +1,9 @@
 import { useCartEnabled } from '@graphcommerce/magento-cart'
-import { Button, ButtonProps } from '@graphcommerce/next-ui'
+import type { ButtonProps } from '@graphcommerce/next-ui'
+import { Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import {
-  useAddProductsToCartAction,
-  UseAddProductsToCartActionProps,
-} from './useAddProductsToCartAction'
+import type { UseAddProductsToCartActionProps } from './useAddProductsToCartAction'
+import { useAddProductsToCartAction } from './useAddProductsToCartAction'
 
 export type AddProductsToCartButtonProps = UseAddProductsToCartActionProps &
   Pick<

package/components/AddProductsToCart/AddProductsToCartError.tsx

@@ -1,6 +1,7 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { FormHelperText } from '@mui/material'
-import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
+import type { AddToCartItemSelector } from './useFormAddProductsToCart'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddProductsToCartErrorProps = {
   children?: React.ReactNode

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -1,11 +1,10 @@
 import { useCartEnabled } from '@graphcommerce/magento-cart'
-import { Fab, FabProps, iconShoppingBag, iconCheckmark } from '@graphcommerce/next-ui'
+import type { FabProps } from '@graphcommerce/next-ui'
+import { Fab, iconShoppingBag, iconCheckmark } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
-import { SxProps, Theme } from '@mui/material'
-import {
-  useAddProductsToCartAction,
-  UseAddProductsToCartActionProps,
-} from './useAddProductsToCartAction'
+import type { SxProps, Theme } from '@mui/material'
+import type { UseAddProductsToCartActionProps } from './useAddProductsToCartAction'
+import { useAddProductsToCartAction } from './useAddProductsToCartAction'
 
 export type AddProductsToCartFabProps = {
   sx?: SxProps<Theme>

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -1,25 +1,21 @@
-import { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
-import { ApolloQueryResult, useApolloClient } from '@graphcommerce/graphql'
-import {
-  useFormGqlMutationCart,
-  CrosssellsDocument,
-  CrosssellsQuery,
-} from '@graphcommerce/magento-cart'
-import { ErrorSnackbarProps, MessageSnackbarProps, nonNullable } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
+import type { ApolloQueryResult } from '@graphcommerce/graphql'
+import { useApolloClient } from '@graphcommerce/graphql'
+import type { CrosssellsQuery } from '@graphcommerce/magento-cart'
+import { useFormGqlMutationCart, CrosssellsDocument } from '@graphcommerce/magento-cart'
+import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
+import { nonNullable } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useMemo, useRef } from 'react'
-import { AddProductsToCartDocument, AddProductsToCartMutation } from './AddProductsToCart.gql'
-import {
-  AddProductsToCartSnackbar,
-  AddProductsToCartSnackbarProps,
-} from './AddProductsToCartSnackbar'
+import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
+import { AddProductsToCartDocument } from './AddProductsToCart.gql'
+import type { AddProductsToCartSnackbarProps } from './AddProductsToCartSnackbar'
+import { AddProductsToCartSnackbar } from './AddProductsToCartSnackbar'
 import { toUserErrors } from './toUserErrors'
-import {
-  AddProductsToCartContext,
-  AddProductsToCartFields,
-  RedirectType,
-} from './useFormAddProductsToCart'
+import type { AddProductsToCartFields, RedirectType } from './useFormAddProductsToCart'
+import { AddProductsToCartContext } from './useFormAddProductsToCart'
 
 export type AddProductsToCartFormProps = {
   children: React.ReactNode

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -1,7 +1,9 @@
-import { NumberFieldElement, NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
+import type { NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
+import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import { i18n } from '@lingui/core'
-import { AddProductsToCartMutationVariables } from './AddProductsToCart.gql'
-import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
+import type { AddProductsToCartMutationVariables } from './AddProductsToCart.gql'
+import type { AddToCartItemSelector } from './useFormAddProductsToCart'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddToCartQuantityProps = Omit<
   NumberFieldElementProps<AddProductsToCartMutationVariables>,

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -1,5 +1,6 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
-import { ErrorSnackbarProps, MessageSnackbarProps, nonNullable } from '@graphcommerce/next-ui'
+import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
+import { nonNullable } from '@graphcommerce/next-ui'
 import { useMemo } from 'react'
 import { AddProductsToCartSnackbarMessage } from './AddProductsToCartSnackbarMessage'
 import { findAddedItems } from './findAddedItems'

package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx

@@ -1,14 +1,13 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { CartUserInputError } from '@graphcommerce/graphql-mesh'
+import type { ApolloError } from '@graphcommerce/graphql'
+import type { CartUserInputError } from '@graphcommerce/graphql-mesh'
 import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
+import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
 import {
   Button,
   ErrorSnackbar,
-  ErrorSnackbarProps,
   IconSvg,
   ListFormat,
   MessageSnackbar,
-  MessageSnackbarProps,
   iconChevronRight,
 } from '@graphcommerce/next-ui'
 import { Plural, Trans } from '@lingui/macro'

package/components/AddProductsToCart/findAddedItems.ts

@@ -1,6 +1,6 @@
 import { filterNonNullableKeys, isTypename } from '@graphcommerce/next-ui'
-import { AddProductsToCartMutation } from './AddProductsToCart.gql'
-import { AddProductsToCartFields } from './useFormAddProductsToCart'
+import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
+import type { AddProductsToCartFields } from './useFormAddProductsToCart'
 
 export function findAddedItems(
   data: AddProductsToCartMutation | null | undefined,

package/components/AddProductsToCart/toUserErrors.ts

@@ -1,6 +1,6 @@
-import { CartUserInputError } from '@graphcommerce/graphql-mesh'
+import type { CartUserInputError } from '@graphcommerce/graphql-mesh'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { AddProductsToCartMutation } from './AddProductsToCart.gql'
+import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
 
 export function toUserErrors(data?: AddProductsToCartMutation | null): CartUserInputError[] {
   const cartItemErrors = filterNonNullableKeys(data?.addProductsToCart?.cart.items)

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -1,9 +1,10 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { useEventCallback } from '@mui/material'
 import { startTransition, useEffect, useState } from 'react'
-import { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
+import type { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
 import { toUserErrors } from './toUserErrors'
-import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
+import type { AddToCartItemSelector } from './useFormAddProductsToCart'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 export type UseAddProductsToCartActionProps = AddToCartItemSelector & {
   disabled?: boolean
@@ -66,7 +67,7 @@ export function useAddProductsToCartAction(
       e.stopPropagation()
       if (formState.isSubmitting) return
       if (process.env.NODE_ENV !== 'production') {
-        if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
+        if (!sku) console.warn("You must provide a 'sku' to useAddProductsToCartAction")
       }
       // TODO should be removed, setting the form value on submission isn't a great idea.
       if (!getValues(`cartItems.${index}.sku`)) setValue(`cartItems.${index}.sku`, sku ?? '')

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -1,7 +1,7 @@
-import { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
+import type { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
 import { createContext, useContext } from 'react'
 import type { Simplify, LiteralUnion } from 'type-fest'
-import {
+import type {
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -1,5 +1,5 @@
 import { JsonLd } from '@graphcommerce/next-ui'
-import { JsonLdProductFragment } from './JsonLdProduct.gql'
+import type { JsonLdProductFragment } from './JsonLdProduct.gql'
 
 export type ProductPageJsonLdProps<
   T extends { '@type': string },

package/components/JsonLdProduct/jsonLdProduct.tsx

@@ -1,7 +1,7 @@
 import type { ProductImage } from '@graphcommerce/graphql-mesh'
 import type { Product } from 'schema-dts'
-import { JsonLdProductFragment } from './JsonLdProduct.gql'
-import { JsonLdProductOfferFragment } from './JsonLdProductOffer.gql'
+import type { JsonLdProductFragment } from './JsonLdProduct.gql'
+import type { JsonLdProductOfferFragment } from './JsonLdProductOffer.gql'
 
 export function jsonLdProduct(props: JsonLdProductFragment): Product {
   const { name, sku, media_gallery, categories, description } = props

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -1,7 +1,8 @@
 import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import type { ProductInterface } from '@graphcommerce/graphql-mesh'
 import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { Money, MoneyProps } from '@graphcommerce/magento-store'
+import type { MoneyProps } from '@graphcommerce/magento-store'
+import { Money } from '@graphcommerce/magento-store'
 import {
   Button,
   MessageSnackbar,
@@ -10,9 +11,11 @@ import {
   extendableComponent,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
+import type { ButtonProps } from '@mui/material'
+import { Divider, Typography, Box, Alert } from '@mui/material'
 import React from 'react'
-import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
+import type { ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
+import { ProductAddToCartDocument } from './ProductAddToCart.gql'
 
 const { classes, selectors } = extendableComponent('ProductAddToCart', [
   'root',

package/components/ProductCustomizable/CustomizableAreaOption.tsx

@@ -1,12 +1,13 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { CurrencyEnum } from '@graphcommerce/graphql-mesh'
+import type { CurrencyEnum } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
-import { SectionHeader, TypeRenderer } from '@graphcommerce/next-ui'
+import type { TypeRenderer } from '@graphcommerce/next-ui'
+import { SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import React from 'react'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { ProductCustomizableFragment } from './ProductCustomizable.gql'
+import type { ProductCustomizableFragment } from './ProductCustomizable.gql'
 
 export type OptionTypeRenderer = TypeRenderer<
   NonNullable<NonNullable<ProductCustomizableFragment['options']>[number]> & {

package/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -1,15 +1,11 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardProps,
-  filterNonNullableKeys,
-  SectionHeader,
-} from '@graphcommerce/next-ui'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { OptionTypeRenderer } from './CustomizableAreaOption'
+import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
 type CustomizableCheckboxOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableCheckboxOption']

package/components/ProductCustomizable/CustomizableDateOption.tsx

@@ -1,10 +1,10 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { Money } from '@graphcommerce/magento-store'
 import { SectionHeader } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { OptionTypeRenderer } from './CustomizableAreaOption'
-import { Money } from '@graphcommerce/magento-store'
+import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
 type CustomizableDateOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDateOption']

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -1,9 +1,9 @@
-import { SelectElement, useController } from '@graphcommerce/ecommerce-ui'
+import { useController } from '@graphcommerce/ecommerce-ui'
+import { Money } from '@graphcommerce/magento-store'
 import { SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Box, ListItemText, MenuItem, TextField, Typography } from '@mui/material'
+import { Box, MenuItem, TextField } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { OptionTypeRenderer } from './CustomizableAreaOption'
-import { Money } from '@graphcommerce/magento-store'
+import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
 type CustomizableDropDownOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDropDownOption']
@@ -11,7 +11,7 @@ type CustomizableDropDownOptionProps = React.ComponentProps<
 
 export function CustomizableDropDownOption(props: CustomizableDropDownOptionProps) {
   const { uid, required, index, title, dropdownValue, productPrice, currency } = props
-  const { control, getValues } = useFormAddProductsToCart()
+  const { control } = useFormAddProductsToCart()
 
   const {
     field: { onChange, value, ref, ...field },

package/components/ProductCustomizable/CustomizableFieldOption.tsx

@@ -1,10 +1,10 @@
-import { Money } from '@graphcommerce/magento-store'
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { Money } from '@graphcommerce/magento-store'
 import { SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { OptionTypeRenderer } from './CustomizableAreaOption'
+import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
 type CustomizableFieldOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableFieldOption']

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -1,15 +1,11 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardProps,
-  filterNonNullableKeys,
-  SectionHeader,
-} from '@graphcommerce/next-ui'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { OptionTypeRenderer } from './CustomizableAreaOption'
+import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
 type CustomizableMultipleOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableMultipleOption']

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -1,15 +1,11 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardProps,
-  filterNonNullableKeys,
-  SectionHeader,
-} from '@graphcommerce/next-ui'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import { OptionTypeRenderer } from './CustomizableAreaOption'
+import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
 type CustomizableRadioOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableRadioOption']

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -1,14 +1,15 @@
 import { filterNonNullableKeys, RenderType } from '@graphcommerce/next-ui'
-import { AddToCartItemSelector } from '../AddProductsToCart'
-import { ProductPagePriceFragment } from '../ProductPagePrice'
-import { CustomizableAreaOption, OptionTypeRenderer } from './CustomizableAreaOption'
+import type { AddToCartItemSelector } from '../AddProductsToCart'
+import type { ProductPagePriceFragment } from '../ProductPagePrice'
+import type { OptionTypeRenderer } from './CustomizableAreaOption'
+import { CustomizableAreaOption } from './CustomizableAreaOption'
 import { CustomizableCheckboxOption } from './CustomizableCheckboxOption'
 import { CustomizableDateOption } from './CustomizableDateOption'
 import { CustomizableDropDownOption } from './CustomizableDropDownOption'
 import { CustomizableFieldOption } from './CustomizableFieldOption'
 import { CustomizableMultipleOption } from './CustomizableMultipleOption'
 import { CustomizableRadioOption } from './CustomizableRadioOption'
-import { ProductCustomizableFragment } from './ProductCustomizable.gql'
+import type { ProductCustomizableFragment } from './ProductCustomizable.gql'
 
 const defaultRenderer = {
   CustomizableAreaOption,

package/components/ProductFiltersPro/PriceSlider.tsx

@@ -1,12 +1,14 @@
-import { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
+import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Box, Slider, SxProps, Theme, useEventCallback } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Slider, useEventCallback } from '@mui/material'
 import { useCallback } from 'react'
 import type { FilterProps } from './ProductFiltersProAggregations'
 
 export type PriceSliderProps = {
   value: FilterRangeTypeInput | null | undefined
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange: (...event: any[]) => void
   sx?: SxProps<Theme>
   options: FilterProps['aggregation']['options']

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,32 +1,23 @@
-import {
+import type {
   DeepPartial,
-  FormAutoSubmit,
-  useForm,
   UseFormProps,
   UseFormReturn,
   WatchObserver,
 } from '@graphcommerce/ecommerce-ui'
+import { FormAutoSubmit, useForm } from '@graphcommerce/ecommerce-ui'
 import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
-import { Theme, useEventCallback, useMediaQuery, useTheme } from '@mui/material'
+import type { Theme } from '@mui/material'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useEventCallback, useMediaQuery, useTheme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, {
-  BaseSyntheticEvent,
-  createContext,
-  MutableRefObject,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react'
+import type { BaseSyntheticEvent, MutableRefObject } from 'react'
+import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'
 import type { Subscription } from 'react-hook-form/dist/utils/createSubject'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'
-import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
-import {
-  ProductFilterParams,
-  ProductListParams,
-  toFilterParams,
-} from '../ProductListItems/filterTypes'
+import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import type { ProductFilterParams, ProductListParams } from '../ProductListItems/filterTypes'
+import { toFilterParams } from '../ProductListItems/filterTypes'
 
 type DataProps = {
   filterTypes: Record<string, string | undefined>

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,5 +1,5 @@
-import { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
-import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import type { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
+import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import { ProductFilterEqualChip } from './ProductFilterEqualChip'
 import { ProductFilterEqualSection } from './ProductFilterEqualSection'
 import { ProductFilterRangeChip } from './ProductFilterRangeChip'

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,16 +1,15 @@
-import { ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import { ChipOverlayOrPopper } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import {
   ProductFiltersProAggregations,
-  ProductFiltersProAggregationsProps,
   productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
-import {
-  ProductFiltersProSortSection,
-  ProductFiltersProSortSectionProps,
-} from './ProductFiltersProSortSection'
+import type { ProductFiltersProSortSectionProps } from './ProductFiltersProSortSection'
+import { ProductFiltersProSortSection } from './ProductFiltersProSortSection'
 import { activeAggregations } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -1,20 +1,15 @@
-import { Box, SxProps, Theme } from '@mui/material'
-import { ProductFilterEqualSection } from './ProductFilterEqualSection'
-import { ProductFilterRangeSection } from './ProductFilterRangeSection'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import {
   ProductFiltersProAggregations,
-  ProductFiltersProAggregationsProps,
   productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
-import {
-  ProductFiltersCategorySectionProps,
-  ProductFiltersProCategorySection,
-} from './ProductFiltersProCategorySection'
+import type { ProductFiltersCategorySectionProps } from './ProductFiltersProCategorySection'
+import { ProductFiltersProCategorySection } from './ProductFiltersProCategorySection'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
-import {
-  ProductFiltersProSortSection,
-  ProductFiltersProSortSectionProps,
-} from './ProductFiltersProSortSection'
+import type { ProductFiltersProSortSectionProps } from './ProductFiltersProSortSection'
+import { ProductFiltersProSortSection } from './ProductFiltersProSortSection'
 
 export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregationsProps &
   ProductFiltersProSortSectionProps &

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -1,13 +1,10 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
-import {
-  CategoryTreeItem,
-  UseCategoryTreeProps,
-  useCategoryTree,
-} from '@graphcommerce/magento-category'
+import type { CategoryTreeItem, UseCategoryTreeProps } from '@graphcommerce/magento-category'
+import { useCategoryTree } from '@graphcommerce/magento-category'
+import type { ActionCardAccordionProps } from '@graphcommerce/next-ui'
 import {
   ActionCard,
   ActionCardAccordion,
-  ActionCardAccordionProps,
   ActionCardList,
   Button,
   IconSvg,
@@ -15,7 +12,8 @@ import {
   responsiveVal,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
 export type ProductFiltersProCategoryAccordionProps = {
@@ -29,7 +27,7 @@ export function ProductFiltersProCategoryAccordion(props: ProductFiltersProCateg
   const { hideTitle, sx, categoryTree, onChange, defaultExpanded } = props
   const { form } = useProductFiltersPro()
 
-  const name = `filters.category_uid.in` as const
+  const name = 'filters.category_uid.in'
   const currentFilter = useWatch({ control: form.control, name })
 
   return (

package/components/ProductFiltersPro/ProductFiltersProChips.tsx

@@ -1,6 +1,6 @@
+import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import {
   ProductFiltersProAggregations,
-  ProductFiltersProAggregationsProps,
   productFiltersProChipRenderer,
 } from './ProductFiltersProAggregations'
 

package/components/ProductFiltersPro/ProductFiltersProClearAll.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
-import { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
+import type { SxProps, Theme } from '@mui/material'
+import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
 import { useProductFilterProHasFiltersApplied } from './useProductFiltersProHasFiltersApplied'
 

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 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)