@graphcommerce/magento-compare 9.0.0-canary.99 → 9.0.0

package/CHANGELOG.md

@@ -1,82 +1,52 @@
 # @graphcommerce/magento-compare
 
-## 9.0.0-canary.99
+## 9.0.0
 
-## 9.0.0-canary.98
-
-## 9.0.0-canary.97
-
-## 9.0.0-canary.96
-
-## 9.0.0-canary.95
-
-## 9.0.0-canary.94
-
-## 9.0.0-canary.93
-
-## 9.0.0-canary.92
-
-## 9.0.0-canary.91
-
-## 9.0.0-canary.90
-
-## 9.0.0-canary.89
-
-## 9.0.0-canary.88
-
-## 9.0.0-canary.87
-
-## 9.0.0-canary.86
-
-## 9.0.0-canary.85
-
-## 9.0.0-canary.84
-
-## 9.0.0-canary.83
+### Patch Changes
 
-## 9.0.0-canary.82
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of `useFormPersist` to the `<FormPersist/>` component to prevent rerenders. ([@FrankHarland](https://github.com/FrankHarland))
 
-## 9.0.0-canary.81
+- [#2331](https://github.com/graphcommerce-org/graphcommerce/pull/2331) [`702bfc9`](https://github.com/graphcommerce-org/graphcommerce/commit/702bfc93566c9745546988e57988431d5d4d8cb0) - Moved plugins to new format ([@paales](https://github.com/paales))
 
-## 9.0.0-canary.80
+- [#2305](https://github.com/graphcommerce-org/graphcommerce/pull/2305) [`77e8297`](https://github.com/graphcommerce-org/graphcommerce/commit/77e82976816994336c616208a651cb18ce9ea270) - Fix bug with persist not applying saved changes by moving `<FromPersist/>` below the form components. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
 
-## 9.0.0-canary.79
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`cb8d2f0`](https://github.com/graphcommerce-org/graphcommerce/commit/cb8d2f0059d64242260e30ce34655868f204ef4c) - Made all component prop types exported ([@bramvanderholst](https://github.com/bramvanderholst))
 
-## 9.0.0-canary.78
+## 9.0.0-canary.118
 
-## 9.0.0-canary.77
+## 9.0.0-canary.117
 
-## 9.0.0-canary.76
+## 9.0.0-canary.116
 
-## 9.0.0-canary.75
+## 9.0.0-canary.115
 
-## 9.0.0-canary.74
+## 9.0.0-canary.114
 
-## 9.0.0-canary.73
+## 9.0.0-canary.113
 
-## 9.0.0-canary.72
+## 9.0.0-canary.112
 
-## 9.0.0-canary.71
+## 9.0.0-canary.111
 
-## 9.0.0-canary.70
+## 9.0.0-canary.110
 
-## 9.0.0-canary.69
+## 9.0.0-canary.109
 
-## 9.0.0-canary.68
+## 9.0.0-canary.108
 
-## 9.0.0-canary.67
+### Patch Changes
 
-## 9.0.0-canary.66
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`cb8d2f0`](https://github.com/graphcommerce-org/graphcommerce/commit/cb8d2f0059d64242260e30ce34655868f204ef4c) - Made all component prop types exported ([@bramvanderholst](https://github.com/bramvanderholst))
 
-## 9.0.0-canary.65
+## 9.0.0-canary.107
 
-## 9.0.0-canary.64
+## 9.0.0-canary.106
 
-## 9.0.0-canary.63
+## 9.0.0-canary.105
 
-## 9.0.0-canary.62
+## 9.0.0-canary.104
 
-## 9.0.0-canary.61
+## 9.0.0-canary.103
 
 ## 9.0.0-canary.60
 
@@ -84,426 +54,24 @@
 
 - [#2331](https://github.com/graphcommerce-org/graphcommerce/pull/2331) [`702bfc9`](https://github.com/graphcommerce-org/graphcommerce/commit/702bfc93566c9745546988e57988431d5d4d8cb0) - Moved plugins to new format ([@paales](https://github.com/paales))
 
-## 9.0.0-canary.59
-
-## 9.0.0-canary.58
-
-## 9.0.0-canary.57
-
-## 9.0.0-canary.56
-
-## 9.0.0-canary.55
-
-## 9.0.0-canary.54
-
-## 8.1.0-canary.53
-
-## 8.1.0-canary.52
-
-## 8.1.0-canary.51
-
-## 8.1.0-canary.50
-
-## 8.1.0-canary.49
-
-## 8.1.0-canary.48
-
-## 8.1.0-canary.47
-
-## 8.1.0-canary.46
-
-## 8.1.0-canary.45
-
-## 8.1.0-canary.44
-
-## 8.1.0-canary.43
-
-## 8.1.0-canary.42
-
-## 8.1.0-canary.41
-
-## 8.1.0-canary.40
-
-## 8.1.0-canary.39
-
 ## 8.1.0-canary.38
 
 ### Patch Changes
 
 - [#2305](https://github.com/graphcommerce-org/graphcommerce/pull/2305) [`77e8297`](https://github.com/graphcommerce-org/graphcommerce/commit/77e82976816994336c616208a651cb18ce9ea270) - Fix bug with persist not applying saved changes by moving <FromPersist/> below the form components ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
 
-## 8.1.0-canary.37
-
-## 8.1.0-canary.36
-
-## 8.1.0-canary.35
-
-## 8.1.0-canary.34
-
-## 8.1.0-canary.33
-
-## 8.1.0-canary.32
-
-## 8.1.0-canary.31
-
-## 8.1.0-canary.30
-
-## 8.1.0-canary.29
-
-## 8.1.0-canary.28
-
-## 8.1.0-canary.27
-
-## 8.1.0-canary.26
-
-## 8.1.0-canary.25
-
-## 8.1.0-canary.24
-
-## 8.1.0-canary.23
-
-## 8.1.0-canary.22
-
-## 8.1.0-canary.21
-
-## 8.1.0-canary.20
-
-## 8.1.0-canary.19
-
-## 8.1.0-canary.18
-
-## 8.1.0-canary.17
-
-## 8.1.0-canary.16
-
-## 8.1.0-canary.15
-
-## 8.1.0-canary.14
-
-## 8.1.0-canary.13
-
-## 8.1.0-canary.12
-
-## 8.1.0-canary.11
-
-## 8.1.0-canary.10
-
-## 8.1.0-canary.9
-
-## 8.1.0-canary.8
-
-## 8.1.0-canary.7
-
-## 8.1.0-canary.6
-
-## 8.1.0-canary.5
-
-## 8.0.6-canary.4
-
-## 8.0.6-canary.3
-
 ## 8.0.6-canary.2
 
 ### Patch Changes
 
 - [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders. ([@FrankHarland](https://github.com/FrankHarland))
 
-## 8.0.6-canary.1
-
-## 8.0.6-canary.0
-
-## 8.0.5
-
-## 8.0.5-canary.10
-
-## 8.0.5-canary.9
-
-## 8.0.5-canary.8
-
-## 8.0.5-canary.7
-
-## 8.0.5-canary.6
-
-## 8.0.5-canary.5
-
-## 8.0.5-canary.4
-
-## 8.0.5-canary.3
-
-## 8.0.5-canary.2
-
-## 8.0.5-canary.1
-
-## 8.0.5-canary.0
-
-## 8.0.4
-
-## 8.0.4-canary.1
-
-## 8.0.4-canary.0
-
-## 8.0.3
-
-## 8.0.3-canary.6
-
-## 8.0.3-canary.5
-
-## 8.0.3-canary.4
-
-## 8.0.3-canary.3
-
-## 8.0.3-canary.2
-
-## 8.0.3-canary.1
-
-## 8.0.3-canary.0
-
-## 8.0.2
-
-## 8.0.2-canary.3
-
-## 8.0.2-canary.2
-
-## 8.0.2-canary.1
-
-## 8.0.2-canary.0
-
-## 8.0.1
-
-## 8.0.1-canary.4
-
-## 8.0.1-canary.3
-
-## 8.0.1-canary.2
-
-## 8.0.1-canary.1
-
-## 8.0.1-canary.0
-
 ## 8.0.0
 
 ### Patch Changes
 
 - [#2132](https://github.com/graphcommerce-org/graphcommerce/pull/2132) [`993f655`](https://github.com/graphcommerce-org/graphcommerce/commit/993f6559226f0ce2b63f372ccfc1409805b06a8d) - Compare button didn't have a proper hover state on the product page. ([@action-simon](https://github.com/action-simon))
 
-## 8.0.0-canary.100
-
-## 8.0.0-canary.99
-
-## 8.0.0-canary.98
-
-## 8.0.0-canary.97
-
-## 8.0.0-canary.96
-
-## 8.0.0-canary.95
-
-## 8.0.0-canary.94
-
-## 8.0.0-canary.93
-
-## 8.0.0-canary.92
-
-## 8.0.0-canary.91
-
-## 8.0.0-canary.90
-
-## 8.0.0-canary.89
-
-## 8.0.0-canary.88
-
-## 8.0.0-canary.87
-
-## 8.0.0-canary.86
-
-## 8.0.0-canary.85
-
-## 8.0.0-canary.84
-
-## 8.0.0-canary.83
-
-## 8.0.0-canary.82
-
-## 8.0.0-canary.81
-
-## 8.0.0-canary.80
-
-## 8.0.0-canary.79
-
-## 8.0.0-canary.78
-
-## 8.0.0-canary.77
-
-## 8.0.0-canary.76
-
-## 8.0.0-canary.75
-
-## 8.0.0-canary.74
-
-## 8.0.0-canary.73
-
-### Patch Changes
-
-- [#2132](https://github.com/graphcommerce-org/graphcommerce/pull/2132) [`993f655`](https://github.com/graphcommerce-org/graphcommerce/commit/993f6559226f0ce2b63f372ccfc1409805b06a8d) - Fix compare button hover state on product page ([@action-simon](https://github.com/action-simon))
-
-## 8.0.0-canary.72
-
-## 8.0.0-canary.71
-
-## 8.0.0-canary.70
-
-## 8.0.0-canary.69
-
-## 7.1.0-canary.68
-
-## 7.1.0-canary.67
-
-## 7.1.0-canary.66
-
-## 7.1.0-canary.65
-
-## 7.1.0-canary.64
-
-## 7.1.0-canary.63
-
-## 7.1.0-canary.62
-
-## 7.1.0-canary.61
-
-## 7.1.0-canary.60
-
-## 7.1.0-canary.59
-
-## 7.1.0-canary.58
-
-## 7.1.0-canary.57
-
-## 7.1.0-canary.56
-
-## 7.1.0-canary.55
-
-## 7.1.0-canary.54
-
-## 7.1.0-canary.53
-
-## 7.1.0-canary.52
-
-## 7.1.0-canary.51
-
-## 7.1.0-canary.50
-
-## 7.1.0-canary.49
-
-## 7.1.0-canary.48
-
-## 7.1.0-canary.47
-
-## 7.1.0-canary.46
-
-## 7.1.0-canary.45
-
-## 7.1.0-canary.38
-
-## 7.1.0-canary.37
-
-## 7.1.0-canary.36
-
-## 7.1.0-canary.35
-
-## 7.1.0-canary.34
-
-## 7.1.0-canary.33
-
-## 7.1.0-canary.32
-
-## 7.1.0-canary.31
-
-## 7.1.0-canary.30
-
-## 7.1.0-canary.29
-
-## 7.1.0-canary.28
-
-## 7.1.0-canary.27
-
-## 7.1.0-canary.26
-
-## 7.1.0-canary.25
-
-## 7.1.0-canary.24
-
-## 7.1.0-canary.23
-
-## 7.1.0-canary.22
-
-## 7.1.0-canary.21
-
-## 7.1.0-canary.20
-
-## 7.1.0-canary.19
-
-## 7.1.0-canary.18
-
-## 7.1.0-canary.17
-
-## 7.1.0-canary.16
-
-## 7.1.0-canary.15
-
-## 7.1.0-canary.14
-
-## 7.1.0-canary.13
-
-## 7.1.0-canary.12
-
-## 7.1.0-canary.11
-
-## 7.1.0-canary.10
-
-## 7.1.0-canary.9
-
-## 7.1.0-canary.8
-
-## 7.0.2-canary.7
-
-## 7.0.2-canary.6
-
-## 7.0.2-canary.5
-
-## 7.0.1
-
-## 7.0.1-canary.15
-
-## 7.0.1-canary.14
-
-## 7.0.1-canary.13
-
-## 7.0.1-canary.12
-
-## 7.0.1-canary.11
-
-## 7.0.1-canary.10
-
-## 7.0.1-canary.9
-
-## 7.0.1-canary.8
-
-## 7.0.1-canary.7
-
-## 7.0.1-canary.6
-
-## 7.0.1-canary.5
-
-## 7.0.1-canary.4
-
-## 7.0.1-canary.3
-
-## 7.0.1-canary.2
-
-## 7.0.1-canary.1
-
-## 7.0.1-canary.0
-
 ## 7.0.0
 
 ### Major Changes
@@ -515,195 +83,3 @@
 ### Patch Changes
 
 - [#1959](https://github.com/graphcommerce-org/graphcommerce/pull/1959) [`d0809b132`](https://github.com/graphcommerce-org/graphcommerce/commit/d0809b132a0e4cbdfeb86164f6c16a89ebecd987) - Added support for default values in the Config.graphqls files for the documentation ([@JoshuaS98](https://github.com/JoshuaS98))
-
-## 6.2.0-canary.98
-
-## 6.2.0-canary.97
-
-## 6.2.0-canary.96
-
-## 6.2.0-canary.95
-
-## 6.2.0-canary.94
-
-## 6.2.0-canary.93
-
-## 6.2.0-canary.92
-
-## 6.2.0-canary.91
-
-## 6.2.0-canary.90
-
-## 6.2.0-canary.89
-
-## 6.2.0-canary.88
-
-## 6.2.0-canary.87
-
-## 6.2.0-canary.86
-
-## 6.2.0-canary.85
-
-## 6.2.0-canary.84
-
-## 6.2.0-canary.83
-
-## 6.2.0-canary.82
-
-## 6.2.0-canary.81
-
-## 6.2.0-canary.80
-
-## 6.2.0-canary.79
-
-## 6.2.0-canary.78
-
-## 6.2.0-canary.77
-
-## 6.2.0-canary.76
-
-## 6.2.0-canary.75
-
-## 6.2.0-canary.74
-
-## 6.2.0-canary.73
-
-## 6.2.0-canary.72
-
-## 6.2.0-canary.71
-
-## 6.2.0-canary.70
-
-## 6.2.0-canary.69
-
-## 6.2.0-canary.68
-
-## 6.2.0-canary.67
-
-## 6.2.0-canary.66
-
-## 6.2.0-canary.65
-
-## 6.2.0-canary.64
-
-## 6.2.0-canary.63
-
-## 6.2.0-canary.62
-
-## 6.2.0-canary.61
-
-## 6.2.0-canary.60
-
-## 6.2.0-canary.59
-
-## 6.2.0-canary.58
-
-## 6.2.0-canary.57
-
-## 6.2.0-canary.56
-
-## 6.2.0-canary.55
-
-## 6.2.0-canary.54
-
-## 6.2.0-canary.53
-
-## 6.2.0-canary.52
-
-## 6.2.0-canary.51
-
-## 6.2.0-canary.50
-
-### Minor Changes
-
-- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
-
-## 6.2.0-canary.49
-
-### Patch Changes
-
-- [#1959](https://github.com/graphcommerce-org/graphcommerce/pull/1959) [`d0809b132`](https://github.com/graphcommerce-org/graphcommerce/commit/d0809b132a0e4cbdfeb86164f6c16a89ebecd987) - Added support for default values in the Config.graphqls files for the documentation ([@JoshuaS98](https://github.com/JoshuaS98))
-
-## 6.2.0-canary.48
-
-## 6.2.0-canary.47
-
-## 6.2.0-canary.46
-
-## 6.2.0-canary.45
-
-## 6.2.0-canary.44
-
-## 6.2.0-canary.43
-
-## 6.2.0-canary.42
-
-## 6.2.0-canary.41
-
-## 6.2.0-canary.40
-
-## 6.2.0-canary.39
-
-## 6.2.0-canary.38
-
-## 6.2.0-canary.37
-
-## 6.2.0-canary.36
-
-## 6.2.0-canary.35
-
-## 6.2.0-canary.34
-
-## 6.2.0-canary.33
-
-## 6.2.0-canary.32
-
-## 6.2.0-canary.31
-
-## 6.2.0-canary.30
-
-## 6.2.0-canary.29
-
-## 6.2.0-canary.28
-
-## 6.2.0-canary.27
-
-## 6.2.0-canary.26
-
-## 6.2.0-canary.25
-
-## 6.2.0-canary.24
-
-## 6.2.0-canary.23
-
-## 6.2.0-canary.22
-
-## 6.2.0-canary.21
-
-## 6.2.0-canary.20
-
-## 6.2.0-canary.19
-
-## 6.2.0-canary.18
-
-## 6.2.0-canary.17
-
-## 6.2.0-canary.16
-
-## 6.2.0-canary.15
-
-## 6.2.0-canary.14
-
-## 6.2.0-canary.13
-
-## 6.2.0-canary.12
-
-## 6.2.0-canary.11
-
-## 6.2.0-canary.10
-
-### Minor Changes
-
-- [#1918](https://github.com/graphcommerce-org/graphcommerce/pull/1918) [`7dcf350c6`](https://github.com/graphcommerce-org/graphcommerce/commit/7dcf350c674dfe6dbf192ecfb5af3ee8180eb2f9) - Magento product compare functionality added ([@paales](https://github.com/paales))
-
-## 6.2.0-canary.9

package/components/CompareFab.tsx

@@ -1,13 +1,14 @@
 import {
-  extendableComponent,
   IconSvg,
-  useFabSize,
+  extendableComponent,
   iconCompare,
+  useFabSize,
   useScrollY,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { styled, Box, SxProps, Theme, NoSsr, Badge, Button, ButtonProps } from '@mui/material'
+import type { ButtonProps, SxProps, Theme } from '@mui/material'
+import { Badge, Box, Button, NoSsr, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useCompareSummary } from '../hooks'
@@ -17,11 +18,11 @@ export type CompareFabProps = {
   sx?: SxProps<Theme>
 } & Pick<ButtonProps, 'color' | 'size' | 'variant'>
 
-type CompareFabContentProps = CompareFabProps & { total_quantity: number }
+export type CompareFabContentProps = CompareFabProps & { total_quantity: number }
 
 const MotionDiv = styled(m.div)({})
 
-const MotionFab = m(
+const MotionFab = m.create(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   React.forwardRef<any, Omit<ButtonProps, 'style' | 'onDrag'>>((props, ref) => (
     <Button variant='pill' {...props} ref={ref} />

package/components/CompareListAttributes.tsx

@@ -1,5 +1,6 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useCompareList } from '../hooks/useCompareList'
 import { useCompareVisibleItems } from './CompareListForm'
 import { CompareListRow } from './CompareListRow'

package/components/CompareListForm.tsx

@@ -1,9 +1,10 @@
-import { FormPersist, useForm, UseFormReturn, useWatch } from '@graphcommerce/ecommerce-ui'
+import type { UseFormReturn } from '@graphcommerce/ecommerce-ui'
+import { FormPersist, useForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'
 import { useCompareList } from '../hooks'
 
-type CompareListFormProps = { children?: React.ReactNode }
+export type CompareListFormProps = { children?: React.ReactNode }
 
 type FormFields = { selected: number[] }
 
@@ -48,12 +49,12 @@ export function CompareListForm(props: CompareListFormProps) {
 
       // if there are less items in the compare list than in our selectedState
       if (compareListCount < selectedState.length) {
-        form.setValue(`selected`, [...Array(compareListCount).keys()])
+        form.setValue('selected', [...Array(compareListCount).keys()])
       }
 
       // if there are less items in our selectedState than we have columns
       if (selectedState.length < gridColumns) {
-        form.setValue(`selected`, [...Array(gridColumns).keys()])
+        form.setValue('selected', [...Array(gridColumns).keys()])
       }
     }
   }, [compareAbleItems?.length, compareListCount, form, gridColumns, selectedState])

package/components/CompareListIntroText.tsx

@@ -1,6 +1,6 @@
 import { Box, Container } from '@mui/material'
 
-type CompareListIntroTextProps = {
+export type CompareListIntroTextProps = {
   children: React.ReactNode
 }
 

package/components/CompareListItems.tsx

@@ -1,8 +1,5 @@
-import {
-  AddProductsToCartForm,
-  ProductItemsGridProps,
-  ProductListItemsBase,
-} from '@graphcommerce/magento-product'
+import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { AddProductsToCartForm, ProductListItemsBase } from '@graphcommerce/magento-product'
 import { useCompareListStyles } from '../hooks/useCompareListStyles'
 import { useCompareVisibleItems } from './CompareListForm'
 

package/components/CompareListRow.tsx

@@ -1,6 +1,6 @@
 import { SectionContainer } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import { ComparableItemFragment } from '../graphql'
+import type { ComparableItemFragment } from '../graphql'
 import { useCompareListStyles } from '../hooks/useCompareListStyles'
 
 export type CompareRowProps = {

package/components/CompareListRowMoreInformation.tsx

@@ -1,9 +1,9 @@
 import { productLink } from '@graphcommerce/magento-product'
-import { Button, iconChevronRight, IconSvg, SectionContainer } from '@graphcommerce/next-ui'
+import { Button, IconSvg, SectionContainer, iconChevronRight } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'
 import { useCompareListStyles } from '../hooks/useCompareListStyles'
-import { CompareRowProps } from './CompareListRow'
+import type { CompareRowProps } from './CompareListRow'
 
 export type CompareListRowMoreInformationProps = Pick<CompareRowProps, 'compareAbleItems'>
 

package/components/CompareListSelect.tsx

@@ -1,7 +1,8 @@
 import { SelectElement } from '@graphcommerce/ecommerce-ui'
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { useScrollY } from '@graphcommerce/next-ui'
-import { Box, Container, FormControl, SxProps, Theme, useTheme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Container, FormControl, useTheme } from '@mui/material'
 import { useCompareList, useCompareListStyles } from '../hooks'
 import { useCompareForm } from './CompareListForm'
 

package/components/CompareMessageSnackbar.tsx

@@ -1,8 +1,8 @@
-import { Button, iconChevronRight, IconSvg, MessageSnackbar } from '@graphcommerce/next-ui'
+import { Button, IconSvg, MessageSnackbar, iconChevronRight } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SetStateAction } from 'react'
+import type { SetStateAction } from 'react'
 
-type CompareMessageSnackbarProps = {
+export type CompareMessageSnackbarProps = {
   count: number | undefined
   name: string | null | undefined
   displayMessageBar: boolean

package/components/CompareProductButton.tsx

@@ -1,22 +1,21 @@
 import { useMutation } from '@graphcommerce/graphql'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Badge, Box, Button, Checkbox, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Badge, Box, Button, Checkbox } from '@mui/material'
 import { useState } from 'react'
-import {
-  AddProductsToCompareListDocument,
-  CompareProductIdInternalFragment,
-  RemoveProductsFromCompareListDocument,
-} from '../graphql'
+import type { CompareProductIdInternalFragment } from '../graphql'
+import { AddProductsToCompareListDocument, RemoveProductsFromCompareListDocument } from '../graphql'
 import { useCompareSummary } from '../hooks'
 import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
 import { CompareMessageSnackbar } from './CompareMessageSnackbar'
 
-type CompareProductButtonProps = CompareProductIdInternalFragment & { sx?: SxProps<Theme> }
+export type CompareProductButtonProps = CompareProductIdInternalFragment & { sx?: SxProps<Theme> }
 
+/** @public */
 export function CompareProductButton(props: CompareProductButtonProps) {
-  const { compare_product_id, name, sx } = props
-  const idString = String(compare_product_id)
+  const { id, name, sx } = props
+  const idString = String(id)
   const create = useCompareListUidCreate()
   const compareList = useCompareSummary()
   const inCompareList =

package/components/CompareProductToggle.tsx

@@ -1,18 +1,20 @@
 import { useMutation } from '@graphcommerce/graphql'
-import { iconCompare, Button, Fab, FabProps } from '@graphcommerce/next-ui'
+import type { FabProps } from '@graphcommerce/next-ui'
+import { Button, Fab, iconCompare } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { alpha, Checkbox, NoSsr, SxProps, Theme, useTheme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { alpha, Checkbox, NoSsr, useTheme } from '@mui/material'
 import { useState } from 'react'
-import { CompareProductIdInternalFragment } from '../graphql'
+import type { CompareProductIdInternalFragment } from '../graphql'
 import { AddProductsToCompareListDocument } from '../graphql/AddProductsToCompareList.gql'
 import { RemoveProductsFromCompareListDocument } from '../graphql/RemoveProductsFromCompareList.gql'
 import { useCompareSummary } from '../hooks'
 import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
 import { CompareMessageSnackbar } from './CompareMessageSnackbar'
 
-type CompareProductToggleProps = {
+export type CompareProductToggleProps = {
   sx?: SxProps<Theme>
   product: CompareProductIdInternalFragment
 } & Pick<FabProps, 'color'>
@@ -108,7 +110,7 @@ function CompareProductToggleBase(
             (theme) => ({
               backgroundColor:
                 theme.palette.mode === 'light' ? theme.palette.background.paper : 'transparent',
-              flex: `0 0 auto`,
+              flex: '0 0 auto',
               '& svg': {
                 stroke: strokeColorPlp,
               },
@@ -146,7 +148,7 @@ function CompareProductToggleBase(
 export function CompareProductToggle(props: CompareProductToggleProps) {
   const { product } = props
   const compareList = useCompareSummary()
-  const idString = String(product.compare_product_id)
+  const idString = String(product.id)
   const inCompareList =
     compareList.data?.compareList?.items?.some((i) => i?.uid === idString) ?? false
 

package/components/EmptyCompareListButton.tsx

@@ -1,12 +1,13 @@
-import { usePageContext, useGo } from '@graphcommerce/framer-next-pages'
+import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { useMutation } from '@graphcommerce/graphql'
-import { LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
+import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { LinkOrButton } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { DeleteCompareListDocument } from '../graphql/DeleteCompareList.gql'
 import { useCompareList } from '../hooks'
 import { useClearCurrentCompareListUid } from '../hooks/useClearCurrentCompareListUid'
 
-type EmptyCompareListButtonProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
+export type EmptyCompareListButtonProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
 
 export function EmptyCompareListButton(props: EmptyCompareListButtonProps) {
   const { button = {}, link = {} } = props

package/graphql/CompareProductIdInternal.graphql

@@ -1,6 +1,6 @@
 fragment CompareProductIdInternal on ProductInterface
 @inject(into: ["UseAddProductsToCartAction", "ProductListItem"]) {
   __typename
-  compare_product_id: id
+  id
   name
 }

package/hooks/useAssignCurrentCompareListUid.ts

@@ -1,4 +1,5 @@
-import { ApolloCache, useApolloClient } from '@graphcommerce/graphql'
+import type { ApolloCache } from '@graphcommerce/graphql'
+import { useApolloClient } from '@graphcommerce/graphql'
 import { useCallback } from 'react'
 import { CurrentCompareUidDocument } from '../graphql'
 

package/hooks/useCompareListStyles.ts

@@ -8,8 +8,8 @@ export function useCompareListStyles() {
     gap: theme.spacings.md,
     '& > *': {
       width: {
-        md: `calc(100% / 3)`,
-        xs: `calc(100% / 2)`,
+        md: 'calc(100% / 3)',
+        xs: 'calc(100% / 2)',
       },
     },
     [theme.breakpoints.down('md')]: {

package/hooks/useCompareSummary.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { CurrentCompareUidDocument, CompareSummaryDocument } from '../graphql'
+import { CompareSummaryDocument, CurrentCompareUidDocument } from '../graphql'
 
 export function useCompareSummary() {
   const currentCompareUid = useQuery(CurrentCompareUidDocument)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-compare",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.99",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,21 +12,21 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.99",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.99",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.99",
-    "@graphcommerce/graphql": "^9.0.0-canary.99",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.99",
-    "@graphcommerce/magento-product": "^9.0.0-canary.99",
-    "@graphcommerce/next-ui": "^9.0.0-canary.99",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.99",
+    "@graphcommerce/ecommerce-ui": "^9.0.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/framer-next-pages": "^9.0.0",
+    "@graphcommerce/framer-utils": "^9.0.0",
+    "@graphcommerce/graphql": "^9.0.0",
+    "@graphcommerce/magento-cart": "^9.0.0",
+    "@graphcommerce/magento-product": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@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",
     "graphql": "^16.0.0",
     "next": "*",
     "react": "^18.2.0",

package/plugins/AddCompareFabNextToCart.tsx

@@ -1,4 +1,4 @@
-import { CartFabProps } from '@graphcommerce/magento-cart'
+import type { CartFabProps } from '@graphcommerce/magento-cart'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { CompareFab } from '../components'
 

package/plugins/AddCompareToProductPage.tsx

@@ -1,4 +1,4 @@
-import { ProductPageAddToCartRowProps } from '@graphcommerce/magento-product'
+import type { ProductPageAddToCartRowProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { CompareProductToggle } from '../components'
 

package/plugins/AddCompareTypePolicies.tsx

@@ -1,4 +1,4 @@
-import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { compareTypePolicies } from '../typePolicies'
 

package/plugins/CompareAbleProductListItem.tsx

@@ -1,8 +1,8 @@
-import { ProductListItemProps } from '@graphcommerce/magento-product'
+import type { ProductListItemProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { Box } from '@mui/material'
 import { CompareProductToggle } from '../components'
-import { CompareProductIdInternalFragment } from '../graphql'
+import type { CompareProductIdInternalFragment } from '../graphql'
 
 export const config: PluginConfig = {
   type: 'component',