@graphcommerce/next-ui 8.1.0-canary.9 → 9.0.0-canary.55

package/PageMeta/canonicalize.ts

@@ -0,0 +1,78 @@
+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'
+import { resolveHref } from 'next/dist/client/resolve-href'
+import { NextRouter } from 'next/dist/shared/lib/router/router'
+import type {} from '@graphcommerce/next-config'
+import { useRouter } from 'next/router'
+import { storefrontConfig } from '../utils/storefrontConfig'
+
+type PartialNextRouter = Pick<
+  NextRouter,
+  'pathname' | 'locale' | 'locales' | 'isLocaleDomain' | 'domainLocales' | 'defaultLocale'
+>
+
+export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
+  let canonical = incoming
+
+  if (!canonical) return canonical
+
+  if (!canonical.startsWith('http') && !canonical.startsWith('/')) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `canonical is relative (${canonical}), a canonical must start with '/', 'http://' or 'https://'`,
+      )
+    }
+    canonical = `/${canonical}`
+  }
+
+  if (canonical.startsWith('/')) {
+    let [href, as = href] = resolveHref(router as NextRouter, canonical, true)
+
+    const curLocale = router.locale
+
+    // Copied from here https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/client/link.tsx#L512
+    const localeDomain = getDomainLocale(
+      as,
+      curLocale,
+      router && router.locales,
+      router.domainLocales,
+    )
+
+    if (localeDomain) {
+      canonical = localeDomain
+    } else {
+      const conf = storefrontConfig(router.locale)
+
+      href = addBasePath(
+        addLocale(as, curLocale, conf?.domain ? conf.locale : router.defaultLocale),
+      )
+
+      let siteUrl = conf?.canonicalBaseUrl || import.meta.graphCommerce.canonicalBaseUrl
+
+      if (conf?.domain && !conf?.canonicalBaseUrl) siteUrl = `https://${conf.domain}`
+
+      if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
+
+      canonical = `${siteUrl}${href}`
+    }
+  }
+
+  if (!canonical.startsWith('http')) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,
+      )
+    }
+    canonical = undefined
+  }
+
+  return canonical
+}
+
+export type Canonical = `http://${string}` | `https://${string}` | `/${string}` | string
+
+export function useCanonical(incoming?: Canonical) {
+  const router = useRouter()
+  return canonicalize(router, incoming)
+}

package/Pagination/PaginationExtended.tsx

@@ -0,0 +1,103 @@
+import {
+  PaginationProps,
+  Box,
+  SxProps,
+  Theme,
+  Pagination,
+  PaginationItem,
+  PaginationRenderItemParams,
+} from '@mui/material'
+import { IconSvg } from '../IconSvg'
+import { extendableComponent } from '../Styles'
+import { NextLink } from '../Theme'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+
+export type PaginationExtendedProps = {
+  count: number
+  page: number
+  sx?: SxProps<Theme>
+  size?: 'small' | 'medium' | 'large'
+  paginationHref: (params: PaginationRenderItemParams) => string
+  siblingCount?: number
+  boundaryCount?: number
+} & Omit<PaginationProps, 'count' | 'url' | 'defaultPage' | 'page'>
+
+const parts = ['root', 'button', 'icon'] as const
+const { classes } = extendableComponent('Pagination', parts)
+
+function Prev() {
+  return <IconSvg src={iconChevronLeft} className={classes.icon} size='medium' />
+}
+function Next() {
+  return <IconSvg src={iconChevronRight} className={classes.icon} size='medium' />
+}
+
+/**
+ * Rel="prev" and rel="next" are deprecated by Google.
+ *
+ * Read more: https://ahrefs.com/blog/rel-prev-next-pagination/
+ */
+export function PaginationExtended(props: PaginationExtendedProps) {
+  const {
+    count,
+    page,
+    sx = [],
+    size,
+    paginationHref,
+    renderItem,
+    siblingCount,
+    boundaryCount,
+  } = props
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          margin: '0 auto',
+          marginTop: theme.spacings.lg,
+          marginBottom: theme.spacings.lg,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '6px',
+          '& .Mui-disabled': {
+            background: 'none',
+          },
+          '& .MuiPagination-ul': {
+            justifyContent: 'center',
+          },
+          '& .MuiPaginationItem-root': {
+            minWidth: '35px',
+            height: '35px',
+            padding: 0,
+            '&.MuiPaginationItem-previousNext, &.MuiPaginationItem-ellipsis': {
+              margin: 0,
+            },
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Pagination
+        count={count}
+        defaultPage={page}
+        page={page}
+        siblingCount={siblingCount ?? 1}
+        boundaryCount={boundaryCount ?? 1}
+        size={size ?? 'large'}
+        renderItem={
+          renderItem ??
+          ((item) => (
+            <PaginationItem
+              component={NextLink}
+              href={paginationHref(item)}
+              slots={{ previous: Prev, next: Next }}
+              {...item}
+            />
+          ))
+        }
+      />
+    </Box>
+  )
+}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -9,9 +9,10 @@ import {
   SxProps,
   Theme,
   Portal,
+  SvgIconProps,
 } from '@mui/material'
 import React, { useEffect, useState } from 'react'
