@graphcommerce/next-ui 4.20.0 → 4.23.0

package/Navigation/components/NavigationList.tsx

@@ -1,38 +1,40 @@
 import { styled } from '@mui/material'
+import React from 'react'
 import { extendableComponent } from '../../Styles/extendableComponent'
-import { NavigationNode, NavigationPath } from '../hooks/useNavigation'
+import { NavigationNode } from '../hooks/useNavigation'
 import { NavigationItem, mouseEventPref } from './NavigationItem'
 
-const NavigationUList = styled('ul')({})
+const NavigationUList = styled('ul')({
+  display: 'block',
+  position: 'absolute',
+  left: '-10000px',
+  top: '-10000px',
+  '&.selected': {
+    display: 'contents',
+  },
+})
 
 type NavigationItemsProps = {
-  parentPath?: NavigationPath
+  parentPath?: string
   items: NavigationNode[]
   selected?: boolean
 } & mouseEventPref
 
 type OwnerState = {
   column: number
+  selected: boolean
 }
 
 const name = 'NavigationList'
 const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-// const componentName = 'NavigationItem'
-// const parts = ['li', 'ul', 'item'] as const
-
-export function NavigationList(props: NavigationItemsProps) {
-  const { items, parentPath = [], selected = false, mouseEvent } = props
+export const NavigationList = React.memo<NavigationItemsProps>((props) => {
+  const { items, parentPath = '', selected = false, mouseEvent } = props
 
+  const classes = withState({ column: 0, selected })
   return (
-    <NavigationUList
-      sx={[
-        { display: 'block', position: 'absolute', left: '-10000px', top: '-10000px' },
-        selected && { display: 'contents' },
-      ]}
-      className={withState({ column: 0 }).root}
-    >
+    <NavigationUList className={classes.root}>
       {items.map((item, idx) => (
         <NavigationItem
           NavigationList={NavigationList}
@@ -48,4 +50,8 @@ export function NavigationList(props: NavigationItemsProps) {
       ))}
     </NavigationUList>
   )
+})
+
+if (process.env.NODE_ENV !== 'production') {
+  NavigationList.displayName = 'NavigationList'
 }

package/Navigation/components/NavigationOverlay.tsx

@@ -1,9 +1,11 @@
 import styled from '@emotion/styled'
+import { useMotionValueValue, useMotionSelector } from '@graphcommerce/framer-utils'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { Box, Fab, SxProps, Theme, useEventCallback, useMediaQuery } from '@mui/material'
-import { m } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { m, useMotionValue } from 'framer-motion'
+import React, { startTransition, useEffect, useRef, useState } from 'react'
+import type { LiteralUnion } from 'type-fest'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
 import { LayoutTitle } from '../../Layout/components/LayoutTitle'
@@ -17,6 +19,7 @@ import {
   NavigationContextType,
   NavigationNodeButton,
   NavigationNodeHref,
+  NavigationPath,
   useNavigation,
 } from '../hooks/useNavigation'
 import { mouseEventPref } from './NavigationItem'
@@ -25,9 +28,9 @@ import { NavigationList } from './NavigationList'
 type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
 type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
 type LayoutOverlayAlign = 'start' | 'end' | 'center' | 'stretch'
+type ItemPadding = LiteralUnion<keyof Theme['spacings'], string | number>
 
 type NavigationOverlayProps = {
-  active: boolean
   sx?: SxProps<Theme>
   stretchColumns?: boolean
   variantSm: LayoutOverlayVariant
@@ -38,12 +41,14 @@ type NavigationOverlayProps = {
   justifyMd?: LayoutOverlayAlign
   itemWidthSm?: string
   itemWidthMd?: string
+  itemPadding?: ItemPadding
 } & mouseEventPref
 
 function findCurrent(
   items: NavigationContextType['items'],
-  selected: NavigationContextType['selected'],
+  selected: NavigationPath | false,
 ): NavigationNodeHref | NavigationNodeButton | undefined {
+  if (selected === false) return undefined
   const lastItem = selected.slice(-1)[0]
 
   if (!lastItem) return undefined
@@ -67,9 +72,8 @@ const componentName = 'Navigation'
 const parts = ['root', 'navigation', 'header', 'column'] as const
 const { classes } = extendableComponent(componentName, parts)
 
-export function NavigationOverlay(props: NavigationOverlayProps) {
+export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
   const {
-    active,
     sx,
     stretchColumns,
     variantMd,
@@ -81,29 +85,44 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
     itemWidthSm,
     itemWidthMd,
     mouseEvent,
+    itemPadding = 'md',
   } = props
-  const { selected, select, items, onClose, animating } = useNavigation()
+  const { selection, items, animating, closing } = useNavigation()
 
   const fabSize = useFabSize('responsive')
   const svgSize = useIconSvgSize('large')
 
   const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
   const handleOnBack = useEventCallback(() => {
-    if (isMobile) select(selected.slice(0, -1))
-    else select([])
+    if (isMobile) {
+      const current = selection.get()
+      selection.set(current !== false ? current.slice(0, -1) : false)
+    } else selection.set([])
   })
 
+  const selectedLevel = useMotionValueValue(selection, (s) => (s === false ? -1 : s.length))
+  const activeAndNotClosing = useMotionSelector([selection, closing], ([s, c]) =>
+    c ? false : s !== false,
+  )
+
   useEffect(() => {
-    animating.current = false
-  }, [active, animating])
+    animating.set(false)
+  }, [activeAndNotClosing, animating])
+
+  const afterClose = useEventCallback(() => {
+    if (!closing.get()) return
+    closing.set(false)
+    selection.set(false)
+  })
 
-  const showBack = selected.length > 0
+  const handleClose = useEventCallback(() => closing.set(true))
 
   return (
     <Overlay
       className={classes.root}
-      active={active}
-      onClosed={onClose}
+      active={activeAndNotClosing}
+      safeToRemove={afterClose}
+      onClosed={handleClose}
       variantSm={variantSm}
       sizeSm={sizeSm}
       justifySm={justifySm}
@@ -111,13 +130,14 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
       sizeMd={sizeMd}
       justifyMd={justifyMd}
       overlayPaneProps={{
+        layout: true,
+        initial: false,
         onLayoutAnimationStart: () => {
-          animating.current = true
+          animating.set(true)
         },
         onLayoutAnimationComplete: () => {
-          animating.current = false
+          animating.set(false)
         },
-        layout: true,
       }}
       sx={{
         zIndex: 'drawer',
@@ -146,7 +166,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
             switchPoint={0}
             layout='position'
             left={
-              showBack && (
+              selectedLevel > 0 && (
                 <Fab
                   color='inherit'
                   onClick={handleOnBack}
@@ -165,7 +185,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
             right={
               <Fab
                 color='inherit'
-                onClick={() => onClose()}
+                onClick={handleClose}
                 sx={{
                   boxShadow: 'none',
                   marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
@@ -179,7 +199,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
             }
           >
             <LayoutTitle size='small' component='span'>
-              {findCurrent(items, selected)?.name ?? <Trans id='Menu' />}
+              {findCurrent(items, selection.get())?.name ?? <Trans id='Menu' />}
             </LayoutTitle>
           </LayoutHeaderContent>
         </Box>
@@ -193,15 +213,15 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
             '& .NavigationItem-item': {
               // eslint-disable-next-line no-nested-ternary
               width: itemWidthMd
-                ? selected.length >= 1
+                ? selectedLevel >= 1
                   ? `calc(${itemWidthMd} + 1px)`
                   : itemWidthMd
-                : 'auto',
+                : 'stretch',
             },
             [theme.breakpoints.down('md')]: {
               width:
                 sizeSm !== 'floating'
-                  ? `calc(${itemWidthSm || '100vw'} + ${selected.length}px)`
+                  ? `calc(${itemWidthSm || '100vw'} + ${selectedLevel}px)`
                   : `calc(${itemWidthSm || '100vw'} - ${theme.page.horizontal} - ${
                       theme.page.horizontal
                     })`,
@@ -211,13 +231,17 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
               '& .NavigationItem-item': {
                 width:
                   sizeSm !== 'floating'
-                    ? `calc(${itemWidthSm || '100vw'} - ${theme.spacings.md} - ${
-                        theme.spacings.md
-                      } + ${selected.length}px)`
-                    : `calc(${itemWidthSm || '100vw'} - ${theme.spacings.md} - ${
-                        theme.spacings.md
-                      } - ${theme.page.horizontal} - ${theme.page.horizontal})`,
-                minWidth: `calc(${200}px - ${theme.spacings.md} - ${theme.spacings.md})`,
+                    ? `calc(${itemWidthSm || '100vw'} - ${
+                        theme.spacings[itemPadding] ?? itemPadding
+                      } - ${theme.spacings[itemPadding] ?? itemPadding} + ${selectedLevel}px)`
+                    : `calc(${itemWidthSm || '100vw'} - ${
+                        theme.spacings[itemPadding] ?? itemPadding
+                      } - ${theme.spacings[itemPadding] ?? itemPadding} - ${
+                        theme.page.horizontal
+                      } - ${theme.page.horizontal})`,
+                minWidth: `calc(${200}px - ${theme.spacings[itemPadding] ?? itemPadding} - ${
+                  theme.spacings[itemPadding] ?? itemPadding
+                })`,
               },
             },
           })}
@@ -226,7 +250,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
             className={classes.navigation}
             sx={[
               (theme) => ({
-                py: theme.spacings.md,
+                py: theme.spacings[itemPadding] ?? itemPadding,
                 display: 'grid',
                 gridAutoFlow: 'column',
                 scrollSnapAlign: 'end',
@@ -238,11 +262,11 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
                 },
                 '& .Navigation-column': {},
                 '& .NavigationItem-item': {
-                  mx: theme.spacings.md,
+                  mx: theme.spacings[itemPadding] ?? itemPadding,
                   whiteSpace: 'nowrap',
                 },
                 '& .NavigationItem-item.first': {
-                  // mt: theme.spacings.md,
+                  // mt: paddingMd,
                 },
                 '& .Navigation-column:first-of-type': {
                   boxShadow: 'none',
@@ -251,7 +275,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
               ...(Array.isArray(sx) ? sx : [sx]),
             ]}
           >
-            {selected.length >= 0 && (
+            {selectedLevel >= 0 && (
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 1 / 999 / 2',
@@ -260,7 +284,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
                 className={classes.column}
               />
             )}
-            {selected.length >= 1 && (
+            {selectedLevel >= 1 && (
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 2 / 999 / 3',
@@ -269,7 +293,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
                 className={classes.column}
               />
             )}
-            {selected.length >= 2 && (
+            {selectedLevel >= 2 && (
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 3 / 999 / 4',
@@ -278,7 +302,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
                 className={classes.column}
               />
             )}
-            {selected.length >= 3 && (
+            {selectedLevel >= 3 && (
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 4 / 999 / 5',
@@ -294,4 +318,8 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
       </MotionDiv>
     </Overlay>
   )
+})
+
+if (process.env.NODE_ENV !== 'production') {
+  NavigationOverlay.displayName = 'NavigationOverlay'
 }

package/Navigation/components/NavigationProvider.tsx

@@ -1,13 +1,11 @@
-import { useEventCallback } from '@mui/material'
-import { MotionConfig } from 'framer-motion'
-import { useState, useMemo, SetStateAction, useRef } from 'react'
+import { MotionConfig, useMotionValue } from 'framer-motion'
+import React, { useMemo, useRef } from 'react'
 import { isElement } from 'react-is'
 import {
   NavigationNode,
-  NavigationPath,
   NavigationContextType,
   NavigationContext,
-  NavigationSelect,
+  UseNavigationSelection,
 } from '../hooks/useNavigation'
 
 export type NavigationProviderProps = {
@@ -16,51 +14,35 @@ export type NavigationProviderProps = {
   closeAfterNavigate?: boolean
   children?: React.ReactNode
   animationDuration?: number
-  selected: NavigationPath
-  setSelected: (value: SetStateAction<NavigationPath>) => void
-  onChange?: NavigationSelect
-  onClose?: NavigationContextType['onClose']
+  selection: UseNavigationSelection
 }
 
 const nonNullable = <T,>(value: T): value is NonNullable<T> => value !== null && value !== undefined
 
-export function NavigationProvider(props: NavigationProviderProps) {
+export const NavigationProvider = React.memo<NavigationProviderProps>((props) => {
   const {
     items,
-    onChange,
     hideRootOnNavigate = true,
     closeAfterNavigate = false,
     animationDuration = 0.275,
     children,
-    onClose: onCloseUnstable,
-    selected,
-    setSelected,
+    selection,
   } = props
 
-  const animating = useRef(false)
-
-  const select = useEventCallback((incomming: NavigationPath) => {
-    setSelected(incomming)
-    onChange?.(incomming)
-  })
-
-  const onClose: NavigationContextType['onClose'] = useEventCallback((e, href) => {
-    onCloseUnstable?.(e, href)
-    setTimeout(() => select([]), animationDuration * 1000)
-  })
+  const animating = useMotionValue(false)
+  const closing = useMotionValue(false)
 
   const value = useMemo<NavigationContextType>(
     () => ({
       hideRootOnNavigate,
-      selected,
-      select,
+      selection,
       animating,
+      closing,
       items: items
         .map((item, index) => (isElement(item) ? { id: item.key ?? index, component: item } : item))
         .filter(nonNullable),
-      onClose,
     }),
-    [hideRootOnNavigate, selected, select, items, onClose],
+    [hideRootOnNavigate, selection, animating, closing, items],
   )
 
   return (
@@ -68,4 +50,4 @@ export function NavigationProvider(props: NavigationProviderProps) {
       <NavigationContext.Provider value={value}>{children}</NavigationContext.Provider>
     </MotionConfig>
   )
-}
+})

package/Navigation/hooks/useNavigation.ts

@@ -1,23 +1,24 @@
-import { createContext, MutableRefObject, SetStateAction, useContext } from 'react'
+import { MotionValue, useMotionValue } from 'framer-motion'
+import { createContext, MutableRefObject, useContext } from 'react'
 
 export type NavigationId = string | number
 export type NavigationPath = NavigationId[]
-export type NavigationSelect = (selected: NavigationPath) => void
 export type NavigationRender = React.FC<
   (NavigationNodeComponent | NavigationNodeHref) & { children?: React.ReactNode }
 >
 
+export type UseNavigationSelection = MotionValue<NavigationPath | false>
+
 export type NavigationOnClose = (
   event?: React.MouseEvent<HTMLAnchorElement>,
   href?: string | undefined,
 ) => void
 export type NavigationContextType = {
-  selected: NavigationPath
-  select: NavigationSelect
+  selection: UseNavigationSelection
   items: NavigationNode[]
   hideRootOnNavigate: boolean
-  onClose: NavigationOnClose
-  animating: MutableRefObject<boolean>
+  animating: MotionValue<boolean>
+  closing: MotionValue<boolean>
 }
 
 type NavigationNodeBase = {
@@ -57,3 +58,29 @@ export const NavigationContext = createContext(undefined as unknown as Navigatio
 export function useNavigation() {
   return useContext(NavigationContext)
 }
+
+/**
+ * To prevent excessive rerenders we're not using plain React useState, but we're using a reactive
+ * motion value (could easily be any other reactive variable like Zustand, MobX, etc).
+ *
+ * Usage:
+ *
+ * ```tsx
+ * const selection = useNavigationSelection()
+ *
+ * function onClose() {
+ *   selection.set(false)
+ * }
+ *
+ * function openRoot() {
+ *   selection.set([])
+ * }
+ *
+ * function openPath() {
+ *   selection.set(['my-path'])
+ * }
+ * ```
+ */
+export function useNavigationSelection(): UseNavigationSelection {
+  return useMotionValue<NavigationPath | false>(false)
+}

package/Overlay/components/Overlay.tsx

@@ -6,7 +6,7 @@ import { OverlayBase, LayoutOverlayBaseProps } from './OverlayBase'
 
 export type OverlayProps = Omit<
   SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
-  'direction' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
+  'direction' | 'offsetPageY' | 'isPresent'
 >
 
 export function Overlay(props: OverlayProps) {
@@ -50,7 +50,6 @@ export function Overlay(props: OverlayProps) {
           direction={1}
           active={active}
           isPresent={active}
-          safeToRemove={undefined}
           {...otherProps}
         >
           {children}

package/Overlay/components/OverlayBase.tsx

@@ -39,7 +39,7 @@ export type LayoutOverlayBaseProps = {
   onClosed: () => void
   offsetPageY: number
   isPresent: boolean
-  safeToRemove: (() => void) | null | undefined
+  safeToRemove?: (() => void) | null | undefined
   overlayPaneProps?: MotionProps
 } & StyleProps &
   OverridableProps
@@ -115,14 +115,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
 
-    if (!scroller) return undefined
-
-    if (!isPresent && position.get() === OverlayPosition.UNOPENED) {
-      scroller.scrollLeft = positions.closed.x.get()
-      scroller.scrollTop = positions.closed.y.get()
-    }
-
-    if (!isPresent) return undefined
+    if (!scroller || !isPresent) return undefined
 
     const open = { x: positions.open.x.get(), y: positions.open.y.get() }
 
@@ -170,16 +163,23 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
-    if (isPresent || position.get() === OverlayPosition.UNOPENED) return
-    position.set(OverlayPosition.CLOSED)
-    clearScrollLock()
+    const scroller = scrollerRef.current
+    if (isPresent || !scroller) return
 
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    scrollTo({
-      x: positions.closed.x.get(),
-      y: positions.closed.y.get(),
-    }).then(() => safeToRemove?.())
-  }, [isPresent, position, positions, safeToRemove, scrollTo])
+    if (position.get() === OverlayPosition.UNOPENED) {
+      position.set(OverlayPosition.CLOSED)
+      clearScrollLock()
+      scroller.scrollLeft = positions.closed.x.get()
+      scroller.scrollTop = positions.closed.y.get()
+      safeToRemove?.()
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      scrollTo({
+        x: positions.closed.x.get(),
+        y: positions.closed.y.get(),
+      }).then(() => safeToRemove?.())
+    }
+  }, [isPresent, position, positions, safeToRemove, scrollTo, scrollerRef])
 
   // Only go back to a previous page if the overlay isn't closed.
   const closeOverlay = useCallback(() => {
@@ -384,7 +384,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
                 '&:not(.sizeMdFull)': {
-                  width: 'max-content',
+                  width: 'auto',
                 },
 
                 '&.variantSmBottom.sizeSmFull': {

package/Overlay/hooks/useOverlayPosition.ts

@@ -26,6 +26,7 @@ export function useOverlayPosition() {
 
     const measure = () => {
       const positions = getScrollSnapPositions()
+
       state.open.x.set(positions.x[1] ?? 0)
       state.closed.x.set(positions.x[0])
       state.open.y.set(positions.y[1] ?? 0)
@@ -50,10 +51,14 @@ export function useOverlayPosition() {
 
       const xC = state.closed.x.get()
       const xO = state.open.x.get()
+
       const visX = xO === xC ? 1 : Math.max(0, Math.min(1, (x - xC) / (xO - xC)))
 
+      let vis = visY * visX
+      if (xC === 0 && xO === 0 && yC === 0 && yO === 0) vis = 0
+
       // todo: visibility sometimes flickers
-      state.open.visible.set(visY * visX)
+      state.open.visible.set(vis)
     }
 
     const cancelY = scroll.y.onChange(calc)

package/Row/HeroBanner/HeroBanner.tsx

@@ -3,6 +3,7 @@ import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { extendableComponent } from '../../Styles'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import { Row } from '../Row'
 
@@ -84,9 +85,11 @@ export function HeroBanner(props: HeroBannerProps) {
               width: '100%',
               height: '100%',
               [theme.breakpoints.down('md')]: {
-                borderRadius: responsiveVal(
+                ...breakpointVal(
+                  'borderRadius',
                   theme.shape.borderRadius * 2,
                   theme.shape.borderRadius * 3,
+                  theme.breakpoints.values,
                 ),
               },
             },
@@ -99,9 +102,11 @@ export function HeroBanner(props: HeroBannerProps) {
             style={{ width: !matches ? width : 0, borderRadius }}
             className={classes.animated}
             sx={(theme) => ({
-              borderRadius: responsiveVal(
+              ...breakpointVal(
+                'borderRadius',
                 theme.shape.borderRadius * 2,
                 theme.shape.borderRadius * 3,
+                theme.breakpoints.values,
               ),
               overflow: 'hidden',
               transform: 'translateZ(0)',

package/Row/ImageText/ImageText.tsx

@@ -1,7 +1,7 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
-import { responsiveVal } from '../../Styles/responsiveVal'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { Row } from '../Row'
 
 export type ImageTextProps = {
@@ -37,7 +37,12 @@ export function ImageText(props: ImageTextProps) {
             background: 'none',
             gridTemplateColumns: '1fr 1fr',
           },
-          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
         })}
       >
         <Box
@@ -49,9 +54,11 @@ export function ImageText(props: ImageTextProps) {
               height: '100%',
               width: '100%',
               objectFit: 'cover',
-              borderRadius: responsiveVal(
+              ...breakpointVal(
+                'borderRadius',
                 theme.shape.borderRadius * 2,
                 theme.shape.borderRadius * 3,
+                theme.breakpoints.values,
               ),
             },
           })}

package/Row/ImageTextBoxed/ImageTextBoxed.tsx

@@ -1,6 +1,7 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import { Row } from '../Row'
 
@@ -32,7 +33,12 @@ export function ImageTextBoxed(props: ImageTextBoxedProps) {
             gridTemplateColumns: '1fr auto',
             columnGap: `${theme.spacings.lg}`,
           },
-          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
           overflow: 'hidden',
         })}
       >