@graphcommerce/magento-product 8.1.0-canary.9 → 9.0.0-canary.100

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -1,5 +1,6 @@
+import { useCartEnabled } from '@graphcommerce/magento-cart'
 import { Fab, FabProps, iconShoppingBag, iconCheckmark } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/macro'
 import { SxProps, Theme } from '@mui/material'
 import {
   useAddProductsToCartAction,
@@ -16,13 +17,17 @@ export function AddProductsToCartFab(props: AddProductsToCartFabProps) {
   const { icon = iconShoppingBag, product, sku, ...rest } = props
   const { showSuccess, ...action } = useAddProductsToCartAction(props)
 
+  const cartEnabled = useCartEnabled()
+
+  if (!cartEnabled) return null
+
   return (
     <Fab
       type='submit'
       {...rest}
       {...action}
       icon={showSuccess && !action.loading ? iconCheckmark : icon}
-      aria-label={i18n._(/* i18n*/ `Add to Cart`)}
+      aria-label={t`Add to Cart`}
     />
   )
 }

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -5,8 +5,8 @@ import {
   CrosssellsDocument,
   CrosssellsQuery,
 } from '@graphcommerce/magento-cart'
-import { ExtendableComponent, nonNullable } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme, useThemeProps } from '@mui/material'
+import { ErrorSnackbarProps, MessageSnackbarProps, nonNullable } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useMemo, useRef } from 'react'
 import { AddProductsToCartDocument, AddProductsToCartMutation } from './AddProductsToCart.gql'
@@ -22,30 +22,27 @@ import {
 } from './useFormAddProductsToCart'
 
 export type AddProductsToCartFormProps = {
-  // The props are actually used, but are passed through useThemeProps and that breaks react/no-unused-prop-types
-  // eslint-disable-next-line react/no-unused-prop-types
   children: React.ReactNode
-  // eslint-disable-next-line react/no-unused-prop-types
   sx?: SxProps<Theme>
-  // eslint-disable-next-line react/no-unused-prop-types
   redirect?: RedirectType
-
+  snackbarProps?: AddProductsToCartSnackbarProps
+
+  /**
+   * @deprecated use snackbarProps.errorSnackbar instead
+   */
+  errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
+  /**
+   * @deprecated use snackbarProps.successSnackbar instead
+   */
+  successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+  /**
+   * @deprecated use snackbarProps.disableSuccessSnackbar instead
+   */
   disableSuccessSnackbar?: boolean
-} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields> &
-  AddProductsToCartSnackbarProps
+} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields>
 
 const name = 'AddProductsToCartForm'
 