-import { IconSvg } from '../IconSvg'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { extendableComponent, breakpointVal } from '../Styles'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
 import iconInfo from '../icons/info.svg'
@@ -28,6 +29,8 @@ export type MessageSnackbarProps = Omit<
   children?: React.ReactNode
   onClose?: () => void
   sx?: SxProps<Theme>
+  disableClose?: boolean
+  icon?: IconSvgProps['src']
 } & OwnerState
 
 type OwnerState = {
@@ -39,6 +42,8 @@ type OwnerState = {
    * Setting this to true allows interaction with the rest of the page without closing the Snackbar
    */
   disableBackdropClick?: boolean
+  disableClose?: boolean
+  disableIcon?: boolean
 }
 
 const name = 'MessageSnackbarImpl' as const
@@ -62,10 +67,21 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     severity = 'info',
     sx,
     disableBackdropClick,
+    disableClose,
+    disableIcon,
+    icon,
     ...snackbarProps
   } = props
 
-  const classes = withState({ sticky, size, severity, variant })
+  const classes = withState({
+    sticky,
+    size,
+    severity,
+    variant,
+    disableBackdropClick,
+    disableClose,
+    disableIcon,
+  })
 
   useEffect(() => {
     setShowSnackbar(!!open)
@@ -89,9 +105,10 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     }
   }
 
-  let icon = iconCheckmark
-  if (severity === 'info') icon = iconInfo
-  if (severity === 'error') icon = iconSadFace
+  let icon2 = iconCheckmark
+  if (severity === 'info') icon2 = iconInfo
+  if (severity === 'error') icon2 = iconSadFace
+  if (icon) icon2 = icon
 
   return (
     <Portal>
@@ -148,10 +165,32 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                 gridArea: 'children',
               },
             },
