@graphcommerce/next-ui 3.11.3 → 3.12.1

package/AppShell/AppShellHeader/index.tsx

@@ -1,4 +1,10 @@
-import { useHistoryLink, usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import {
+  useHistoryLink,
+  usePageContext,
+  usePageRouter,
+  usePrevUp,
+  useUp,
+} from '@graphcommerce/framer-next-pages'
 import { Fab, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { m, MotionValue, useMotionValue, useTransform } from 'framer-motion'
@@ -6,7 +12,6 @@ import PageLink from 'next/link'
 import React, { useCallback, useEffect } from 'react'
 import Button from '../../Button'
 import { UseStyles } from '../../Styles'
-import SvgImage from '../../SvgImage'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconClose } from '../../icons'
 import useAppShellHeaderContext from './useAppShellHeaderContext'
@@ -23,8 +28,6 @@ export type AppShellHeaderProps = {
   scrolled?: boolean
   dragIndicator?: React.ReactNode
   additional?: React.ReactNode
-  backFallbackHref?: string | null
-  backFallbackTitle?: string | null
   fill?: 'both' | 'mobile-only'
   sheet?: boolean
 } & UseStyles<typeof useStyles>
@@ -110,10 +113,13 @@ const useStyles = makeStyles(
     sheetHeaderActionRight: {
       justifySelf: 'flex-end',
       '& > .Mui-disabled': {
-        opacity: 0.25,
-        color: `${theme.palette.primary.contrastText} !important`,
-        [theme.breakpoints.up('md')]: {
+        // color: `${theme.palette.primary.contrastText} !important`,
+        [theme.breakpoints.up('sm')]: {
+          opacity: 0.25,
           color: `${theme.palette.secondary.contrastText} !important`,
+          '& svg': {
+            stroke: `${theme.palette.secondary.contrastText} !important`,
+          },
         },
       },
     },
@@ -184,7 +190,10 @@ const useStyles = makeStyles(
       background: theme.palette.background.paper,
       color: theme.palette.text.primary,
       '&:hover': {
-        background: theme.palette.background.highlight,
+        background: theme.palette.background.paper,
+      },
+      '& svg': {
+        stroke: theme.palette.text.primary,
       },
     },
     sheetShellActionsFullPage: {
@@ -222,15 +231,15 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
     additional,
     dragIndicator,
     scrolled,
-    backFallbackHref,
-    backFallbackTitle,
     fill = 'both',
     sheet,
   } = props
+
   const router = usePageRouter()
   const { closeSteps, backSteps } = usePageContext()
   const classes = useStyles(props)
-
+  const up = useUp()
+  const prevUp = usePrevUp()
   const { titleRef, contentHeaderRef } = useAppShellHeaderContext()
 
   const noChildren = typeof children === 'undefined' || !children
@@ -242,7 +251,7 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
   const titleHeight = useMotionValue<number>(100)
 
   const { href: historyHref, onClick: historyOnClick } = useHistoryLink({
-    href: backFallbackHref ?? '',
+    href: up?.href ?? '',
   })
 
   const setOffset = useCallback(
@@ -289,7 +298,7 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
   }, [contentHeaderRef, sheetHeaderHeight])
 
   const opacityTitle = useTransform(
-    [scrollY, sheetHeaderHeight, titleOffset, titleHeight] as MotionValue[],
+    [scrollY, sheetHeaderHeight, titleOffset, titleHeight] as MotionValue<number | string>[],
     ([scrollYV, sheetHeaderHeightV, titleOffsetV, titleHeigthV]: number[]) =>
       Math.min(
         Math.max(
@@ -326,21 +335,26 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
     ))
 
   const backIcon = <SvgImageSimple src={iconChevronLeft} />
-  let back = backSteps > 0 && (
-    <Button
-      onClick={() => router.back()}
-      variant='pill-link'
-      className={classes.backButton}
-      startIcon={backIcon}
-    >
-      {historyOnClick ? backFallbackTitle : 'Back'}
-    </Button>
+
+  const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
+  let back = canClickBack && (
+    <PageLink href={historyHref} passHref>
+      <Button
+        onClick={historyOnClick}
+        variant='pill-link'
+        size='small'
+        className={classes.backButton}
+        startIcon={backIcon}
+      >
+        {historyOnClick ? up?.title : 'Back'}
+      </Button>
+    </PageLink>
   )
-  if (!back && backFallbackHref) {
+  if (!canClickBack && up?.href) {
     back = (
-      <PageLink href={backFallbackHref} passHref>
+      <PageLink href={up?.href} passHref>
         <Button variant='pill-link' className={classes.backButton} startIcon={backIcon}>
-          {backFallbackTitle ?? 'Back'}
+          {up?.title ?? 'Back'}
         </Button>
       </PageLink>
     )

package/AppShell/AppShellTitle/index.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     title: {},
     margin: {
-      marginTop: theme.spacings.md,
+      marginTop: theme.spacings.lg,
       marginBottom: theme.spacings.lg,
     },
   }),

package/AppShell/FullPageShellBase.tsx

@@ -37,8 +37,6 @@ export type FullPageShellBaseProps = {
   header: React.ReactNode
   footer: React.ReactNode
   children?: React.ReactNode
-  backFallbackHref?: string | null
-  backFallbackTitle?: string | null
 } & UseStyles<typeof useStyles> &
   PageLayoutBaseProps
 

package/AppShell/MenuFab.tsx

@@ -43,6 +43,9 @@ const useStyles = makeStyles(
       '&:hover, &:focus': {
         background: theme.palette.text.primary,
       },
+      '& svg': {
+        stroke: theme.palette.background.default,
+      },
     },
     menu: {
       backgroundColor: theme.palette.background.paper,

package/Blog/BlogAuthor/index.tsx

@@ -10,13 +10,16 @@ const useStyles = makeStyles(
       maxWidth: 800,
       margin: `0 auto`,
       marginBottom: theme.spacings.md,
-      '& > div': {
-        height: 52,
-        borderRadius: 30,
-        '& > div': {
-          width: '44px !important',
-          height: '44px !important',
-        },
+    },
+    authorChip: {
+      height: 66,
+      '& .MuiChip-label': {
+        paddingLeft: 14,
+        paddingRight: 14,
+      },
+      '& .MuiAvatar-root': {
+        width: 44,
+        height: 44,
       },
     },
     date: {
@@ -46,7 +49,9 @@ export default function BlogAuthor(props: BlogAuthorProps) {
     <div className={classes.wrapper}>
       <Chip
         variant='outlined'
+        size='medium'
         avatar={<Avatar>{author.charAt(0).toUpperCase()}</Avatar>}
+        className={classes.authorChip}
         label={
           <section>
             <div className={classes.author}>{author}</div>

package/Blog/BlogHeader/index.tsx

@@ -9,40 +9,8 @@ const useStyles = makeStyles(
       maxWidth: 800,
       margin: `0 auto`,
       marginBottom: theme.spacings.md,
-      position: 'relative',
-      backgroundColor: 'rgba(0,0,0,0.08)',
-      overflow: 'hidden',
-    },
-    copy: {
-      color: '#fff',
-      display: 'grid',
-      justifyItems: 'end',
-      alignContent: 'end',
-      padding: `${theme.spacings.lg} ${theme.spacings.md}`,
-      minHeight: '30vh',
-      '& > *': {
-        zIndex: 0,
-        maxWidth: 'max-content',
-      },
-      [theme.breakpoints.up('lg')]: {
-        padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
-      },
-    },
-    asset: {
-      position: 'absolute',
-      top: '0',
-      zIndex: 0,
-      width: '100%',
-      height: '100%',
-      '& img': {
-        width: '100%',
-        height: '100% !important',
-        objectFit: 'cover',
-      },
-      [theme.breakpoints.up('md')]: {
-        height: '100%',
-      },
     },
+    asset: {},
   }),
   { name: 'BlogHeader' },
 )
@@ -56,9 +24,6 @@ export default function BlogHeader(props: BlogHeaderProps) {
   const classes = useStyles()
 
   return (
-    <div className={classes.header}>
-      <Typography variant='body1' className={classes.copy} />
-      {asset && <div className={classes.asset}>{asset}</div>}
-    </div>
+    <div className={classes.header}>{asset && <div className={classes.asset}>{asset}</div>}</div>
   )
 }

package/Blog/BlogListItem/index.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles(
     date: {
       display: 'inline-block',
       textDecoration: 'none',
-      color: 'rgb(0, 0, 0, 0.3)',
+      color: theme.palette.text.disabled,
     },
     asset: {
       display: 'grid',
@@ -32,7 +32,7 @@ const useStyles = makeStyles(
         alignSelf: 'center',
         justifySelf: 'center',
       },
-      background: 'rgb(0, 0, 0, 0.08)',
+      background: theme.palette.background.paper,
     },
     title: {
       ...theme.typography.h3,

package/Button/index.tsx

@@ -3,9 +3,11 @@ import {
   ButtonClassKey as MuiButtonClassKey,
   Theme,
   makeStyles,
+  lighten,
 } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
+import { responsiveVal } from '..'
 
 type BaseButtonProps = Omit<Parameters<typeof MuiButton>['0'], 'variant' | 'classes'> & {
   variant?: 'text' | 'outlined' | 'contained' | 'pill' | 'pill-link'
@@ -19,13 +21,11 @@ type ButtonClassKey =
   | 'pillSizeLarge'
   | 'pillSizeSmall'
   | 'pillNoElevation'
-  | 'textBold'
   | 'withStartIcon'
   | 'startIconText'
   | 'loading'
 
 type ClassKeys = ButtonClassKey | MuiButtonClassKey
-type Text = 'normal' | 'bold'
 
 export type ButtonProps = BaseButtonProps & {
   classes?: { [index in ClassKeys]?: string }
@@ -58,13 +58,19 @@ const useStyles = makeStyles<
       borderRadius: '99em',
     },
     pillLink: {
-      [theme.breakpoints.up('md')]: {
-        background: theme.palette.secondary.main,
-        color: theme.palette.secondary.contrastText,
-        boxShadow: theme.shadows[6],
-        borderRadius: 25,
-        padding: '6px 16px',
-
+      [theme.breakpoints.up('sm')]: {
+        // manually match MuiButton and containedPrimary styles
+        textTransform: 'none',
+        ...theme.typography.body2,
+        fontWeight: 400,
+        padding: `${responsiveVal(8, 10)} ${responsiveVal(12, 22)}`,
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.primary.contrastText,
+        borderRadius: '99em',
+        boxShadow: theme.shadows[1],
+        '& svg': {
+          stroke: theme.palette.primary.contrastText,
+        },
         '&:hover': {
           background: theme.palette.secondary.dark,
         },
@@ -88,9 +94,6 @@ const useStyles = makeStyles<
         boxShadow: 'none',
       },
     },
-    textBold: {
-      fontWeight: theme.typography.fontWeightBold,
-    },
     startIconText: {
       display: 'none',
       [theme.breakpoints.up('md')]: {
@@ -117,7 +120,6 @@ export default React.forwardRef<any, ButtonProps>((props, ref) => {
     pillSizeLarge,
     pillSizeSmall,
     pillLink,
-    textBold,
     ...buttonClasses
   } = classes
 
@@ -130,7 +132,6 @@ export default React.forwardRef<any, ButtonProps>((props, ref) => {
       pillSizeLarge,
       pillSizeSmall,
       pillLink,
-      textBold,
       ...buttonClasses,
     },
   })
@@ -161,7 +162,6 @@ export default React.forwardRef<any, ButtonProps>((props, ref) => {
           [pillClasses.pillSizeSmall]: variant === 'pill' && size === 'small',
           [pillClasses.pillNoElevation]: buttonProps.disableElevation,
           [pillClasses.pillLink]: variant === 'pill-link',
-          [pillClasses.textBold]: text === 'bold',
           [pillClasses.loading]: loading,
           [pillClasses.withStartIcon]: withIcon,
         },

package/ButtonLink/index.tsx

@@ -3,7 +3,6 @@ import PageLink from 'next/link'
 import React from 'react'
 import Button, { ButtonProps } from '../Button'
 import { UseStyles } from '../Styles'
-import SvgImage from '../SvgImage'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconChevronRight } from '../icons'
 
@@ -12,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: theme.palette.text.primary,
     textDecoration: 'none',
     padding: `${theme.spacings.xs} 0`,
-    borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
     borderRadius: 0,
     ...theme.typography.body1,
     '& > *': {

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.12.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.12.0...@graphcommerce/next-ui@3.12.1) (2021-11-02)
+
+
+### Bug Fixes
+
+* RemoveCoupon Button and fix pill-link style to match buttons ([6838812](https://github.com/ho-nl/m2-pwa/commit/68388123773fb4f79a3e4b1beb7ecca601d7748e))
+
+
+
+
+
+# [3.12.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.5...@graphcommerce/next-ui@3.12.0) (2021-11-02)
+
+
+### Bug Fixes
+
+* build ([2c2d317](https://github.com/ho-nl/m2-pwa/commit/2c2d317432e3a6f2b027f24c00ac2416d56847be))
+* build ([5d07e8e](https://github.com/ho-nl/m2-pwa/commit/5d07e8e8dc9b70ab8e58018183c54484944e8822))
+* cancel filter icon ([8e03602](https://github.com/ho-nl/m2-pwa/commit/8e03602dd54b2dae714ad514515fad907539b594))
+* cleanup blog header styles ([b96aec1](https://github.com/ho-nl/m2-pwa/commit/b96aec13b5a0af74ec2058502c7da558eb675dbb))
+* darkMode ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
+* darkTheme ([df3d326](https://github.com/ho-nl/m2-pwa/commit/df3d326126446c1b92f8e46eff0533bbbe35604f))
+* darkTheme ([a12786f](https://github.com/ho-nl/m2-pwa/commit/a12786f33cf09e974cceb8592ec98439ccbc3fad))
+* darkTheme ([d0517af](https://github.com/ho-nl/m2-pwa/commit/d0517af5a788532c48f567ee3e840986efa26a67))
+* darkTheme ([ae017c1](https://github.com/ho-nl/m2-pwa/commit/ae017c1a1e82f86ee5eb2f67106dac8174950c45))
+* full image on blog view page ([6d14b0e](https://github.com/ho-nl/m2-pwa/commit/6d14b0ef24fa60321a442a42d5861adc20e4a5fa))
+* icon size in checkout ([d7bb962](https://github.com/ho-nl/m2-pwa/commit/d7bb962a6827b81f737f22e36f828454abef1b47))
+* move checkmark icons on select fields ([95ce54d](https://github.com/ho-nl/m2-pwa/commit/95ce54d7fd41d11120847f2fdf6b9097a2c93871))
+* remove text from inputprops ([ccc11f2](https://github.com/ho-nl/m2-pwa/commit/ccc11f267e85b8b333877afb4ce11f96dad0a3d0))
+* remove text='bold', make contained button text stronger by default ([cd277c9](https://github.com/ho-nl/m2-pwa/commit/cd277c9f434a4a765eac372467e5a05c822d5512))
+* remove unused imports ([5018763](https://github.com/ho-nl/m2-pwa/commit/5018763a8a2bbd0ba4a775979cc5885e9b17ad8d))
+* style cleanup snackbar ([610221a](https://github.com/ho-nl/m2-pwa/commit/610221ad82f5726e9d745436cb1c08314bd342d5))
+* svg color ([095ac85](https://github.com/ho-nl/m2-pwa/commit/095ac8578409ec005fbfe449fe4759d4f63b6f79))
+
+
+### Features
+
+* add social icons to codebase for convenience ([9e4b404](https://github.com/ho-nl/m2-pwa/commit/9e4b404aa1dbc821562529f7b15ab4761a1ab52c))
+* darkTheme ([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
+* darkTheme ([3ed6647](https://github.com/ho-nl/m2-pwa/commit/3ed664714670315bc9f20542549724f66cb5052d))
+* Mui true Pagination based on Fab ([572fa7b](https://github.com/ho-nl/m2-pwa/commit/572fa7b031b58b6ffdab60c4a50407a53202fa34))
+
+
+
+
+
+## [3.11.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.4...@graphcommerce/next-ui@3.11.5) (2021-11-02)
+
+
+### Bug Fixes
+
+* back button loop ([4d901e6](https://github.com/ho-nl/m2-pwa/commit/4d901e662579d1cfb97c823d581e60d687908b1a))
+* break back button loop ([be2e5ae](https://github.com/ho-nl/m2-pwa/commit/be2e5aefa1e409a97c1ebf94173f4da7ea25386b))
+* **framer-next-pages:** prevent back button loop when previous page is the up page of the previous page ([ec829c8](https://github.com/ho-nl/m2-pwa/commit/ec829c8eee2a3744747a7572b32299879c780d45))
+* **framer-next-pages:** prevent back button loop when previous page is the up page of the previous page ([cbdde83](https://github.com/ho-nl/m2-pwa/commit/cbdde83790337bdf4c5f03c907ca6e6e02792e70))
+* **types:** apollo state props ‘up’ can be null ([9377d7f](https://github.com/ho-nl/m2-pwa/commit/9377d7fd9a080a8a2b8c7127961d64dc66a5729a))
+* **types:** make apollo up state optional ([eba9683](https://github.com/ho-nl/m2-pwa/commit/eba96832e372adaeaa2ed71622c88f9dc95071c5))
+
+
+
+
+
 ## [3.11.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.2...@graphcommerce/next-ui@3.11.3) (2021-11-01)
 
 

package/ChipMenu/index.tsx

@@ -3,38 +3,24 @@ import clsx from 'clsx'
 import React, { PropsWithChildren, useState } from 'react'
 import SectionHeader from '../SectionHeader'
 import responsiveVal from '../Styles/responsiveVal'
-import SvgImage from '../SvgImage'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
-import { iconChevronDown, iconChevronUp, iconCloseCircle } from '../icons'
+import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 
 export const useChipMenuStyles = makeStyles(
   (theme: Theme) => ({
-    /*
-      !importants: ensure background #xxxxxx on hover, focus etc regardless given props to the component 
-      otherwise you'll get: ".MuiChip-deletable.MuiChip-outlined:hover" which is prone to changes and thereby a fragile selector
-    */
-    chip: {
-      background: theme.palette.background.default,
-      '& .MuiChip-label': {
-        wordWrap: 'break-word',
-      },
-      '&:hover': {
-        background: `${theme.palette.background.highlight} !important`,
-      },
-      '&:focus': {
-        background: `${theme.palette.background.default} !important`,
-      },
-    },
+    chip: {},
     chipSelected: {
-      border: `1px solid ${theme.palette.text.primary}`,
-      background: theme.palette.grey['100'],
+      borderColor: theme.palette.text.primary,
       color: theme.palette.text.primary,
       '&:hover': {
         background: `${theme.palette.background.default} !important`,
-        borderColor: theme.palette.grey['600'],
+        borderColor: theme.palette.divider,
       },
       '&:focus': {
-        background: `${theme.palette.grey['100']} !important`,
+        background: `${theme.palette.background.paper} !important`,
+      },
+      '& svg': {
+        stroke: theme.palette.text.primary,
       },
     },
     menuPaper: {
@@ -50,6 +36,10 @@ export const useChipMenuStyles = makeStyles(
         marginTop: '8px',
       },
     },
+    iconCancel: {
+      stroke: `none !important`,
+      fill: `${theme.palette.text.primary} !important`,
+    },
     menuList: {
       padding: 0,
       '&:focus': {
@@ -77,7 +67,7 @@ export default function ChipMenu(props: ChipMenuProps) {
   const classes = useChipMenuStyles(props)
 
   let deleteIcon = selected ? (
-    <SvgImageSimple src={iconCloseCircle} />
+    <SvgImageSimple src={iconCancelAlt} className={classes.iconCancel} />
   ) : (
     <SvgImageSimple src={iconChevronDown} />
   )

package/Form/InputCheckmark.tsx

@@ -1,15 +1,18 @@
 import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
 import React, { PropsWithChildren } from 'react'
-import SvgImage from '../SvgImage'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconCheckmark } from '../icons'
 
-export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean }>
+export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean; select?: boolean }>
 const useStyles = makeStyles(
   (theme: Theme) => ({
     iconCheckmark: {
       stroke: '#01D26A',
     },
+    select: {
+      marginRight: 15,
+    },
   }),
   { name: 'InputCheckmark' },
 )
@@ -22,9 +25,14 @@ const useStyles = makeStyles(
  * ```
  */
 export default function InputCheckmark(props: InputCheckmarkProps) {
-  const { show: valid, children } = props
+  const { show: valid, children, select = false } = props
   const classes = useStyles()
 
   if (!valid) return <>{children}</>
-  return <SvgImageSimple src={iconCheckmark} className={classes.iconCheckmark} />
+  return (
+    <SvgImageSimple
+      src={iconCheckmark}
+      className={clsx(classes.iconCheckmark, select && classes.select)}
+    />
+  )
 }

package/Form/index.tsx

@@ -1,4 +1,4 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { darken, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../Styles'
@@ -14,7 +14,7 @@ const useStyles = makeStyles(
       background: theme.palette.secondary.light,
     },
     default: {
-      background: theme.palette.background.highlight,
+      background: darken(theme.palette.background.paper, 0.02),
     },
     contained: {
       padding: theme.spacings.sm,

package/FramerScroller/components/SidebarGallery.tsx

@@ -17,7 +17,6 @@ import React, { useEffect, useRef } from 'react'
 import { Row } from '../..'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
-import SvgImage from '../../SvgImage'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'
 
@@ -34,7 +33,10 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('md')]: {
         gridTemplateColumns: '1fr auto',
       },
-      background: theme.palette.background.highlight,
+      background:
+        theme.palette.type === 'light'
+          ? theme.palette.background.image
+          : theme.palette.background.paper,
       paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
     },
     rootZoomed: {
@@ -56,6 +58,7 @@ const useStyles = makeStyles(
 
       return {
         height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
+        backgroundColor: theme.palette.background.image,
         position: 'relative',
         minHeight: '100%',
         paddingTop: `min(${ratio}, ${maxHeight})`,
@@ -156,7 +159,7 @@ const useStyles = makeStyles(
       top: `calc(50% - 28px)`,
     },
     dots: {
-      background: alpha(theme.palette.background.highlight, 0.7),
+      background: alpha(theme.palette.background.paper, 0.7),
     },
   }),
   { name: 'SidebarGallery' },
@@ -258,7 +261,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
               ))}
             </Scroller>
             <m.div layout className={classes.topRight}>
-              <Fab color='inherit' size='small' className={classes.toggleIcon} onMouseUp={toggle}>
+              <Fab size='small' className={classes.toggleIcon} onMouseUp={toggle}>
                 {!zoomed ? (
                   <SvgImageSimple src={iconFullscreen} />
                 ) : (

package/Page/types.ts

@@ -1,16 +1,17 @@
 import { ParsedUrlQuery } from 'querystring'
 import { NormalizedCacheObject } from '@apollo/client'
+import { UpPage } from '@graphcommerce/framer-next-pages/types'
 import { GetStaticProps as GetStaticPropsNext } from 'next'
 import { AppProps as NextAppProps } from 'next/app'
 
 type AnyObj = Record<string, unknown>
 
-type ApolloStateProps = { apolloState: NormalizedCacheObject }
+type ApolloStateProps = { apolloState: NormalizedCacheObject; up?: UpPage | null }
 
 export type GetStaticProps<
   PL extends AnyObj,
   P extends AnyObj = AnyObj,
-  Q extends ParsedUrlQuery = ParsedUrlQuery
+  Q extends ParsedUrlQuery = ParsedUrlQuery,
 > = GetStaticPropsNext<P & Omit<PL, 'children'> & ApolloStateProps, Q>
 
 /** Used by _app */

package/Pagination/index.tsx

@@ -1,17 +1,31 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { Fab, makeStyles, Theme, Typography } from '@material-ui/core'
 import { PaginationProps, usePagination } from '@material-ui/lab'
+import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../Styles'
-import SvgImage from '../SvgImage'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
 const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    margin: '0 auto',
+    marginTop: theme.spacings.lg,
+    marginBottom: theme.spacings.lg,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    '& .Mui-disabled': {
+      background: 'none',
+      '& svg': {
+        stroke: theme.palette.text.disabled,
+      },
+    },
+  },
   pagination: {
     gridArea: 'pagination',
     justifyContent: 'center',
     display: 'grid',
-    gap: 8,
     gridAutoFlow: 'column',
     alignItems: 'center',
     marginBottom: theme.spacings.xxl,
@@ -24,51 +38,6 @@ const useStyles = makeStyles((theme: Theme) => ({
       boxShadow: 'none',
     },
   },
-  disabled: {
-    background: 'none !important',
-  },
-  root: {
-    margin: '32px auto 0 auto',
-    marginTop: theme.spacings.lg,
-    marginBottom: theme.spacings.lg,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    // fontSize: 18,
-    '& span': {
-      padding: '0 8px 0 0',
-    },
-    '& a': {
-      transition: 'background .25s ease',
-      borderRadius: '100%',
-      height: 40,
-      width: 40,
-      '&:hover': {
-        background: 'rgba(0, 0, 0, 0.04)',
-      },
-    },
-    [theme.breakpoints.down('xs')]: {
-      alignItems: 'center',
-    },
-  },
-  icon: {
-    display: 'flex',
-    borderRadius: '100%',
-    padding: 6,
-    height: 40,
-    width: 40,
-  },
-  label: {
-    ...theme.typography.body1,
-    textAlign: 'center',
-  },
-  labelTitle: {
-    ...theme.typography.body1,
-    display: 'inline',
-    [theme.breakpoints.down('xs')]: {
-      display: 'block',
-    },
-  },
 }))
 
 export type PagePaginationProps = {
@@ -97,19 +66,22 @@ export default function Pagination(props: PagePaginationProps) {
   const nextBtnProps = items[items.length - 1]
 
   const chevronLeft = (
-    <SvgImageSimple src={iconChevronLeft} muted={page === 1} className={classes.icon} />
+    <Fab size='medium' disabled={page === 1} color='inherit'>
+      <SvgImageSimple src={iconChevronLeft} />
+    </Fab>
   )
 
   const chevronRight = (
-    <SvgImageSimple src={iconChevronRight} muted={page === count} className={classes.icon} />
+    <Fab size='medium' disabled={page === count} color='inherit'>
+      <SvgImageSimple src={iconChevronRight} />
+    </Fab>
   )
 
   return (
     <div className={classes.root}>
       {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
 
-      <span className={classes.labelTitle}>Page</span>
-      <span className={classes.label}>{`${page} of ${Math.max(1, count)}`}</span>
+      <Typography variant='body1'>Page {`${page} of ${Math.max(1, count)}`}</Typography>
 
       {page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}
     </div>

package/Row/ButtonLinkList/index.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles(
     overline: {
       display: 'block',
       padding: `${theme.spacings.xs} 0`,
-      borderBottom: `1px solid ${theme.palette.grey[300]}`,
+      borderBottom: `1px solid ${theme.palette.divider}`,
     },
     links: ({ containsBigLinks }: ButtonLinkListPropsBase) => ({
       display: 'grid',

package/Row/IconBlocks/IconBlock/index.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles(
       gridAutoFlow: 'row',
       justifyItems: 'center',
       gap: `${theme.spacings.xs}`,
-      border: `1px solid ${theme.palette.grey[300]}`,
+      border: `1px solid ${theme.palette.divider}`,
       padding: `${theme.spacings.sm}`,
       borderRadius: '6px',
       textAlign: 'center',

package/Row/IconBlocks/index.tsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles(
       gridAutoFlow: 'row',
       justifyItems: 'center',
       gap: `${theme.spacings.xs}`,
-      border: `1px solid ${theme.palette.grey[300]}`,
+      border: `1px solid ${theme.palette.divider}`,
       padding: `${theme.spacings.sm}`,
       borderRadius: '6px',
       cursor: 'pointer',

package/Row/RowImageText/index.tsx

@@ -7,7 +7,10 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     wrapper: {
       display: 'grid',
-      background: 'rgba(0,0,0,0.03)',
+      background:
+        theme.palette.type === 'light'
+          ? theme.palette.background.image
+          : theme.palette.background.paper,
       justifyItems: 'center',
       columnGap: theme.spacings.lg,
       padding: `${theme.spacings.xl} 0`,
@@ -27,12 +30,14 @@ const useStyles = makeStyles(
       },
     },
     copy: {
+      marginTop: theme.spacings.lg,
       color: theme.palette.text.primary,
       maxWidth: '80%',
       display: 'grid',
       alignContent: 'center',
       [theme.breakpoints.up('md')]: {
         maxWidth: '70%',
+        marginTop: 0,
       },
       '& > *': {
         maxWidth: 'max-content',

package/SectionHeader/index.tsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles(
     },
     labelLeft: {},
     labelRight: {
-      color: theme.palette.primary.contrastText,
+      color: theme.palette.text.primary,
       lineHeight: 1,
     },
   }),
@@ -56,11 +56,21 @@ export default function SectionHeader(props: SectionHeaderProps) {
         [classes.sectionHeaderSidePadding]: usePadding,
       })}
     >
-      <Typography className={classes.labelLeft} variant={variantLeft} component='div'>
+      <Typography
+        className={classes.labelLeft}
+        variant={variantLeft}
+        color='textSecondary'
+        component='div'
+      >
         {labelLeft}
       </Typography>
       {labelRight && (
-        <Typography className={classes.labelRight} variant={variantRight} component='div'>
+        <Typography
+          className={classes.labelRight}
+          variant={variantRight}
+          color='textSecondary'
+          component='div'
+        >
           {labelRight}
         </Typography>
       )}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -6,6 +6,7 @@ import {
   SnackbarProps,
   Theme,
   Portal,
+  lighten,
 } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
@@ -35,9 +36,8 @@ const useStyles = makeStyles(
     rootPill: {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.primary,
-
       [theme.breakpoints.up('md')]: {
-        borderRadius: 50,
+        borderRadius: '99em',
       },
     },
     rootPillLarge: {},
@@ -58,61 +58,32 @@ const useStyles = makeStyles(
       },
     },
     children: {
-      // display: 'flex',
       gridArea: 'children',
-      ...theme.typography.h6,
+      ...theme.typography.subtitle1,
       fontWeight: 400,
-
-      '& .MuiSvgIcon-root': {
-        position: 'relative',
-        fontSize: '1.1em',
-        top: '0.15em',
-      },
+      display: 'grid',
+      alignItems: 'center',
+      justifyContent: 'start',
+      gridAutoFlow: 'column',
+      gap: 10,
     },
     actionButton: {
       gridArea: 'action',
       '&:hover, &:focus': {
         backgroundColor: 'transparent',
       },
-      '& .MuiPillButton-pill': {
-        width: '100%',
-        padding: theme.spacings.xxs,
-        borderRadius: 40,
-      },
-      [theme.breakpoints.up('md')]: {
-        margin: 0,
+      [theme.breakpoints.down('md')]: {
         '& .MuiPillButton-pill': {
           width: '100%',
-          padding: '8px 16px',
         },
       },
     },
-    closeButton: {
-      gridArea: 'close',
-      '& .MuiSvgIcon-root': {
-        height: 24,
-      },
-      '& .MuiFab-sizeMedium': {
-        height: 36,
-        width: 36,
-      },
-      [theme.breakpoints.up('md')]: {
-        '& .MuiSvgIcon-root': {
-          height: 28,
-        },
-        '& .MuiFab-sizeMedium': {
-          height: 44,
-          width: 44,
-        },
-      },
+    close: {
+      backgroundColor: lighten(theme.palette.background.paper, 0.1),
     },
     sticky: {
       position: 'sticky',
     },
-    messageIcon: {
-      display: 'inline-block',
-      marginRight: 5,
-    },
   }),
   { name: 'MessageSnackbar' },
 )
@@ -201,21 +172,22 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
           message={
             <>
               <div className={classes.children}>
-                <div>
-                  <SvgImageSimple src={icon} size='large' className={classes.messageIcon} />
-                  {children}
-                </div>
+                <SvgImageSimple src={icon} size='large' />
+                <div>{children}</div>
               </div>
               {action && (
                 <div className={classes.actionButton} onClick={hideSnackbar}>
                   {action}
                 </div>
               )}
-              <div className={classes.closeButton}>
-                <Fab aria-label='Close snackbar' size='medium' onClick={hideSnackbar}>
-                  <SvgImageSimple src={iconClose} size='small' />
-                </Fab>
-              </div>
+              <Fab
+                className={classes.close}
+                aria-label='Close snackbar'
+                size='small'
+                onClick={hideSnackbar}
+              >
+                <SvgImageSimple src={iconClose} />
+              </Fab>
             </>
           }
         />

package/StarRatingField/index.tsx

@@ -2,7 +2,6 @@ import { makeStyles, Theme } from '@material-ui/core'
 import { Rating, RatingProps } from '@material-ui/lab'
 import React from 'react'
 import { SvgImageSimple } from '..'
-import SvgImage from '../SvgImage'
 import { iconStar } from '../icons'
 
 export type StarRatingFieldProps = {

package/Stepper/Stepper.tsx

@@ -7,13 +7,14 @@ import responsiveVal from '../Styles/responsiveVal'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
+      marginTop: '-2px',
       display: 'grid',
       gridAutoFlow: 'column',
       gap: responsiveVal(8, 12),
       // padding: `0 ${theme.page.horizontal}`,
     },
     step: {
-      height: 2,
+      height: responsiveVal(2, 3),
       background: theme.palette.divider,
     },
     current: {

package/SvgImage/SvgImageSimple.tsx

@@ -15,7 +15,6 @@ const useStyles = makeStyles(
       strokeWidth: 1.8,
       strokeLinecap: 'square',
       strokeLinejoin: 'miter',
-      stroke: theme.palette.text.primary,
       fill: 'none',
     },
     sizeInherit: {
@@ -32,21 +31,17 @@ const useStyles = makeStyles(
       strokeWidth: 1.4,
     },
     sizeXl: {
-      width: responsiveVal(38, 42),
-      height: responsiveVal(38, 42),
-      strokeWidth: 1.8,
+      width: responsiveVal(38, 62),
+      height: responsiveVal(38, 62),
+      strokeWidth: 1.5,
     },
     sizeXxl: {
       width: responsiveVal(96, 148),
       height: responsiveVal(96, 148),
       strokeWidth: 1,
     },
-    muted: {
-      stroke: theme.palette.text.disabled,
-    },
-    inverted: {
-      stroke: theme.palette.background.default,
-    },
+    muted: {},
+    inverted: {},
   }),
   { name: 'SvgImageSimple' },
 )

package/TextInputNumber/index.tsx

@@ -12,7 +12,6 @@ import clsx from 'clsx'
 import React, { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
 import { UseStyles } from '../Styles'
 import responsiveVal from '../Styles/responsiveVal'
-import SvgImage from '../SvgImage'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconMin, iconPlus } from '../icons'
 

package/Theme/types.ts

@@ -2,7 +2,7 @@ export {}
 
 declare module '@material-ui/core/styles/createPalette' {
   interface TypeBackground {
-    highlight: string
+    image: string
   }
 }
 

package/Title/index.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
+import { responsiveVal } from '..'
 import { UseStyles } from '../Styles'
 import SvgImage, { SvgImageProps } from '../SvgImage'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
@@ -18,14 +19,13 @@ const useStyles = makeStyles(
       },
     },
     typography: {},
-    icon: {
-      [theme.breakpoints.down('sm')]: {
-        width: 48,
-        height: 48,
-      },
-    },
     small: {
       flexFlow: 'unset',
+      '& svg': {
+        width: responsiveVal(24, 28),
+        height: responsiveVal(24, 28),
+        strokeWidth: 1.4,
+      },
     },
   }),
   {

package/icons/cancel-alt.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="cancelAltIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="cancelAltIconTitle">cancelAlt</title> <symbol id="icon" viewBox="0 0 24 24"><path d="M19.0710678,4.92893219 C22.9763107,8.83417511 22.9763107,15.1658249 19.0710678,19.0710678 C15.1658249,22.9763107 8.83417511,22.9763107 4.92893219,19.0710678 C1.02368927,15.1658249 1.02368927,8.83417511 4.92893219,4.92893219 C8.83417511,1.02368927 15.1658249,1.02368927 19.0710678,4.92893219 Z M16.9497475,8.46446609 L15.5355339,7.05025253 L12,10.5857864 L8.46446609,7.05025253 L7.05025253,8.46446609 L10.5857864,12 L7.05025253,15.5355339 L8.46446609,16.9497475 L12,13.4142136 L15.5355339,16.9497475 L16.9497475,15.5355339 L13.4142136,12 L16.9497475,8.46446609 Z" id="Shape"></path></symbol></svg>

package/icons/facebook.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="facebookIcon" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="facebookIconTitle">Facebook</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M22,12 C22,6.4775 17.5225,2 12,2 C6.4775,2 2,6.4775 2,12 C2,16.9916667 5.65666667,21.1283333 10.4375,21.8783333 L10.4375,14.8908333 L7.89833333,14.8908333 L7.89833333,11.9991667 L10.4375,11.9991667 L10.4375,9.7975 C10.4375,7.29166667 11.9308333,5.90666667 14.215,5.90666667 C15.3083333,5.90666667 16.4533333,6.1025 16.4533333,6.1025 L16.4533333,8.56333333 L15.1916667,8.56333333 C13.9491667,8.56333333 13.5616667,9.33416667 13.5616667,10.125 L13.5616667,12 L16.335,12 L15.8916667,14.8916667 L13.5616667,14.8916667 L13.5616667,21.8791667 C18.3433333,21.1283333 22,16.9908333 22,12 Z" id="Shape"></path> </symbol></svg>

package/icons/index.tsx

@@ -13,7 +13,7 @@ export { default as iconShoppingBag } from './bag.svg'
 export { default as iconFullscreenExit } from './minimise.svg'
 export { default as iconChat } from './chat-alt.svg'
 export { default as iconChevronBack } from './chevron-left.svg'
-export { default as iconCloseCircle } from './cancel.svg'
+export { default as iconCancelAlt } from './cancel-alt.svg'
 export { default as iconEmail } from './envelope-alt.svg'
 export { default as iconCheckmark } from './ok.svg'
 export { default as iconArrowBack } from './arrow-left.svg'

package/icons/instagram.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="instagramIcon" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="instagramIconTitle">Instagram</title> <symbol id="icon" viewBox="0 0 24 24">  <path d="M12,2 C9.28333333,2 8.94416667,2.0125 7.8775,2.06 C6.8125,2.11 6.0875,2.2775 5.45,2.525 C4.7925,2.78 4.23416667,3.1225 3.67833333,3.67833333 C3.1225,4.23416667 2.77916667,4.79166667 2.525,5.45 C2.2775,6.0875 2.10916667,6.8125 2.06,7.8775 C2.01,8.94416667 2,9.28333333 2,12 C2,14.7166667 2.0125,15.0558333 2.06,16.1225 C2.11,17.1866667 2.2775,17.9125 2.525,18.55 C2.78,19.2066667 3.1225,19.7658333 3.67833333,20.3216667 C4.23416667,20.8766667 4.79166667,21.2208333 5.45,21.475 C6.08833333,21.7216667 6.81333333,21.8908333 7.8775,21.94 C8.94416667,21.99 9.28333333,22 12,22 C14.7166667,22 15.0558333,21.9875 16.1225,21.94 C17.1866667,21.89 17.9125,21.7216667 18.55,21.475 C19.2066667,21.22 19.7658333,20.8766667 20.3216667,20.3216667 C20.8766667,19.7658333 21.2208333,19.2091667 21.475,18.55 C21.7216667,17.9125 21.8908333,17.1866667 21.94,16.1225 C21.99,15.0558333 22,14.7166667 22,12 C22,9.28333333 21.9875,8.94416667 21.94,7.8775 C21.89,6.81333333 21.7216667,6.08666667 21.475,5.45 C21.22,4.7925 20.8766667,4.23416667 20.3216667,3.67833333 C19.7658333,3.1225 19.2091667,2.77916667 18.55,2.525 C17.9125,2.2775 17.1866667,2.10916667 16.1225,2.06 C15.0558333,2.01 14.7166667,2 12,2 Z M12,3.8 C14.6691667,3.8 14.9875,3.81333333 16.0416667,3.85916667 C17.0166667,3.905 17.5458333,4.06666667 17.8975,4.205 C18.3658333,4.38583333 18.6975,4.6025 19.0491667,4.95166667 C19.3983333,5.30166667 19.615,5.63416667 19.7958333,6.1025 C19.9325,6.45416667 20.0958333,6.98333333 20.14,7.95833333 C20.1875,9.01333333 20.1983333,9.33 20.1983333,12 C20.1983333,14.67 20.1858333,14.9875 20.1366667,16.0416667 C20.0858333,17.0166667 19.9233333,17.5458333 19.7858333,17.8975 C19.5991667,18.3658333 19.3866667,18.6975 19.0366667,19.0491667 C18.6875,19.3983333 18.35,19.615 17.8866667,19.7958333 C17.5366667,19.9325 16.9991667,20.0958333 16.0241667,20.14 C14.9625,20.1875 14.65,20.1983333 11.975,20.1983333 C9.29916667,20.1983333 8.98666667,20.1858333 7.92583333,20.1366667 C6.95,20.0858333 6.4125,19.9233333 6.0625,19.7858333 C5.58833333,19.5991667 5.2625,19.3866667 4.91333333,19.0366667 C4.5625,18.6875 4.33833333,18.35 4.16333333,17.8866667 C4.02583333,17.5366667 3.86416667,16.9991667 3.81333333,16.0241667 C3.77583333,14.9741667 3.7625,14.65 3.7625,11.9875 C3.7625,9.32416667 3.77583333,8.99916667 3.81333333,7.93666667 C3.86416667,6.96166667 4.02583333,6.425 4.16333333,6.075 C4.33833333,5.6 4.5625,5.275 4.91333333,4.92416667 C5.2625,4.575 5.58833333,4.35 6.0625,4.17583333 C6.4125,4.0375 6.93833333,3.875 7.91333333,3.825 C8.97583333,3.7875 9.28833333,3.775 11.9625,3.775 L12,3.8 L12,3.8 Z M12,6.865 C9.1625,6.865 6.865,9.165 6.865,12 C6.865,14.8375 9.165,17.135 12,17.135 C14.8375,17.135 17.135,14.835 17.135,12 C17.135,9.1625 14.835,6.865 12,6.865 Z M12,15.3333333 C10.1583333,15.3333333 8.66666667,13.8416667 8.66666667,12 C8.66666667,10.1583333 10.1583333,8.66666667 12,8.66666667 C13.8416667,8.66666667 15.3333333,10.1583333 15.3333333,12 C15.3333333,13.8416667 13.8416667,15.3333333 12,15.3333333 Z M18.5383333,6.6625 C18.5383333,7.325 18,7.8625 17.3383333,7.8625 C16.6758333,7.8625 16.1383333,7.32416667 16.1383333,6.6625 C16.1383333,6.00083333 16.6766667,5.46333237 17.3383333,5.46333237 C17.9991667,5.4625 18.5383333,6.00083333 18.5383333,6.6625 Z" id="Shape"></path> </symbol></svg>

package/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="linkedinIcon" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="linkedinIconTitle">Linkedin</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M19.0391667,19.0433333 L16.0775,19.0433333 L16.0775,14.4025 C16.0775,13.2958333 16.055,11.8716667 14.5341667,11.8716667 C12.99,11.8716667 12.7541667,13.0758333 12.7541667,14.3208333 L12.7541667,19.0433333 L9.7925,19.0433333 L9.7925,9.5 L12.6375,9.5 L12.6375,10.8008333 L12.6758333,10.8008333 C13.0733333,10.0508333 14.04,9.25916667 15.4841667,9.25916667 C18.485,9.25916667 19.04,11.2341667 19.04,13.805 L19.04,19.0433333 L19.0391667,19.0433333 Z M6.4475,8.19416667 C5.49416667,8.19416667 4.72833333,7.4225 4.72833333,6.47333333 C4.72833333,5.525 5.495,4.75416667 6.4475,4.75416667 C7.3975,4.75416667 8.1675,5.525 8.1675,6.47333333 C8.1675,7.4225 7.39666667,8.19416667 6.4475,8.19416667 Z M7.9325,19.0433333 L4.9625,19.0433333 L4.9625,9.5 L7.9325,9.5 L7.9325,19.0433333 Z M20.5208333,2 L3.47583333,2 C2.66,2 2,2.645 2,3.44083333 L2,20.5591667 C2,21.3558333 2.66,22 3.47583333,22 L20.5183333,22 C21.3333333,22 22,21.3558333 22,20.5591667 L22,3.44083333 C22,2.645 21.3333333,2 20.5183333,2 L20.5208333,2 Z" id="Shape"></path> </symbol></svg>

package/icons/twitter.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="iconTwitter" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="iconTwitterTitle">Twitter</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M8.16087442,20.762239 C16.1774221,20.762239 20.5607655,14.1194402 20.5607655,8.36234795 C20.5607655,8.1725537 20.5607655,7.98275945 20.5517277,7.80200302 C21.4012829,7.18743116 22.1423842,6.41921633 22.7298426,5.54254765 C21.95259,5.88598487 21.1120726,6.12096823 20.2263661,6.22942208 C21.1301482,5.68715279 21.8170227,4.83759758 22.1423842,3.81632375 C21.3018668,4.31340393 20.3709712,4.67491679 19.3768109,4.87374886 C18.5814826,4.02419365 17.4517549,3.5 16.1954977,3.5 C13.7914372,3.5 11.8392678,5.45216944 11.8392678,7.85622995 C11.8392678,8.19966716 11.875419,8.53406656 11.9567594,8.85039031 C8.33259303,8.66963388 5.12416641,6.93437216 2.9731649,4.29532829 C2.60261422,4.93701361 2.3857065,5.68715279 2.3857065,6.48248108 C2.3857065,7.99179727 3.15392133,9.32939485 4.32883812,10.1066475 C3.61485022,10.0885718 2.94605143,9.88973978 2.35859304,9.5643782 C2.35859304,9.58245385 2.35859304,9.60052949 2.35859304,9.61860513 C2.35859304,11.7334554 3.8588714,13.4867927 5.85622995,13.8934947 C5.49471709,13.9929107 5.10609076,14.0471377 4.70842662,14.0471377 C4.42825415,14.0471377 4.15711951,14.0200242 3.88598487,13.9657973 C4.43729198,15.701059 6.0460242,16.9573162 7.95300453,16.9934674 C6.46176398,18.1593464 4.58189712,18.8552587 2.53934947,18.8552587 C2.18687443,18.8552587 1.84343722,18.837183 1.5,18.7919939 C3.40698033,20.0392133 5.70258698,20.762239 8.16087442,20.762239" id="Path" stroke="#2329D6"></path> </symbol></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.11.3",
+  "version": "3.12.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.107.1",
-    "@graphcommerce/framer-scroller": "^0.4.2",
-    "@graphcommerce/framer-sheet": "^2.105.14",
-    "@graphcommerce/framer-utils": "^2.103.12",
-    "@graphcommerce/graphql": "^2.105.1",
-    "@graphcommerce/image": "^2.105.1",
+    "@graphcommerce/framer-next-pages": "^2.107.3",
+    "@graphcommerce/framer-scroller": "^0.4.3",
+    "@graphcommerce/framer-sheet": "^2.105.15",
+    "@graphcommerce/framer-utils": "^2.103.13",
+    "@graphcommerce/graphql": "^2.105.2",
+    "@graphcommerce/image": "^2.105.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -23,7 +23,7 @@
     "clsx": "^1.1.1",
     "framer-motion": "^4.1.17",
     "graphql": "^15.6.1",
-    "next": "^12.0.1",
+    "next": "^12.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-focus-lock": "^2.5.2",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.2",
+    "@graphcommerce/eslint-config-pwa": "^3.1.3",
     "@graphcommerce/prettier-config-pwa": "^3.0.3",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "570a61e72f88ef0a4bd1472d48c7a7dd28154f59"
+  "gitHead": "034145dd36551a6c71be6c51f0f1560ef50cb77a"
 }