@graphcommerce/next-ui 3.19.1 → 3.20.0

package/AppShell/AppShellSticky/index.tsx

@@ -1,10 +1,7 @@
 import { Container, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
-import { useMotionValue } from 'framer-motion'
-import React, { useEffect } from 'react'
-import { useMotionValueValue } from '../../../framer-utils'
+import React from 'react'
 import { UseStyles } from '../../Styles'
-import useAppShellHeaderContext from '../AppShellHeader/useAppShellHeaderContext'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -38,21 +35,8 @@ export default function AppShellSticky(props: AppShellStickyProps) {
   const { children, headerFill = 'both' } = props
   const classes = useStyles(props)
 
-  const { contentHeaderRef } = useAppShellHeaderContext()
-  const offsetTop = useMotionValue<number>(0)
-
-  useEffect(() => {
-    if (!contentHeaderRef?.current) return () => {}
-
-    const ro = new ResizeObserver(([entry]) =>
-      offsetTop.set(contentHeaderRef?.current?.clientHeight ?? 0),
-    )
-
-    ro.observe(contentHeaderRef.current)
-    return () => ro.disconnect()
-  }, [contentHeaderRef, offsetTop])
-
-  const top = useMotionValueValue(offsetTop, (v) => v)
+  // todo
+  const top = 0
 
   return (
     <Container

package/AppShell/DesktopNavActions.tsx

@@ -1,5 +1,4 @@
 import { makeStyles, Theme } from '@material-ui/core'
-import { m } from 'framer-motion'
 import React from 'react'
 
 const useStyles = makeStyles(
@@ -7,11 +6,12 @@ const useStyles = makeStyles(
     actions: {
       display: 'none',
       [theme.breakpoints.up('md')]: {
+        display: 'grid',
+        pointerEvents: 'none !important',
         '& > *': {
           pointerEvents: 'all',
         },
         alignItems: 'center',
-        display: 'grid',
         gridAutoFlow: 'column',
         columnGap: 6,
       },
@@ -23,6 +23,5 @@ const useStyles = makeStyles(
 export default function DesktopNavActions(props: { children?: React.ReactNode }) {
   const { children } = props
   const classes = useStyles()
-
-  return <m.div className={classes.actions}>{children}</m.div>
+  return <div className={classes.actions}>{children}</div>
 }

package/AppShell/DesktopNavBar.tsx

@@ -1,10 +1,9 @@
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { Link, LinkProps as MuiLinkProps, makeStyles, Theme } from '@material-ui/core'
-import { Variant as ThemeVariant } from '@material-ui/core/styles/createTypography'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
-import { useRouter } from 'next/router'
 import React from 'react'
 import { UseStyles } from '../Styles'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
@@ -93,7 +92,7 @@ export type MenuTabsProps = MenuProps &
 export default function DesktopNavBar(props: MenuTabsProps) {
   const { menu, LinkProps, iconScrollerBtnLeft, iconScrollerBtnRight } = props
   const classes = useStyles(props)
-  const router = useRouter()
+  const router = usePageRouter()
 
   return (
     <ScrollerProvider scrollSnapAlign='none'>

package/AppShell/FixedFab.tsx

@@ -6,20 +6,15 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
       position: 'fixed',
-      top: 'unset',
       bottom: 20,
       right: 20,
       zIndex: 100,
       boxShadow: theme.shadows[4],
       borderRadius: 99,
       maxWidth: 56,
-      [theme.breakpoints.down('sm')]: {
-        top: 'unset !important',
-      },
       [theme.breakpoints.up('md')]: {
         pointerEvents: 'all',
-        top: theme.spacings.xxs,
-        // hacky way to measure page width without scrollbar width
+        top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
         left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
         bottom: 'unset',
         boxShadow: 'unset',

package/AppShell/GlobalHead.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from '@material-ui/core'
+import Head from 'next/head'
+import React from 'react'
+
+export type GlobalHeadProps = { name: string }
+
+const GlobalHead = (props: { name: string }) => {
+  const { name } = props
+  const theme = useTheme()
+
+  return (
+    <Head>
+      <meta name='theme-color' content={theme.palette.background.default} key='theme-color' />
+      <meta
+        name='viewport'
+        content='minimum-scale=1, initial-scale=1, width=device-width'
+        key='viewport'
+      />
+      <meta name='application-name' content={name} key='application-name' />
+      <meta name='apple-mobile-web-app-capable' content='yes' key='apple-mobile-web-app-capable' />
+      <meta
+        name='apple-mobile-web-app-status-bar-style'
+        content='default'
+        key='apple-mobile-web-app-status-bar-style'
+      />
+      <meta name='apple-mobile-web-app-title' content={name} key='apple-mobile-web-app-title' />
+      <meta name='format-detection' content='telephone=no' key='format-detection' />
+      <meta name='mobile-web-app-capable' content='yes' key='mobile-web-app-capable' />
+      <link rel='apple-touch-icon' href='/manifest/icon-512-512.png' key='apple-touch-icon' />
+      <link rel='manifest' href='/manifest.webmanifest' key='manifest' />
+      <link rel='icon' href='/manifest/favicon.ico' key='icon' />
+    </Head>
+  )
+}
+
+export default GlobalHead

package/AppShell/Logo.tsx

@@ -1,6 +1,6 @@
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { Image, ImageProps } from '@graphcommerce/image'
-import { makeStyles, Theme, useTheme } from '@material-ui/core'
-import clsx from 'clsx'
+import { makeStyles, Theme } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
 import { UseStyles } from '../Styles'
@@ -21,34 +21,25 @@ const useStyles = makeStyles(
         justifyContent: 'left',
       },
     },
-    logoHideOnMobile: {
-      display: 'none',
-      [theme.breakpoints.up('md')]: {
-        display: 'unset',
-      },
-    },
   }),
   { name: 'Logo' },
 )
 
-export type LogoProps = {
-  href?: `/${string}`
-  image: ImageProps
-  alwaysShow?: boolean
-} & UseStyles<typeof useStyles>
+export type LogoProps = { href?: `/${string}`; image: ImageProps } & UseStyles<typeof useStyles>
 
 export default function Logo(props: LogoProps) {
-  const { href, alwaysShow, image } = props
+  const { href, image } = props
+  const router = usePageRouter()
   const classes = useStyles(props)
-  const theme = useTheme()
 
-  return (
+  return router.asPath === '/' ? (
+    <div className={classes.logo}>
+      <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
+    </div>
+  ) : (
     <PageLink href={href ?? '/'} passHref>
       <a className={classes.link} aria-label='Logo'>
-        <Image
-          {...{ ...image }}
-          className={clsx(classes.logo, !alwaysShow && classes.logoHideOnMobile)}
-        />
+        <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
       </a>
     </PageLink>
   )

package/AppShell/MenuFab.tsx

@@ -10,10 +10,10 @@ import {
 } from '@material-ui/core'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
-import { Router, useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
 import { UseStyles } from '../Styles'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconMenu, iconClose } from '../icons'
 import { MenuProps } from './Menu'
@@ -25,7 +25,6 @@ const useStyles = makeStyles(
       position: 'fixed',
       zIndex: 99,
       left: theme.page.horizontal,
-      top: `calc(${theme.spacings.xxs} - 5px)`,
       [theme.breakpoints.down('sm')]: {
         top: 'unset',
         left: 20,
@@ -33,6 +32,9 @@ const useStyles = makeStyles(
         transform: 'none !important',
         opacity: '1 !important',
       },
+      [theme.breakpoints.up('md')]: {
+        top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
+      },
     },
     menuFab: {
       background: theme.palette.text.primary,

package/AppShell/MenuFabSecondaryItem.tsx

@@ -1,13 +1,13 @@
-import { ListItem, ListItemIcon, ListItemText, makeStyles, Theme } from '@material-ui/core'
+import { ListItem, ListItemIcon, ListItemText, makeStyles } from '@material-ui/core'
 import PageLink from 'next/link'
 import router from 'next/router'
 import React from 'react'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     listItemText: {},
     icon: { minWidth: 30 },
-  }),
+  },
   { name: 'FabMenuSecondaryItem' },
 )
 

package/AppShell/PlaceholderFab/index.tsx

@@ -1,27 +1,8 @@
-import { Fab, FabProps, makeStyles } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../../Styles'
-
-const useStyles = makeStyles(
-  () => ({
-    placeholderCartFab: {
-      boxShadow: 'none',
-      background: 'none',
-      pointerEvents: 'none',
-    },
-  }),
-  { name: 'FullPageShell' },
-)
-
-type PlaceholderFabProps = Omit<FabProps, 'children'> & UseStyles<typeof useStyles>
-
-export default function PlaceholderFab(props: PlaceholderFabProps) {
-  const { ...fabProps } = props
-  const classes = useStyles(props)
-
-  return (
-    <Fab className={classes.placeholderCartFab} size='large' {...fabProps} aria-label='Placeholder'>
-      <></>
-    </Fab>
-  )
-}
+import { Fab, FabProps, styled } from '@material-ui/core'
+
+export const PlaceholderFab = styled((props: Omit<FabProps, 'children'>) => (
+  <Fab {...props}>
+    {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+    <></>
+  </Fab>
+))({ visibility: 'hidden', pointerEvents: 'none' })

package/AppShell/index.tsx

@@ -0,0 +1,19 @@
+export { default as AppShellSticky } from './AppShellSticky'
+export { default as DesktopNavActions } from './DesktopNavActions'
+
+export * from './DesktopNavBar'
+export { default as DesktopNavBar } from './DesktopNavBar'
+export { default as FixedFab } from './FixedFab'
+
+export { default as Logo } from './Logo'
+export * from './Logo'
+export * from './Menu'
+export * from './MenuFab'
+export { default as MenuFab } from './MenuFab'
+export * from './MenuFabSecondaryItem'
+export { default as MenuFabSecondaryItem } from './MenuFabSecondaryItem'
+export * from './PlaceholderFab'
+export * from './GlobalHead'
+export { default as GlobalHead } from './GlobalHead'
+export { default as useFabAnimation } from './useFabAnimation'
+export { default as useFixedFabAnimation } from './useFixedFabAnimation'

package/AppShell/useFabAnimation.tsx

@@ -1,10 +1,11 @@
 import { useMediaQuery, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export default function useFabAnimation() {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const { scrollY } = useViewportScroll()
+  const scrollY = useScrollY()
   const scrollTo = isMobile ? 0 : 130
 
   const scale = useTransform(scrollY, [50, scrollTo], [0.4, 1])

package/AppShell/useFixedFabAnimation.tsx

@@ -1,9 +1,10 @@
 import { alpha, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useMotionValue, useTransform, useViewportScroll } from 'framer-motion'
+import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export default function useFixedFabAnimation() {
   const theme = useTheme()
-  const { scrollY } = useViewportScroll()
+  const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])
   const opacity1 = useTransform(
     scrollY,

package/Blog/BlogAuthor/index.tsx

@@ -1,7 +1,7 @@
 import { Avatar, Chip, makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
-import { responsiveVal } from '../..'
 import { UseStyles } from '../../Styles'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/Blog/BlogHeader/index.tsx

@@ -1,8 +1,7 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
-import { responsiveVal } from '../..'
-import Row from '../../Row'
 import { UseStyles } from '../../Styles'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/Blog/BlogList/index.tsx

@@ -2,7 +2,7 @@ import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import Row from '../../Row'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/Blog/BlogListItem/index.tsx

@@ -2,7 +2,7 @@ import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/Blog/BlogTitle/index.tsx

@@ -1,15 +1,15 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
 import React from 'react'
-import AppShellTitle from '../../AppShell/AppShellTitle'
+import { LayoutTitle } from '../../Layout'
 import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     wrapper: {
       maxWidth: 800,
       margin: `0 auto`,
     },
-  }),
+  },
   { name: 'BlogTitle' },
 )
 
@@ -23,7 +23,7 @@ export default function BlogTitle(props: BlogTitleProps) {
 
   return (
     <div className={classes.wrapper}>
-      <AppShellTitle variant='h1'>{title}</AppShellTitle>
+      <LayoutTitle variant='h1'>{title}</LayoutTitle>
     </div>
   )
 }

package/Button/index.tsx

@@ -3,11 +3,9 @@ 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'
@@ -58,33 +56,40 @@ const useStyles = makeStyles<
       borderRadius: '99em',
     },
     pillLink: {
-      [theme.breakpoints.up('sm')]: {
+      [theme.breakpoints.up('md')]: {
         // manually match MuiButton and containedPrimary styles
         textTransform: 'none',
         ...theme.typography.body2,
         fontWeight: 400,
-        padding: `${responsiveVal(8, 10)} ${responsiveVal(16, 20)}`,
-        backgroundColor: theme.palette.secondary.main,
-        color: theme.palette.primary.contrastText,
         borderRadius: '99em',
         boxShadow: theme.shadows[6],
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
         '&:hover': {
-          background: theme.palette.secondary.dark,
+          background: theme.palette.background.paper,
         },
       },
     },
     pillPrimary: {
-      //
+      [theme.breakpoints.up('md')]: {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        '&:hover': {
+          background: theme.palette.primary.dark,
+        },
+      },
     },
     pillSecondary: {
-      //
-    },
-    pillSizeLarge: {
-      //
-    },
-    pillSizeSmall: {
-      //
+      [theme.breakpoints.up('md')]: {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText,
+        '&:hover': {
+          background: theme.palette.secondary.dark,
+        },
+      },
     },
+    pillSizeLarge: {},
+    pillSizeSmall: {},
     pillNoElevation: {
       /* disableElevation does not stop adding box shadow on active... ?! */
       '&:active': {
@@ -152,13 +157,13 @@ export default React.forwardRef<any, ButtonProps>((props, ref) => {
       disabled={loading || disabled}
       className={clsx(
         {
-          [pillClasses.pill]: variant === 'pill',
-          [pillClasses.pillPrimary]: variant === 'pill' && color === 'primary',
-          [pillClasses.pillSecondary]: variant === 'pill' && color === 'secondary',
-          [pillClasses.pillSizeLarge]: variant === 'pill' && size === 'large',
-          [pillClasses.pillSizeSmall]: variant === 'pill' && size === 'small',
-          [pillClasses.pillNoElevation]: buttonProps.disableElevation,
+          [pillClasses.pill]: variant?.startsWith('pill'),
           [pillClasses.pillLink]: variant === 'pill-link',
+          [pillClasses.pillPrimary]: variant?.startsWith('pill') && color === 'primary',
+          [pillClasses.pillSecondary]: variant?.startsWith('pill') && color === 'secondary',
+          [pillClasses.pillSizeLarge]: variant?.startsWith('pill') && size === 'large',
+          [pillClasses.pillSizeSmall]: variant?.startsWith('pill') && size === 'small',
+          [pillClasses.pillNoElevation]: buttonProps.disableElevation,
           [pillClasses.loading]: loading,
           [pillClasses.withStartIcon]: withIcon,
         },

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.20.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.19.1...@graphcommerce/next-ui@3.20.0) (2021-12-03)
+
+
+### Bug Fixes
+
+* classesPicker would sometimes return 'undefined' as a class ([baa51f1](https://github.com/ho-nl/m2-pwa/commit/baa51f1ac6d47460bfc713bd2c10ae14f1f6ecbf))
+* close button should always be present ([32d4173](https://github.com/ho-nl/m2-pwa/commit/32d4173e44c6e77815cf483590c1f703d48a386b))
+* horizontal scroll on page ([d025a16](https://github.com/ho-nl/m2-pwa/commit/d025a16a02b43756fc58b0b764faa404eb06da6c))
+* make sure elements that use scroll positioning are using the right hook ([80ee33f](https://github.com/ho-nl/m2-pwa/commit/80ee33f68ecc223147d63fc37e5b9ba94df4564e))
+* make sure galleries are scrollable properly ([8653316](https://github.com/ho-nl/m2-pwa/commit/86533167891f0ae197fdf096b84fdda8e89a0f6e))
+* make sure it doesn't error when trying to override root ([99a69a3](https://github.com/ho-nl/m2-pwa/commit/99a69a36579b4c934f3b1be187130983bdf133bf))
+* make sure that pill link buttons get the right background color etc. ([c142b31](https://github.com/ho-nl/m2-pwa/commit/c142b31552417d2296341785994e2f7b35462793))
+* make sure the overlay becomes visible, even if the overlay is scrolled ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
+* make the headerHeight properly configurable ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
+* minHeight of page on iOS is sometimes less high than expected ([8a0bc23](https://github.com/ho-nl/m2-pwa/commit/8a0bc234d153d974ac415369483ddabfb5e7fb0c))
+* missing CssBaseline ([d2a7126](https://github.com/ho-nl/m2-pwa/commit/d2a7126295b99b0446dc31b0cf7c60671a18f976))
+* only apply page meta when the current page is active ([f099a51](https://github.com/ho-nl/m2-pwa/commit/f099a519d169dcc9e2653db8353ce93d7b0a138e))
+* spacing of LayoutTItle ([7afcd31](https://github.com/ho-nl/m2-pwa/commit/7afcd3163d16e902cf2ff7917f56ee6a8798f55b))
+
+
+### Features
+
+* **framer-scroller-sheet:** created package replacing the framer-sheet package ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
+* **framer-scroller:** split the grid functionality from the scroller ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
+* refactor page shell ([594bdb3](https://github.com/ho-nl/m2-pwa/commit/594bdb32927b797208b2a295bc0db9f9ceb94676))
+
+
+
+
+
 # [3.19.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.2...@graphcommerce/next-ui@3.19.0) (2021-12-01)
 
 

package/ChipMenu/index.tsx

@@ -1,8 +1,8 @@
-import { Chip, ChipProps, lighten, makeStyles, Menu, Theme } from '@material-ui/core'
+import { Chip, ChipProps, makeStyles, Menu, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { PropsWithChildren, useState } from 'react'
 import SectionHeader from '../SectionHeader'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 

package/FlagAvatar/index.tsx

@@ -1,10 +1,10 @@
-import { makeStyles, Theme, Avatar, AvatarProps } from '@material-ui/core'
+import { makeStyles, Avatar, AvatarProps } from '@material-ui/core'
 import React from 'react'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     root: {},
-  }),
+  },
   { name: 'FlagAvatar' },
 )
 

package/{AppShell/Footer/index.tsx → Footer/Footer.tsx}

@@ -1,6 +1,6 @@
 import { ContainerProps, Theme, makeStyles, Container } from '@material-ui/core'
 import React from 'react'
-import { UseStyles } from '../../Styles'
+import { UseStyles } from '../Styles'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -80,14 +80,14 @@ const useStyles = makeStyles(
   { name: 'Footer' },
 )
 
-type FooterProps = UseStyles<typeof useStyles> & {
+export type FooterProps = UseStyles<typeof useStyles> & {
   storeSwitcher?: React.ReactNode
   socialLinks?: React.ReactElement
   customerService?: React.ReactNode
   copyright?: React.ReactElement
 } & Omit<ContainerProps, 'children'>
 
-export default function Footer(props: FooterProps) {
+export function Footer(props: FooterProps) {
   const { socialLinks, storeSwitcher, customerService, copyright, ...containerProps } = props
   const classes = useStyles(props)
 

package/{AppShell/Footer → Footer}/SocialIcon.tsx

@@ -1,7 +1,7 @@
 import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
-import { UseStyles } from '../../Styles'
-import SvgImage, { SvgImageProps } from '../../SvgImage'
+import { UseStyles } from '../Styles'
+import SvgImage, { SvgImageProps } from '../SvgImage'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -16,7 +16,7 @@ const useStyles = makeStyles(
 
 type SocialIconProps = UseStyles<typeof useStyles> & SvgImageProps
 
-export default function SocialIcon(props: SocialIconProps) {
+export function SocialIcon(props: SocialIconProps) {
   const classes = useStyles(props)
 
   return <SvgImage {...props} className={classes.root} />

package/Footer/index.ts

@@ -0,0 +1,2 @@
+export * from './Footer'
+export * from './SocialIcon'

package/Form/InputCheckmark.tsx

@@ -1,4 +1,4 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { PropsWithChildren } from 'react'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
@@ -6,14 +6,14 @@ import { iconCheckmark } from '../icons'
 
 export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean; select?: boolean }>
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     iconCheckmark: {
       stroke: '#01D26A',
     },
     select: {
       marginRight: 15,
     },
-  }),
+  },
   { name: 'InputCheckmark' },
 )
 

package/Form/index.tsx

@@ -1,8 +1,8 @@
 import { darken, lighten, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
-import { responsiveVal } from '..'
 import { UseStyles } from '../Styles'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({