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

package/OverlayOrPopperChip/OverlayPanelActions.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 { Box, Button, Fab, Typography } from '@mui/material'
 import { iconClose } from '../icons'
 import { IconSvg, useIconSvgSize } from '../IconSvg'
@@ -30,7 +30,7 @@ export function OverlayPanelActions(props: PanelActionsProps) {
         primary={
           onReset && (
             <Button variant='inline' color='primary' onClick={onReset}>
-              <Trans id='Reset' />
+              <Trans>Reset</Trans>
             </Button>
           )
         }
@@ -43,7 +43,7 @@ export function OverlayPanelActions(props: PanelActionsProps) {
               ml: `calc((${fabSize} - ${svgSize}) * -0.5)`,
             }}
             size='small'
-            aria-label={i18n._(/* i18n */ 'Close')}
+            aria-label={t`Close`}
           >
             <IconSvg src={iconClose} size='large' aria-hidden />
           </Fab>
@@ -68,7 +68,7 @@ export function OverlayPanelActions(props: PanelActionsProps) {
           fullWidth
           // sx={(theme) => ({ mt: theme.spacings.md })}
         >
-          <Trans id='Apply' />
+          <Trans>Apply</Trans>
         </Button>
       </OverlayStickyBottom>
     </>

package/OverlayOrPopperChip/PopperPanelActions.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 { Box, Button, Fab, Typography } from '@mui/material'
 import { iconClose } from '../icons'
 import { IconSvg, useIconSvgSize } from '../IconSvg'
@@ -24,7 +24,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
         primary={
           onReset && (
             <Button variant='text' color='primary' size='medium' onClick={onReset}>
-              <Trans id='Reset' />
+              <Trans>Reset</Trans>
             </Button>
           )
         }
@@ -37,7 +37,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
               ml: `calc((${fabSize} - ${svgSize}) * -0.5)`,
             }}
             size='small'
-            aria-label={i18n._(/* i18n */ 'Close')}
+            aria-label={t`Close`}
           >
             <IconSvg src={iconClose} size='large' aria-hidden />
           </Fab>
@@ -68,7 +68,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
           color='primary'
           fullWidth
         >
-          <Trans id='Apply' />
+          <Trans>Apply</Trans>
         </Button>
       </OverlayStickyBottom>
     </>

package/Page/types.ts

@@ -1,5 +1,5 @@
 import type { ParsedUrlQuery } from 'querystring'
-import type { UpPage } from '@graphcommerce/framer-next-pages/types'
+import type { UpPage } from '@graphcommerce/framer-next-pages'
 // todo: remove references to GraphQL
 // eslint-disable-next-line import/no-extraneous-dependencies
 import type { NormalizedCacheObject } from '@graphcommerce/graphql'

package/PageMeta/canonicalize.ts

@@ -1,4 +1,5 @@
 import type {} from '@graphcommerce/next-config'
+import { canonicalBaseUrl } from '@graphcommerce/next-config/config'
 import { addBasePath } from 'next/dist/client/add-base-path'
 import { addLocale } from 'next/dist/client/add-locale'
 import { getDomainLocale } from 'next/dist/client/get-domain-locale'
@@ -49,7 +50,7 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
         addLocale(as, curLocale, conf?.domain ? conf.locale : router.defaultLocale),
       )
 
-      let siteUrl = conf?.canonicalBaseUrl || import.meta.graphCommerce.canonicalBaseUrl
+      let siteUrl = conf?.canonicalBaseUrl || canonicalBaseUrl
 
       if (conf?.domain && !conf?.canonicalBaseUrl) siteUrl = `https://${conf.domain}`
 

package/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { PaginationProps, SxProps, Theme } from '@mui/material'
 import { Box, IconButton } from '@mui/material'
 import type { UsePaginationItem } from '@mui/material/usePagination'
@@ -59,6 +59,7 @@ export function Pagination(props: PagePaginationProps) {
       <IconSvg src={iconChevronRight} className={classes.icon} size='medium' />
     </IconButton>
   )