+
+            '&.disableIcon .MuiSnackbarContent-message': {
+              gridTemplate: {
+                xs: `"children close"
+                       "action action"`,
+                md: '"children action close"',
+              },
+            },
+            '&.disableClose .MuiSnackbarContent-message': {
+              gridTemplate: {
+                xs: `"icon children"
+                       "action action"`,
+                md: '"icon children action"',
+              },
+            },
+            '&.disableIcon.disableClose .MuiSnackbarContent-message': {
+              gridTemplate: {
+                xs: `"children"
+                       "action"`,
+                md: '"children action"',
+              },
+            },
           })}
           message={
             <>
-              <IconSvg src={icon} size='large' />
+              {!disableIcon && <IconSvg src={icon2} size='large' />}
               <Box gridArea='children'>{children}</Box>
               {/* </Box> */}
               {action && (
@@ -159,19 +198,21 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                   {action}
                 </Box>
               )}
-              <Fab
-                className={classes.close}
-                aria-label={i18n._(/* i18n */ 'Close')}
-                size='small'
-                onClick={hideSnackbar}
-                onMouseDown={preventAnimationBubble}
-                onTouchStart={preventAnimationBubble}
-                sx={(theme) => ({
-                  backgroundColor: lighten(theme.palette.background.paper, 0.1),
-                })}
-              >
-                <IconSvg src={iconClose} />
-              </Fab>
+              {!disableClose && (
+                <Fab
+                  className={classes.close}
+                  aria-label={i18n._(/* i18n */ 'Close')}
+                  size='small'
+                  onClick={hideSnackbar}
+                  onMouseDown={preventAnimationBubble}
+                  onTouchStart={preventAnimationBubble}
+                  sx={(theme) => ({
+                    backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                  })}
+                >
+                  <IconSvg src={iconClose} />
+                </Fab>
+              )}
             </>
           }
         />

package/Styles/responsiveVal.tsx

@@ -6,15 +6,14 @@
 export function responsiveVal(
   min: number,
   max: number,
-  maxBreakpoint = 1280,
-): `max(${number}px, min(${string}, ${number}px))` {
+  minBreakpoint = 320,
+  maxBreakpoint = 2560,
+): `clamp(${number}px, ${string}, ${number}px)` {
   const round = (x: number, n: number): number => Math.round(x * 10 ** n) / 10 ** n
 
-  const minBreakpoint = 320
   const growth = (max - min) / (maxBreakpoint - minBreakpoint)
   const base = round(min - growth * minBreakpoint, 2)
   const vsize = round(growth * 100, 2)
 
-  const calc = `(${base}px + ${vsize}vw)`
-  return `max(${min}px, min(${calc}, ${max}px))`
+  return `clamp(${min}px, (${base}px + ${vsize}vw), ${max}px)`
 }

package/Styles/withEmotionCache.tsx

@@ -1,10 +1,10 @@
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
-// eslint-disable-next-line @next/next/no-document-import-in-page
 import { AppType } from 'next/app'
+// eslint-disable-next-line @next/next/no-document-import-in-page
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
-import type { DocumentContext, DocumentInitialProps } from 'next/document'
+import type { DocumentContext } from 'next/document'
 import { EmotionProviderProps } from './EmotionProvider'
 import { createEmotionCache } from './createEmotionCache'
 

package/Theme/DarkLightModeThemeProvider.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { iconMoon, iconSun } from '../icons'
+import { getCssFlag, setCssFlag } from '../utils/cssFlags'
 
 type Mode = 'dark' | 'light'
 type UserMode = 'auto' | Mode
@@ -22,6 +23,7 @@ type ColorModeContext = {
   userMode: UserMode
   browserMode: Mode
   currentMode: Mode
+  isSingleMode: boolean
   toggle: () => void
 }
 
