@graphcommerce/magento-product-configurable 9.0.0-canary.100 → 9.0.0-canary.103

package/ConfigurableCartItem/ConfigurableCartItem.tsx

@@ -1,5 +1,6 @@
-import { CartItem, CartItemProps } from '@graphcommerce/magento-cart-items'
-import { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
+import type { CartItemProps } from '@graphcommerce/magento-cart-items'
+import { CartItem } from '@graphcommerce/magento-cart-items'
+import type { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 import { OptionsList } from './OptionsList'
 
 export function ConfigurableCartItem(props: ConfigurableCartItemFragment & CartItemProps) {

package/ConfigurableCartItem/OptionsList.tsx

@@ -1,12 +1,13 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 
 type CartItemOptionsListProps = Partial<ConfigurableCartItemFragment> & {
   sx?: SxProps<Theme>
 }
 
-const name = 'ColorSwatchData' as const
+const name = 'ColorSwatchData'
 const parts = ['root', 'option'] as const
 const { classes } = extendableComponent(name, parts)
 

package/ConfigurableContext/ConfigurableContext.tsx

@@ -1,14 +1,6 @@
-import {
-  useContext,
-  createContext,
-  Context,
-  useState,
-  Dispatch,
-  SetStateAction,
-  useMemo,
-  useCallback,
-} from 'react'
-import { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
+import type { Context, Dispatch, SetStateAction } from 'react'
+import { useContext, createContext, useState, useMemo, useCallback } from 'react'
+import type { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
 import cheapestVariant from './cheapestVariant'
 
 type ConfigurableProductFormProps = ConfigurableProductFormFragment & {

package/ConfigurableContext/cheapestVariant.ts

@@ -1,4 +1,4 @@
-import { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
+import type { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
 
 type Variants = NonNullable<ConfigurableProductFormFragment['variants']>
 

package/ConfigurableOptions/ConfigurableOptions.tsx

@@ -1,4 +1,5 @@
-import { Controller, FieldErrors, UseControllerProps } from '@graphcommerce/ecommerce-ui'
+import type { FieldErrors, UseControllerProps } from '@graphcommerce/ecommerce-ui'
+import { Controller } from '@graphcommerce/ecommerce-ui'
 import {
   RenderType,
   SectionHeader,
@@ -6,13 +7,15 @@ import {
   ToggleButtonGroup,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { BaseTextFieldProps, FormHelperText, SxProps } from '@mui/material'
+import type { BaseTextFieldProps, SxProps } from '@mui/material'
+import { FormHelperText } from '@mui/material'
 import React from 'react'
-import { Selected, useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
+import type { Selected } from '../ConfigurableContext/ConfigurableContext'
+import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
 import { ColorSwatchData } from '../Swatches/ColorSwatchData'
 import { ImageSwatchData } from '../Swatches/ImageSwatchData'
 import { TextSwatchData } from '../Swatches/TextSwatchData'
-import { SwatchTypeRenderer, SwatchSize } from '../Swatches/types'
+import type { SwatchTypeRenderer, SwatchSize } from '../Swatches/types'
 
 export type ConfigurableOptionsInputProps = {
   sku: string
@@ -27,7 +30,7 @@ export type ConfigurableOptionsInputProps = {
 
 const renderer: SwatchTypeRenderer = { TextSwatchData, ImageSwatchData, ColorSwatchData }
 
-const compName = 'ConfigurableOptionsInput' as const
+const compName = 'ConfigurableOptionsInput'
 const parts = ['buttonGroup', 'button', 'helperText'] as const
 const { classes } = extendableComponent(compName, parts)
 
@@ -76,7 +79,7 @@ export function ConfigurableOptionsInput(props: ConfigurableOptionsInputProps) {
                   exclusive
                   onChange={(_, val: string | number) => {
                     onChange(val)
-                    select((prev) => ({ ...prev, [attribute_code]: val } as Selected))
+                    select((prev) => ({ ...prev, [attribute_code]: val }) as Selected)
                   }}
                   ref={ref}
                   onBlur={onBlur}

package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -9,18 +9,15 @@ import {
   IconSvg,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Divider, Typography, Alert, Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Divider, Typography, Alert, Box } from '@mui/material'
 import React from 'react'
 import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
 import cheapestVariant from '../ConfigurableContext/cheapestVariant'
-import {
-  ConfigurableOptionsInput,
-  ConfigurableOptionsInputProps,
-} from '../ConfigurableOptions/ConfigurableOptions'
-import {
-  ConfigurableProductAddToCartDocument,
-  ConfigurableProductAddToCartMutationVariables,
-} from '../graphql/ConfigurableProductAddToCart.gql'
+import type { ConfigurableOptionsInputProps } from '../ConfigurableOptions/ConfigurableOptions'
+import { ConfigurableOptionsInput } from '../ConfigurableOptions/ConfigurableOptions'
+import type { ConfigurableProductAddToCartMutationVariables } from '../graphql/ConfigurableProductAddToCart.gql'
+import { ConfigurableProductAddToCartDocument } from '../graphql/ConfigurableProductAddToCart.gql'
 
 type ConfigurableProductAddToCartProps = {
   variables: Omit<ConfigurableProductAddToCartMutationVariables, 'cartId' | 'selectedOptions'>
@@ -35,7 +32,7 @@ type ConfigurableProductAddToCartProps = {
   >
 }
 
-const compName = 'ConfigurableOptionsInput' as const
+const compName = 'ConfigurableOptionsInput'
 const parts = ['form', 'button', 'finalPrice', 'quantity', 'divider', 'buttonWrapper'] as const
 const { classes } = extendableComponent(compName, parts)
 

package/SwatchList.tsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { ColorSwatchData } from './Swatches/ColorSwatchData'
 import { ImageSwatchData } from './Swatches/ImageSwatchData'
 import { TextSwatchData } from './Swatches/TextSwatchData'
-import { SwatchSize, SwatchTypeRenderer } from './Swatches/types'
-import { ProductListItemConfigurableFragment } from './components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
+import type { SwatchSize, SwatchTypeRenderer } from './Swatches/types'
+import type { ProductListItemConfigurableFragment } from './components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
 
 type SwatchListProps = {
   attributes?: string[]

package/Swatches/ColorSwatchData.tsx

@@ -1,7 +1,8 @@
 import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ColorSwatchDataFragment } from './ColorSwatchData.gql'
-import { SwatchDataProps } from './types'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ColorSwatchDataFragment } from './ColorSwatchData.gql'
+import type { SwatchDataProps } from './types'
 
 type ColorSwatchDataProps = ColorSwatchDataFragment &
   SwatchDataProps & {
@@ -9,7 +10,7 @@ type ColorSwatchDataProps = ColorSwatchDataFragment &
   }
 
 type OwnerState = Pick<SwatchDataProps, 'size'>
-const name = 'ColorSwatchData' as const
+const name = 'ColorSwatchData'
 const parts = ['root', 'color', 'label'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/Swatches/ImageSwatchData.tsx

@@ -1,13 +1,14 @@
 import { Image } from '@graphcommerce/image'
 import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ImageSwatchDataFragment } from './ImageSwatchData.gql'
-import { SwatchDataProps } from './types'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ImageSwatchDataFragment } from './ImageSwatchData.gql'
+import type { SwatchDataProps } from './types'
 
 type ImageSwatchDataProps = ImageSwatchDataFragment & SwatchDataProps & { sx?: SxProps<Theme> }
 
 type OwnerState = Pick<SwatchDataProps, 'size'>
-const name = 'ColorSwatchData' as const
+const name = 'ColorSwatchData'
 const parts = ['root', 'image', 'label'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/Swatches/TextSwatchData.tsx

@@ -1,13 +1,14 @@
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { TextSwatchDataFragment } from './TextSwatchData.gql'
-import { SwatchDataProps } from './types'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { TextSwatchDataFragment } from './TextSwatchData.gql'
+import type { SwatchDataProps } from './types'
 
 type TextSwatchDataProps = TextSwatchDataFragment & SwatchDataProps & { sx?: SxProps<Theme> }
 
 type OwnerState = Pick<SwatchDataProps, 'size'>
-const name = 'TextSwatchData' as const
+const name = 'TextSwatchData'
 const parts = ['root', 'value', 'price', 'label', 'storeLabel', 'content'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/Swatches/types.ts

@@ -1,7 +1,7 @@
-import { MoneyProps } from '@graphcommerce/magento-store'
-import { TypeRenderer } from '@graphcommerce/next-ui'
-import { ProductListItemConfigurableFragment } from '../components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
-import { SwatchDataFragment } from './SwatchData.gql'
+import type { MoneyProps } from '@graphcommerce/magento-store'
+import type { TypeRenderer } from '@graphcommerce/next-ui'
+import type { ProductListItemConfigurableFragment } from '../components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
+import type { SwatchDataFragment } from './SwatchData.gql'
 
 type ConfigurableOption = NonNullable<
   NonNullable<ProductListItemConfigurableFragment['configurable_options']>[0]

package/components/ConfigurableCartItemOptions/ConfigurableCartItemOptions.tsx

@@ -1,6 +1,7 @@
-import { CartItemFragment, SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
+import type { CartItemFragment } from '@graphcommerce/magento-cart-items'
+import { SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
 import { Box } from '@mui/material'
-import { ConfigurableCartItemFragment } from '../../ConfigurableCartItem/ConfigurableCartItem.gql'
+import type { ConfigurableCartItemFragment } from '../../ConfigurableCartItem/ConfigurableCartItem.gql'
 
 type ConfigurableActionCartItemProps = ConfigurableCartItemFragment & CartItemFragment
 

package/components/ConfigurableOptionValue/ConfigurableOptionValue.tsx

@@ -1,9 +1,9 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { RenderType } from '@graphcommerce/next-ui'
 import { ConfigurableOptionValueColor } from '../ConfigurableOptionValueColor'
 import { ConfigurableOptionValueImage } from '../ConfigurableOptionValueImage/ConfigurableOptionValueImage'
 import { ConfigurableOptionValueText } from '../ConfigurableOptionValueText/ConfigurableOptionValueText'
-import { ConfigurableOptionValueFragment } from './ConfigurableOptionValue.gql'
+import type { ConfigurableOptionValueFragment } from './ConfigurableOptionValue.gql'
 
 export type ConfigurabeOptionValueProps = ActionCardItemRenderProps<ConfigurableOptionValueFragment>
 

package/components/ConfigurableOptionValueColor/ConfigurableOptionValueColor.tsx

@@ -1,8 +1,8 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { ActionCard } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import { swatchSizes } from '../ConfigurableOptionValueImage'
-import { ConfigurableOptionValueColorFragment } from './ConfigurableOptionValueColor.gql'
+import type { ConfigurableOptionValueColorFragment } from './ConfigurableOptionValueColor.gql'
 
 export type ConfigurableOptionValueColorProps =
   ActionCardItemRenderProps<ConfigurableOptionValueColorFragment>

package/components/ConfigurableOptionValueImage/ConfigurableOptionValueImage.tsx

@@ -1,9 +1,9 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { Image } from '@graphcommerce/image'
 import { ActionCard, responsiveVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
-import { ConfigurableOptionValueImageFragment } from './ConfigurableOptionValueImage.gql'
+import type { ConfigurableOptionValueImageFragment } from './ConfigurableOptionValueImage.gql'
 
 export type ConfigurableOptionValueImageProps =
   ActionCardItemRenderProps<ConfigurableOptionValueImageFragment>

package/components/ConfigurableOptionValueText/ConfigurableOptionValueText.tsx

@@ -1,6 +1,6 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { ActionCard } from '@graphcommerce/next-ui'
-import { ConfigurableOptionValueTextFragment } from './ConfigurableOptionValueText.gql'
+import type { ConfigurableOptionValueTextFragment } from './ConfigurableOptionValueText.gql'
 
 export type ConfigurableOptionValueTextProps =
   ActionCardItemRenderProps<ConfigurableOptionValueTextFragment>

package/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -1,15 +1,16 @@
-import { ActionCardItemBase, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
-import {
-  AddProductsToCartFields,
-  useFormAddProductsToCart,
-} from '@graphcommerce/magento-product/components'
+import type { ActionCardItemBase } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import type { AddProductsToCartFields } from '@graphcommerce/magento-product/components'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product/components'
 import { filterNonNullableKeys, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
-import { useConfigurableOptionsForSelection, UseConfigurableOptionsSelection } from '../../hooks'
-import {
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import type { UseConfigurableOptionsSelection } from '../../hooks'
+import { useConfigurableOptionsForSelection } from '../../hooks'
+import type {
   ConfigurableOptionValue,
   ConfigurableOptionValueFragment,
 } from '../ConfigurableOptionValue'

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -1,10 +1,13 @@
-import { ActionCardRequireOptionSelection } from '@graphcommerce/ecommerce-ui'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
-import { filterNonNullableKeys, ActionCardListProps, useLocale } from '@graphcommerce/next-ui'
+import type { ActionCardRequireOptionSelection } from '@graphcommerce/ecommerce-ui'
+import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import type { ActionCardListProps } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, useLocale } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
-import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import type { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
 import { useConfigurableOptionsSelection } from '../../hooks'
 import { ConfigurableOptionValue } from '../ConfigurableOptionValue/ConfigurableOptionValue'
 import { ConfigurableProductOption } from './ConfigurableProductOption'

package/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx

@@ -1,10 +1,7 @@
-import {
-  ProductListItem,
-  OverlayAreaKeys,
-  ProductListItemProps,
-} from '@graphcommerce/magento-product'
+import type { OverlayAreaKeys, ProductListItemProps } from '@graphcommerce/magento-product'
+import { ProductListItem } from '@graphcommerce/magento-product'
 import { SwatchList } from '../../SwatchList'
-import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
+import type { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
 
 export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
   ProductListItemProps & {

package/hooks/useConfigurableOptionsSelection.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { findByTypename, nonNullable } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { GetConfigurableOptionsSelectionDocument } from '../graphql/GetConfigurableOptionsSelection.gql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.100",
+  "version": "9.0.0-canary.103",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,28 +12,28 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.100",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
-    "@graphcommerce/graphql": "^9.0.0-canary.100",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.100",
-    "@graphcommerce/image": "^9.0.0-canary.100",
-    "@graphcommerce/lingui-next": "9.0.0-canary.100",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.100",
-    "@graphcommerce/magento-cart-items": "^9.0.0-canary.100",
-    "@graphcommerce/magento-category": "^9.0.0-canary.100",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.100",
-    "@graphcommerce/magento-product": "^9.0.0-canary.100",
-    "@graphcommerce/magento-product-simple": "^9.0.0-canary.100",
-    "@graphcommerce/magento-store": "^9.0.0-canary.100",
-    "@graphcommerce/next-ui": "^9.0.0-canary.100",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.100",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.103",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.103",
+    "@graphcommerce/graphql": "^9.0.0-canary.103",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.103",
+    "@graphcommerce/image": "^9.0.0-canary.103",
+    "@graphcommerce/lingui-next": "9.0.0-canary.103",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.103",
+    "@graphcommerce/magento-cart-items": "^9.0.0-canary.103",
+    "@graphcommerce/magento-category": "^9.0.0-canary.103",
+    "@graphcommerce/magento-customer": "^9.0.0-canary.103",
+    "@graphcommerce/magento-product": "^9.0.0-canary.103",
+    "@graphcommerce/magento-product-simple": "^9.0.0-canary.103",
+    "@graphcommerce/magento-store": "^9.0.0-canary.103",
+    "@graphcommerce/next-ui": "^9.0.0-canary.103",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.103",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.103",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.103",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx

@@ -11,9 +11,9 @@ export const config: PluginConfig = {
   ifConfig: 'configurableVariantValues.content',
 }
 
-export const ProductPageDescription = (
+export function ProductPageDescription(
   props: PluginProps<ProductPageDescriptionProps & AddToCartItemSelector>,
-) => {
+) {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
 

package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx

@@ -1,9 +1,6 @@
 import { mergeDeep } from '@graphcommerce/graphql'
-import {
-  productLink,
-  type AddToCartItemSelector,
-  ProductPageMetaProps,
-} from '@graphcommerce/magento-product'
+import type { ProductPageMetaProps } from '@graphcommerce/magento-product'
+import { productLink, type AddToCartItemSelector } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'

package/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx

@@ -1,4 +1,4 @@
-import { AddToCartItemSelector, ProductPagePriceProps } from '@graphcommerce/magento-product'
+import type { AddToCartItemSelector, ProductPagePriceProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 

package/test/addConfigurableProductToCart.ts

@@ -2,7 +2,8 @@
 import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
 import { CreateEmptyCartDocument } from '@graphcommerce/magento-cart/hooks/CreateEmptyCart.gql'
 import { ProductAddToCartDocument } from '@graphcommerce/magento-product'
-import { Page, expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 export async function addConfigurableProductToCart(page: Page, productUrl: string) {
   await page.goto(productUrl)

package/utils/defaultConfigurableOptionsSelection.ts

@@ -1,8 +1,8 @@
-import { ApolloClient } from '@graphcommerce/graphql'
-import { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
+import type { ApolloClient } from '@graphcommerce/graphql'
+import type { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
 import { filterNonNullableKeys, findByTypename, nonNullable } from '@graphcommerce/next-ui'
 import { GetConfigurableOptionsSelectionDocument } from '../graphql'
-import { DefaultConfigurableOptionsSelectionFragment } from './DefaultConfigurableOptionsSelection.gql'
+import type { DefaultConfigurableOptionsSelectionFragment } from './DefaultConfigurableOptionsSelection.gql'
 
 type BaseQuery =
   | { products?: DefaultConfigurableOptionsSelectionFragment | null | undefined }