+  const max = Math.max(1, count)
 
   return (
     <Box
@@ -82,7 +83,9 @@ export function Pagination(props: PagePaginationProps) {
       {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
 
       <Box typography='body1'>
-        <Trans id='Page {page} of {count}' values={{ page, count: Math.max(1, count) }} />
+        <Trans>
+          Page {page} of {max}
+        </Trans>
       </Box>
 
       {page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}

package/SkipLink/SkipLink.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Link } from '@mui/material'
 
 export function SkipLink() {
@@ -32,7 +32,7 @@ export function SkipLink() {
         },
       })}
     >
-      <Trans id='Skip to main content' />
+      <Trans>Skip to main content</Trans>
     </Link>
   )
 }

package/Snackbar/ErrorSnackbar.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Button } from '@mui/material'
 import { MessageSnackbar } from './MessageSnackbar'
 import type { MessageSnackbarProps } from './MessageSnackbarImpl'
@@ -15,7 +15,7 @@ export function ErrorSnackbar(props: ErrorSnackbarProps) {
       action={
         action ?? (
           <Button size='medium' variant='pill' color='secondary' fullWidth>
-            <Trans id='Ok' />
+            <Trans>Ok</Trans>
           </Button>
         )
       }

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,4 +1,4 @@
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SnackbarProps, SxProps, Theme } from '@mui/material'
 import { Box, Fab, lighten, Portal, Snackbar, SnackbarContent } from '@mui/material'
 import React, { useEffect, useState } from 'react'
@@ -190,7 +190,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
               {!disableClose && (
                 <Fab
                   className={classes.close}
-                  aria-label={i18n._(/* i18n */ 'Close')}
+                  aria-label={t`Close`}
                   size='small'
                   onClick={hideSnackbar}
                   onMouseDown={preventAnimationBubble}

package/Styles/withEmotionCache.tsx

@@ -1,4 +1,3 @@
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 import type { AppType } from 'next/app'
 // eslint-disable-next-line @next/next/no-document-import-in-page
@@ -8,7 +7,7 @@ import type { DocumentContext } from 'next/document'
 import { createEmotionCache } from './createEmotionCache'
 import type { EmotionProviderProps } from './EmotionProvider'
 
-export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
+export type EmotionCacheProps = { emotionStyleTags: React.ReactNode[] }
 
 export function withEmotionCache(Document: typeof NextDocument): typeof NextDocument {
   return class DocumentWithEmotionCache extends Document {
@@ -32,7 +31,6 @@ export function withEmotionCache(Document: typeof NextDocument): typeof NextDocu
         <style
           data-emotion={`${style.key} ${style.ids.join(' ')}`}
           key={style.key}
-          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: style.css }}
         />
       ))

package/Tabs/TabItem.tsx