-/** Expose the component to be exendable in your theme.components */
-declare module '@mui/material/styles/components' {
-  interface Components {
-    AddProductsToCartForm?: Pick<
-      ExtendableComponent<Omit<AddProductsToCartFormProps, 'children'>>,
-      'defaultProps'
-    >
-  }
-}
-
 /**
  * Component that handles adding products to the cart. Used on the product page, but can be used for
  * any product listing.
@@ -66,8 +63,9 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
     disableSuccessSnackbar,
     errorSnackbar,
     successSnackbar,
+    snackbarProps,
     ...formProps
-  } = useThemeProps({ name, props })
+  } = props
   const router = useRouter()
   const client = useApolloClient()
   const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
@@ -79,7 +77,6 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
     AddProductsToCartDocument,
     {
       ...formProps,
-      experimental_useV2: true,
       // We're stripping out incomplete entered options.
       onBeforeSubmit: async (variables) => {
         const variables2 = (await formProps.onBeforeSubmit?.(variables)) ?? variables
@@ -90,7 +87,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
         const requestData = {
           cartId,
           cartItems: cartItems
-            .filter((cartItem) => cartItem.sku)
+            .filter((cartItem) => cartItem.sku && cartItem.quantity !== 0)
             .map(({ customizable_options, ...cartItem }) => {
               const options = Object.values(customizable_options ?? {})
                 .flat(1)
@@ -103,7 +100,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
                   ...(cartItem.selected_options ?? []).filter(Boolean),
                   ...options,
                 ],
-                entered_options: cartItem.entered_options?.filter((option) => option?.value),
+                entered_options: [
+                  ...(cartItem.entered_options
+                    ?.filter((option) => option?.value)
+                    .filter(nonNullable)
+                    .map((option) => ({ uid: option.uid, value: `${option?.value}` })) ?? []),
+                ],
               }
             }),
         }
@@ -155,12 +157,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
       <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
         {children}
       </Box>
-      {disableSuccessSnackbar ? null : (
-        <AddProductsToCartSnackbar
-          errorSnackbar={errorSnackbar}
-          successSnackbar={successSnackbar}
-        />
-      )}
+      <AddProductsToCartSnackbar
+        errorSnackbar={errorSnackbar}
+        successSnackbar={successSnackbar}
+        disableSuccessSnackbar={disableSuccessSnackbar}
+        {...snackbarProps}
+      />
     </AddProductsToCartContext.Provider>
   )
 }

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -1,18 +1,7 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
-import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
-import {
-  Button,
-  ErrorSnackbar,
-  ErrorSnackbarProps,
-  iconChevronRight,
-  IconSvg,
-  MessageSnackbar,
-  MessageSnackbarProps,
-  nonNullable,
-  useLocale,
-} from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { ErrorSnackbarProps, MessageSnackbarProps, nonNullable } from '@graphcommerce/next-ui'
 import { useMemo } from 'react'
+import { AddProductsToCartSnackbarMessage } from './AddProductsToCartSnackbarMessage'
 import { findAddedItems } from './findAddedItems'
 import { toUserErrors } from './toUserErrors'
 import { useFormAddProductsToCart } from './useFormAddProductsToCart'
@@ -20,18 +9,19 @@ import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 export type AddProductsToCartSnackbarProps = {
   errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
   successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+  disableSuccessSnackbar?: boolean
 }
 
 export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps) {
-  const { errorSnackbar, successSnackbar } = props
+  const { errorSnackbar, successSnackbar, disableSuccessSnackbar } = props
   const { error, data, redirect, control, submittedVariables } = useFormAddProductsToCart()
-  const formState = useFormState({ control })
 
-  const formatter = new Intl.ListFormat(useLocale(), { style: 'long', type: 'conjunction' })
+  const formState = useFormState({ control })
 
   const userErrors = toUserErrors(data)
 
   const showSuccess =
+    !disableSuccessSnackbar &&
     !formState.isSubmitting &&
     formState.isSubmitSuccessful &&
     !error?.message &&
@@ -43,53 +33,14 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
     [data, submittedVariables],
   )
 
-  const showErrorSnackbar = userErrors.length > 0
-
   return (
-    <>
-      {error && <ApolloCartErrorSnackbar error={error} />}
-
-      {showErrorSnackbar && (
-        <ErrorSnackbar variant='pill' severity='error' {...errorSnackbar} open={showErrorSnackbar}>
-          <>{data?.addProductsToCart?.user_errors?.map((e) => e?.message).join(', ')}</>
-        </ErrorSnackbar>
-      )}
-
-      {showSuccess && (
-        <MessageSnackbar
-          variant='pill'
-          severity='success'
-          {...successSnackbar}
-          open={showSuccess}
-          action={
-            <Button
-              href='/cart'
-              id='view-shopping-cart-button'
-              size='medium'
-              variant='pill'
-              color='secondary'
-              endIcon={<IconSvg src={iconChevronRight} />}
-              sx={{ display: 'flex' }}
-            >
-              <Trans id='View shopping cart' />
-            </Button>
-          }
-        >
-          <Trans
-            id={
-              addedItems.length === 1
-                ? '<0>{name}</0> has been added to your shopping cart!'
-                : '<0>{name}</0> have been added to your shopping cart!'
-            }
-            components={{ 0: <strong /> }}
-            values={{
-              name: formatter.format(
-                addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable),
-              ),
-            }}
-          />
-        </MessageSnackbar>
-      )}
-    </>
+    <AddProductsToCartSnackbarMessage
+      error={!formState.isSubmitting ? error : undefined}
+      showSuccess={showSuccess}
+      userErrors={data?.addProductsToCart?.user_errors.filter(nonNullable)}
+      addedItems={addedItems.map((item) => item.itemInCart?.product.name).filter(nonNullable)}
+      errorSnackbar={errorSnackbar}
+      successSnackbar={successSnackbar}
+    />
   )
 }

package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx

@@ -0,0 +1,84 @@
+import { ApolloError } from '@graphcommerce/graphql'
+import { CartUserInputError } from '@graphcommerce/graphql-mesh'
+import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
+import {
+  Button,
+  ErrorSnackbar,
+  ErrorSnackbarProps,
+  IconSvg,
+  ListFormat,
+  MessageSnackbar,
+  MessageSnackbarProps,
+  iconChevronRight,
+} from '@graphcommerce/next-ui'
+import { Plural, Trans } from '@lingui/macro'
+
+export type AddProductsToCartSnackbarMessageProps = {
+  errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
+  successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+  error?: ApolloError
+  userErrors?: Pick<CartUserInputError, 'message'>[]
+  showSuccess: boolean
+  addedItems: string[]
+}
+
+export function AddProductsToCartSnackbarMessage(props: AddProductsToCartSnackbarMessageProps) {
+  const { errorSnackbar, successSnackbar, error, userErrors, showSuccess, addedItems } = props
+
+  const showErrorSnackbar = !!userErrors?.length
+
+  return (
+    <>
+      {error && <ApolloCartErrorSnackbar error={error} />}
+
+      {showErrorSnackbar && (
+        <ErrorSnackbar variant='pill' severity='error' {...errorSnackbar} open={showErrorSnackbar}>
+          <>{userErrors.map((e) => e?.message).join(', ')}</>
+        </ErrorSnackbar>
+      )}
+
+      {showSuccess && (
+        <MessageSnackbar
+          variant='pill'
+          severity='success'
+          {...successSnackbar}
+          open={showSuccess}
+          action={
+            <Button
+              href='/cart'
+              id='view-shopping-cart-button'
+              size='medium'
+              variant='pill'
+              color='secondary'
+              endIcon={<IconSvg src={iconChevronRight} />}
+              sx={{ display: 'flex' }}
+            >
+              <Trans>View shopping cart</Trans>
+            </Button>
+          }
+        >
+          <Plural
+            value={addedItems.length}
+            one={
+              <Trans>
+                <ListFormat listStyle='long' type='conjunction'>
+                  {addedItems.map((item) => item)}
+                </ListFormat>{' '}
+                has been added to your shopping cart
+              </Trans>
+            }
+            two={
+              <Trans>
+                <ListFormat listStyle='long' type='conjunction'>
+                  {addedItems.map((item) => item)}
+                </ListFormat>{' '}
+                have been added to your shopping cart!
+              </Trans>
+            }
+            other={<Trans># products have been added to your shopping cart!</Trans>}
+          />
+        </MessageSnackbar>
+      )}
+    </>
+  )
+}

package/components/AddProductsToCart/UseAddProductsToCartAction.graphql

@@ -1,4 +1,4 @@
-fragment UseAddProductsToCartAction on ProductInterface @injectable {
+fragment UseAddProductsToCartAction on ProductInterface {
   uid
   sku
   only_x_left_in_stock

package/components/AddProductsToCart/findAddedItems.ts

@@ -47,10 +47,7 @@ export function findAddedItems(
         }
       }
 
-      const customizable_options = isTypename(cartItem, ['ConfigurableCartItem'])
-        ? cartItem.configurable_customizable
-        : cartItem.customizable_options
-
+      const { customizable_options } = cartItem
       const matchEntered = filterNonNullableKeys(itemVariable.entered_options).every(
         (requestOption) =>
           customizable_options.find(

package/components/AddProductsToCart/index.ts

@@ -4,6 +4,7 @@ export * from './AddProductsToCartError'
 export * from './AddProductsToCartFab'
 export * from './AddProductsToCartForm'
 export * from './AddProductsToCartSnackbar'
+export * from './AddProductsToCartSnackbarMessage'
 export * from './AddProductsToCartQuantity'
 export * from './useAddProductsToCartAction'
 export * from './useFormAddProductsToCart'

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -68,7 +68,8 @@ export function useAddProductsToCartAction(
       if (process.env.NODE_ENV !== 'production') {
         if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
       }
-      setValue(`cartItems.${index}.sku`, sku ?? '')
+      // 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 ?? '')
       startTransition(() => {
         onClickIncoming?.(e)
       })

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -1,11 +1,10 @@
 import { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
 import { createContext, useContext } from 'react'
-import type { LiteralUnion } from 'type-fest'
+import type { Simplify, LiteralUnion } from 'type-fest'
 import {
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'
-import { Simplify } from 'type-fest'
 
 export type RedirectType = LiteralUnion<'added' | undefined | false, `/${string}`>
 

package/components/JsonLdProduct/JsonLdProduct.graphql

@@ -1,4 +1,4 @@
-fragment JsonLdProduct on ProductInterface @inject(into: ["ProductPageItem"]) @injectable {
+fragment JsonLdProduct on ProductInterface @inject(into: ["ProductPageItem"]) {
   uid
   name
   sku

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -13,5 +13,5 @@ export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonL
   props: ProductPageJsonLdProps<T, P>,
 ) {
   const { product, render } = props
-  return <JsonLd<T> item={render(product)} />
+  return <JsonLd<T> item={render(product)} keyVal='product-jsonld' />
 }

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -9,7 +9,7 @@ import {
   IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
 import React from 'react'
 import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
@@ -93,7 +93,7 @@ export function ProductAddToCart(
           })}
           {...buttonProps}
         >
-          <Trans id='Add to Cart' />
+          <Trans>Add to Cart</Trans>
         </Button>
         {additionalButtons}
       </Box>
@@ -125,15 +125,13 @@ export function ProductAddToCart(
             color='secondary'
             endIcon={<IconSvg src={iconChevronRight} />}
           >
-            <Trans id='View shopping cart' />
+            <Trans>View shopping cart</Trans>
           </Button>
         }
       >
-        <Trans
-          id='<0>{name}</0> has been added to your shopping cart!'
-          components={{ 0: <strong /> }}
-          values={{ name }}
-        />
+        <Trans>
+          <strong>{name}</strong> has been added to your shopping cart!
+        </Trans>
       </MessageSnackbar>
     </Box>
   )

package/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -1,14 +1,13 @@
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
   ActionCardProps,
+  filterNonNullableKeys,
   SectionHeader,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Checkbox, Box } from '@mui/material'
+import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { OptionTypeRenderer } from './CustomizableAreaOption'
 

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -1,9 +1,9 @@
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
   ActionCardProps,
+  filterNonNullableKeys,
   SectionHeader,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -1,9 +1,9 @@
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
   ActionCardProps,
+  filterNonNullableKeys,
   SectionHeader,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'

package/components/ProductCustomizable/ProductCustomizable.graphql

@@ -1,4 +1,4 @@
-fragment ProductCustomizable on CustomizableProductInterface @injectable {
+fragment ProductCustomizable on CustomizableProductInterface {
   options {
     uid
     __typename

package/components/ProductCustomizable/index.ts

@@ -1 +1,2 @@
 export * from './ProductCustomizable'
+export * from './productCustomizableSelectors'

package/components/ProductCustomizable/productCustomizableSelectors.ts

@@ -0,0 +1,59 @@
+import type { PriceTypeEnum } from '@graphcommerce/graphql-mesh'
+import type { Simplify } from 'type-fest'
+import type { CustomizableAreaOptionFragment } from './CustomizableAreaOption.gql'
+import type { CustomizableCheckboxOptionFragment } from './CustomizableCheckboxOption.gql'
+import type { CustomizableDateOptionFragment } from './CustomizableDateOption.gql'
+import type { CustomizableDropDownOptionFragment } from './CustomizableDropDownOption.gql'
+import type { CustomizableFieldOptionFragment } from './CustomizableFieldOption.gql'
+import type { CustomizableFileOptionFragment } from './CustomizableFileOption.gql'
+import type { CustomizableMultipleOptionFragment } from './CustomizableMultipleOption.gql'
+import type { CustomizableRadioOptionFragment } from './CustomizableRadioOption.gql'
+import type { ProductCustomizable_SimpleProduct_Fragment } from './ProductCustomizable.gql'
+
+export type CustomizableProductOptionBase =
+  | {
+      price?: number | null | undefined
+      price_type?: PriceTypeEnum | null | undefined
+      uid?: string | null | undefined
+    }
+  | undefined
+  | null
+
+export type AnyOption = NonNullable<
+  NonNullable<ProductCustomizable_SimpleProduct_Fragment['options']>[number]
+>
+
+export type OptionValueSelector = {
+  [T in AnyOption as T['__typename']]: (
+    option: T,
+  ) => CustomizableProductOptionBase | CustomizableProductOptionBase[]
+}
+
+type MissingOptionValueSelectors = Omit<
+  OptionValueSelector,
+  keyof typeof productCustomizableSelectors
+>
+type DefinedOptionValueSelectors = Partial<
+  Pick<OptionValueSelector, keyof typeof productCustomizableSelectors>
+>
+
+type Selectors = Simplify<
+  keyof MissingOptionValueSelectors extends never
+    ? (MissingOptionValueSelectors & DefinedOptionValueSelectors) | undefined
+    : MissingOptionValueSelectors & DefinedOptionValueSelectors
+>
+
+export const productCustomizableSelectors = {
+  CustomizableAreaOption: (o: CustomizableAreaOptionFragment) => o.areaValue,
+  CustomizableCheckboxOption: (o: CustomizableCheckboxOptionFragment) => o.checkboxValue,
+  CustomizableFileOption: (o: CustomizableFileOptionFragment) => o.fileValue,
+  CustomizableDateOption: (o: CustomizableDateOptionFragment) => o.dateValue,
+  CustomizableDropDownOption: (o: CustomizableDropDownOptionFragment) => o.dropdownValue,
+  CustomizableFieldOption: (o: CustomizableFieldOptionFragment) => o.fieldValue,
+  CustomizableMultipleOption: (o: CustomizableMultipleOptionFragment) => o.multipleValue,
+  CustomizableRadioOption: (o: CustomizableRadioOptionFragment) => o.radioValue,
+}
+
+export type SelectorsProp = keyof MissingOptionValueSelectors extends never
+  ? { selectors?: Selectors }
+  : { selectors: Selectors }

package/components/ProductFiltersPro/PriceSlider.tsx

@@ -1,10 +1,9 @@
 import { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider, SxProps, Theme, useEventCallback } from '@mui/material'
 import { useCallback } from 'react'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export type PriceSliderProps = {
   value: FilterRangeTypeInput | null | undefined

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -1,18 +1,17 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import {
-  ChipOverlayOrPopper,
-  ActionCardListForm,
   ActionCard,
+  ChipOverlayOrPopper,
   filterNonNullableKeys,
-  IconSvg,
   iconCirle,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualChip(props: FilterProps) {
   const { aggregation } = props

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -1,20 +1,19 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
-  IconSvg,
-  iconCirle,
   ActionCardAccordion,
   Button,
+  filterNonNullableKeys,
+  iconCirle,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualSection(props: FilterProps) {
   const { aggregation } = props
@@ -66,7 +65,7 @@ export function ProductFilterEqualSection(props: FilterProps) {
           multiple
           layout='list'
           variant='default'
-          size='medium'
+          size='responsive'
           items={items}
           showMoreAfter={4}
         />

package/components/ProductFiltersPro/ProductFilterRangeChip.tsx

@@ -5,7 +5,7 @@ import { ChipOverlayOrPopper, extendableComponent } from '@graphcommerce/next-ui
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
 import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 const { classes } = extendableComponent('FilterRangeType', ['root', 'container', 'slider'] as const)
 

package/components/ProductFiltersPro/ProductFilterRangeSection.tsx

@@ -5,7 +5,7 @@ import { Trans } from '@lingui/react'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
 import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterRangeSection(props: FilterProps) {
   const { aggregation } = props