@graphcommerce/next-ui 3.10.0 → 3.11.1

package/AppShell/AppShellHeader/index.tsx

@@ -7,6 +7,7 @@ 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'
 
@@ -180,7 +181,7 @@ const useStyles = makeStyles(
       },
     },
     backButton: {
-      background: theme.palette.background.default,
+      background: theme.palette.background.paper,
       color: theme.palette.text.primary,
       '&:hover': {
         background: theme.palette.background.highlight,
@@ -314,19 +315,17 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
         classes={{ root: classes.fab }}
         onClick={() => router.go(closeSteps * -1)}
       >
-        <SvgImage src={iconClose} mobileSize={20} size={20} alt='Close overlay' loading='eager' />
+        <SvgImageSimple src={iconClose} />
       </Fab>
     ) : (
       <PageLink href='/' passHref>
         <Fab size='small' classes={{ root: classes.fab }}>
-          <SvgImage src={iconClose} alt='Close overlay' size={20} mobileSize={20} loading='eager' />
+          <SvgImageSimple src={iconClose} />
         </Fab>
       </PageLink>
     ))
 
-  const backIcon = (
-    <SvgImage src={iconChevronLeft} alt='chevron back' loading='eager' size={26} mobileSize={30} />
-  )
+  const backIcon = <SvgImageSimple src={iconChevronLeft} />
   let back = backSteps > 0 && (
     <Button
       onClick={() => router.back()}

package/AppShell/DesktopNavBar.tsx

@@ -57,7 +57,7 @@ const useStyles = makeStyles(
     },
     link: {
       whiteSpace: 'nowrap',
-      color: 'black',
+      color: theme.palette.text.primary,
       '&:hover': {
         textDecoration: 'none',
       },

package/AppShell/ForwardButton.tsx

@@ -1,8 +1,8 @@
 import { ButtonProps, makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
+import { SvgImageSimple } from '..'
 import Button from '../Button'
 import { UseStyles } from '../Styles'
-import SvgImage from '../SvgImage'
 import { iconChevronRight } from '../icons'
 
 const useStyles = makeStyles(
@@ -39,14 +39,14 @@ const useStyles = makeStyles(
 
 export type ForwardButtonProps = UseStyles<typeof useStyles> & ButtonProps & { down?: boolean }
 
-const ForwardButton = React.forwardRef((props: ForwardButtonProps, ref) => {
+const ForwardButton = React.forwardRef((props: ForwardButtonProps) => {
   const { text, icon, ...classes } = useStyles(props)
   const { children, down, ...fabProps } = props
 
   return (
     <Button variant='pill' classes={classes} {...fabProps}>
       <span className={text}>{children}</span>
-      <SvgImage src={iconChevronRight} alt='chevron right' size='small' classes={{ root: icon }} />
+      <SvgImageSimple src={iconChevronRight} size='small' className={classes.root} />
     </Button>
   )
 })

package/AppShell/FullPageShellBase.tsx

@@ -8,7 +8,7 @@ import ShellBase, { PageLayoutBaseProps } from './ShellBase'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
-      background: '#fff',
+      background: theme.palette.background.default,
       minHeight: '100vh',
       display: 'grid',
       gridTemplateRows: `auto 1fr auto`,

package/AppShell/MenuFab.tsx

@@ -50,10 +50,13 @@ const useStyles = makeStyles(
       minWidth: responsiveVal(200, 280),
     },
     menuItemText: {
-      fontSize: '1.5em',
-      fontWeight: 500,
-      letterSpacing: '-0.0375em',
+      ...theme.typography.h3,
+      fontWeight: 550,
       lineHeight: 1,
+      // fontSize: '1.6em',
+      // fontWeight: 550,
+      // letterSpacing: '-0.0375em',
+      // lineHeight: 1,
     },
     menuItem: {},
   }),
@@ -82,7 +85,7 @@ export default function MenuFab(props: MenuFabProps) {
         onClick={(event) => setOpenEl(event.currentTarget)}
         className={classes.menuFab}
       >
-        <SvgImageSimple src={iconMenu} inverted alt='menu' loading='eager' />
+        <SvgImageSimple src={iconMenu} inverted />
       </Fab>
 
       <Menu

package/Blog/BlogTitle/index.tsx

@@ -23,7 +23,7 @@ export default function BlogTitle(props: BlogTitleProps) {
 
   return (
     <div className={classes.wrapper}>
-      <AppShellTitle variant='h2'>{title}</AppShellTitle>
+      <AppShellTitle variant='h1'>{title}</AppShellTitle>
     </div>
   )
 }

package/Button/index.tsx

@@ -22,6 +22,7 @@ type ButtonClassKey =
   | 'textBold'
   | 'withStartIcon'
   | 'startIconText'
+  | 'loading'
 
 type ClassKeys = ButtonClassKey | MuiButtonClassKey
 type Text = 'normal' | 'bold'
@@ -54,7 +55,7 @@ const useStyles = makeStyles<
       },
     },
     pill: {
-      borderRadius: 40 / 2,
+      borderRadius: '99em',
     },
     pillLink: {
       [theme.breakpoints.up('md')]: {
@@ -63,7 +64,7 @@ const useStyles = makeStyles<
         boxShadow: theme.shadows[6],
         borderRadius: 25,
         padding: '6px 16px',
-        fontWeight: theme.typography.fontWeightBold,
+
         '&:hover': {
           background: theme.palette.secondary.dark,
         },
@@ -76,10 +77,10 @@ const useStyles = makeStyles<
       //
     },
     pillSizeLarge: {
-      borderRadius: 59 / 2,
+      //
     },
     pillSizeSmall: {
-      borderRadius: 33 / 2,
+      //
     },
     pillNoElevation: {
       /* disableElevation does not stop adding box shadow on active... ?! */
@@ -96,6 +97,11 @@ const useStyles = makeStyles<
         display: 'unset',
       },
     },
+    loading: {
+      '& svg': {
+        stroke: theme.palette.text.disabled,
+      },
+    },
   }),
   { name: 'MuiPillButton' },
 )
@@ -156,6 +162,7 @@ export default React.forwardRef<any, ButtonProps>((props, ref) => {
           [pillClasses.pillNoElevation]: buttonProps.disableElevation,
           [pillClasses.pillLink]: variant === 'pill-link',
           [pillClasses.textBold]: text === 'bold',
+          [pillClasses.loading]: loading,
           [pillClasses.withStartIcon]: withIcon,
         },
         className,

package/ButtonLink/index.tsx

@@ -4,6 +4,7 @@ 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'
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -38,7 +39,7 @@ export default function ButtonLink(props: ButtonLinkProps) {
     <PageLink href={url} passHref>
       <Button {...buttonProps} className={classes.buttonLink}>
         <span>{title}</span>
-        {endIcon ?? <SvgImage src={iconChevronRight} alt='chevron right' />}
+        {endIcon ?? <SvgImageSimple src={iconChevronRight} />}
       </Button>
     </PageLink>
   )

package/CHANGELOG.md

@@ -3,6 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.11.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.0...@graphcommerce/next-ui@3.11.1) (2021-10-28)
+
+
+### Bug Fixes
+
+* External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
+
+
+
+
+
+# [3.11.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.10.2...@graphcommerce/next-ui@3.11.0) (2021-10-28)
+
+
+### Bug Fixes
+
+* add missing row container for consistent margins ([10869b8](https://github.com/ho-nl/m2-pwa/commit/10869b8a7ab9579306b268b22a0af47c1a2e2e25))
+* alt person icon ([d80d180](https://github.com/ho-nl/m2-pwa/commit/d80d18043a86551feaf5ce49a30752c93ee27924))
+* base icon size on responsiveVal ([3bbd2a7](https://github.com/ho-nl/m2-pwa/commit/3bbd2a7be4853b284f90603056ae8990e5d62040))
+* build ([25582a4](https://github.com/ho-nl/m2-pwa/commit/25582a496039c704e75bb969d4fa06c13ee6267d))
+* build missing import ([5850f25](https://github.com/ho-nl/m2-pwa/commit/5850f2561a2d9d72d4ebe0da5c964b6571a72b03))
+* build, remove unused imports ([af6d72c](https://github.com/ho-nl/m2-pwa/commit/af6d72c6e70f670effb4d9e0c1fd883bf771f99d))
+* consistent margin product page ([1c65ff6](https://github.com/ho-nl/m2-pwa/commit/1c65ff6b19ebb3fed70abf8326f4e593d77c70da))
+* force object-fit image ([df049f7](https://github.com/ho-nl/m2-pwa/commit/df049f727a26aa049c6c9d3aa338223ce442bffd))
+* icon size ([6063855](https://github.com/ho-nl/m2-pwa/commit/6063855d9c7360f0ea69ffdb22292de6c93e5f27))
+* loading state icon muted ([f7c3a6b](https://github.com/ho-nl/m2-pwa/commit/f7c3a6be199f2d05d1ad918043bf199544824ff6))
+* make pill buttons always completely rounded ([9d8e211](https://github.com/ho-nl/m2-pwa/commit/9d8e211303ac6cd371a834bf73fb10a6345ca13a))
+* pagination size ([7d16290](https://github.com/ho-nl/m2-pwa/commit/7d16290d8180a2eb06755859cb9dcdbd44e7d59b))
+* remove double icons ([1654e34](https://github.com/ho-nl/m2-pwa/commit/1654e3441911f3c7c1600357f8f8e3032f5ee729))
+* remove laggy animation ([3ca0922](https://github.com/ho-nl/m2-pwa/commit/3ca09221ecd6e533063c42ec9fbe11f9484099bc))
+* remove unused breakpoint ([19dc4c4](https://github.com/ho-nl/m2-pwa/commit/19dc4c4bde18bec74c8f3e13e3769b929f2e9d57))
+* small sized chevron for service page links ([1748418](https://github.com/ho-nl/m2-pwa/commit/17484186ae20e8002f38f1dcb820f942023f5bbc))
+* smaller icons for search and menu ([f8e8949](https://github.com/ho-nl/m2-pwa/commit/f8e89494f358f9d2868c75901abaca2bffe38bdc))
+* strokeWidth for xxl icons ([da131e2](https://github.com/ho-nl/m2-pwa/commit/da131e20beb5bdf94c99de6237d7563b187f20da))
+* SvgImage to SvgImageSimple ([0004269](https://github.com/ho-nl/m2-pwa/commit/00042694f89e4a5fc17a4b74a16185cada14b80a))
+* SvgImage to SvgImageSimple ([9722167](https://github.com/ho-nl/m2-pwa/commit/9722167cd3c6032b4251ef4a4921d727eb92167e))
+* SvgImage to SvgImageSimple ([793fac7](https://github.com/ho-nl/m2-pwa/commit/793fac769f045d283817fe47fbed77d38d282f3c))
+* tuning sizeLarge, adjust muted and inverted styles ([49d69ee](https://github.com/ho-nl/m2-pwa/commit/49d69ee8d9a04a87fbd9979594c5a3b445f7dd58))
+* update SvgImage to SvgImageSimple ([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
+* use font from theme for menu ([74522ae](https://github.com/ho-nl/m2-pwa/commit/74522ae9bababbf204d925ae96997dc45f611bfc))
+* usp fontsize ([1164907](https://github.com/ho-nl/m2-pwa/commit/1164907be4fa7ed3a517f66b2af67a54df55a38f))
+
+
+### Features
+
+* add default iconset ([eb78d4c](https://github.com/ho-nl/m2-pwa/commit/eb78d4c081937bc56ce1c593a6632a4ff32e611e))
+* dynamic icons, update SvgImage uses to SvgImageSimple ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
+* icon references ([b477029](https://github.com/ho-nl/m2-pwa/commit/b47702955cf47b19fb0861c0d40751ac43e8eeab))
+* mobile menu styling ([3cc3085](https://github.com/ho-nl/m2-pwa/commit/3cc308585d4ded68d2ac8ebf97f96288424ee914))
+* more spacious row margins for mobile ([0b3e973](https://github.com/ho-nl/m2-pwa/commit/0b3e9734aa01fcc0801fa12281edd224d9600464))
+* rebuild to support svg imports ([59fbda3](https://github.com/ho-nl/m2-pwa/commit/59fbda300ce88c51a5d1c6a7ea457cb3b323b24d))
+* replace icons with icon pack ([60951d5](https://github.com/ho-nl/m2-pwa/commit/60951d57684637da8c4aed94f28e69f18129bbd0))
+* set correct font sizes ([9317448](https://github.com/ho-nl/m2-pwa/commit/9317448c94a9fb4408dfbcaa320adccc363964d0))
+* UspList styling and svg support ([70f472b](https://github.com/ho-nl/m2-pwa/commit/70f472bb143aae86879e69dc911bbbdf229b39b9))
+
+
+
+
+
 # [3.10.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.9.0...@graphcommerce/next-ui@3.10.0) (2021-10-27)
 
 

package/ChipMenu/index.tsx

@@ -4,6 +4,7 @@ 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'
 
 export const useChipMenuStyles = makeStyles(
@@ -76,20 +77,11 @@ export default function ChipMenu(props: ChipMenuProps) {
   const classes = useChipMenuStyles(props)
 
   let deleteIcon = selected ? (
-    <SvgImage size='medium' src={iconCloseCircle} alt='close' shade='default' />
+    <SvgImageSimple src={iconCloseCircle} />
   ) : (
-    <SvgImage
-      size='medium'
-      src={iconChevronDown}
-      alt='chevron down'
-      loading='eager'
-      shade='muted'
-    />
+    <SvgImageSimple src={iconChevronDown} />
   )
-  if (openEl)
-    deleteIcon = (
-      <SvgImage size='medium' src={iconChevronUp} alt='chevron up' loading='eager' shade='muted' />
-    )
+  if (openEl) deleteIcon = <SvgImageSimple src={iconChevronUp} />
 
   const selectedAndMenuHidden = selected && !openEl && selectedLabel
 

package/ContainerWithHeader/index.tsx

@@ -36,7 +36,7 @@ export default function ContainerWithHeader(props: ContainerWithHeaderProps) {
   return (
     <Row>
       <div className={classes.head}>
-        <Typography variant='h3' component='h2' className={classes.title}>
+        <Typography variant='h5' component='h2' className={classes.title}>
           {title}
         </Typography>
         <Typography component='div' variant='subtitle1' className={classes.right}>

package/Form/InputCheckmark.tsx

@@ -1,8 +1,18 @@
+import { makeStyles, Theme } from '@material-ui/core'
 import React, { PropsWithChildren } from 'react'
 import SvgImage from '../SvgImage'
-import { iconCheckmarkGreen } from '../icons'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { iconCheckmark } from '../icons'
 
 export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean }>
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    iconCheckmark: {
+      stroke: '#01D26A',
+    },
+  }),
+  { name: 'InputCheckmark' },
+)
 
 /**
  * When the `valid` prop is passed it will render a CheckIcon, else it will render children.
@@ -13,7 +23,8 @@ export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean }>
  */
 export default function InputCheckmark(props: InputCheckmarkProps) {
   const { show: valid, children } = props
+  const classes = useStyles()
 
   if (!valid) return <>{children}</>
-  return <SvgImage src={iconCheckmarkGreen} alt='checkmark' />
+  return <SvgImageSimple src={iconCheckmark} className={classes.iconCheckmark} />
 }

package/FramerScroller/components/SidebarGallery.tsx

@@ -14,6 +14,7 @@ import clsx from 'clsx'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
+import { Row } from '../..'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
 import SvgImage from '../../SvgImage'
@@ -35,7 +36,6 @@ const useStyles = makeStyles(
       },
       background: theme.palette.background.highlight,
       paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
-      marginBottom: theme.spacings.lg,
     },
     rootZoomed: {
       position: 'relative',
@@ -225,68 +225,80 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
 
   return (
     <ScrollerProvider scrollSnapAlign='center'>
-      <m.div layout className={clsxZoom('root')}>
-        <m.div
-          layout
-          className={clsxZoom('scrollerContainer')}
-          onLayoutAnimationComplete={() => {
-            if (!zoomed) document.body.style.overflow = ''
-          }}
-        >
-          <Scroller
-            className={clsxZoom('scroller')}
-            hideScrollbar
-            onMouseDown={onMouseDownScroller}
-            onMouseUp={onMouseUpScroller}
+      <Row maxWidth={false} disableGutters>
+        <m.div layout className={clsxZoom('root')}>
+          <m.div
+            layout
+            className={clsxZoom('scrollerContainer')}
+            onLayoutAnimationComplete={() => {
+              if (!zoomed) document.body.style.overflow = ''
+            }}
           >
-            {images.map((image, idx) => (
-              <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
-                <MotionImageAspect
-                  layout
-                  src={image.src}
-                  width={image.width}
-                  height={image.height}
-                  loading={idx === 0 ? 'eager' : 'lazy'}
-                  sizes={{
-                    0: '100vw',
-                    [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
-                  }}
-                  dontReportWronglySizedImages
-                />
-              </CenterSlide>
-            ))}
-          </Scroller>
-          <m.div layout className={classes.topRight}>
-            <Fab color='inherit' size='small' className={classes.toggleIcon} onMouseUp={toggle}>
-              {!zoomed ? (
-                <SvgImage src={iconFullscreen} alt='Zoom in' loading='eager' size='small' />
-              ) : (
-                <SvgImage src={iconFullscreenExit} alt='Zoom out' loading='eager' size='small' />
-              )}
-            </Fab>
+            <Scroller
+              className={clsxZoom('scroller')}
+              hideScrollbar
+              onMouseDown={onMouseDownScroller}
+              onMouseUp={onMouseUpScroller}
+            >
+              {images.map((image, idx) => (
+                <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
+                  <MotionImageAspect
+                    layout
+                    src={image.src}
+                    width={image.width}
+                    height={image.height}
+                    loading={idx === 0 ? 'eager' : 'lazy'}
+                    sizes={{
+                      0: '100vw',
+                      [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
+                    }}
+                    dontReportWronglySizedImages
+                  />
+                </CenterSlide>
+              ))}
+            </Scroller>
+            <m.div layout className={classes.topRight}>
+              <Fab color='inherit' size='small' className={classes.toggleIcon} onMouseUp={toggle}>
+                {!zoomed ? (
+                  <SvgImageSimple src={iconFullscreen} />
+                ) : (
+                  <SvgImageSimple src={iconFullscreenExit} />
+                )}
+              </Fab>
+            </m.div>
+            <div className={classes.centerLeft}>
+              <ScrollerButton
+                layout
+                direction='left'
+                size='small'
+                className={classes.sliderButtons}
+              >
+                <SvgImageSimple src={iconChevronLeft} />
+              </ScrollerButton>
+            </div>
+            <div className={classes.centerRight}>
+              <ScrollerButton
+                layout
+                direction='right'
+                size='small'
+                className={classes.sliderButtons}
+              >
+                <SvgImageSimple src={iconChevronRight} />
+              </ScrollerButton>
+            </div>
+
+            <div className={classes.bottomCenter}>
+              <ScrollerDots layout classes={{ dots: classes.dots }} />
+            </div>
           </m.div>
-          <div className={classes.centerLeft}>
-            <ScrollerButton layout direction='left' size='small' className={classes.sliderButtons}>
-              <SvgImageSimple src={iconChevronLeft} />
-            </ScrollerButton>
-          </div>
-          <div className={classes.centerRight}>
-            <ScrollerButton layout direction='right' size='small' className={classes.sliderButtons}>
-              <SvgImageSimple src={iconChevronRight} />
-            </ScrollerButton>
-          </div>
 
-          <div className={classes.bottomCenter}>
-            <ScrollerDots layout classes={{ dots: classes.dots }} />
+          <div className={clsxZoom('sidebarWrapper')}>
+            <m.div layout className={clsxZoom('sidebar')}>
+              {sidebar}
+            </m.div>
           </div>
         </m.div>
-
-        <div className={clsxZoom('sidebarWrapper')}>
-          <m.div layout className={clsxZoom('sidebar')}>
-            {sidebar}
-          </m.div>
-        </div>
-      </m.div>
+      </Row>
     </ScrollerProvider>
   )
 }

package/FramerScroller/components/SidebarSlider.tsx

@@ -6,6 +6,7 @@ import {
 } from '@graphcommerce/framer-scroller'
 import { Theme, makeStyles } from '@material-ui/core'
 import React, { ReactNode } from 'react'
+import Row from '../../Row'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
@@ -17,7 +18,6 @@ const useStyles = makeStyles(
       display: 'grid',
       gridTemplateColumns: 'minmax(150px, 25%) 1fr',
       maxWidth: '100%',
-      marginBottom: `${theme.spacings.xl}`,
     },
     sidebar: {
       display: 'grid',
@@ -69,29 +69,31 @@ export default function SidebarSlider(props: SidebarSliderProps) {
   const classes = useStyles(props)
 
   return (
-    <ScrollerProvider scrollSnapAlign='start'>
-      <div className={classes.root}>
-        <div className={classes.sidebar}>
-          <div>{sidebar}</div>
-          <ScrollerPageCounter />
-        </div>
-
-        <div className={classes.scrollerContainer}>
-          <Scroller className={classes.scroller} hideScrollbar>
-            {children}
-          </Scroller>
-          <div className={classes.centerLeft}>
-            <ScrollerButton layout direction='left' className={classes.sliderButtons}>
-              <SvgImageSimple src={iconChevronLeft} />
-            </ScrollerButton>
+    <Row maxWidth={false} disableGutters>
+      <ScrollerProvider scrollSnapAlign='start'>
+        <div className={classes.root}>
+          <div className={classes.sidebar}>
+            <div>{sidebar}</div>
+            <ScrollerPageCounter />
           </div>
-          <div className={classes.centerRight}>
-            <ScrollerButton layout direction='right' className={classes.sliderButtons}>
-              <SvgImageSimple src={iconChevronRight} />
-            </ScrollerButton>
+
+          <div className={classes.scrollerContainer}>
+            <Scroller className={classes.scroller} hideScrollbar>
+              {children}
+            </Scroller>
+            <div className={classes.centerLeft}>
+              <ScrollerButton layout direction='left' className={classes.sliderButtons}>
+                <SvgImageSimple src={iconChevronLeft} />
+              </ScrollerButton>
+            </div>
+            <div className={classes.centerRight}>
+              <ScrollerButton layout direction='right' className={classes.sliderButtons}>
+                <SvgImageSimple src={iconChevronRight} />
+              </ScrollerButton>
+            </div>
           </div>
         </div>
-      </div>
-    </ScrollerProvider>
+      </ScrollerProvider>
+    </Row>
   )
 }

package/IconHeader/index.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
+import { SvgImageSimple } from '..'
 import responsiveVal from '../Styles/responsiveVal'
 import SvgImage, { SvgImageProps } from '../SvgImage'
 
@@ -87,12 +88,7 @@ export default function IconHeader(props: IconHeaderProps) {
   return (
     <div className={clsx(classes.container, !noMargin && classes.margin)}>
       <div className={clsx(classes.innerContainer, !stayInline && classes.breakColumnsDesktop)}>
-        <SvgImage
-          {...svgImageProps}
-          size={iconSize ?? iconSizes[size]}
-          mobileSize={iconSizeMobile ?? iconMobileSizes[size]}
-          loading='eager'
-        />
+        <SvgImageSimple {...svgImageProps} />
         <Typography
           variant={variants[size]}
           component='h2'

package/Pagination/index.tsx

@@ -3,6 +3,7 @@ import { PaginationProps, usePagination } from '@material-ui/lab'
 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) => ({
@@ -51,15 +52,18 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   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',
@@ -93,21 +97,11 @@ export default function Pagination(props: PagePaginationProps) {
   const nextBtnProps = items[items.length - 1]
 
   const chevronLeft = (
-    <SvgImage
-      src={iconChevronLeft}
-      alt='chevron left'
-      shade={page === 1 ? 'muted' : undefined}
-      classes={{ root: classes.icon }}
-    />
+    <SvgImageSimple src={iconChevronLeft} muted={page === 1} className={classes.icon} />
   )
 
   const chevronRight = (
-    <SvgImage
-      src={iconChevronRight}
-      alt='chevron right'
-      shade={page === count ? 'muted' : undefined}
-      classes={{ root: classes.icon }}
-    />
+    <SvgImageSimple src={iconChevronRight} muted={page === count} className={classes.icon} />
   )
 
   return (