@graphcommerce/next-ui 4.2.3 → 4.3.0

package/ChipMenu/{index.tsx → ChipMenu.tsx}

@@ -1,14 +1,13 @@
 import { Chip, ChipProps, Menu, MenuProps, menuClasses, SxProps, Theme } from '@mui/material'
 import React, { PropsWithChildren, useState } from 'react'
 import { IconSvg } from '../IconSvg'
-import { SectionHeader } from '../SectionHeader'
-import { extendableComponent } from '../Styles'
+import { SectionHeader } from '../SectionHeader/SectionHeader'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 
-const { classes, selectors } = extendableComponent('FilterEqual', ['chip'] as const)
-
-export type ChipMenuProps = PropsWithChildren<Omit<ChipProps, 'children'>> & {
+export type ChipMenuProps = PropsWithChildren<
+  Omit<ChipProps<'button'>, 'children' | 'component'>
+> & {
   selectedLabel?: React.ReactNode
   selected: boolean
   onClose?: () => void
@@ -41,33 +40,21 @@ export function ChipMenu(props: ChipMenuProps) {
   return (
     <>
       <Chip
-        color='default'
+        component='button'
+        size='responsive'
+        color={selectedAndMenuHidden ? 'primary' : 'default'}
         clickable
-        onDelete={onDelete || ((event) => setOpenEl(event.currentTarget.parentElement))}
-        onClick={(event) => {
+        onDelete={
+          onDelete ||
+          ((event: React.MouseEvent<HTMLButtonElement>) =>
+            setOpenEl(event.currentTarget.parentElement))
+        }
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
           setOpenEl(event.currentTarget)
         }}
         deleteIcon={deleteIcon}
         {...chipProps}
         label={selectedLabel ?? label}
-        className={`${classes.chip} ${chipProps.className ?? ''} ${
-          selectedAndMenuHidden ? 'MuiChip-selected' : ''
-        }`}
-        sx={[
-          { bgcolor: 'background.default' },
-          selectedAndMenuHidden &&
-            ((theme) => ({
-              borderColor: 'text.primary',
-              color: 'text.primary',
-              '&:hover': {
-                background: `${theme.palette.background.default} !important`,
-                borderColor: `${theme.palette.divider} !important`,
-              },
-              '&:focus': {
-                background: `${theme.palette.background.paper} !important`,
-              },
-            })),
-        ]}
       />
 
       <Menu
@@ -110,5 +97,3 @@ export function ChipMenu(props: ChipMenuProps) {
     </>
   )
 }
-
-ChipMenu.selectors = selectors

package/ContainerWithHeader/{index.tsx → ContainerWithHeader.tsx}

@@ -1,6 +1,6 @@
 import { Box, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
-import { Row } from '../Row'
+import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles'
 
 const { selectors, classes } = extendableComponent('ContainerWithHeader', [

package/Footer/Footer.tsx

@@ -35,23 +35,22 @@ export function Footer(props: FooterProps) {
           borderTop: `1px solid ${theme.palette.divider}`,
           display: 'grid',
           alignItems: 'center',
-
           padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
           justifyItems: 'center',
           gridTemplateAreas: `
-          'switcher switcher'
-          'support support'
-          'social social'
-          'links links'
-        `,
-          gap: theme.spacings.md,
+            'switcher switcher'
+            'support support'
+            'social social'
+            'links links'
+          `,
+          gap: theme.spacings.sm,
           '& > *': { maxWidth: 'max-content' },
 
           [theme.breakpoints.up('sm')]: {
             gridTemplateAreas: `
-            'social switcher'
-            'links support'
-          `,
+              'social switcher'
+              'links support'
+            `,
             justifyItems: 'start',
             padding: `${theme.page.vertical} ${theme.page.horizontal}`,
             gridTemplateColumns: 'auto auto',

package/FramerScroller/SidebarGallery.tsx

@@ -13,7 +13,7 @@ import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
 import { IconSvg } from '../IconSvg'
-import { Row } from '../Row'
+import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../icons'

package/FramerScroller/SidebarSlider.tsx

@@ -8,7 +8,7 @@ import {
 import { Box, SxProps, Theme } from '@mui/material'
 import { ReactNode } from 'react'
 import { IconSvg } from '../IconSvg'
-import { Row } from '../Row'
+import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { iconChevronLeft, iconChevronRight } from '../icons'

package/Layout/components/LayoutHeader.tsx

@@ -1,9 +1,9 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
-import LayoutHeaderBack, { useShowBack } from './LayoutHeaderBack'
-import LayoutHeaderClose, { useShowClose } from './LayoutHeaderClose'
-import LayoutHeaderContent, { LayoutHeaderContentProps } from './LayoutHeaderContent'
+import { LayoutHeaderBack, useShowBack } from './LayoutHeaderBack'
+import { LayoutHeaderClose, useShowClose } from './LayoutHeaderClose'
+import { LayoutHeaderContent, LayoutHeaderContentProps } from './LayoutHeaderContent'
 import { FloatingProps } from './LayoutHeadertypes'
 
 export type LayoutHeaderProps = FloatingProps &

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,10 +1,11 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
 import { t } from '@lingui/macro'
-import { Box } from '@mui/material'
+import { Box, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
 import { IconSvg } from '../../IconSvg'
+import { responsiveVal } from '../../Styles'
 import { iconChevronLeft } from '../../icons'
 
 export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
@@ -22,7 +23,20 @@ export function useShowBack() {
   return false
 }
 
-export default function LayoutHeaderBack(props: BackProps) {
+const buttonSx: SxProps<Theme> = (theme) => ({
+  '&:not(.Mui-disabled)': { boxShadow: 6 },
+  [theme.breakpoints.down('md')]: {
+    minWidth: 'auto',
+    paddingLeft: responsiveVal(8, 11),
+    paddingRight: responsiveVal(8, 11),
+    '& .MuiButton-startIcon': {
+      marginRight: 0,
+      marginLeft: 0,
+    },
+  },
+})
+
+export function LayoutHeaderBack(props: BackProps) {
   const router = useRouter()
   const path = router.asPath.split('?')[0]
   const up = useUp()
@@ -40,7 +54,7 @@ export default function LayoutHeaderBack(props: BackProps) {
     return (
       <LinkOrButton
         onClick={() => router.back()}
-        button={{ variant: 'pill' }}
+        button={{ variant: 'pill', sx: buttonSx }}
         color='inherit'
         startIcon={backIcon}
         aria-label={label}
@@ -57,7 +71,7 @@ export default function LayoutHeaderBack(props: BackProps) {
     return (
       <PageLink href={up.href} passHref>
         <LinkOrButton
-          button={{ variant: 'pill' }}
+          button={{ variant: 'pill', sx: buttonSx }}
           startIcon={backIcon}
           aria-label={up.title}
           color='inherit'

package/Layout/components/LayoutHeaderClose.tsx

@@ -10,7 +10,7 @@ export function useShowClose() {
   return !!overlayGroup
 }
 
-export default function LayoutHeaderClose() {
+export function LayoutHeaderClose() {
   const { closeSteps } = usePageContext()
   const onClick = useGo(closeSteps * -1)
 

package/Layout/components/LayoutHeaderContent.tsx

@@ -20,7 +20,7 @@ const name = 'LayoutHeaderContent' as const
 const parts = ['bg', 'content', 'left', 'center', 'right', 'divider'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-export default function LayoutHeaderContent(props: LayoutHeaderContentProps) {
+export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
   const ref = useRef<HTMLDivElement>(null)
 
   const {

package/Layout/components/LayoutProvider.tsx

@@ -1,13 +1,13 @@
 import { MotionValue } from 'framer-motion'
 import { useMemo } from 'react'
-import layoutContext from '../context/layoutContext'
+import { layoutContext } from '../context/layoutContext'
 
 export type LayoutProviderProps = {
   children: React.ReactNode
   scroll: MotionValue<number>
 }
 
-export default function LayoutProvider(props: LayoutProviderProps) {
+export function LayoutProvider(props: LayoutProviderProps) {
   const { children, scroll } = props
   return (
     <layoutContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>

package/Layout/context/layoutContext.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import { LayoutContext } from '../types'
 
-const layoutContext = React.createContext(undefined as unknown as LayoutContext)
+export const layoutContext = React.createContext(undefined as unknown as LayoutContext)
 layoutContext.displayName = 'layoutContext'
-
-export default layoutContext

package/Layout/hooks/useScrollY.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import layoutContext from '../context/layoutContext'
+import { layoutContext } from '../context/layoutContext'
 
 export function useScrollY() {
   return useContext(layoutContext).scroll

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,8 +1,8 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Box, SxProps, Theme } from '@mui/material'
 import { useTransform, useViewportScroll } from 'framer-motion'
-import LayoutProvider from '../../Layout/components/LayoutProvider'
-import { extendableComponent, responsiveVal } from '../../Styles'
+import { LayoutProvider } from '../../Layout/components/LayoutProvider'
+import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
 
 export type LayoutDefaultProps = {
@@ -27,7 +27,17 @@ const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof pa
 )
 
 export function LayoutDefault(props: LayoutDefaultProps) {
-  const { children, header, beforeHeader, footer, menuFab, cartFab, noSticky, sx = [] } = props
+  const {
+    children,
+    header,
+    beforeHeader,
+    footer,
+    menuFab,
+    cartFab,
+    noSticky,
+    className,
+    sx = [],
+  } = props
 
   const offset = useScrollOffset().y
   const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
@@ -38,7 +48,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
 
   return (
     <Box
-      className={classes.root}
+      className={`${classes.root} ${className ?? ''}`}
       sx={[
         (theme) => ({
           minHeight: '100vh',

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -4,7 +4,7 @@ import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/fram
 import { Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
-import LayoutProvider from '../../Layout/components/LayoutProvider'
+import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { extendableComponent } from '../../Styles'
 import { useOverlayPosition } from '../hooks/useOverlayPosition'
 
@@ -341,7 +341,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                  * padding we'll run into the issue that the user can't scroll to the bottom. We
                  * can't change this value with JS as that causes much jank
                  */
-                '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: 56 },
+                '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: '56px' },
                 '&.variantSmBottom.sizeSmFull': {
                   minHeight: `calc(100vh - ${theme.appShell.headerHeightSm} * 0.5)`,
                 },

package/LayoutParts/DesktopHeaderBadge.tsx

@@ -1,6 +1,6 @@
 import { Badge, BadgeProps } from '@mui/material'
 
-// todo: replace with theming
+/** Note: This should _only_ be used on the Desktop, use a standard Badge for other usecases. */
 export function DesktopHeaderBadge(props: BadgeProps) {
   const { sx = false } = props
   return (

package/LayoutParts/MenuFab.tsx

@@ -1,8 +1,21 @@
-import { Divider, Fab, ListItem, Menu, styled, Box, SxProps, Theme } from '@mui/material'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import {
+  Divider,
+  Fab,
+  ListItem,
+  Menu,
+  styled,
+  Box,
+  SxProps,
+  Theme,
+  FabProps,
+  MenuProps as MenuPropsType,
+} from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
 import { IconSvg } from '../IconSvg'
+import { useScrollY } from '../Layout/hooks/useScrollY'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { useFabSize } from '../Theme'
@@ -18,21 +31,34 @@ export type MenuFabProps = {
   menuIcon?: React.ReactNode
   closeIcon?: React.ReactNode
   sx?: SxProps<Theme>
+  MenuProps?: MenuPropsType
+} & Pick<FabProps, 'color' | 'size' | 'variant'>
+
+const name = 'MenuFab'
+const parts = ['wrapper', 'fab', 'shadow', 'menu'] as const
+type OwnerState = {
+  scrolled: boolean
 }
 
-const { classes, selectors } = extendableComponent('MenuFab', [
-  'wrapper',
-  'fab',
-  'shadow',
-  'menu',
-] as const)
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function MenuFab(props: MenuFabProps) {
-  const { children, secondary, search, menuIcon, closeIcon, sx = [] } = props
+  const {
+    children,
+    secondary,
+    search,
+    menuIcon,
+    closeIcon,
+    sx = [],
+    MenuProps,
+    ...fabProps
+  } = props
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
   const { opacity, scale, shadowOpacity } = useFabAnimation()
+  const scrollY = useScrollY()
+  const scrolled = useMotionValueValue(scrollY, (y) => y > 10)
 
   useEffect(() => {
     const clear = () => setOpenEl(null)
@@ -41,8 +67,15 @@ export function MenuFab(props: MenuFabProps) {
   }, [router])
   const fabIconSize = useFabSize('responsive')
 
+  const classes = withState({ scrolled })
+
   return (
-    <Box sx={[{ width: fabIconSize, height: fabIconSize }, ...(Array.isArray(sx) ? sx : [sx])]}>
+    <Box
+      sx={[
+        { position: 'relative', width: fabIconSize, height: fabIconSize },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <MotionDiv
         className={classes.wrapper}
         sx={(theme) => ({
@@ -54,6 +87,8 @@ export function MenuFab(props: MenuFabProps) {
         style={{ scale, opacity }}
       >
         <Fab
+          // todo: replace color='inverted' and remove styles here when Fab color is extendable
+          // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L193-L202
           color='inherit'
           aria-label='Open Menu'
           onClick={(event) => setOpenEl(event.currentTarget)}
@@ -69,6 +104,7 @@ export function MenuFab(props: MenuFabProps) {
             color: theme.palette.background.paper,
           })}
           className={classes.fab}
+          {...fabProps}
         >
           {closeIcon ?? (
             <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
@@ -102,6 +138,7 @@ export function MenuFab(props: MenuFabProps) {
           PaperProps={{
             sx: (theme) => ({
               backgroundColor: theme.palette.background.paper,
+              backgroundImage: 'unset',
               color: theme.palette.text.primary,
               minWidth: responsiveVal(200, 280),
               marginTop: '12px',
@@ -112,6 +149,7 @@ export function MenuFab(props: MenuFabProps) {
           }}
           className={classes.menu}
           MenuListProps={{ dense: true }}
+          {...MenuProps}
         >
           {[
             search ? (
@@ -128,4 +166,3 @@ export function MenuFab(props: MenuFabProps) {
     </Box>
   )
 }
-MenuFab.selectors = selectors

package/Page/types.ts

@@ -1,6 +1,7 @@
 import { ParsedUrlQuery } from 'querystring'
 import { UpPage } from '@graphcommerce/framer-next-pages/types'
 // todo: remove references to GraphQL
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { NormalizedCacheObject } from '@graphcommerce/graphql'
 import { GetStaticProps as GetStaticPropsNext } from 'next'
 

package/PageMeta/{index.tsx → PageMeta.tsx}

@@ -37,7 +37,16 @@ export function useCanonical(incomming?: Canonical) {
 
   if (!canonical) return canonical
 
-  if (canonical?.startsWith('/')) {
+  if (!canonical.startsWith('http') && !canonical.startsWith('/')) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `canonical is relative (${canonical}), a canonical must start with '/', 'http://' or 'https://'`,
+      )
+    }
+    canonical = `/${canonical}`
+  }
+
+  if (canonical.startsWith('/')) {
     if (!process.env.NEXT_PUBLIC_SITE_URL) {
       if (process.env.NODE_ENV !== 'production') {
         throw Error('NEXT_PUBLIC_SITE_URL is not defined in .env')
@@ -59,7 +68,7 @@ export function useCanonical(incomming?: Canonical) {
     canonical = `${process.env.NEXT_PUBLIC_SITE_URL}${href}`
   }
 
-  if (canonical && !(canonical ?? 'http').startsWith('http')) {
+  if (!canonical.startsWith('http')) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(
         `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,

package/Row/ButtonLinkList/ButtonLinkList.tsx

@@ -1,9 +1,9 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
-import { SectionContainer } from '../../SectionContainer'
+import { SectionContainer } from '../../SectionContainer/SectionContainer'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { Row } from '../Row'
 
 export type ButtonLinkListProps = {
   title: string

package/Row/ColumnOneBoxed/{index.tsx → ColumnOneBoxed.tsx}

@@ -1,6 +1,6 @@
 import { Box, ContainerProps } from '@mui/material'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
+import { Row } from '../Row'
 
 const compName = 'ColumnOneBoxed' as const
 const parts = ['root', 'boxed'] as const

package/Row/ColumnOneCentered/{index.tsx → ColumnOneCentered.tsx}

@@ -1,5 +1,5 @@
 import { ContainerProps, styled } from '@mui/material'
-import { ColumnOne } from '../ColumnOne'
+import { ColumnOne } from '../ColumnOne/ColumnOne'
 
 const Wrapper = styled('div')(({ theme }) => ({
   marginBottom: theme.spacings.lg,

package/Row/ColumnThree/{index.tsx → ColumnThree.tsx}

@@ -1,7 +1,7 @@
 import { Box, ContainerProps } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
+import { Row } from '../Row'
 
 const compName = 'ColumnThree' as const
 const parts = ['root', 'colOne', 'colTwo', 'colThree'] as const

package/Row/ColumnTwo/{index.tsx → ColumnTwo.tsx}

@@ -1,7 +1,7 @@
 import { Box, ContainerProps } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
+import { Row } from '../Row'
 
 export type ColumnTwoProps = Omit<ContainerProps, 'children'> & {
   colOneContent: React.ReactNode

package/Row/ColumnTwoSpread/{index.tsx → ColumnTwoSpread.tsx}

@@ -1,4 +1,4 @@
-import { ColumnTwo, ColumnTwoProps } from '../ColumnTwo'
+import { ColumnTwo, ColumnTwoProps } from '../ColumnTwo/ColumnTwo'
 
 type StyleProps = { nodeLength: boolean }
 

package/Row/ColumnTwoWithTop/{index.tsx → ColumnTwoWithTop.tsx}

@@ -1,7 +1,7 @@
 import { Box, ContainerProps } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
+import { Row } from '../Row'
 
 export type ColumnTwoWithTopProps = ContainerProps & {
   top: React.ReactNode

package/Row/HeroBanner/{index.tsx → HeroBanner.tsx}

@@ -1,10 +1,10 @@
 import { ContainerProps, useTheme, useMediaQuery, Box, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
-import { Row } from '..'
 import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { Row } from '../Row'
 
 export type HeroBannerProps = ContainerProps & {
   pageLinks: React.ReactNode

package/Row/IconBlocks/{IconBlock/index.tsx → IconBlock.tsx}

@@ -1,6 +1,6 @@
 import { Typography, Button, SxProps, Theme, Box } from '@mui/material'
 import React from 'react'
-import { extendableComponent } from '../../../Styles'
+import { extendableComponent } from '../../Styles'
 
 export type IconBlockProps = {
   title: string

package/Row/IconBlocks/{index.tsx → IconBlocks.tsx}

@@ -1,8 +1,8 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { Row } from '../Row'
 
 export type IconBlocksProps = {
   title: string

package/Row/ImageText/{index.tsx → ImageText.tsx}

@@ -1,8 +1,8 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { Row } from '../Row'
 
 export type ImageTextProps = {
   item?: React.ReactNode
@@ -29,7 +29,7 @@ export function ImageText(props: ImageTextProps) {
               : theme.palette.background.paper,
           justifyItems: 'center',
           columnGap: theme.spacings.lg,
-          paddingTop: theme.spacings.lg,
+          marginTop: theme.spacings.lg,
           paddingBottom: theme.spacings.lg,
           [theme.breakpoints.up('md')]: {
             paddingTop: 0,

package/Row/ImageTextBoxed/{index.tsx → ImageTextBoxed.tsx}

@@ -1,8 +1,8 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { Row } from '../Row'
 
 export type ImageTextBoxedProps = {
   children: React.ReactNode

package/Row/ParagraphWithSidebarSlide/{index.tsx → ParagraphWithSidebarSlide.tsx}

@@ -1,7 +1,7 @@
 import { Box, ContainerProps } from '@mui/material'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { Row } from '../Row'
 
 export type ParagraphWithSidebarSlideProps = ContainerProps & {
   slidingItems: React.ReactNode