@graphcommerce/next-ui 5.1.0-canary.0 → 5.1.0-canary.10

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Change Log
 
+## 5.1.0-canary.10
+
+### Patch Changes
+
+- [#1760](https://github.com/graphcommerce-org/graphcommerce/pull/1760) [`06a81e661`](https://github.com/graphcommerce-org/graphcommerce/commit/06a81e66144b4d94a1e318c2e26cac8d13aa0eb7) - When you navigate back to an overlay (cart, etc.), it can no longer be closed by dragging or clicking on the backdrop. ([@paales](https://github.com/paales))
+
+- [#1760](https://github.com/graphcommerce-org/graphcommerce/pull/1760) [`f1ebaa2ae`](https://github.com/graphcommerce-org/graphcommerce/commit/f1ebaa2aea68fe395fddb1b7dd91624251b1d501) - Navigation received focus making the menu visible while it shouldn't ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.9
+
+## 5.1.0-canary.8
+
+## 5.1.0-canary.7
+
+## 5.1.0-canary.6
+
+## 5.1.0-canary.5
+
+### Patch Changes
+
+- [`b1444b933`](https://github.com/graphcommerce-org/graphcommerce/commit/b1444b9336107d3ac111563f9b62a884f1b26a8d) - Bring password reset page more in line with standard forms, add missing translations. ([@paales](https://github.com/paales))
+
+- [`c7dc855af`](https://github.com/graphcommerce-org/graphcommerce/commit/c7dc855af5e096a53e17f3b2980b210642270fd5) - Added a spreadVal utility to replace responsiveVal and breakpointVal ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.4
+
+### Patch Changes
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`0025ad80f`](https://github.com/graphcommerce-org/graphcommerce/commit/0025ad80fb82d5d1e6c786bb8b5f39b2456c0932) - Renamed clientSizeCssVar.y/x to dvh(100) and dvw(100) ([@paales](https://github.com/paales))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`3fcb03b79`](https://github.com/graphcommerce-org/graphcommerce/commit/3fcb03b79ce634650fd982dc36a112dccd37282f) - New props added to LayoutOverlay and Overlay components: `widthSm` and `widthMd` to control the width of the overlay.
+
+  Defaults to `widthSm = 'max(300px, 80vw)', widthMd = 'max(800px, 50vw)'` ([@paales](https://github.com/paales))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`f44a05a6c`](https://github.com/graphcommerce-org/graphcommerce/commit/f44a05a6cedadc17e44c87f53cad5f462bc52aba) - Use a singlular useElementScroll and provide ther scroll from the useScrollerContext ([@paales](https://github.com/paales))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`9de7c6960`](https://github.com/graphcommerce-org/graphcommerce/commit/9de7c6960c7ec7d6d28a670f71ac678c5d3c838f) - The scrollbar was hidden for bottom sheets, while that wasn't necessary ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.3
+
+### Patch Changes
+
+- [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
+
+  - Updated the @mui/material package
+  - Removed dependencies on react-hook-form-mui and @playwright/test
+  - Upgraded dependencies including type-fest and graphql-mesh
+  - Solved peer dependency issues ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.2
+
+### Patch Changes
+
+- [#1750](https://github.com/graphcommerce-org/graphcommerce/pull/1750) [`3479bc1e2`](https://github.com/graphcommerce-org/graphcommerce/commit/3479bc1e24da0e8a751ee301c59fa5f9755c8559) - show globe icon instead of shopping bag icon for store/language-switcher ([@FrankHarland](https://github.com/FrankHarland))
+
+## 5.1.0-canary.1
+
 ## 5.1.0-canary.0
 
 ## 5.0.0

package/Form/Form.tsx

@@ -1,6 +1,5 @@
 import { darken, lighten, styled, Theme } from '@mui/material'
 import { breakpointVal } from '../Styles/breakpointVal'
-import { sx } from '../Theme/themeDefaults'
 
 type FormStyleProps = {
   contained?: boolean
@@ -8,7 +7,7 @@ type FormStyleProps = {
 }
 
 const styles = ({ theme, contained = false, background }: { theme: Theme } & FormStyleProps) =>
-  sx([
+  theme.unstable_sx([
     {
       display: 'grid',
       alignItems: 'center',

package/FramerScroller/SidebarGallery.tsx

@@ -7,7 +7,7 @@ import {
   ScrollerDots,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
-import { clientSizeCssVar } from '@graphcommerce/framer-utils'
+import { dvh } from '@graphcommerce/framer-utils'
 import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
@@ -160,7 +160,9 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   width: '100vw',
                 },
                 [theme.breakpoints.up('md')]: {
-                  height: `calc(${clientSizeCssVar.y} - ${theme.appShell.headerHeightMd} - ${theme.spacings.lg})`,
+                  height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
+                    theme.spacings.lg
+                  })`,
                   position: 'sticky',
                   top: theme.appShell.headerHeightMd,
                 },
@@ -169,7 +171,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 position: 'relative',
                 top: 0,
                 marginTop: 0,
-                paddingTop: clientSizeCssVar.y,
+                paddingTop: dvh(100),
               },
             ]}
             onLayoutAnimationComplete={() => {

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,4 +1,5 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { dvh } from '@graphcommerce/framer-utils'
 import { Box, SxProps, Theme } from '@mui/material'
 import { useTransform, useScroll } from 'framer-motion'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
@@ -53,7 +54,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
       className={`${classes.root} ${className ?? ''}`}
       sx={[
         (theme) => ({
-          minHeight: '100vh',
+          minHeight: dvh(100),
           '@supports (-webkit-touch-callout: none)': {
             minHeight: '-webkit-fill-available',
           },

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -3,7 +3,14 @@ import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
 export type LayoutOverlayState = Omit<
   LayoutOverlayProps,
-  'children' | 'sx' | 'sxBackdrop' | 'mdSpacingTop' | 'smSpacingTop' | 'overlayPaneProps'
+  | 'children'
+  | 'sx'
+  | 'sxBackdrop'
+  | 'mdSpacingTop'
+  | 'smSpacingTop'
+  | 'overlayPaneProps'
+  | 'widthMd'
+  | 'widthSm'
 >
 
 export function useLayoutState() {

package/Navigation/components/NavigationOverlay.tsx

@@ -1,8 +1,4 @@
-import {
-  useMotionValueValue,
-  useMotionSelector,
-  clientSizeCssVar,
-} from '@graphcommerce/framer-utils'
+import { useMotionValueValue, useMotionSelector, dvw } from '@graphcommerce/framer-utils'
 import { i18n } from '@lingui/core'
 import { useTheme, Box, Fab, SxProps, Theme, useEventCallback, styled } from '@mui/material'
 import { m } from 'framer-motion'
@@ -56,7 +52,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
     justifySm,
     sizeMd,
     sizeSm,
-    itemWidthSm = clientSizeCssVar.x,
+    itemWidthSm = dvw(100),
     itemWidthMd,
     mouseEvent,
     itemPadding = 'md',
@@ -105,6 +101,8 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
       variantMd={variantMd}
       sizeMd={sizeMd}
       justifyMd={justifyMd}
+      widthMd={false}
+      widthSm={false}
       overlayPaneProps={{
         layout: true,
         initial: false,

package/Overlay/components/OverlayBase.tsx

@@ -1,9 +1,5 @@
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
-import {
-  clientSizeCssVar,
-  useElementScroll,
-  useIsomorphicLayoutEffect,
-} from '@graphcommerce/framer-utils'
+import { dvh, dvw, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
 import { m, MotionProps, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
@@ -41,6 +37,12 @@ export type LayoutOverlayBaseProps = {
   isPresent: boolean
   safeToRemove?: (() => void) | null | undefined
   overlayPaneProps?: MotionProps
+
+  /* For `variantSm='left|right' */
+  widthSm?: string | false
+
+  /* For `variantMd='left|right' */
+  widthMd?: string | false
 } & StyleProps &
   OverridableProps
 
@@ -88,6 +90,8 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
     isPresent,
     safeToRemove,
     overlayPaneProps,
+    widthMd = 'max(800px, 50vw)',
+    widthSm = 'max(300px, 80vw)',
   } = props
 
   const th = useTheme()
@@ -98,7 +102,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
     props.smSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightSm} * 0.5)`)
   )(th)
 
-  const { scrollerRef, snap } = useScrollerContext()
+  const { scrollerRef, snap, scroll } = useScrollerContext()
   const positions = useOverlayPosition(variantSm, variantMd)
   const scrollTo = useScrollTo()
   const beforeRef = useRef<HTMLDivElement>(null)
@@ -109,8 +113,6 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   const overlayRef = useRef<HTMLDivElement>(null)
 
-  const scroll = useElementScroll(scrollerRef)
-
   // When the component is mounted, we need to set the initial position of the overlay.
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
@@ -121,22 +123,26 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
     document.body.style.overflow = 'hidden'
 
-    if (direction === 1 && position.get() !== OverlayPosition.OPENED) {
-      scroller.scrollLeft = positions.closed.x.get()
-      scroller.scrollTop = positions.closed.y.get()
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      scrollTo(open).then(() => {
-        scroller.scrollLeft = positions.open.x.get()
-        scroller.scrollTop = positions.open.y.get()
+    if (position.get() !== OverlayPosition.OPENED) {
+      if (direction === 1) {
+        scroller.scrollLeft = positions.closed.x.get()
+        scroller.scrollTop = positions.closed.y.get()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        scrollTo(open).then(() => {
+          scroller.scrollLeft = positions.open.x.get()
+          scroller.scrollTop = positions.open.y.get()
+          position.set(OverlayPosition.OPENED)
+        })
+      } else {
+        scroller.scrollLeft = open.x
+        scroller.scrollTop = open.y
         position.set(OverlayPosition.OPENED)
-      })
-    } else {
-      scroller.scrollLeft = open.x
-      scroller.scrollTop = open.y
+        snap.set(true)
+      }
     }
 
     return clearScrollLock
-  }, [direction, isPresent, position, positions, scrollTo, scrollerRef])
+  }, [direction, isPresent, position, positions, scrollTo, scrollerRef, snap])
 
   // Make sure the overlay stays open when resizing the window.
   useEffect(() => {
@@ -228,6 +234,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
+        inert={active ? undefined : 'true'}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -249,9 +256,9 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
+        inert={active ? undefined : 'true'}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
-        hideScrollbar
         onClick={onClickAway}
         sx={[
           (theme) => ({
@@ -264,7 +271,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
               overflow: 'auto',
             },
 
-            height: clientSizeCssVar.y,
+            height: dvh(100),
 
             [theme.breakpoints.down('md')]: {
               '&.variantSmLeft': {
@@ -281,7 +288,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 borderTopLeftRadius: theme.shape.borderRadius * 3,
                 borderTopRightRadius: theme.shape.borderRadius * 3,
                 gridTemplate: `"beforeOverlay" "overlay"`,
-                height: clientSizeCssVar.y,
+                height: dvh(100),
               },
             },
             [theme.breakpoints.up('md')]: {
@@ -289,18 +296,22 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 gridTemplate: `"overlay beforeOverlay"`,
                 borderTopRightRadius: theme.shape.borderRadius * 4,
                 borderBottomRightRadius: theme.shape.borderRadius * 4,
+
+                '&::-webkit-scrollbar': { display: 'none' },
               },
               '&.variantMdRight': {
                 gridTemplate: `"beforeOverlay overlay"`,
                 borderTopLeftRadius: theme.shape.borderRadius * 4,
                 borderBottomLeftRadius: theme.shape.borderRadius * 4,
+
+                '&::-webkit-scrollbar': { display: 'none' },
               },
               '&.variantMdBottom': {
                 borderTopLeftRadius: theme.shape.borderRadius * 4,
                 borderTopRightRadius: theme.shape.borderRadius * 4,
                 [theme.breakpoints.up('md')]: {
                   gridTemplate: `"beforeOverlay" "overlay"`,
-                  height: clientSizeCssVar.y,
+                  height: dvh(100),
                 },
               },
             },
@@ -320,18 +331,18 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
             [theme.breakpoints.down('md')]: {
               '&.variantSmLeft, &.variantSmRight': {
-                width: '100vw',
+                width: dvh(100),
               },
               '&.variantSmBottom': {
-                height: clientSizeCssVar.y,
+                height: dvh(100),
               },
             },
             [theme.breakpoints.up('md')]: {
               '&.variantMdLeft, &.variantMdRight': {
-                width: '100vw',
+                width: dvw(100),
               },
               '&.variantMdBottom': {
-                height: clientSizeCssVar.y,
+                height: dvh(100),
               },
             },
           })}
@@ -385,12 +396,12 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
-                '&:not(.sizeMdFull)': {
+                '&:not(.sizeSmFull)': {
                   width: 'auto',
                 },
 
                 '&.variantSmBottom.sizeSmFull': {
-                  minHeight: `calc(${clientSizeCssVar.y} - ${smSpacingTop})`,
+                  minHeight: `calc(${dvh(100)} - ${smSpacingTop})`,
                 },
 
                 '&.variantSmBottom': {
@@ -402,26 +413,30 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 },
                 '&.variantSmLeft.sizeSmFull': {
                   paddingBottom: '1px',
-                  minHeight: clientSizeCssVar.y,
+                  minHeight: dvh(100),
                 },
                 '&.variantSmRight.sizeSmFull': {
                   paddingBottom: '1px',
-                  minHeight: clientSizeCssVar.y,
+                  minHeight: dvh(100),
+                },
+                '&.variantSmLeft, &.variantSmRight': {
+                  width: widthSm || undefined,
+                  maxWidth: dvw(100),
                 },
               },
               [theme.breakpoints.up('md')]: {
                 minWidth: '1px',
 
                 '&.sizeMdFull.variantMdBottom': {
-                  minHeight: `calc(${clientSizeCssVar.y} - ${mdSpacingTop})`,
+                  minHeight: `calc(${dvh(100)} - ${mdSpacingTop})`,
                 },
                 '&.sizeMdFull.variantMdLeft': {
                   paddingBottom: '1px',
-                  minHeight: clientSizeCssVar.y,
+                  minHeight: dvh(100),
                 },
                 '&.sizeMdFull.variantMdRight': {
                   paddingBottom: '1px',
-                  minHeight: clientSizeCssVar.y,
+                  minHeight: dvh(100),
                 },
 
                 '&.variantMdBottom': {
@@ -429,7 +444,8 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                   borderTopRightRadius: `${theme.shape.borderRadius * 4}px`,
                 },
                 '&.variantMdLeft, &.variantMdRight': {
-                  width: 'max-content',
+                  width: widthMd || 'max-content',
+                  maxWidth: dvw(100),
                 },
 
                 '&.sizeMdFloating': {

package/Overlay/hooks/useOverlayPosition.ts

@@ -15,7 +15,7 @@ export function useOverlayPosition(
   variantMd: 'left' | 'bottom' | 'right',
 ) {
   const match = useMatchMedia()
-  const { getScrollSnapPositions, scrollerRef } = useScrollerContext()
+  const { getScrollSnapPositions, scrollerRef, scroll } = useScrollerContext()
   const state = useConstant(() => ({
     open: {
       x: motionValue(0),
@@ -28,8 +28,6 @@ export function useOverlayPosition(
     },
   }))
 
-  const scroll = useElementScroll(scrollerRef)
-
   const variant = useCallback(
     () => (match.up('md') ? variantMd : variantSm),
     [match, variantMd, variantSm],

package/Styles/__tests__/spreadVal.test.ts

@@ -0,0 +1,11 @@
+import { spreadLinear, spreadVal } from '../spreadVal'
+
+it('generates the right spreadVal', () => {
+  const s = (val: any) => JSON.stringify(val)
+
+  expect(s(spreadLinear(15, 18, 'xl'))).toMatchInlineSnapshot(`"[15,15.53,16.2,17.28,18]"`)
+  expect(s(spreadLinear(15, 18))).toMatchInlineSnapshot(`"[15,16.31,18,18,18]"`)
+
+  expect(s(spreadVal(15, 18, 'xl'))).toMatchInlineSnapshot(`"[15,15.09,15.48,16.73,18]"`)
+  expect(s(spreadVal(15, 18))).toMatchInlineSnapshot(`"[15,15.57,18,18,18]"`)
+})

package/Styles/index.ts

@@ -4,3 +4,4 @@ export * from './extendableComponent'
 export * from './responsiveVal'
 export * from './withEmotionCache'
 export * from './withTheme'
+export * from './spreadVal'

package/Styles/spreadVal.tsx

@@ -0,0 +1,49 @@
+import type { Breakpoints } from '@mui/material'
+import { breakpoints } from '../Theme/breakpoints'
+
+type Interpolation = (from: number, to: number, t: number) => number
+
+const linear: Interpolation = (from, to, t) => (1 - t) * from + t * to
+const easeIn: Interpolation = (from, to, t) => linear(from, to, t * t)
+
+export type SpreadValReturn = [xs: number, sm: number, md?: number, lg?: number, xl?: number]
+
+export type SpreadVal = (
+  from: number,
+  to: number,
+  until?: 'sm' | 'md' | 'lg' | 'xl',
+) => SpreadValReturn
+
+function spread(
+  from: number,
+  to: number,
+  until: 'sm' | 'md' | 'lg' | 'xl',
+  lerp: Interpolation,
+  bpValues: Breakpoints['values'] = breakpoints.values,
+): SpreadValReturn {
+  const xs = 320
+  const { sm, md, lg, xl } = bpValues
+
+  const bps = [xs, sm, md, lg, xl]
+  const untilIdx = bps.indexOf(bpValues[until])
+
+  const values = bps.map((bp, itemidx) => {
+    if (itemidx > untilIdx) return to
+    const val = lerp(from, to, (bp - xs) / (bps[untilIdx] - xs))
+    return Math.round(val * 100) / 100
+  })
+
+  return values as SpreadValReturn
+}
+
+export const spreadLinear: SpreadVal = (
+  from: number,
+  to: number,
+  until: 'sm' | 'md' | 'lg' | 'xl' = 'md',
+) => spread(from, to, until, linear)
+
+export const spreadVal: SpreadVal = (
+  from: number,
+  to: number,
+  until: 'sm' | 'md' | 'lg' | 'xl' = 'md',
+) => spread(from, to, until, easeIn)

package/Theme/MuiChip.ts

@@ -1,6 +1,5 @@
 import { ComponentsVariants, darken } from '@mui/material'
 import { responsiveVal } from '../Styles'
-import { sx } from './themeDefaults'
 
 declare module '@mui/material/Chip/Chip' {
   interface ChipPropsSizeOverrides {
@@ -21,32 +20,35 @@ export const MuiChip: ChipVariants = [
   },
   {
     props: { size: 'small' },
-    style: sx({
-      typography: 'caption',
-    }),
+    style: ({ theme }) =>
+      theme.unstable_sx({
+        typography: 'caption',
+      }),
   },
   {
     props: { size: 'medium' },
-    style: sx({
-      height: responsiveVal(26, 30),
-      paddingLeft: responsiveVal(3, 6),
-      paddingRight: responsiveVal(3, 6),
-      typography: 'caption',
-    }),
+    style: ({ theme }) =>
+      theme.unstable_sx({
+        height: responsiveVal(26, 30),
+        paddingLeft: responsiveVal(3, 6),
+        paddingRight: responsiveVal(3, 6),
+        typography: 'caption',
+      }),
   },
   {
     props: { size: 'responsive' },
-    style: sx({
-      height: responsiveVal(32, 40),
-      paddingLeft: responsiveVal(4, 8),
-      paddingRight: responsiveVal(4, 8),
-      borderRadius: '99em',
-      typography: 'body2',
-      '& .MuiChip-label': {
-        paddingLeft: responsiveVal(6, 10),
-        paddingRight: responsiveVal(6, 10),
-      },
-    }),
+    style: ({ theme }) =>
+      theme.unstable_sx({
+        height: responsiveVal(32, 40),
+        paddingLeft: responsiveVal(4, 8),
+        paddingRight: responsiveVal(4, 8),
+        borderRadius: '99em',
+        typography: 'body2',
+        '& .MuiChip-label': {
+          paddingLeft: responsiveVal(6, 10),
+          paddingRight: responsiveVal(6, 10),
+        },
+      }),
   },
   {
     props: { variant: 'outlined' },

package/Theme/breakpoints.ts

@@ -0,0 +1,9 @@
+export const breakpoints = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1536,
+    xl: 1920,
+  },
+}

package/Theme/themeDefaults.ts

@@ -1,18 +1,10 @@
-import { experimental_sx, SxProps, Theme } from '@mui/material'
+import { SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
+import { spreadVal } from '../Styles/spreadVal'
+import { breakpoints } from './breakpoints'
 
 // https://material.io/design/environment/elevation.html#default-elevations
 
-const breakpoints = {
-  values: {
-    xs: 0,
-    sm: 600,
-    md: 960,
-    lg: 1536,
-    xl: 1920,
-  },
-}
-
 const shadows: Shadows = [
   /* 0 */ 'none',
   /* 1 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 1.4px 1.8px -1.5px hsl(0deg 0% 0% / 0.09)`,
@@ -43,7 +35,6 @@ const shadows: Shadows = [
 
 export const themeBaseDefaults = {
   breakpoints,
+  spreadVal,
   shadows,
 }
-
-export const sx = (props: SxProps<Theme>) => experimental_sx<Theme>(props)

package/icons/index.ts

@@ -14,6 +14,9 @@ export { default as iconChevronBack, default as iconChevronLeft } from './chevro
 export { default as iconChevronRight } from './chevron-right.svg'
 export { default as iconChevronUp } from './chevron-up.svg'
 export { default as iconClose } from './close.svg'
+export { default as iconEye } from './eye.svg'
+export { default as iconEyeClosed } from './eye-closed.svg'
+export { default as iconEyeCrossed } from './eye-crossed.svg'
 export { default as iconCreditCard, default as iconId } from './credit-card.svg'
 export { default as iconEllypsis } from './ellypsis.svg'
 export { default as iconEmail, default as iconEmailOutline } from './envelope-alt.svg'
@@ -39,3 +42,4 @@ export { default as iconSearch } from './search.svg'
 export { default as iconPhone } from './smartphone.svg'
 export { default as iconStar } from './star.svg'
 export { default as iconSun } from './sun.svg'
+export { default as iconLanguage } from './language.svg'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.0",
+  "version": "5.1.0-canary.10",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -14,37 +14,34 @@
     }
   },
   "dependencies": {
-    "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/cache": "^11.9.3",
-    "@emotion/react": "^11.9.3",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.9.3",
-    "@graphcommerce/framer-next-pages": "5.1.0-canary.0",
-    "@graphcommerce/framer-scroller": "5.1.0-canary.0",
-    "@graphcommerce/framer-utils": "5.1.0-canary.0",
-    "@graphcommerce/image": "5.1.0-canary.0",
+    "@emotion/styled": "^11.10.5",
+    "@graphcommerce/framer-next-pages": "5.1.0-canary.10",
+    "@graphcommerce/framer-scroller": "5.1.0-canary.10",
+    "@graphcommerce/framer-utils": "5.1.0-canary.10",
+    "@graphcommerce/image": "5.1.0-canary.10",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.10",
+    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.10",
+    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.10",
+    "@types/cookie": "^0.5.1",
+    "@types/react-is": "^17.0.3",
+    "typescript": "4.9.4"
+  },
   "peerDependencies": {
     "@lingui/core": "^3.13.2",
     "@lingui/react": "^3.13.2",
     "@mui/lab": "^5.0.0-alpha.68",
-    "@mui/material": "5.5.3",
-    "framer-motion": "^6.2.4",
+    "@mui/material": "^5.10.16",
+    "framer-motion": "^7.0.0",
     "next": "^12.1.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^5.1.0-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^5.1.0-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^5.1.0-canary.0",
-    "@playwright/test": "^1.21.1",
-    "@types/cookie": "^0.5.1",
-    "@types/react-is": "^17.0.3",
-    "type-fest": "^2.12.2",
-    "typescript": "4.7.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

package/types.d.ts

@@ -7,8 +7,8 @@ import './Theme/createTheme'
 import 'react'
 
 declare module 'react' {
-  interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
-    loading?: 'lazy' | 'eager' | 'auto'
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    inert?: 'true'
   }
 }