@@ -0,0 +1,134 @@
+import { Box, ButtonBase, type SxProps, type Theme } from '@mui/material'
+import { alpha, useTheme } from '@mui/material/styles'
+import { forwardRef } from 'react'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { responsiveVal } from '../Styles/responsiveVal'
+import { sxx } from '../utils/sxx'
+
+export type TabItemVariant = 'chrome'
+
+export type TabItemProps = {
+  /** Whether this tab is selected */
+  selected: boolean
+  /** Content to display inside the tab */
+  children: React.ReactNode
+  /** Click handler */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+
+  /** Spacing for the tab */
+  spacing?: string
+  /** Custom styling */
+  sx?: SxProps<Theme>
+  /** Whether to disable ripple effect */
+  disableRipple?: boolean
+  /** Additional className */
+  className?: string
+
+  color: (theme: Theme) => string
+  variant?: 'chrome'
+}
+
+type State = {
+  selected: boolean
+  variant: 'chrome'
+}
+
+const name = 'TabItem'
+const parts = ['root', 'content'] as const
+const { withState } = extendableComponent<State, typeof name, typeof parts>(name, parts)
+
+export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>((props, ref) => {
+  const {
+    selected,
+    children,
+    onClick,
+    spacing = responsiveVal(4, 20),
+    sx,
+    disableRipple = true,
+    className,
+    color = (theme) => theme.palette.background.default,
+    variant = 'chrome',
+    ...other
+  } = props
+
+  const classes = withState({ selected, variant })
+
+  return (
+    <Box
+      ref={ref}
+      component={ButtonBase}
+      onClick={selected ? undefined : onClick}
+      className={`${classes.root} ${className ?? ''}`}
+      disableRipple={selected || disableRipple}
+      role='tab'
+      aria-selected={selected}
+      // tabindex={0}
+      sx={sxx(
+        (theme) => ({
+          position: 'relative',
+          textDecoration: 'none',
+          color: 'text.primary',
+          typography: 'subtitle1',
+          mt: spacing,
+          height: `calc(100% - ${spacing})`,
+          pb: spacing,
+          mx: `calc(${spacing} / 2)`,
+          transition: 'background-color 0.2s ease-in-out',
+
+          '&:hover:not(.selected) .TabItem-content': {
+            bgcolor: alpha(color(theme), 0.5),
+          },
+          '&:focus:not(.selected) .TabItem-content': {
+            bgcolor: alpha(color(theme), 0.5),
+          },
+          '&::before': {
+            opacity: 0,
+            transition: 'opacity 0.2s ease-in-out',
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            left: '-10px',
+            width: '10px',
+            height: '10px',
+            background: `radial-gradient(circle at top left, transparent 10px, ${color(theme)} 10px)`,
+          },
+          '&::after': {
+            opacity: 0,
+            transition: 'opacity 0.2s ease-in-out',
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            right: '-10px',
+            width: '10px',
+            height: '10px',
+            background: `radial-gradient(circle at top right, transparent 10px, ${color(theme)} 10px)`,
+          },
+          borderStartStartRadius: '0.5em',
+          borderStartEndRadius: '0.5em',
+          '&.selected': {
+            bgcolor: color(theme),
+            '&::before': { opacity: 1 },
+            '&::after': { opacity: 1 },
+          },
+        }),
+        sx,
+      )}
+      {...other}
+    >
+      <Box
+        className={classes.content}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%',
+          px: spacing,
+          gap: `calc(${spacing} / 2)`,
+          borderRadius: '0.5em',
+          transition: 'background-color 0.2s ease-in-out',
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+})

package/Tabs/Tabs.tsx

@@ -0,0 +1,124 @@
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Box, type SxProps, type Theme } from '@mui/material'
+import React from 'react'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+import { IconSvg } from '../IconSvg'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { sxx } from '../utils/sxx'
+
+export type TabsProps = {
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+  /** Additional content to show before tabs */
+  startContent?: React.ReactNode
+  /** Additional content to show after tabs */
+  endContent?: React.ReactNode
+  /** Whether to show separators between tabs */
+  showSeparators?: boolean
+  /** Custom separator component */
+  separator?: React.ReactNode
+}
+
+const { classes } = extendableComponent('Tabs', ['root', 'scroller', 'left', 'right', 'button'])
+
+export function Tabs(props: TabsProps) {
+  const { children, sx, startContent, endContent, showSeparators = true, separator } = props
+
+  const defaultSeparator = (
+    <Box
+      className='separator'
+      sx={{ width: '2px', height: '1em', bgcolor: 'divider', mx: '-1px' }}
+    />
+  )
+
+  const separatorElement = separator ?? defaultSeparator
+
+  return (
+    <Box
+      className={classes.root}
+      sx={sxx(
+        {
+          alignItems: 'stretch',
+          position: 'relative',
+          pointerEvents: 'all',
+          gridTemplateColumns: 'auto 1fr auto',
+          display: 'grid',
+          gridAutoFlow: 'column',
+        },
+        sx,
+      )}
+    >
+      <ScrollerProvider scrollSnapAlign='none'>
+        <Scroller
+          hideScrollbar
+          sx={{
+            gridArea: '1 / 1 / 1 / 4',
+            gridAutoColumns: 'min-content',
+            alignItems: 'center',
+            // Hide the Separator that comes before or after the selected tab.
+            '& .separator': { transition: 'opacity 0.2s ease-in-out' },
+            '& .TabItem-root.selected + .separator': { opacity: 0 },
+            '& .separator:has(+ .TabItem-root.selected)': { opacity: 0 },
+            // Same for hover:
+            '& .TabItem-root:hover + .separator': { opacity: 0 },
+            '& .separator:has(+ .TabItem-root:hover)': { opacity: 0 },
+          }}
+          className={classes.scroller}
+          role='tablist'
+        >
+          {startContent}
+
+          {showSeparators && startContent && separatorElement}
+
+          {React.Children.map(children, (child, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <React.Fragment key={index}>
+              {showSeparators && index > 0 && separatorElement}
+              {child}
+            </React.Fragment>
+          ))}
+
+          {showSeparators && endContent && separatorElement}
+
+          {endContent}
+        </Scroller>
+
+        <ScrollerButton
+          sxContainer={{
+            gridArea: '1 / 1 / 1 / 2',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'all' },
+          }}
+          sx={{ pointerEvents: 'all' }}
+          direction='left'
+          size='small'
+          tabIndex={-1}
+          className={`${classes.left} ${classes.button}`}
+        >
+          <IconSvg src={iconChevronLeft} />
+        </ScrollerButton>
+
+        <ScrollerButton
+          sxContainer={{
+            gridArea: '1 / 3 / 1 / 4',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'all' },
+          }}
+          sx={{ pointerEvents: 'all' }}
+          direction='right'
+          size='small'
+          tabIndex={-1}
+          className={`${classes.right} ${classes.button}`}
+        >
+          <IconSvg src={iconChevronRight} />
+        </ScrollerButton>
+      </ScrollerProvider>
+    </Box>
+  )
+}

