@graphcommerce/next-ui 10.1.0-canary.7 → 11.0.0-canary.45

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # Change Log
 
+## 11.0.0-canary.45
+
+## 10.1.0-canary.44
+
+## 10.1.0-canary.43
+
+## 10.1.0-canary.42
+
+## 10.1.0-canary.41
+
+## 10.1.0-canary.40
+
+## 10.1.0-canary.39
+
+### Minor Changes
+
+- [#2652](https://github.com/graphcommerce-org/graphcommerce/pull/2652) [`132d1e1`](https://github.com/graphcommerce-org/graphcommerce/commit/132d1e1075b22843ed5934314c723df06ea13a6a) - `HeroBanner` gains an `asset?: React.ReactNode` prop, and `videoSrc` is deprecated.
+
+  The banner rendered a `<video>` itself, from a raw URL — so it could only ever hold a video, and left nowhere to hang a poster, the one place a poster matters most (a full-bleed autoplaying video above the fold). It now takes a node and renders it, the way its sibling `SpecialBanner` already does; positioning stays with the banner, stretching whatever is passed to fill via `& img, & video`.
+
+  ```diff
+  - <HeroBanner videoSrc={asset.filename} … />
+  + <HeroBanner asset={<Asset asset={asset} poster={poster} />} … />
+  ```
+
+  Taking a node rather than a source also keeps `next-ui` free of any CMS: the Storyblok and Hygraph examples each pass their own `<Asset>`, both of which already render images and video.
+
+  `videoSrc` still works but is deprecated: when set (and `asset` is not) it renders a bare autoplaying video, keeping the `HeroBanner-video` class. The only behavioural change on that path is that the scroll parallax is gone, along with the `framer-motion`, `useScrollY` and `clientSize` machinery it needed. Migrate to `asset` to regain images, posters, and control over how the media is rendered. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 10.1.0-canary.38
+
+## 10.1.0-canary.37
+
+## 10.1.0-canary.36
+
+## 10.1.0-canary.35
+
+## 10.1.0-canary.34
+
+## 10.1.0-canary.33
+
+## 10.1.0-canary.32
+
+## 10.1.0-canary.31
+
+## 10.1.0-canary.30
+
+### Patch Changes
+
+- [#2643](https://github.com/graphcommerce-org/graphcommerce/pull/2643) [`04ba9be`](https://github.com/graphcommerce-org/graphcommerce/commit/04ba9be6f050cc686133bec57f40da9f8eecb4c8) - Only render disabled pagination items as links when enabled. Disabled `PaginationItem`s no longer receive a `component`/`href`, preventing crawlers from following links to an infinite number of list pages and inflating the static page cache. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 10.1.0-canary.29
+
+## 10.1.0-canary.28
+
+## 10.1.0-canary.27
+
+## 10.1.0-canary.26
+
+## 10.1.0-canary.25
+
+### Minor Changes
+
+- [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`bdaa6ec`](https://github.com/graphcommerce-org/graphcommerce/commit/bdaa6ec6aa2669b74fc6702ad46336db4c154b7c) - Refactored `LayoutNavigation` into composable pieces (`Header`, `HeaderContainer`, `MenuOverlay`, project-local `LayoutDefault`). `LayoutDefault` / `LayoutDefaultProps` in `@graphcommerce/next-ui` are marked `@deprecated`. If you are upgrading and do not want these changes, you can just discard them. This is just a structural change for more ease of use. No visually change. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+### Patch Changes
+
+- [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`9f5e765`](https://github.com/graphcommerce-org/graphcommerce/commit/9f5e76575e3932f8fcd8689d8ef42e4c44b923d1) - Added disableScrollEffects prop to CartFab & NavigationFab for easier customization of the header ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`21a676b`](https://github.com/graphcommerce-org/graphcommerce/commit/21a676bb50888278d437b88a6e49e6f3d0c4d4bb) - Changed Footer props type to allow setting footer container props ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 10.1.0-canary.24
+
+## 10.1.0-canary.23
+
+## 10.1.0-canary.22
+
+### Minor Changes
+
+- [#2627](https://github.com/graphcommerce-org/graphcommerce/pull/2627) [`95c188f`](https://github.com/graphcommerce-org/graphcommerce/commit/95c188fcd0dc6cb4ca3edc9877d203d45fe18bb0) - Add `YoutubeEmbed` component — a lightweight lazy-loading YouTube player that defers iframe creation until the user clicks the poster. Uses preconnect on hover for fast playback start and is styled with MUI sx, so no external CSS is required. Supports playlists, no-cookie mode, custom aspect ratios and ad-network preconnect hints.
+
+  `ProductVideo` (used by `ProductPageGallery`) now delegates YouTube playback to `YoutubeEmbed`, so any product whose Magento `media_gallery` contains a YouTube video entry gets the new lazy-loading player on its product page. Vimeo and self-hosted video paths are unchanged. The Magento preview image is passed as the YoutubeEmbed `thumbnail` so the visible poster stays consistent with the rest of the gallery.
+
+  Fix `SidebarGallery` so it forwards the `Additional` and `slotProps` from each image to `MotionImageAspect`. Before this fix the gallery silently dropped both props, which meant any `Additional` overlay configured by `ProductPageGallery` (the `<ProductVideo>` overlay with its `PlayCircle` and the new `YoutubeEmbed`) never reached the DOM. That was a latent regression that made all video-gallery entries render as static images, with or without this PR's YouTube changes.
+
+  Fix `playwright.config.ts` so `npx playwright test` actually loads. The config previously imported `examples/magento-graphcms/next.config.ts`, which transitively pulled `@graphcommerce/next-config`'s ESM build into a CJS context and crashed with `ReferenceError: exports is not defined`. Replaced with an opt-in `PLAYWRIGHT_LOCALES` env var for the multi-locale projects that the next.config import was meant to drive. ([@paales](https://github.com/paales))
+
+## 10.1.0-canary.21
+
+### Patch Changes
+
+- [#2633](https://github.com/graphcommerce-org/graphcommerce/pull/2633) [`7554ad4`](https://github.com/graphcommerce-org/graphcommerce/commit/7554ad479cf78d790eeedd3f862c5d57403bda51) - Fix: `<Fab variant="extended">` no longer gets a fixed `width` from `MuiFabSizes`. The size-based width/height variants are now scoped to `variant: 'circular'` only, so extended Fabs can grow with their label (controlled via `min-width` instead) as MUI intends. Previously every extended Fab without an explicit `size` matched the default `large` rule and was forced to 54px wide. ([@paales](https://github.com/paales))
+
+## 10.1.0-canary.20
+
+## 10.1.0-canary.19
+
+## 10.1.0-canary.18
+
+## 10.1.0-canary.17
+
+## 10.1.0-canary.16
+
+## 10.1.0-canary.15
+
+## 10.1.0-canary.14
+
+## 10.1.0-canary.13
+
+## 10.1.0-canary.12
+
+## 10.1.0-canary.11
+
+## 10.1.0-canary.10
+
+## 10.1.0-canary.9
+
+## 10.1.0-canary.8
+
 ## 10.1.0-canary.7
 
 ### Patch Changes

package/Fab/Fab.tsx

@@ -43,6 +43,7 @@ export function Fab(props: FabProps) {
       </Box>
       {loading && (
         <CircularProgress
+          aria-hidden='true'
           size={fabSize}
           color={color !== 'primary' ? 'primary' : 'inherit'}
           {...slotProps?.circularProgress}

package/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { sxx } from '@graphcommerce/next-ui'
-import type { ContainerProps } from '@mui/material'
 import { Box } from '@mui/material'
-import React from 'react'
+import type React from 'react'
+import type { ContainerSizingProps } from '../Container/Container'
 import { Container } from '../Container/Container'
 import { LazyHydrate } from '../LazyHydrate'
 import { extendableComponent } from '../Styles'
@@ -12,7 +12,7 @@ export type FooterProps = {
   customerService?: React.ReactNode
   copyright?: React.ReactNode
   children?: React.ReactNode
-} & ContainerProps
+} & ContainerSizingProps
 
 const { classes, selectors } = extendableComponent('Footer', [
   'root',

package/FramerScroller/SidebarGallery.tsx

@@ -254,13 +254,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   <MotionImageAspect
                     // eslint-disable-next-line react/no-array-index-key
                     key={idx}
+                    {...image}
                     layout
                     layoutDependency={zoomed}
-                    src={image.src}
-                    width={image.width}
-                    height={image.height}
                     loading={idx === 0 ? 'eager' : 'lazy'}
-                    sx={{ display: 'block', objectFit: 'contain' }}
+                    sx={sxx({ display: 'block', objectFit: 'contain' }, image.sx)}
                     sizes={{
                       0: '100vw',
                       [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',

package/FullPageMessage/FullPageMessage.tsx

@@ -52,7 +52,7 @@ export function FullPageMessage(props: FullPageMessageProps) {
           justifyItems: 'center',
         }}
       >
-        <Box className={classes.iconWrapper}>{icon}</Box>
+        <Box className={classes.iconWrapper} aria-hidden='true'>{icon}</Box>
 
         <Box
           className={classes.subject}

package/LayoutDefault/components/LayoutDefault.tsx

@@ -10,6 +10,10 @@ import { SkipLink } from '../../SkipLink/SkipLink'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
 
+/**
+ * @deprecated Import `LayoutDefaultProps` from your project's
+ * `components/Layout/LayoutDefault.tsx` instead.
+ */
 export type LayoutDefaultProps = {
   className?: string
   beforeHeader?: React.ReactNode
@@ -31,6 +35,10 @@ const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof pa
   parts,
 )
 
+/**
+ * @deprecated Import `LayoutDefault` from your project's
+ * `components/Layout/LayoutDefault.tsx` instead.
+ */
 export function LayoutDefault(props: LayoutDefaultProps) {
   const {
     children,

package/Navigation/components/NavigationFab.tsx

@@ -17,6 +17,8 @@ const MotionDiv = styled(m.div)({})
 export type NavigationFabProps = {
   menuIcon?: React.ReactNode
   closeIcon?: React.ReactNode
+  disableScrollEffects?: boolean
+  disableElevation?: boolean
   sx?: SxProps<Theme>
 } & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
 
@@ -29,7 +31,14 @@ type OwnerState = {
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function NavigationFab(props: NavigationFabProps) {
-  const { menuIcon, closeIcon, sx = [], ...fabProps } = props
+  const {
+    menuIcon,
+    closeIcon,
+    disableScrollEffects,
+    disableElevation,
+    sx = [],
+    ...fabProps
+  } = props
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
@@ -53,28 +62,41 @@ export function NavigationFab(props: NavigationFabProps) {
     <Box sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}>
       <MotionDiv
         className={classes.wrapper}
-        sx={{
-          [theme.breakpoints.down('md')]: {
-            opacity: '1 !important',
-            transform: 'none !important',
-          },
-        }}
+        sx={
+          disableScrollEffects
+            ? {
+                opacity: '1 !important',
+                transform: 'none !important',
+              }
+            : {
+                [theme.breakpoints.down('md')]: {
+                  opacity: '1 !important',
+                  transform: 'none !important',
+                },
+              }
+        }
         style={{ opacity }}
       >
         <Fab
           color='inherit'
           aria-label='Open Menu'
           size='responsive'
-          sx={{
-            boxShadow: 'none',
-            '&:hover, &:focus': {
+          sx={sxx(
+            {
               boxShadow: 'none',
+              pointerEvents: 'all',
+              '&:hover, &:focus': {
+                boxShadow: 'none',
+              },
+            },
+            !fabProps.color && {
+              '&:hover, &:focus': {
+                background: theme.vars.palette.text.primary,
+              },
               background: theme.vars.palette.text.primary,
+              color: theme.vars.palette.background.paper,
             },
-            background: theme.vars.palette.text.primary,
-            pointerEvents: 'all',
-            color: theme.vars.palette.background.paper,
-          }}
+          )}
           className={classes.fab}
           {...fabProps}
         >
@@ -109,20 +131,22 @@ export function NavigationFab(props: NavigationFabProps) {
             />
           )}
         </Fab>
-        <MotionDiv
-          sx={{
-            pointerEvents: 'none',
-            borderRadius: '99em',
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            boxShadow: theme.shadows[6],
-            top: 0,
-            [theme.breakpoints.down('md')]: { opacity: '1 !important' },
-          }}
-          className={classes.shadow}
-          style={{ opacity: shadowOpacity }}
-        />
+        {!disableElevation && (
+          <MotionDiv
+            sx={{
+              pointerEvents: 'none',
+              borderRadius: '99em',
+              position: 'absolute',
+              height: '100%',
+              width: '100%',
+              boxShadow: theme.shadows[6],
+              top: 0,
+              [theme.breakpoints.down('md')]: { opacity: '1 !important' },
+            }}
+            className={classes.shadow}
+            style={disableScrollEffects ? undefined : { opacity: shadowOpacity }}
+          />
+        )}
       </MotionDiv>
     </Box>
   )

package/PageLoadIndicator/PageLoadIndicator.tsx

@@ -38,6 +38,7 @@ export function PageLoadIndicator() {
 
   return (
     <MLinearProgress
+      aria-hidden='true'
       style={{ opacity }}
       sx={{
         position: 'fixed',

package/Pagination/PaginationExtended.tsx

@@ -84,8 +84,7 @@ export function PaginationExtended(props: PaginationExtendedProps) {
           renderItem ??
           ((item) => (
             <PaginationItem
-              component={NextLink}
-              href={paginationHref(item)}
+              {...(!item.disabled && { component: NextLink, href: paginationHref(item) })}
               slots={{ previous: Prev, next: Next }}
               {...item}
             />

package/Row/HeroBanner/HeroBanner.tsx

@@ -1,32 +1,37 @@
-import { clientSize } from '@graphcommerce/framer-utils'
-import { sxx } from '@graphcommerce/next-ui'
 import type { ContainerProps, SxProps, Theme } from '@mui/material'
-import { Box, styled } from '@mui/material'
-import { m, useTransform } from 'framer-motion'
+import { Box } from '@mui/material'
 import React from 'react'
-import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { extendableComponent, responsiveVal } from '../../Styles'
 import { Row } from '../Row'
 
 export type HeroBannerProps = ContainerProps & {
   pageLinks: React.ReactNode
-  videoSrc: string
+  /**
+   * Rendered full-bleed behind the copy. Takes a node rather than a source, so
+   * the banner is agnostic about what fills it — an image, a video, a CMS
+   * component. See `SpecialBanner`, which takes its asset the same way.
+   */
+  asset?: React.ReactNode
+  /**
+   * @deprecated Pass an `asset` node instead — e.g. `<Asset asset={…} />`,
+   * which also renders images and can carry a poster. When set (and `asset`
+   * is not), it renders a bare autoplaying video, without the scroll parallax
+   * earlier versions applied.
+   */
+  videoSrc?: string
   children: React.ReactNode
   sx?: SxProps<Theme>
 }
 
 const compName = 'HeroBanner'
+// `video` and `animated` are unused since the banner stopped rendering its own
+// motion video, but stay in the parts list so the generated class names remain
+// available to consumers targeting them in global CSS.
 const parts = ['root', 'wrapper', 'copy', 'asset', 'animated', 'video'] as const
 const { classes } = extendableComponent(compName, parts)
 
-const MotionVideo = styled(m.video)({})
-
 export function HeroBanner(props: HeroBannerProps) {
-  const { pageLinks, videoSrc, children, sx = [], ...containerProps } = props
-  const scrollY = useScrollY()
-  const scale = useTransform([scrollY, clientSize.y], ([scrollYCurr, clientSizeYCurr]: number[]) =>
-    clientSizeYCurr ? (scrollYCurr / clientSizeYCurr) * 1.7 + 1 : 1,
-  )
+  const { pageLinks, asset, videoSrc, children, sx = [], ...containerProps } = props
 
   return (
     <Row maxWidth={false} {...containerProps} className={classes.root} sx={sx}>
@@ -60,25 +65,28 @@ export function HeroBanner(props: HeroBannerProps) {
           sx={{
             gridArea: '1 / 1',
             position: 'relative',
-          }}
-        >
-          <MotionVideo
-            src={videoSrc}
-            autoPlay
-            muted
-            loop
-            playsInline
-            disableRemotePlayback
-            className={classes.video}
-            style={{ scale }}
-            sx={{
+            // The banner sizes itself from its copy, so whatever is passed has
+            // to fill the box rather than dictate it.
+            '& img, & video': {
               position: 'absolute',
-              transition: 'transform 0.5s cubic-bezier(0.33, 1, 0.68, 1)',
               objectFit: 'cover',
               width: '100%',
               height: '100%',
-            }}
-          />
+            },
+          }}
+        >
+          {asset ??
+            (videoSrc ? (
+              <video
+                src={videoSrc}
+                autoPlay
+                muted
+                loop
+                playsInline
+                disableRemotePlayback
+                className={classes.video}
+              />
+            ) : null)}
         </Box>
       </Box>
     </Row>

package/Theme/MuiFab.ts

@@ -80,11 +80,14 @@ const sizes: FabSize[] = [
 /**
  * This defines the sizes for the added responsive variant.
  *
+ * Only applied to circular (default) Fabs — extended Fabs must keep `width: auto` and rely on their
+ * content + `min-width`, otherwise they collapse to a fixed square regardless of label.
+ *
  * To override the sizes, please do not add variant declarations direcly, but modify
  * `yourTheme.components.MuiFabExtra.sizes` instead.
  */
 export const MuiFabSizes: FabVariants = sizes.map((size) => ({
-  props: { size },
+  props: { size, variant: 'circular' },
   style: ({ theme }) => fabWidthHeight(size, theme),
 }))
 

package/YoutubeEmbed/YoutubeEmbed.tsx

@@ -0,0 +1,201 @@
+import { Box, type SxProps, type Theme } from '@mui/material'
+import * as React from 'react'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { sxx } from '../utils/sxx'
+
+export type YoutubePosterResolution =
+  | 'default'
+  | 'mqdefault'
+  | 'hqdefault'
+  | 'sddefault'
+  | 'maxresdefault'
+
+export type YoutubeEmbedProps = {
+  id: string
+  title: string
+  announce?: string
+  adNetwork?: boolean
+  aspectHeight?: number
+  aspectWidth?: number
+  noCookie?: boolean
+  cookie?: boolean
+  params?: string
+  playlist?: boolean
+  playlistCoverId?: string
+  poster?: YoutubePosterResolution
+  webp?: boolean
+  muted?: boolean
+  thumbnail?: string
+  rel?: 'preload' | 'prefetch'
+  onIframeAdded?: () => void
+  sx?: SxProps<Theme>
+  ref?: React.Ref<HTMLIFrameElement>
+}
+
+const componentName = 'YoutubeEmbed' as const
+const parts = ['root', 'poster', 'playButton', 'iframe'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function YoutubeEmbed(props: YoutubeEmbedProps) {
+  const {
+    id,
+    title,
+    announce = 'Watch',
+    adNetwork = false,
+    aspectHeight = 9,
+    aspectWidth = 16,
+    noCookie = true,
+    cookie = false,
+    params = '',
+    playlist = false,
+    playlistCoverId,
+    poster = 'hqdefault',
+    webp = false,
+    muted = false,
+    thumbnail,
+    rel = 'preload',
+    onIframeAdded,
+    sx,
+    ref,
+  } = props
+
+  const [preconnected, setPreconnected] = React.useState(false)
+  const [iframeReady, setIframeReady] = React.useState(false)
+
+  const videoId = encodeURIComponent(id)
+  const videoPlaylistCoverId =
+    typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null
+
+  const format = webp ? 'webp' : 'jpg'
+  const vi = webp ? 'vi_webp' : 'vi'
+  const posterUrl =
+    thumbnail ||
+    (!playlist
+      ? `https://i.ytimg.com/${vi}/${videoId}/${poster}.${format}`
+      : `https://i.ytimg.com/${vi}/${videoPlaylistCoverId}/${poster}.${format}`)
+
+  const ytUrl = cookie || !noCookie ? 'https://www.youtube.com' : 'https://www.youtube-nocookie.com'
+  const paramsSuffix = params ? `&${params}` : ''
+  const mutedSuffix = muted ? '&mute=1' : ''
+
+  const iframeSrc = !playlist
+    ? `${ytUrl}/embed/${videoId}?autoplay=1&state=1${mutedSuffix}${paramsSuffix}`
+    : `${ytUrl}/embed/videoseries?autoplay=1${mutedSuffix}&list=${videoId}${paramsSuffix}`
+
+  const warmConnections = () => {
+    if (!preconnected) setPreconnected(true)
+  }
+  const addIframe = () => {
+    if (!iframeReady) setIframeReady(true)
+  }
+
+  React.useEffect(() => {
+    if (iframeReady) onIframeAdded?.()
+  }, [iframeReady, onIframeAdded])
+
+  return (
+    <>
+      <link rel={rel} href={posterUrl} as='image' />
+      {preconnected && (
+        <>
+          <link rel='preconnect' href={ytUrl} />
+          <link rel='preconnect' href='https://www.google.com' />
+          {adNetwork && (
+            <>
+              <link rel='preconnect' href='https://static.doubleclick.net' />
+              <link rel='preconnect' href='https://googleads.g.doubleclick.net' />
+            </>
+          )}
+        </>
+      )}
+      <Box
+        className={classes.root}
+        onPointerOver={warmConnections}
+        onClick={addIframe}
+        data-title={title}
+        sx={sxx(
+          {
+            position: 'relative',
+            display: 'block',
+            contain: 'content',
+            backgroundPosition: 'center center',
+            backgroundSize: 'cover',
+            cursor: 'pointer',
+            maxWidth: '100%',
+            aspectRatio: `${aspectWidth} / ${aspectHeight}`,
+            backgroundImage: `url(${posterUrl})`,
+            '&::before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              left: 0,
+              height: '60px',
+              background:
+                'linear-gradient(180deg, rgba(0,0,0,0.247) 0%, rgba(0,0,0,0) 100%)',
+              pointerEvents: 'none',
+            },
+          },
+          sx,
+        )}
+      >
+        {!iframeReady && (
+          <Box
+            component='button'
+            type='button'
+            className={classes.playButton}
+            aria-label={`${announce} ${title}`}
+            sx={{
+              border: 0,
+              padding: 0,
+              cursor: 'pointer',
+              width: '68px',
+              height: '48px',
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              marginLeft: '-34px',
+              marginTop: '-24px',
+              borderRadius: '14%',
+              transition: 'background-color 100ms cubic-bezier(0, 0, 0.2, 1)',
+              backgroundColor: '#212121',
+              opacity: 0.8,
+              '&:hover, &:focus': { backgroundColor: 'red', opacity: 1 },
+              '&::before': {
+                content: '""',
+                borderStyle: 'solid',
+                borderWidth: '11px 0 11px 19px',
+                borderColor: 'transparent transparent transparent #fff',
+                display: 'block',
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate3d(-50%, -50%, 0)',
+              },
+            }}
+          />
+        )}
+        {iframeReady && (
+          <Box
+            component='iframe'
+            ref={ref}
+            className={classes.iframe}
+            title={title}
+            allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
+            allowFullScreen
+            src={iframeSrc}
+            sx={{
+              border: 0,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+            }}
+          />
+        )}
+      </Box>
+    </>
+  )
+}

package/YoutubeEmbed/index.ts

@@ -0,0 +1 @@
+export * from './YoutubeEmbed'

package/index.ts

@@ -66,6 +66,7 @@ export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'
+export * from './YoutubeEmbed'
 export * from './utils/cookie'
 export * from './utils/cssFlags'
 export * from './utils/normalizeLocale'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.1.0-canary.7",
+  "version": "11.0.0-canary.45",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -43,13 +43,13 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
-    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.7",
-    "@graphcommerce/framer-next-pages": "^10.1.0-canary.7",
-    "@graphcommerce/framer-scroller": "^10.1.0-canary.7",
-    "@graphcommerce/framer-utils": "^10.1.0-canary.7",
-    "@graphcommerce/image": "^10.1.0-canary.7",
-    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.7",
-    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.7",
+    "@graphcommerce/eslint-config-pwa": "^11.0.0-canary.45",
+    "@graphcommerce/framer-next-pages": "^11.0.0-canary.45",
+    "@graphcommerce/framer-scroller": "^11.0.0-canary.45",
+    "@graphcommerce/framer-utils": "^11.0.0-canary.45",
+    "@graphcommerce/image": "^11.0.0-canary.45",
+    "@graphcommerce/prettier-config-pwa": "^11.0.0-canary.45",
+    "@graphcommerce/typescript-config-pwa": "^11.0.0-canary.45",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",