@graphcommerce/next-ui 7.0.0-canary.21 → 7.0.0

package/ActionCard/ActionCard.tsx

@@ -122,7 +122,6 @@ export function ActionCard(props: ActionCardProps) {
             theme.shape.borderRadius * 3,
             theme.breakpoints.values,
           ),
-
           '&.sizeSmall': {
             px: responsiveVal(8, 12),
             py: responsiveVal(4, 6),
@@ -142,14 +141,15 @@ export function ActionCard(props: ActionCardProps) {
           },
 
           '&.variantDefault': {
+            position: 'relative',
             '&::after': {
               content: '""',
-              display: 'block',
               position: 'absolute',
               width: '100%',
               left: 0,
               bottom: '-1px',
               borderBottom: `1px solid ${theme.palette.divider}`,
+              display: 'block',
             },
             '&.selected': {
               backgroundColor:
@@ -164,21 +164,21 @@ export function ActionCard(props: ActionCardProps) {
               )}`,
             },
 
-            '&.variantDefault.sizeSmall': {
+            '&.sizeSmall': {
               mt: { xs: '2px', sm: '3px', md: '5px' },
               mb: { xs: '3px', sm: '4px', md: '6px' },
               '&::after': {
                 mb: { xs: '-2px', sm: '-3px', md: '-5px' },
               },
             },
-            '&.variantDefault.sizeMedium': {
+            '&.sizeMedium': {
               mt: { xs: '4px', sm: '5px', md: '6px' },
               mb: { xs: '5px', sm: '6px', md: '7px' },
               '&::after': {
                 mb: { xs: '-4px', sm: '-5px', md: '-6px' },
               },
             },
-            '&.variantDefault.sizeLarge': {
+            '&.sizeLarge': {
               mt: { xs: '5px', sm: '7px', md: '8px' },
               mb: { xs: '6px', sm: '8px', md: '9px' },
               '&::after': {
@@ -193,7 +193,6 @@ export function ActionCard(props: ActionCardProps) {
             '&:not(:last-of-type)': {
               marginBottom: '-1px',
             },
-
             '&.layoutList': {
               borderRadius: 0,
               '&:first-of-type': {
@@ -290,7 +289,6 @@ export function ActionCard(props: ActionCardProps) {
           <Box
             sx={{
               display: 'flex',
-              justifyContent: 'center',
               flexDirection: 'column',
               alignItems: 'flex-start',
             }}
@@ -299,7 +297,8 @@ export function ActionCard(props: ActionCardProps) {
               <Box
                 className={classes.title}
                 sx={{
-                  typography: 'subtitle2',
+                  '&.sizeSmall': { typography: 'body2' },
+                  '&.sizeMedium': { typography: 'body1' },
                   '&.sizeLarge': { typography: 'h6' },
                 }}
               >

package/ActionCard/ActionCardAccordion.tsx

@@ -0,0 +1,58 @@
+import { Accordion, AccordionSummary, AccordionDetails, SxProps, Theme } from '@mui/material'
+import { useState, ReactNode } from 'react'
+import { IconSvg } from '../IconSvg'
+import { iconChevronDown } from '../icons'
+
+export type ActionCardAccordionProps = {
+  summary: ReactNode
+  details: ReactNode
+  right: ReactNode
+  sx?: SxProps<Theme>
+  defaultExpanded?: boolean
+}
+
+export function ActionCardAccordion(props: ActionCardAccordionProps) {
+  const { summary, details, right, defaultExpanded = true, sx } = props
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const handleChange = () => setExpanded(!expanded)
+
+  return (
+    <Accordion
+      square
+      onChange={handleChange}
+      expanded={expanded}
+      variant='outlined'
+      disableGutters
+      sx={[
+        (theme) => ({
+          backgroundColor: 'transparent ',
+          '&.Mui-expanded': { my: 0 },
+          '::before': { display: 'none' },
+          border: 'none',
+          '&:not(.Mui-expanded)': { borderBottom: `1px solid ${theme.palette.divider}` },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <AccordionSummary
+        onClick={(e) => e.preventDefault()}
+        expandIcon={<IconSvg src={iconChevronDown} />}
+        sx={{
+          px: 0,
+          typography: 'h6',
+          minHeight: 54,
+          '& .MuiAccordionSummary-content': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            my: 0,
+          },
+        }}
+      >
+        <div>{summary}</div>
+        {right}
+      </AccordionSummary>
+      <AccordionDetails sx={{ p: 0 }}>{details}</AccordionDetails>
+    </Accordion>
+  )
+}

package/ActionCard/ActionCardLayout.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import { extendableComponent } from '../Styles'
 import { ActionCardProps } from './ActionCard'
 
-type ActionCardLayoutProps = {
+export type ActionCardLayoutProps = {
   children?: React.ReactNode
 } & Pick<ActionCardProps, 'layout'> &
-  BoxProps
+  Pick<BoxProps, 'sx' | 'className'>
 
 const parts = ['root'] as const
 const name = 'ActionCardLayout'
@@ -18,15 +18,15 @@ const { withState } = extendableComponent<
 
 export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayoutProps>(
   (props, ref) => {
-    const { layout = 'list' } = props
+    const { layout = 'list', sx, className = '', ...boxProps } = props
 
     const classes = withState({ layout })
 
     return (
       <Box
         ref={ref}
-        {...props}
-        className={classes.root}
+        {...boxProps}
+        className={`${classes.root} ${className}`}
         sx={[
           (theme) => ({
             '&.layoutStack': {
@@ -50,7 +50,7 @@ export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayou
               gap: theme.spacings.xxs,
             },
           }),
-          ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+          ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       />
     )

package/ActionCard/ActionCardList.tsx

@@ -1,7 +1,11 @@
-import { Alert, Box, SxProps, Theme } from '@mui/material'
+import { Trans } from '@lingui/react'
+import { Alert, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { isFragment } from 'react-is'
+import { Button } from '../Button'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
+import { iconChevronDown } from '../icons'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardLayout } from './ActionCardLayout'
 
@@ -22,6 +26,7 @@ type Select = {
 }
 
 export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
+  showMoreAfter?: number
   children?: React.ReactNode
   required?: boolean
   error?: boolean
@@ -57,6 +62,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     const {
       children,
       required,
+      showMoreAfter = 1000000,
       error = false,
       errorMessage,
       size = 'medium',
@@ -67,6 +73,8 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       sx = [],
     } = props
 
+    const [show, setShow] = React.useState(false)
+
     const handleChange: ActionCardProps['onClick'] = isMulti(props)
       ? (event, v) => {
           const { onChange, value } = props
@@ -103,7 +111,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     }
 
     // Make sure the children are cardlike
-    const childReactNodes = React.Children.toArray(children)
+    const childActionCards = React.Children.toArray(children)
       .filter(React.isValidElement)
       .filter(isActionCardLike)
       .filter((child) => {
@@ -121,7 +129,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       })
 
     // Make sure the selected values is in the list of all possible values
-    const value = childReactNodes.find(
+    const value = childActionCards.find(
       // eslint-disable-next-line react/destructuring-assignment
       (child) => child.props.value === props.value && child.props.disabled !== true,
     )?.props.value
@@ -131,9 +139,10 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     return (
       <div ref={ref}>
         <ActionCardLayout sx={sx} className={classes.root} layout={layout}>
-          {childReactNodes.map((child) => {
+          {childActionCards.map((child, index) => {
             if (collapse && Boolean(value) && !isValueSelected(child.props.value, value))
               return null
+            if (index && showMoreAfter && index + 1 > showMoreAfter && !show) return null
             return React.cloneElement(child, {
               onClick: handleChange,
               error,
@@ -149,6 +158,25 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
             })
           })}
         </ActionCardLayout>
+
+        {childActionCards.length > showMoreAfter && (
+          <Button
+            sx={{ width: 'fit-content' }}
+            color='primary'
+            variant='text'
+            onClick={() => setShow(!show)}
+          >
+            {!show ? <Trans id='More options' /> : <Trans id='Less options' />}{' '}
+            <IconSvg
+              sx={{
+                transform: show ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.3s ease-in-out',
+              }}
+              src={iconChevronDown}
+            />
+          </Button>
+        )}
+
         {error && errorMessage && (
           <Alert
             severity='error'

package/ActionCard/ActionCardListForm.tsx

@@ -64,7 +64,7 @@ export function ActionCardListForm<
           {items.map((item) => (
             <RenderItem
               {...item}
-              key={item.value ?? 'tralala'}
+              key={item.value ?? ''}
               value={item.value}
               selected={onSelect(item.value, value)}
               onReset={(e) => {

package/ActionCard/index.ts

@@ -1,4 +1,5 @@
 export * from './ActionCard'
+export * from './ActionCardAccordion'
 export * from './ActionCardLayout'
 export * from './ActionCardList'
 export * from './ActionCardListForm'

package/Blog/BlogListItem/BlogListItem.tsx

@@ -2,13 +2,12 @@ import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
-import { responsiveVal } from '../../Styles/responsiveVal'
 import { useDateTimeFormat } from '../../hooks'
 
 export type BlogListItemProps = {
   asset: React.ReactNode
   url: string
-  date: string
+  date: string | undefined
   title: string
   sx?: SxProps<Theme>
 }
@@ -57,18 +56,20 @@ export function BlogListItem(props: BlogListItemProps) {
         </Box>
       </Link>
 
-      <Box
-        component='time'
-        className={classes.date}
-        dateTime={date}
-        sx={(theme) => ({
-          display: 'inline-block',
-          textDecoration: 'none',
-          color: theme.palette.text.secondary,
-        })}
-      >
-        {formatter.format(new Date(date))}
-      </Box>
+      {date && (
+        <Box
+          component='time'
+          className={classes.date}
+          dateTime={date}
+          sx={(theme) => ({
+            display: 'inline-block',
+            textDecoration: 'none',
+            color: theme.palette.text.secondary,
+          })}
+        >
+          {formatter.format(new Date(date))}
+        </Box>
+      )}
 
       <Link href={`/${url}`} className={classes.title} color='inherit' underline='hover'>
         <Typography component='h2' variant='h4'>

package/Button/LinkOrButton.tsx

@@ -11,13 +11,14 @@ type SharedProperties<A, B> = OmitNever<
 >
 
 export type LinkOrButtonProps = {
-  button?: ButtonProps
-  link?: LinkProps
+  button?: ButtonProps<'button'>
+  link?: LinkProps<'a'>
   breakpoint?: Breakpoint
   disabled?: boolean
 } & SharedProperties<
-  Omit<ButtonProps, 'sx'>,
-  Omit<LinkProps, 'color' | 'sx'> & Pick<ButtonProps, 'endIcon' | 'startIcon' | 'color' | 'loading'>
+  Omit<ButtonProps<'button'>, 'sx' | 'component'>,
+  Omit<LinkProps<'a'>, 'color' | 'sx' | 'component'> &
+    Pick<ButtonProps, 'endIcon' | 'startIcon' | 'color' | 'loading'>
 >
 
 /** Renders a Link until the breakpoint is reached and will then render a button. */

package/CHANGELOG.md

@@ -1,6 +1,268 @@
 # Change Log
 
-## 7.0.0-canary.21
+## 7.0.0
+
+### Major 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))
+
+### Minor Changes
+
+- [#1961](https://github.com/graphcommerce-org/graphcommerce/pull/1961) [`4a759c662`](https://github.com/graphcommerce-org/graphcommerce/commit/4a759c66215eaa69edc342b898e05e8f92c3ba9a) - Add Open Graph meta tags to all pages ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`609b384de`](https://github.com/graphcommerce-org/graphcommerce/commit/609b384de8cded7a9dd2f29bd516ded810ab970a) - Created a new version of the cart using ActionCards for each CartItem. Different types of CartItems can have different ActionCards. These ActionCards will be overridden with the use of Plugins. An example can be found in the @graphcommerce/magento-product-configurable package. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#2023](https://github.com/graphcommerce-org/graphcommerce/pull/2023) [`7cd53fb2a`](https://github.com/graphcommerce-org/graphcommerce/commit/7cd53fb2aca18ae4a56025b2a015fecbda2e47b7) - Added links to test components on the test page. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+### Patch Changes
+
+- [#1934](https://github.com/graphcommerce-org/graphcommerce/pull/1934) [`96ac0320a`](https://github.com/graphcommerce-org/graphcommerce/commit/96ac0320a30bc55a6db5d46663d28b552fda4db6) - Overlays with a floating layout can now be closed by clicking beside the overlay. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`e9041802b`](https://github.com/graphcommerce-org/graphcommerce/commit/e9041802b27d6610cc93715ca61acff7f59792e6) - When the switchPoint of LayoutHeader is zero, make sure the header doesn’t flash when scrolling up on iOS ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#1998](https://github.com/graphcommerce-org/graphcommerce/pull/1998) [`fdbdcb76f`](https://github.com/graphcommerce-org/graphcommerce/commit/fdbdcb76f918cf74b22253bd641a04c490ceb140) - Users are now not able to scroll an overlay during the open animation. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1960](https://github.com/graphcommerce-org/graphcommerce/pull/1960) [`f78caf5a8`](https://github.com/graphcommerce-org/graphcommerce/commit/f78caf5a83683f1ae4b901fb94bd22d50943fa2f) - Updated packages: `next`, `@apollo/client`, `react-hook-form`, `@emotion/*`, `@lingui/*`, `@mui/*` and various others. ([@paales](https://github.com/paales))
+
+- [#1965](https://github.com/graphcommerce-org/graphcommerce/pull/1965) [`44b2911d7`](https://github.com/graphcommerce-org/graphcommerce/commit/44b2911d73fb6c6c7188f16d5890ca93877e9aa7) - Added prop to LayoutHeader to be able to hide the back button ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1946](https://github.com/graphcommerce-org/graphcommerce/pull/1946) [`87260618b`](https://github.com/graphcommerce-org/graphcommerce/commit/87260618b8abaebd727ff4435abb1aea6ed33730) - Firefox: scroll snap overlays would snap to 0 when the scroll snap targets wouldn’t exactly match the possible targets. ([@paales](https://github.com/paales))
+
+- [#1913](https://github.com/graphcommerce-org/graphcommerce/pull/1913) [`17eac116d`](https://github.com/graphcommerce-org/graphcommerce/commit/17eac116dbf2b811a67bfefd735d5a5a3e2b20dc) - Fixed zIndex issue with CartFab and ScrollerButton ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1913](https://github.com/graphcommerce-org/graphcommerce/pull/1913) [`61b1987eb`](https://github.com/graphcommerce-org/graphcommerce/commit/61b1987eb8d37566cb4675f0ae962925aef2fc6d) - Fixed RowLinks ScrollerButton alignment when content is shown beside the Scroller ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1930](https://github.com/graphcommerce-org/graphcommerce/pull/1930) [`c8d023e9e`](https://github.com/graphcommerce-org/graphcommerce/commit/c8d023e9e874131cd9f8fe192b1fca5fe1a26ee3) - Fix the 'close menu' on search and add the option to secondary menu items ([@StefanAngenent](https://github.com/StefanAngenent))
+
+- [#2042](https://github.com/graphcommerce-org/graphcommerce/pull/2042) [`587fd2fe5`](https://github.com/graphcommerce-org/graphcommerce/commit/587fd2fe50c843acd9ffae869372df1df57e0a4b) - Updated german translations ([@action-simon](https://github.com/action-simon))
+
+- [#1897](https://github.com/graphcommerce-org/graphcommerce/pull/1897) [`f44d7cec6`](https://github.com/graphcommerce-org/graphcommerce/commit/f44d7cec61766f4768c30d29b211a12f2846e9f6) - Overlays can now be configured to get a bgColor ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#1980](https://github.com/graphcommerce-org/graphcommerce/pull/1980) [`275aaaba3`](https://github.com/graphcommerce-org/graphcommerce/commit/275aaaba34c9db1705183393c4327e8f16b09386) - Fixed overlays closing while still dragging - overlays should only close after releasing pointer ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1939](https://github.com/graphcommerce-org/graphcommerce/pull/1939) [`0cdccf681`](https://github.com/graphcommerce-org/graphcommerce/commit/0cdccf6817d6a769f59cccb68b1b1b8b4405cbd0) - Make blogListItem date prop optional ([@JoshuaS98](https://github.com/JoshuaS98))
+
+- [#1958](https://github.com/graphcommerce-org/graphcommerce/pull/1958) [`0a311b6eb`](https://github.com/graphcommerce-org/graphcommerce/commit/0a311b6ebb5a52e2a7f1d2e6a0fe113904fa2d34) - Left overlays wouldn't properly snap when the overlay gets wider than the viewport ([@paales](https://github.com/paales))
+
+- [#2005](https://github.com/graphcommerce-org/graphcommerce/pull/2005) [`950521b4d`](https://github.com/graphcommerce-org/graphcommerce/commit/950521b4d46a1b980636c05d68a8f6aba289e85c) - Footer's grid-area's will only be rendered when the props are passed. ([@LeanderMatse](https://github.com/LeanderMatse))
+
+## 6.2.0-canary.98
+
+## 6.2.0-canary.97
+
+### Patch Changes
+
+- [#2042](https://github.com/graphcommerce-org/graphcommerce/pull/2042) [`587fd2fe5`](https://github.com/graphcommerce-org/graphcommerce/commit/587fd2fe50c843acd9ffae869372df1df57e0a4b) - Updated german translations ([@action-simon](https://github.com/action-simon))
+
+## 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
+
+### Minor Changes
+
+- [#2023](https://github.com/graphcommerce-org/graphcommerce/pull/2023) [`7cd53fb2a`](https://github.com/graphcommerce-org/graphcommerce/commit/7cd53fb2aca18ae4a56025b2a015fecbda2e47b7) - Added links to test components on the test page. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 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
+
+### Minor Changes
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`609b384de`](https://github.com/graphcommerce-org/graphcommerce/commit/609b384de8cded7a9dd2f29bd516ded810ab970a) - Created a new version of the cart using ActionCards for each CartItem. Different types of CartItems can have different ActionCards. These ActionCards will be overridden with the use of Plugins. An example can be found in the @graphcommerce/magento-product-configurable package. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+### Patch Changes
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`e9041802b`](https://github.com/graphcommerce-org/graphcommerce/commit/e9041802b27d6610cc93715ca61acff7f59792e6) - When the switchPoint is zero, make sure the header doesn’t flash when scrolling up on iOS ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`e81a9722b`](https://github.com/graphcommerce-org/graphcommerce/commit/e81a9722b5f581dacb624246c14d74aafbf55893) - Make sure the className is forwarded for ActionCardLayout ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+### Patch Changes
+
+- [#2013](https://github.com/graphcommerce-org/graphcommerce/pull/2013) [`c57bdf8a4`](https://github.com/graphcommerce-org/graphcommerce/commit/c57bdf8a4ce936c3eedc4dfada3a464a113ac68a) - Updated @mui and framer-motion packages to latest versions ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+### Patch Changes
+
+- [#2005](https://github.com/graphcommerce-org/graphcommerce/pull/2005) [`950521b4d`](https://github.com/graphcommerce-org/graphcommerce/commit/950521b4d46a1b980636c05d68a8f6aba289e85c) - Footer's grid-area's will only be rendered when the props are passed. ([@LeanderMatse](https://github.com/LeanderMatse))
+
+## 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
+
+### Patch Changes
+
+- [#1980](https://github.com/graphcommerce-org/graphcommerce/pull/1980) [`275aaaba3`](https://github.com/graphcommerce-org/graphcommerce/commit/275aaaba34c9db1705183393c4327e8f16b09386) - Fixed overlays closing while still dragging - overlays should only close after releasing pointer ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 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
+
+### Patch Changes
+
+- [#1998](https://github.com/graphcommerce-org/graphcommerce/pull/1998) [`fdbdcb76f`](https://github.com/graphcommerce-org/graphcommerce/commit/fdbdcb76f918cf74b22253bd641a04c490ceb140) - Fixed users accidentally being able to scroll overlays out of view during open animation ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 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
+
+## 6.2.0-canary.48
+
+### Minor Changes
+
+- [#1961](https://github.com/graphcommerce-org/graphcommerce/pull/1961) [`4a759c662`](https://github.com/graphcommerce-org/graphcommerce/commit/4a759c66215eaa69edc342b898e05e8f92c3ba9a) - Add Open Graph meta tags to all pages ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 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
+
+### Patch Changes
+
+- [#1965](https://github.com/graphcommerce-org/graphcommerce/pull/1965) [`44b2911d7`](https://github.com/graphcommerce-org/graphcommerce/commit/44b2911d73fb6c6c7188f16d5890ca93877e9aa7) - Added prop to LayoutHeader to be able to hide the back button ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+### Patch Changes
+
+- [#1960](https://github.com/graphcommerce-org/graphcommerce/pull/1960) [`f78caf5a8`](https://github.com/graphcommerce-org/graphcommerce/commit/f78caf5a83683f1ae4b901fb94bd22d50943fa2f) - Updated packages @apollo/client, react-hook-form, @emotion/\*, @lingui/\*, @mui/\* and various others. ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+### Patch Changes
+
+- [#1958](https://github.com/graphcommerce-org/graphcommerce/pull/1958) [`0a311b6eb`](https://github.com/graphcommerce-org/graphcommerce/commit/0a311b6ebb5a52e2a7f1d2e6a0fe113904fa2d34) - Left overlays wouldn't properly snap when the overlay gets wider than the viewport ([@paales](https://github.com/paales))
+
+## 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
+
+### Patch Changes
+
+- [#1946](https://github.com/graphcommerce-org/graphcommerce/pull/1946) [`87260618b`](https://github.com/graphcommerce-org/graphcommerce/commit/87260618b8abaebd727ff4435abb1aea6ed33730) - Firefox: scroll snap overlays would snap to 0 when the scroll snap targets wouldn’t exactly match the possible targets. ([@paales](https://github.com/paales))
+
+## 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
+
+### Patch Changes
+
+- [#1939](https://github.com/graphcommerce-org/graphcommerce/pull/1939) [`0cdccf681`](https://github.com/graphcommerce-org/graphcommerce/commit/0cdccf6817d6a769f59cccb68b1b1b8b4405cbd0) - Make blogListItem date prop optional ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.21
 
 ## 6.2.0-canary.20