package/TextInputNumber/TextInputNumber.tsx

@@ -1,4 +1,4 @@
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
 import {
   Box,
@@ -125,7 +125,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         startAdornment: (
           <Box>
             <Fab
-              aria-label={i18n._(/* i18n */ 'Decrease')}
+              aria-label={t`Decrease`}
               size='smaller'
               sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
               onPointerDown={() => setDirection('down')}
@@ -141,7 +141,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         endAdornment: (
           <Box>
             <Fab
-              aria-label={i18n._(/* i18n */ 'Increase')}
+              aria-label={t`Increase`}
               size='smaller'
               sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
               onPointerDown={() => setDirection('up')}
@@ -160,7 +160,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         updateDisabled(e.target)
       }}
       inputProps={{
-        'aria-label': i18n._(/* i18n */ 'Number'),
+        'aria-label': t`Number`,
         ...inputProps,
         sx: [
           {

package/Theme/DarkLightModeThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { FabProps, ListItemButtonProps, Theme } from '@mui/material'
 import {
   Fab,
@@ -133,7 +133,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
         <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
       <ListItemText>
-        {currentMode === 'light' ? <Trans id='Dark Mode' /> : <Trans id='Light Mode' />}
+        {currentMode === 'light' ? <Trans>Dark Mode</Trans> : <Trans>Light Mode</Trans>}
       </ListItemText>
     </ListItemButton>
   )

package/Theme/NextLink.tsx

@@ -1,3 +1,4 @@
+import { canonicalBaseUrl } from '@graphcommerce/next-config/config'
 import type { LinkProps as NextLinkProps } from 'next/link'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -30,8 +31,7 @@ export const NextLink = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) =>
   let { href, target, relative, locale, ...rest } = props
 
   const router = useRouter()
-  const canonicalBaseUrl =
-    useStorefrontConfig().canonicalBaseUrl ?? import.meta.graphCommerce.canonicalBaseUrl
+  const canonical = useStorefrontConfig().canonicalBaseUrl ?? canonicalBaseUrl
 
   // The href is optional in a MUI link, but required in a Next.js link
   // When the href is not a string, we pass it through directly
@@ -44,14 +44,14 @@ export const NextLink = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) =>
    * and make the URL relative without the locale. Prevents Next.js prefixing again with the current
    * locale.
    */
-  if (!locale && isFullUrl && href.startsWith(canonicalBaseUrl)) {
+  if (!locale && isFullUrl && href.startsWith(canonical)) {
     const url = new URL(href)
     locale = router.locales?.find((l) => url.pathname.startsWith(`/${l}/`))
     href = locale ? url.pathname.replace(`/${locale}/`, '/') : url.pathname
     href += url.search
   }
 
-  const isExternal = isFullUrl && !href.startsWith(canonicalBaseUrl)
+  const isExternal = isFullUrl && !href.startsWith(canonical)
   if (isExternal) target = target || '_blank'
 
   // Relative URL's cause more pain than they're worth

package/hooks/memoDeep.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import diff from '@graphcommerce/react-hook-form/src/diff'
+import { diff } from '@graphcommerce/react-hook-form'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
 import type { FunctionComponent, NamedExoticComponent } from 'react'

package/index.ts

@@ -59,6 +59,8 @@ export * from './Stepper/Stepper'
 export * from './Styles'
 export * from './TextInputNumber/TextInputNumber'
 export * from './Theme'
+export * from './Tabs/TabItem'
+export * from './Tabs/Tabs'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,35 +11,53 @@
       "project": "./tsconfig.json"
     }
   },
+  "exports": {
+    ".": "./index.ts",
+    "./types": "./types.ts",
+    "./server": "./server.ts",
+    "./Layout/components/LayoutHeaderClose": "./Layout/components/LayoutHeaderClose.tsx",
+    "./LayoutOverlay/test/LayoutOverlayDemo": "./LayoutOverlay/test/LayoutOverlayDemo.tsx",
+    "./Styles/extendableComponent": "./Styles/extendableComponent.ts",
+    "./Styles": "./Styles/index.ts",
+    "./hooks/useMatchMedia": "./hooks/useMatchMedia.ts",
+    "./hooks/useStorefrontConfig": "./hooks/useStorefrontConfig.ts",
+    "./hooks/useIsSsr": "./hooks/useIsSsr.ts",
+    "./hooks/useMemoObject": "./hooks/useMemoObject.ts",
+    "./utils/cssFlags": "./utils/cssFlags.tsx",
+    "./Intl/DateTimeFormat/toDate": "./Intl/DateTimeFormat/toDate.ts",
+    "./Breadcrumbs/BreadcrumbsJsonLd": "./Breadcrumbs/BreadcrumbsJsonLd.tsx",
+    "./Breadcrumbs/jsonLdBreadcrumb": "./Breadcrumbs/jsonLdBreadcrumb.tsx",
+    "./RenderType/filterNonNullableKeys": "./RenderType/filterNonNullableKeys.ts"
+  },
   "dependencies": {
     "cookie": "^1.0.2",
-    "react-is": "^18.3.1"
+    "react-is": "^19.2.0"
   },
   "devDependencies": {
-    "@types/react-is": "^18.3.1",
-    "typescript": "5.7.2"
+    "@types/react-is": "^19.2.0",
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
     "@emotion/cache": "^11",
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.54",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.54",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.54",
-    "@graphcommerce/image": "^9.1.0-canary.54",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.54",
-    "@lingui/core": "^4.2.1",
-    "@lingui/macro": "^4.2.1",
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.56",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.56",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.56",
+    "@graphcommerce/image": "^10.0.0-canary.56",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
+    "@lingui/core": "^5",
+    "@lingui/macro": "^5",
+    "@lingui/react": "^5",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
     "framer-motion": "^11.0.0",
     "next": "*",
     "next-sitemap": "4.2.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   }
 }

package/po.d.ts

@@ -0,0 +1,6 @@
+declare module '*.po' {
+  export const messages: Record<
+    string,
+    string | Array<string | Array<string | (string | undefined) | Record<string, unknown>>>
+  >
+}

package/{types.d.ts → types.ts}

@@ -5,12 +5,3 @@
 import './Theme/createTheme'
 // eslint-disable-next-line react/no-typos
 import 'react'
-
-declare module '*.po' {
-  const messages: Record<
-    string,
-    string | Array<string | Array<string | (string | undefined) | Record<string, unknown>>>
-  >
-
-  export const messages
-}

package/utils/storefrontConfig.ts

@@ -1,8 +1,10 @@
-export const storefrontAll = import.meta.graphCommerce.storefront
+import { storefront } from '@graphcommerce/next-config/config'
+
+export const storefrontAll = storefront
 
 /** Get the current storefront config based on the provided locale */
 export const storefrontConfig = (locale?: string | undefined) =>
-  storefrontAll.find((l) => l.locale === locale)
+  storefront.find((l) => l.locale === locale)
 
 export const storefrontConfigDefault = () =>
-  storefrontAll.find((l) => l.defaultLocale) ?? storefrontAll[0]
+  storefront.find((l) => l.defaultLocale) ?? storefrontAll[0]