@graphcommerce/next-ui 9.1.0-canary.54 → 10.0.0-canary.56

package/ActionCard/ActionCardList.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Alert } from '@mui/material'
 import React from 'react'
@@ -168,7 +168,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
             variant='text'
             onClick={() => setShow(!show)}
           >
-            {!show ? <Trans id='More options' /> : <Trans id='Less options' />}{' '}
+            {!show ? <Trans>More options</Trans> : <Trans>Less options</Trans>}{' '}
             <IconSvg
               sx={{
                 transform: show ? 'rotate(180deg)' : 'rotate(0deg)',

package/Breadcrumbs/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type {
   LinkProps,
   BreadcrumbsProps as MuiBreadcrumbProps,
@@ -71,7 +71,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
   return (
     <MuiBreadcrumbs
       {...rest}
-      aria-label={i18n._(/* i18n*/ 'Breadcrumbs')}
+      aria-label={t`Breadcrumbs`}
       maxItems={maxItems}
       color='inherit'
       sx={[
@@ -167,7 +167,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
           {...linkProps}
           sx={[...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
         >
-          <Trans id='Home' />
+          <Trans>Home</Trans>
         </Link>
       )}
       {breadcrumbLinks.map((breadcrumb) => (

package/Breadcrumbs/BreadcrumbsList.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { alpha, Box, Link, useTheme } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 import { useEffect, useRef } from 'react'
@@ -74,7 +74,7 @@ export function BreadcrumbsList(props: PopperBreadcrumbsListProps) {
           },
         }}
       >
-        <Trans id='Home' />
+        <Trans>Home</Trans>
       </Link>
       {breadcrumbs.slice(0, breadcrumbs.length).map((breadcrumb) => (
         <Link

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # Change Log
 
+## 10.0.0-canary.56
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.55
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`87fc3c2`](https://github.com/graphcommerce-org/graphcommerce/commit/87fc3c28165c7c66b48882b0f044bbc9b63b9846) - Created new Tabs and TabItem component to be used for MultiCart setup ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`286a20e`](https://github.com/graphcommerce-org/graphcommerce/commit/286a20e01f2a565f058415fa1c8dfbb2eeb3163b) - Added an OverlayCloseButton and implemented it for various locations. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`65dcefb`](https://github.com/graphcommerce-org/graphcommerce/commit/65dcefb8740166fd5df662e0e895c65d70273393) - Solve hydration error because multiple literals could be in a DateTimeFormat ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`88fd114`](https://github.com/graphcommerce-org/graphcommerce/commit/88fd11485f9368e79d277fa45942e58214f794a6) - Created a LayoutOverlayHeader2 that does not support any floating modes or something and thus is simpler to customize. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`23793aa`](https://github.com/graphcommerce-org/graphcommerce/commit/23793aab26455b1bea0d1b3b37c96a228b656bc4) - Prevent excessive rerender when multiple images with the same url are in a product ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`a419257`](https://github.com/graphcommerce-org/graphcommerce/commit/a4192571eb2332630ba3d103f61ff69dac8b2e5c) - Solve issue where the sidebar wasn't 100% width on the PDP on mobile ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/FramerScroller/SidebarGallery.tsx

@@ -10,6 +10,7 @@ import {
   unstable_usePreventScroll as usePreventScroll,
 } from '@graphcommerce/framer-scroller'
 import { dvh } from '@graphcommerce/framer-utils'
+import { sidebarGallery } from '@graphcommerce/next-config/config'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, Unstable_TrapFocus as TrapFocus, useTheme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
@@ -242,7 +243,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               >
                 {images.map((image, idx) => (
                   <MotionImageAspect
-                    key={typeof image.src === 'string' ? image.src : idx}
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={idx}
                     layout
                     layoutDependency={zoomed}
                     src={image.src}
@@ -349,8 +351,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   },
                 }}
               >
-                {import.meta.graphCommerce.sidebarGallery?.paginationVariant ===
-                'THUMBNAILS_BOTTOM' ? (
+                {sidebarGallery?.paginationVariant === 'THUMBNAILS_BOTTOM' ? (
                   <ScrollerThumbnails layoutDependency={zoomed} images={images} />
                 ) : (
                   <ScrollerDots layout />
@@ -362,7 +363,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             className={classes.sidebarWrapper}
             sx={[
               {
-                width: sidebarSize,
+                width: { xs: '100%', md: sidebarSize },
                 gridArea: 'right',
                 boxSizing: 'content-box',
                 display: 'grid',

package/Intl/DateTimeFormat/DateTimeFormat.tsx

@@ -19,8 +19,9 @@ export function DateTimeFormat(props: DateTimeFormatProps) {
   return (
     <Box component='span' className='DateTimeFormat' suppressHydrationWarning sx={sx}>
       {dateValue &&
-        formatter.formatToParts(dateValue).map((part) => (
-          <span className={part.type} key={part.type} suppressHydrationWarning>
+        formatter.formatToParts(dateValue).map((part, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <span className={part.type} key={`${part.type}-${index}`} suppressHydrationWarning>
             {part.value}
           </span>
         ))}

package/Layout/components/LayoutHeaderBack.tsx

@@ -4,7 +4,7 @@ import {
   usePrevUp,
   useUp,
 } from '@graphcommerce/framer-next-pages'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -55,7 +55,7 @@ export function LayoutHeaderBack(props: BackProps) {
   const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && path !== prevUp?.href && !disableBackNavigation
 
-  let label = i18n._(/* i18n */ 'Back')
+  let label = t`Back`
   if (up?.href === path && up?.title) label = up.title
   if (prevUp?.href === path && prevUp?.title) label = prevUp.title
 

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,13 +1,16 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
-import { i18n } from '@lingui/core'
-import { Fab } from '@mui/material'
+import { t } from '@lingui/core/macro'
+import { Fab, type ButtonProps } from '@mui/material'
 import { useState } from 'react'
+import { Button } from '../../Button'
+import type { FabProps } from '../../Fab'
 import { iconClose } from '../../icons'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { useFabSize } from '../../Theme'
 
 export type LayoutHeaderCloseProps = {
   onClose?: () => void
+  size?: FabProps['size']
 }
 
 export function useShowClose() {
@@ -16,31 +19,31 @@ export function useShowClose() {
 }
 
 export function LayoutHeaderClose(props: LayoutHeaderCloseProps) {
-  const { onClose } = props
+  const { onClose, size = 'responsive' } = props
   const { closeSteps } = usePageContext()
   const [disabled, setDisabled] = useState(false)
   const go = useGo(closeSteps * -1)
   const onClick = () => {
     setDisabled(true)
-
     return onClose ? onClose() : go()
   }
 
-  const fabSize = useFabSize('responsive')
-  const svgSize = useIconSvgSize('large')
+  const fabSize = useFabSize(size)
+  const svgSize = useIconSvgSize(size === 'large' ? 'large' : 'medium')
 
   return (
     <Fab
       onClick={onClick}
+      className='LayoutHeaderClose-root'
       sx={{
         boxShadow: 'none',
         marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
         marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
         background: 'none',
       }}
-      size='responsive'
+      size={size}
       disabled={disabled}
-      aria-label={i18n._(/* i18n */ 'Close')}
+      aria-label={t`Close`}
     >
       <IconSvg src={iconClose} size='large' />
     </Fab>

package/LayoutOverlay/components/LayoutOverlayHeader2.tsx

@@ -0,0 +1,213 @@
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import React, { useRef } from 'react'
+import type { BackProps } from '../../Layout/components/LayoutHeaderBack'
+import { LayoutHeaderBack, useShowBack } from '../../Layout/components/LayoutHeaderBack'
+import { LayoutHeaderClose, useShowClose } from '../../Layout/components/LayoutHeaderClose'
+import { extendableComponent } from '../../Styles'
+import { sxx } from '../../utils/sxx'
+
+export type LayoutOverlayHeader2Props = Pick<BackProps, 'disableBackNavigation'> & {
+  /** Main content to display in the center */
+  children: React.ReactNode
+
+  disableChildrenPadding?: boolean
+
+  /** Button to display on the left side of the title */
+  primary?: React.ReactNode
+
+  /** Button to display on the right side of the title */
+  secondary?: React.ReactNode
+
+  /** Hide the back button */
+  hideBackButton?: boolean
+
+  /** Justify alignment for center content */
+  justify?: 'start' | 'center' | 'end'
+
+  /** Custom styles for the root element */
+  sx?: SxProps<Theme>
+
+  closeLocation?: 'left' | 'right'
+
+  size?: 'small' | 'responsive'
+}
+
+const name = 'LayoutOverlayHeader2'
+const parts = ['root', 'bg', 'content', 'left', 'center', 'right'] as const
+
+type State = {
+  left: boolean
+  right: boolean
+  childrenPadding: boolean
+  size: 'small' | 'responsive'
+}
+
+const { withState } = extendableComponent<State, typeof name, typeof parts>(name, parts)
+
+export const LayoutOverlayHeader2 = React.memo<LayoutOverlayHeader2Props>((props) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const {
+    children,
+    hideBackButton = false,
+    primary,
+    secondary,
+    justify = 'center',
+    closeLocation = 'right',
+    sx = [],
+    disableBackNavigation,
+    disableChildrenPadding = false,
+    size = 'responsive',
+  } = props
+
+  const showBack = useShowBack() && !hideBackButton
+  const showClose = useShowClose()
+
+  const close = showClose && <LayoutHeaderClose size={size === 'small' ? 'small' : 'responsive'} />
+  const back = showBack && <LayoutHeaderBack disableBackNavigation={disableBackNavigation} />
+
+  let left = secondary
+  let right = primary
+
+  if (back && !secondary) left = back
+
+  // Handle close button positioning based on closeLocation
+  if (close && closeLocation === 'left' && !left) left = close
+  if (close && closeLocation === 'right' && !right) right = close
+  if (close && closeLocation === 'right' && !left && right) left = close
+  if (!left && !right && !children) return null
+
+  const classes = withState({
+    left: !!left,
+    right: !!right,
+    childrenPadding: !disableChildrenPadding,
+    size,
+  })
+
+  return (
+    <Box
+      className={classes.root}
+      sx={sxx(
+        (theme) => ({
+          zIndex: children ? theme.zIndex.appBar : theme.zIndex.appBar - 2,
+          position: 'sticky',
+          left: 0,
+          right: 0,
+          top: 0,
+          marginTop: 0,
+
+          // Special positioning for bottom overlays
+          [theme.breakpoints.down('md')]: {
+            height: theme.appShell.headerHeightSm,
+            '.variantSmBottom.sizeSmFull &, .variantSmBottom.sizeSmMinimal &': {
+              top: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
+            },
+          },
+          [theme.breakpoints.up('md')]: {
+            height: theme.appShell.appBarHeightMd,
+            '.variantMdBottom.sizeMdFull &, .variantMdBottom.sizeMdMinimal &': {
+              top: `calc(${theme.appShell.appBarHeightMd} * 0.5 * -1)`,
+            },
+
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+            },
+          },
+        }),
+        sx,
+      )}
+    >
+      <Box
+        className={classes.content}
+        ref={ref}
+        sx={sxx((theme) => ({
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          display: 'grid',
+          alignItems: 'center',
+          gap: theme.spacings.xs,
+          height: theme.appShell.headerHeightSm,
+          [theme.breakpoints.up('md')]: {
+            height: theme.appShell.appBarHeightMd,
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+            },
+          },
+
+          // Default: center only
+          gridTemplateAreas: '"center"',
+          gridTemplateColumns: '1fr',
+
+          // Left only
+          '&.left:not(.right)': {
+            gridTemplateAreas: '"left center"',
+            gridTemplateColumns: justify === 'center' ? '1fr max-content' : 'auto 1fr',
+          },
+
+          // Right only
+          '&.right:not(.left)': {
+            gridTemplateAreas: '"center right"',
+            gridTemplateColumns: justify === 'center' ? 'max-content 1fr' : '1fr auto',
+          },
+
+          // Both left and right
+          '&.left.right': {
+            gridTemplateAreas: '"left center right"',
+            gridTemplateColumns: justify === 'center' ? '1fr max-content 1fr' : 'auto 1fr auto',
+          },
+        }))}
+      >
+        {left && (
+          <Box
+            className={classes.left}
+            sx={(theme) => ({
+              pl: theme.spacings.sm,
+              display: 'grid',
+              gridAutoFlow: 'column',
+              gap: theme.spacings.sm,
+              gridArea: 'left',
+              justifyContent: 'start',
+            })}
+          >
+            {left}
+          </Box>
+        )}
+
+        <Box
+          className={classes.center}
+          sx={(theme) => ({
+            display: 'grid',
+            gridAutoFlow: 'column',
+            gap: theme.spacings.sm,
+            gridArea: 'center',
+            overflow: 'hidden',
+            height: '100%',
+            '&.childrenPadding:not(.right)': { pr: theme.spacings.sm },
+            '&.childrenPadding:not(.left)': { pl: theme.spacings.sm },
+          })}
+        >
+          {children}
+        </Box>
+
+        {right && (
+          <Box
+            className={classes.right}
+            sx={(theme) => ({
+              '& > *': { width: 'min-content' },
+              display: 'grid',
+              gridAutoFlow: 'column',
+              gap: theme.spacings.sm,
+              gridArea: 'right',
+              justifyContent: 'end',
+              pr: theme.spacings.sm,
+            })}
+          >
+            {right}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+})

package/LayoutOverlay/index.ts

@@ -1,2 +1,3 @@
 export * from './components/LayoutOverlay'
 export * from './components/LayoutOverlayHeader'
+export * from './components/LayoutOverlayHeader2'

package/Navigation/components/NavigationList.tsx

@@ -39,8 +39,8 @@ export const NavigationList = React.memo<NavigationItemsProps>((props) => {
       {items.map((item, idx) => (
         <NavigationItem
           NavigationList={NavigationList}
-          key={item.id}
           {...item}
+          key={item.id ?? idx}
           parentPath={parentPath}
           idx={idx}
           first={idx === 0}

package/Navigation/components/NavigationOverlay.tsx

@@ -1,5 +1,5 @@
 import { dvw, useMotionSelector, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, useEventCallback, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
@@ -160,7 +160,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                   onClick={handleOnBack}
                   sx={{ boxShadow: 'none', my: fabMarginY }}
                   size='responsive'
-                  aria-label={i18n._(/* i18n */ 'Back')}
+                  aria-label={t`Back`}
                 >
                   <IconSvg src={iconChevronLeft} size='large' aria-hidden />
                 </Fab>
@@ -173,7 +173,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                 onClick={handleClose}
                 sx={{ boxShadow: 'none', my: fabMarginY }}
                 size='responsive'
-                aria-label={i18n._(/* i18n */ 'Close')}
+                aria-label={t`Close`}
                 ref={a11yFocusRef}
               >
                 <IconSvg src={iconClose} size='large' aria-hidden />

package/Navigation/components/NavigationTitle.tsx

@@ -1,5 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type {
   NavigationNodeButton,
   NavigationNodeHref,
@@ -35,6 +35,6 @@ function findCurrent(
 export function NavigationTitle() {
   const { selection, items } = useNavigation()
   return (
-    <>{useMotionValueValue(selection, (v) => findCurrent(items, v))?.name ?? <Trans id='Menu' />}</>
+    <>{useMotionValueValue(selection, (v) => findCurrent(items, v))?.name ?? <Trans>Menu</Trans>}</>
   )
 }

package/Overlay/components/OverlayBase.tsx

@@ -160,7 +160,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     () => (match.up('md') ? variantMd : variantSm),
     [match, variantMd, variantSm],
   )
-  const prevVariant = useRef<LayoutOverlayVariant>()
+  const prevVariant = useRef<LayoutOverlayVariant | null>(null)
 
   const openClosePositions = useCallback((): {
     open: [number, number]
@@ -418,7 +418,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
-        inert={active ? undefined : ('true' as unknown as boolean)}
+        inert={active}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -440,7 +440,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
-        inert={disableInert || active ? undefined : ('true' as unknown as boolean)}
+        inert={disableInert || active ? false : true}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}

package/Overlay/components/OverlayCloseButton.tsx

@@ -0,0 +1,25 @@
+import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
+import { t } from '@lingui/core/macro'
+import { useState } from 'react'
+import { Button, type ButtonProps } from '../../Button'
+
+export function OverlayCloseButton(props: ButtonProps) {
+  const { disabled, ...buttonProps } = props
+  const { closeSteps } = usePageContext()
+  const [isDisabled, setIsDisabled] = useState(disabled)
+  const go = useGo(closeSteps * -1)
+
+  const onClick = () => {
+    setIsDisabled(true)
+    go()
+  }
+
+  return (
+    <Button
+      onClick={onClick}
+      disabled={isDisabled}
+      aria-label={t`Close overlay`}
+      {...buttonProps}
+    />
+  )
+}

package/Overlay/components/OverlayHeader2.tsx

@@ -0,0 +1,26 @@
+import { LayoutTitle, type TitleProps } from '../../Layout'
+import { LayoutHeaderClose } from '../../Layout/components/LayoutHeaderClose'
+import { LayoutOverlayHeader2, type LayoutOverlayHeader2Props } from '../../LayoutOverlay'
+
+export type OverlayHeader2Props = Omit<LayoutOverlayHeader2Props, 'hideBackButton'> & {
+  onClose: () => void
+  icon?: TitleProps['icon']
+}
+
+export function OverlayHeader2(props: OverlayHeader2Props) {
+  const { children, onClose, primary, secondary, icon, ...rest } = props
+
+  return (
+    <LayoutOverlayHeader2
+      hideBackButton
+      size='small'
+      primary={primary ?? <LayoutHeaderClose onClose={onClose} size='small' />}
+      secondary={primary ? <LayoutHeaderClose onClose={onClose} size='small' /> : secondary}
+      {...rest}
+    >
+      <LayoutTitle size='small' component='span' icon={icon}>
+        {children}
+      </LayoutTitle>
+    </LayoutOverlayHeader2>
+  )
+}

package/Overlay/components/index.ts

@@ -1,4 +1,6 @@
-export * from './OverlayBase'
 export * from './Overlay'
-export * from './OverlayStickyBottom'
+export * from './OverlayBase'
+export * from './OverlayCloseButton'
 export * from './OverlayHeader'
+export * from './OverlayHeader2'
+export * from './OverlayStickyBottom'