@@ -29,48 +31,59 @@ export const colorModeContext = createContext(undefined as unknown as ColorModeC
 colorModeContext.displayName = 'ColorModeContext'
 
 type ThemeProviderProps = {
-  // eslint-disable-next-line react/no-unused-prop-types
-  light: Theme
-  // eslint-disable-next-line react/no-unused-prop-types
-  dark: Theme
-
   children: React.ReactNode
-}
+  ssrMode?: Mode
+  listenToBrowser?: boolean
+} & (
+  | { light: Theme; dark?: undefined }
+  | { light?: undefined; dark: Theme }
+  | { light: Theme; dark: Theme }
+)
 
 /**
  * Wrapper around `import { ThemeProvider } from '@mui/material'`
  *
  * The multi DarkLightModeThemeProvider allows switching between light and dark mode based on URL
  * and on user input.
- *
- * If you _just_ wan't a single theme, use the import { ThemeProvider } from '@mui/material' instead.
  */
 export function DarkLightModeThemeProvider(props: ThemeProviderProps) {
-  const { children, light, dark } = props
+  const { children, light, dark, ssrMode = 'light', listenToBrowser = true } = props
+  const [configuredMode, setConfiguredMode] = useState<UserMode>(listenToBrowser ? 'auto' : ssrMode)
+  const setThemeMode = (mode: UserMode) => {
+    setConfiguredMode(mode)
+    setCssFlag('color-scheme', mode)
+  }
 
-  // todo: Save this in local storage
-  const [userMode, setUserMode] = useState<UserMode>('auto')
   const browserMode: Mode = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light'
 
   // If the user has set a mode, use that. Otherwise, use the browser mode.
-  const currentMode = userMode === 'auto' ? browserMode : userMode
-  const theme = currentMode === 'light' ? light : dark
+  const currentMode = configuredMode === 'auto' ? browserMode : configuredMode
+
+  let theme: Theme = light || dark // Default
+  if (light && currentMode === 'light') theme = light
+  else if (dark) theme = dark
+
+  useEffect(() => {
+    const flag = getCssFlag('color-scheme') as Mode
+    if (flag) setConfiguredMode(flag)
+  }, [setConfiguredMode])
 
   // If a URL parameter is present, switch from auto to light or dark mode
   const { asPath } = useRouter()
   useEffect(() => {
-    if (asPath.includes('darkmode')) setUserMode('dark')
+    if (asPath.includes('darkmode')) setConfiguredMode('dark')
   }, [asPath])
 
   // Create the context
   const colorContext: ColorModeContext = useMemo(
     () => ({
       browserMode,
-      userMode,
+      userMode: configuredMode,
       currentMode,
-      toggle: () => setUserMode(currentMode === 'light' ? 'dark' : 'light'),
+      isSingleMode: !light || !dark,
+      toggle: () => setThemeMode(currentMode === 'light' ? 'dark' : 'light'),
     }),
-    [browserMode, currentMode, userMode],
+    [browserMode, configuredMode, currentMode, light, dark],
   )
 
   return (
@@ -85,7 +98,12 @@ export function useColorMode() {
 }
 
 export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
-  const { currentMode, toggle } = useColorMode()
+  const { currentMode, isSingleMode, toggle } = useColorMode()
+
+  if (isSingleMode) {
+    return null
+  }
+
   return (
     <Fab size='large' color='inherit' onClick={toggle} {...props}>
       <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
@@ -100,7 +118,11 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
  */
 export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   const { sx = [] } = props
-  const { currentMode, toggle } = useColorMode()
+  const { currentMode, isSingleMode, toggle } = useColorMode()
+
+  if (isSingleMode) {
+    return null
+  }
 
   return (
     <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>

package/hooks/index.ts

@@ -5,5 +5,5 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
-export * from './useSsr'
+export * from './useIsSsr'
 export * from './useLocale'

package/hooks/useDateTimeFormat.ts

@@ -1,11 +1,11 @@
 import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
-export type DateTimeFormatProps = Intl.DateTimeFormatOptions
-
-export function useDateTimeFormat(props?: DateTimeFormatProps) {
+/**
+ * @deprecated use <DateFormat/>, <TimeFormat/> or <DateTimeFormat/> instead
+ */
+export function useDateTimeFormat(props?: Intl.DateTimeFormatOptions) {
   const locale = useLocale()
-
   const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/{useSsr.ts → useIsSsr.ts}

@@ -2,6 +2,9 @@ import { useSyncExternalStore } from 'react'
 
 const emptySubscribe = () => () => {}
 
+/**
+ * This method will return true on the server and during hydration and false after that.
+ */
 export function useIsSSR() {
   return useSyncExternalStore(
     emptySubscribe,

package/hooks/useLocale.ts

@@ -1,7 +1,7 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
+import { normalizeLocale } from '../utils/normalizeLocale'
 import { useStorefrontConfig } from './useStorefrontConfig'
 
-export function useLocale() {
+export function useLocale(): Intl.BCP47LanguageTag {
   const { locale } = useStorefrontConfig()
   return normalizeLocale(locale)
 }

package/hooks/useNumberFormat.ts

@@ -1,9 +1,10 @@
 import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
-export type NumberFormatProps = Intl.NumberFormatOptions
-
-export function useNumberFormat(props?: NumberFormatProps) {
+/**
+ * @deprecated use <NumberFormat />, <PercentFormat /> or <UnitFormat /> instead
+ */
+export function useNumberFormat(props?: Intl.NumberFormatOptions) {
   const locale = useLocale()
   const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
   return formatter

package/hooks/useStorefrontConfig.ts

@@ -1,13 +1,5 @@
 import { useRouter } from 'next/router'
-
-export const storefrontAll = import.meta.graphCommerce.storefront
-
-/** Get the current storefront config based on the provided locale */
-export const storefrontConfig = (locale?: string | undefined) =>
-  storefrontAll.find((l) => l.locale === locale)
-
-export const storefrontConfigDefault = () =>
-  storefrontAll.find((l) => l.defaultLocale) ?? storefrontAll[0]
+import { storefrontConfig } from '../utils/storefrontConfig'
 
 /** Automatically selects the correct storefront config based on the current locale */
 export function useStorefrontConfig(locale?: string | undefined) {

package/hooks/useUrlQuery.ts

@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 
-export function useUrlQuery<T extends Record<string, string | null>>() {
-  const { query, replace } = useRouter()
+export function useUrlQuery<T extends Record<string, string | null>>(doPush?: boolean) {
+  const { query, replace, push } = useRouter()
 
   const setRouterQuery = useCallback(
     (incoming: T) => {
@@ -13,9 +13,11 @@ export function useUrlQuery<T extends Record<string, string | null>>() {
 
       if (JSON.stringify(current) === JSON.stringify(newQuery)) return Promise.resolve(true)
 
-      return replace({ query: newQuery }, undefined, { shallow: true })
+      return doPush
+        ? push({ query: newQuery })
+        : replace({ query: newQuery }, undefined, { shallow: true })
     },
-    [replace],
+    [doPush, push, replace],
   )
 
   return [query as T, setRouterQuery] as const

package/icons.ts

@@ -0,0 +1,55 @@
+export { default as iconArrowDown } from './icons/arrow-down.svg'
+export { default as iconArrowBack } from './icons/arrow-left.svg'
+export { default as iconArrowForward } from './icons/arrow-right.svg'
+export { default as iconArrowUp } from './icons/arrow-up.svg'
+export { default as iconShoppingBag } from './icons/bag.svg'
+export { default as iconBin } from './icons/bin.svg'
+export { default as iconInvoice } from './icons/box-alt.svg'
+export { default as iconBox } from './icons/box.svg'
+export { default as iconOrderBefore } from './icons/calendar.svg'
+export { default as iconCancelAlt } from './icons/cancel-alt.svg'
+export { default as iconCancel } from './icons/cancel.svg'
+export { default as iconCartAdd } from './icons/cart-add.svg'
+export { default as iconCart } from './icons/cart.svg'
+export { default as iconChat } from './icons/chat-alt.svg'
+export { default as iconCustomerService } from './icons/chat.svg'
+export { default as iconChevronDown } from './icons/chevron-down.svg'
+export { default as iconChevronBack, default as iconChevronLeft } from './icons/chevron-left.svg'
+export { default as iconChevronRight } from './icons/chevron-right.svg'
+export { default as iconChevronUp } from './icons/chevron-up.svg'
+export { default as iconCirle } from './icons/circle.svg'
+export { default as iconClose } from './icons/close.svg'
+export { default as iconCompare } from './icons/compare-arrows.svg'
+export { default as iconContrast } from './icons/contrast.svg'
+export { default as iconCreditCard, default as iconId } from './icons/credit-card.svg'
+export { default as iconEllypsis } from './icons/ellypsis.svg'
+export { default as iconEmail, default as iconEmailOutline } from './icons/envelope-alt.svg'
+export { default as iconExit } from './icons/exit.svg'
+export { default as icon404 } from './icons/explore.svg'
+export { default as iconEyeClosed } from './icons/eye-closed.svg'
+export { default as iconEyeCrossed } from './icons/eye-crossed.svg'
+export { default as iconEye } from './icons/eye.svg'
+export { default as iconHeart } from './icons/favourite.svg'
+export { default as iconMenu } from './icons/hamburger.svg'
+export { default as iconParty } from './icons/happy-face.svg'
+export { default as iconAddresses, default as iconHome } from './icons/home-alt.svg'
+export { default as iconLanguage } from './icons/language.svg'
+export { default as iconLocation } from './icons/location.svg'
+export { default as iconLock } from './icons/lock.svg'
+export { default as iconFullscreen } from './icons/maximise.svg'
+export { default as iconFullscreenExit } from './icons/minimise.svg'
+export { default as iconMin } from './icons/minus.svg'
+export { default as iconMoon } from './icons/moon.svg'
+export { default as iconNewspaper } from './icons/news.svg'
+export { default as iconCheckmark } from './icons/ok.svg'
+export { default as iconPerson } from './icons/person-alt.svg'
+export { default as iconPlay } from './icons/play.svg'
+export { default as iconPlus } from './icons/plus.svg'
+export { default as iconShutdown } from './icons/power.svg'
+export { default as iconRefresh } from './icons/refresh.svg'
+export { default as iconSadFace } from './icons/sad-face.svg'
+export { default as iconSearch } from './icons/search.svg'
+export { default as iconPhone } from './icons/smartphone.svg'
+export { default as iconStar } from './icons/star.svg'
+export { default as iconSun } from './icons/sun.svg'
+export { default as iconInfo } from './icons/info.svg'

package/index.ts

@@ -7,6 +7,7 @@ export * from './Blog/BlogList/BlogList'
 export * from './Blog/BlogListItem/BlogListItem'
 export * from './Blog/BlogTags/BlogTags'
 export * from './Blog/BlogTitle/BlogTitle'
+export * from './Breadcrumbs'
 export * from './Button'
 export * from './ChipMenu/ChipMenu'
 export * from './ContainerWithHeader/ContainerWithHeader'
@@ -22,8 +23,11 @@ export * from './Form/InputCheckmark'
 export * from './FramerScroller'
 export * from './FullPageMessage/FullPageMessage'
 export * from './Highlight/Highlight'
+export * from './hooks'
 export * from './IconHeader/IconHeader'
+export * from './icons'
 export * from './IconSvg'
+export * from './Intl'
 export * from './JsonLd/JsonLd'
 export * from './Layout'
 export * from './LayoutDefault'
@@ -35,8 +39,10 @@ export * from './Overlay'
 export * from './OverlayOrPopperChip'
 export * from './Page'
 export * from './PageLoadIndicator/PageLoadIndicator'
+export * from './PageMeta/canonicalize'
 export * from './PageMeta/PageMeta'
 export * from './Pagination/Pagination'
+export * from './Pagination/PaginationExtended'
 export * from './RenderType'
 export * from './Row'
 export * from './SectionContainer/SectionContainer'
@@ -56,8 +62,9 @@ export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'
-export * from './hooks'
-export * from './icons'
 export * from './utils/cookie'
-export * from './utils/sitemap'
+export * from './utils/cssFlags'
+export * from './utils/normalizeLocale'
 export * from './utils/robots'
+export * from './utils/sitemap'
+export * from './utils/storefrontConfig'