@graphcommerce/ecommerce-ui 9.0.0-canary.101 → 9.0.0-canary.104

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,7 +1,7 @@
-import { ApolloError } from '@graphcommerce/graphql'
+import type { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
-import { Trans } from '@lingui/react'
-import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
+import type { AlertProps, SxProps, Theme } from '@mui/material'
+import { Alert, Box } from '@mui/material'
 import { maskNetworkError } from './maskNetworkError'
 
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -1,7 +1,8 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { FullPageMessage, FullPageMessageProps } from '@graphcommerce/next-ui'
+import type { ApolloError } from '@graphcommerce/graphql'
+import type { FullPageMessageProps } from '@graphcommerce/next-ui'
+import { FullPageMessage } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { AlertProps } from '@mui/material'
+import type { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
 import { maskNetworkError } from './maskNetworkError'
 

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,5 +1,6 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { ErrorSnackbar, ErrorSnackbarProps } from '@graphcommerce/next-ui'
+import type { ApolloError } from '@graphcommerce/graphql'
+import type { ErrorSnackbarProps } from '@graphcommerce/next-ui'
+import { ErrorSnackbar } from '@graphcommerce/next-ui'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {

package/components/ApolloError/maskNetworkError.tsx

@@ -1,4 +1,4 @@
-import { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import type { ServerError, ServerParseError } from '@graphcommerce/graphql'
 import { Trans } from '@lingui/react'
 
 function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {

package/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -1,5 +1,6 @@
-import { iconChevronRight, IconSvg, Button, ButtonProps } from '@graphcommerce/next-ui'
-import { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import type { ButtonProps } from '@graphcommerce/next-ui'
+import { Button, IconSvg, iconChevronRight } from '@graphcommerce/next-ui'
+import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
 type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &

package/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

@@ -1,5 +1,6 @@
-import { iconChevronRight, LinkOrButton, LinkOrButtonProps, IconSvg } from '@graphcommerce/next-ui'
-import { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { IconSvg, LinkOrButton, iconChevronRight } from '@graphcommerce/next-ui'
+import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
 type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &

package/components/FormComponents/ActionCardListForm.tsx

@@ -1,6 +1,9 @@
-import { ActionCardList, ActionCardListProps, ActionCardProps } from '@graphcommerce/next-ui'
-import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
-import React, { MouseEventHandler, useCallback } from 'react'
+import type { ActionCardListProps, ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCardList } from '@graphcommerce/next-ui'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
+import type { MouseEventHandler } from 'react'
+import React, { useCallback } from 'react'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 

package/components/FormComponents/AutoCompleteElement.tsx

@@ -1,19 +1,9 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports */
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import {
-  Autocomplete,
-  AutocompleteProps,
-  Checkbox,
-  TextField,
-  TextFieldProps,
-  CircularProgress,
-} from '@mui/material'
+import type { AutocompleteProps, TextFieldProps } from '@mui/material'
+import { Autocomplete, Checkbox, CircularProgress, TextField } from '@mui/material'
 
 export type AutocompleteElementProps<
   F extends FieldValues,
@@ -29,6 +19,7 @@ export type AutocompleteElementProps<
   label?: TextFieldProps['label']
   showCheckbox?: boolean
   autocompleteProps?: Omit<
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     AutocompleteProps<T, M, D, any>,
     'name' | 'options' | 'loading' | 'renderInput'
   >
@@ -58,6 +49,7 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   shouldUnregister,
 }: AutocompleteElementProps<
   TFieldValues,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   AutoDefault | string | any,
   boolean | undefined,
   boolean | undefined
@@ -85,7 +77,8 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   let currentValue = multiple ? value || [] : value || null
   if (matchId) {
     currentValue = multiple
-      ? values.map((i: any) => options.find((j) => (j.id || j) === i))
+      ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        values.map((i: any) => options.find((j) => (j.id || j) === i))
       : options.find((i) => (i.id || i) === value) || null
   }
 

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -1,8 +1,9 @@
-import { useController, FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
+import type { CheckboxProps } from '@mui/material'
 import {
   Checkbox,
-  CheckboxProps,
   FormControl,
   FormControlLabel,
   FormGroup,
@@ -12,12 +13,14 @@ import {
 } from '@mui/material'
 
 export type CheckboxButtonGroupProps<T extends FieldValues> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options: { id: string | number; label: string }[] | any[]
   helperText?: string
   required?: boolean
   label?: string
   labelKey?: string
   valueKey?: string
+  // eslint-disable-next-line @typescript-eslint/ban-types
   onChange?: Function
   returnObject?: boolean
   disabled?: boolean
@@ -62,13 +65,17 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
   const parsedHelperText = error ? error.message : helperText
 
   const handleChange = (index: number | string) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const newArray: (string | number)[] | any[] = [...value]
     const exists =
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)) === -1
     if (exists) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       newArray.push(returnObject ? options.find((i) => i[valueKey] === index) : index)
     } else {
       newArray.splice(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)),
         1,
       )
@@ -93,7 +100,7 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
             )
           }
           const isChecked =
-            value.findIndex((item: any) =>
+            value.findIndex((item) =>
               returnObject ? item[valueKey] === optionKey : item === optionKey,
             ) !== -1
           return (
@@ -107,6 +114,7 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
                   value={optionKey}
                   checked={isChecked}
                   disabled={disabled}
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                   onChange={() => handleChange(optionKey)}
                 />
               }

package/components/FormComponents/CheckboxElement.tsx

@@ -1,17 +1,14 @@
-import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import {
-  Checkbox,
+import type {
   CheckboxProps,
-  FormControl,
-  FormControlLabel,
   FormControlLabelProps,
   FormControlProps,
-  FormGroup,
-  FormHelperText,
   SxProps,
   Theme,
 } from '@mui/material'
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
   label?: FormControlLabelProps['label']

package/components/FormComponents/EmailElement.tsx

@@ -1,7 +1,9 @@
-import { emailPattern, FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { emailPattern } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+import type { TextFieldElementProps } from './TextFieldElement'
+import { TextFieldElement } from './TextFieldElement'
 
 export type EmailElementProps<T extends FieldValues> = TextFieldElementProps<T>
 

package/components/FormComponents/MultiSelectElement.tsx

@@ -1,21 +1,22 @@
 /* eslint-disable no-nested-ternary */
 import { IconSvg, iconClose } from '@graphcommerce/next-ui'
-import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
+import type { FormControlProps, SelectProps } from '@mui/material'
 import {
   Checkbox,
   Chip,
   FormControl,
-  FormControlProps,
   FormHelperText,
   InputLabel,
   ListItemText,
   MenuItem,
   Select,
-  SelectProps,
 } from '@mui/material'
 
 export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, 'value'> & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options: { id: string | number; label: string }[] | any[]
   label?: string
   itemKey?: string
@@ -127,12 +128,14 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             : showChips
               ? (selected) => (
                   <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                     {((selected as any[]) || []).map((selectedValue) => (
                       <Chip
                         key={selectedValue}
                         label={selectedValue}
                         style={{ display: 'flex', flexWrap: 'wrap' }}
                         onDelete={() => {
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
                           onChange(value.filter((i: any) => i !== selectedValue))
                           // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
                         }}

package/components/FormComponents/NumberFieldElement.tsx

@@ -1,18 +1,15 @@
 import {
+  IconSvg,
   extendableComponent,
   iconMin,
   iconPlus,
-  IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { Controller, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { IconButtonProps, SxProps, Theme, TextField, TextFieldProps, Fab } from '@mui/material'
+import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
+import { Fab, TextField } from '@mui/material'
 
 export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -24,7 +21,7 @@ export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
 } & Omit<ControllerProps<T>, 'render'>
 
 type OwnerState = { size?: 'small' | 'medium' }
-const componentName = 'TextInputNumber' as const
+const componentName = 'TextInputNumber'
 const parts = ['quantity', 'quantityInput', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
   componentName,
@@ -36,6 +33,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     DownProps = {},
     UpProps = {},
     inputProps = {},
+    InputProps = {},
     sx = [],
     size = 'medium',
     control,
@@ -113,7 +111,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
       ]}
       autoComplete='off'
       InputProps={{
-        ...textFieldProps.InputProps,
+        ...InputProps,
         startAdornment: (
           <Fab
             aria-label={i18n._(/* i18n */ 'Decrease')}

package/components/FormComponents/PasswordElement.tsx

@@ -1,8 +1,11 @@
-import { iconEye, iconEyeCrossed, IconSvg } from '@graphcommerce/next-ui'
-import { FieldValues } from '@graphcommerce/react-hook-form'
-import { IconButton, IconButtonProps, InputAdornment } from '@mui/material'
-import { MouseEvent, useState } from 'react'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+import { IconSvg, iconEye, iconEyeCrossed } from '@graphcommerce/next-ui'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import type { IconButtonProps } from '@mui/material'
+import { IconButton, InputAdornment } from '@mui/material'
+import type { MouseEvent } from 'react'
+import { useState } from 'react'
+import type { TextFieldElementProps } from './TextFieldElement'
+import { TextFieldElement } from './TextFieldElement'
 
 export type PasswordElementProps<T extends FieldValues> = TextFieldElementProps<T> & {
   iconColor?: IconButtonProps['color']

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -1,6 +1,8 @@
-import { useWatch, FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { useWatch } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { PasswordElement, PasswordElementProps } from './PasswordElement'
+import type { PasswordElementProps } from './PasswordElement'
+import { PasswordElement } from './PasswordElement'
 
 export type PasswordRepeatElementProps<T extends FieldValues> = PasswordElementProps<T> & {
   passwordFieldName: PasswordElementProps<T>['name']

package/components/FormComponents/RadioButtonGroup.tsx

@@ -1,4 +1,5 @@
-import { useController, FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
   FormControl,
@@ -9,9 +10,10 @@ import {
   RadioGroup,
   useTheme,
 } from '@mui/material'
-import { ChangeEvent } from 'react'
+import type { ChangeEvent } from 'react'
 
 export type RadioButtonGroupProps<T extends FieldValues> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options: { label: string; id: string | number }[] | any[]
   helperText?: string
   required?: boolean
@@ -20,6 +22,7 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   valueKey?: string
   type?: 'number' | 'string'
   emptyOptionLabel?: 'string'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?: (value: any) => void
   returnObject?: boolean
   row?: boolean
@@ -95,7 +98,7 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
             value=''
           />
         )}
-        {options.map((option: any) => {
+        {options.map((option) => {
           const optionKey = option[valueKey]
           if (!optionKey) {
             console.error(

package/components/FormComponents/SelectElement.tsx

@@ -1,12 +1,9 @@
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { MenuItem, TextField, TextFieldProps } from '@mui/material'
+import type { TextFieldProps } from '@mui/material'
+import { MenuItem, TextField } from '@mui/material'
 
 type OptionBase = { id: string | number; label: string | number }
 
@@ -87,6 +84,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
           ),
       }}
     >
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
       {isNativeSelect && <option />}
       {options.map((item) => (
         <ChildComponent key={item.id} value={item.id}>

package/components/FormComponents/SliderElement.tsx

@@ -1,18 +1,8 @@
-import {
-  ControllerProps,
-  FieldError,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import {
-  FormControl,
-  FormControlProps,
-  FormHelperText,
-  FormLabel,
-  Slider,
-  SliderProps,
-} from '@mui/material'
+import type { FormControlProps, SliderProps } from '@mui/material'
+import { FormControl, FormHelperText, FormLabel, Slider } from '@mui/material'
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string

package/components/FormComponents/SwitchElement.tsx

@@ -1,5 +1,7 @@
-import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
-import { FormControlLabel, FormControlLabelProps, Switch } from '@mui/material'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
+import type { FormControlLabelProps } from '@mui/material'
+import { FormControlLabel, Switch } from '@mui/material'
 
 type IProps = Omit<FormControlLabelProps, 'control'>
 

package/components/FormComponents/TelephoneElement.tsx

@@ -1,6 +1,8 @@
-import { FieldValues, phonePattern } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { phonePattern } from '@graphcommerce/react-hook-form'
 import { Trans, t } from '@lingui/macro'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+import type { TextFieldElementProps } from './TextFieldElement'
+import { TextFieldElement } from './TextFieldElement'
 
 export type TelephoneElementProps<T extends FieldValues> = TextFieldElementProps<T>
 

package/components/FormComponents/TextFieldElement.tsx

@@ -1,13 +1,10 @@
 /* eslint-disable no-nested-ternary */
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  FieldValues,
-  UseControllerProps,
-  emailPattern,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import { emailPattern, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { TextField, TextFieldProps } from '@mui/material'
+import type { TextFieldProps } from '@mui/material'
+import { TextField } from '@mui/material'
 import React, { useState } from 'react'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,21 +1,15 @@
-import {
-  ControllerProps,
-  FieldError,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
+import type { FormLabelProps, ToggleButtonGroupProps, ToggleButtonProps } from '@mui/material'
 import {
   FormControl,
   FormHelperText,
   FormLabel,
-  FormLabelProps,
   ToggleButton,
   ToggleButtonGroup,
-  ToggleButtonGroupProps,
-  ToggleButtonProps,
 } from '@mui/material'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
   id: number | string
@@ -87,9 +81,9 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
           }
         }}
       >
-        {options.map(({ label, id, ...toggleProps }) => (
+        {options.map(({ label: labelVal, id, ...toggleProps }) => (
           <ToggleButton value={id} {...toggleProps} key={id}>
-            {label}
+            {labelVal}
           </ToggleButton>
         ))}
       </ToggleButtonGroup>

package/components/PreviewMode/LightTooltip.tsx

@@ -1,4 +1,4 @@
-import { styled, Tooltip, tooltipClasses } from '@mui/material'
+import { Tooltip, styled, tooltipClasses } from '@mui/material'
 
 export const LightTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
   <Tooltip {...props} classes={{ popper: className }} />

package/components/PreviewMode/PreviewMode.tsx

@@ -1,4 +1,4 @@
-import { PreviewData } from '@graphcommerce/graphql'
+import type { PreviewData } from '@graphcommerce/graphql'
 import {
   IconSvg,
   MessageSnackbar,
@@ -47,6 +47,7 @@ function PreviewModeEnabled() {
   const revalidateHandler = form.handleSubmit((formValues) => {
     const url = getPreviewUrl()
     Object.entries(formValues).forEach(([key, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       url.searchParams.append(key, `${value}`)
     })
     url.searchParams.append('action', 'revalidate')

package/components/PreviewMode/PreviewModeActions.tsx

@@ -1,6 +1,6 @@
 export type PreviewModeActionsProps = Record<string, unknown>
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function PreviewModeActions(props: PreviewModeActionsProps) {
-  const {} = props
-  return <></>
+  return null
 }

package/components/PreviewMode/PreviewModeToolbar.tsx

@@ -1,6 +1,6 @@
 export type PreviewModeToolbarProps = Record<string, unknown>
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function PreviewModeToolbar(props: PreviewModeToolbarProps) {
-  const {} = props
   return null
 }

package/components/PreviewMode/previewModeDefaults.ts

@@ -1,4 +1,4 @@
-import { PreviewData } from '@graphcommerce/graphql'
+import type { PreviewData } from '@graphcommerce/graphql'
 
 export function previewModeDefaults(): PreviewData {
   return {}

package/components/PreviewMode/usePreviewModeForm.ts

@@ -1,4 +1,4 @@
-import { PreviewData } from '@graphcommerce/graphql'
+import type { PreviewData } from '@graphcommerce/graphql'
 import { useFormContext } from '@graphcommerce/react-hook-form'
 
 export function usePreviewModeForm() {

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,19 +1,16 @@
-import { QueryResult } from '@graphcommerce/graphql'
+import type { QueryResult } from '@graphcommerce/graphql'
 import { useIsSSR } from '@graphcommerce/next-ui'
 import React from 'react'
 
 export type WaitForQueriesProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
-  /**
-   * @deprecated Will be automatically correct.
-   */
-  noSsr?: boolean
   children: React.ReactNode
   fallback?: React.ReactNode
 }
 
 /** Shows the fallback during: SSR, Hydration and Query Loading. */
-export const WaitForQueries = (props: WaitForQueriesProps) => {
+export function WaitForQueries(props: WaitForQueriesProps) {
   const { waitFor, fallback, children } = props
 
   const mounted = !useIsSSR()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.101",
+  "version": "9.0.0-canary.104",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,17 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/graphql": "^9.0.0-canary.101",
-    "@graphcommerce/next-ui": "^9.0.0-canary.101",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.101",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.104",
+    "@graphcommerce/graphql": "^9.0.0-canary.104",
+    "@graphcommerce/next-ui": "^9.0.0-canary.104",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.104",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.104",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.104",
     "@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/route/preview.ts

@@ -1,5 +1,5 @@
-import { PreviewData } from '@graphcommerce/graphql'
-import { NextApiRequest, NextApiResponse } from 'next'
+import type { PreviewData } from '@graphcommerce/graphql'
+import type { NextApiRequest, NextApiResponse } from 'next'
 import { previewModeDefaults } from '../components/PreviewMode/previewModeDefaults'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {