@graphcommerce/next-ui 9.0.0-canary.98 → 9.0.0

package/PageMeta/PageMeta.tsx

@@ -1,7 +1,8 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
-import Head from 'next/head'
 import type {} from '@graphcommerce/next-config'
-import { Canonical, useCanonical } from './canonicalize'
+import Head from 'next/head'
+import type { Canonical } from './canonicalize'
+import { useCanonical } from './canonicalize'
 
 // https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
 export type MetaRobots =

package/PageMeta/canonicalize.ts

@@ -1,10 +1,11 @@
+import type {} from '@graphcommerce/next-config'
 import { addBasePath } from 'next/dist/client/add-base-path'
 import { addLocale } from 'next/dist/client/add-locale'
 import { getDomainLocale } from 'next/dist/client/get-domain-locale'
 import { resolveHref } from 'next/dist/client/resolve-href'
-import { NextRouter } from 'next/dist/shared/lib/router/router'
-import type {} from '@graphcommerce/next-config'
+import type { NextRouter } from 'next/dist/shared/lib/router/router'
 import { useRouter } from 'next/router'
+import type { LiteralUnion } from 'type-fest'
 import { storefrontConfig } from '../utils/storefrontConfig'
 
 type PartialNextRouter = Pick<
@@ -70,7 +71,10 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
   return canonical
 }
 
-export type Canonical = `http://${string}` | `https://${string}` | `/${string}` | string
+export type Canonical = LiteralUnion<
+  `http://${string}` | `https://${string}` | `/${string}`,
+  string
+>
 
 export function useCanonical(incoming?: Canonical) {
   const router = useRouter()

package/Pagination/Pagination.tsx

@@ -1,6 +1,8 @@
 import { Trans } from '@lingui/react'
-import { PaginationProps, Box, SxProps, Theme, IconButton } from '@mui/material'
-import usePagination, { UsePaginationItem } from '@mui/material/usePagination'
+import type { PaginationProps, SxProps, Theme } from '@mui/material'
+import { Box, IconButton } from '@mui/material'
+import type { UsePaginationItem } from '@mui/material/usePagination'
+import usePagination from '@mui/material/usePagination'
 import React from 'react'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'

package/Pagination/PaginationExtended.tsx

@@ -1,12 +1,5 @@
-import {
-  PaginationProps,
-  Box,
-  SxProps,
-  Theme,
-  Pagination,
-  PaginationItem,
-  PaginationRenderItemParams,
-} from '@mui/material'
+import type { PaginationProps, PaginationRenderItemParams, SxProps, Theme } from '@mui/material'
+import { Box, Pagination, PaginationItem } from '@mui/material'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 import { NextLink } from '../Theme'

package/RenderType/RenderType.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 /** To make renderers customizable we need to be able to provide renders for all types */
 type TypeObject = { __typename: string; [index: string]: unknown }
 
@@ -26,6 +27,8 @@ export type TypeRenderer<
 /**
  * A simple array with renderers but with strict typing that validates of the provided Renderer is
  * actually able to render the Type
+ *
+ * @public
  */
 export function RenderType<
   T extends TypeObject,
@@ -39,6 +42,7 @@ export function RenderType<
   return <TypeItem {...typeItemProps} __typename={__typename} />
 }
 
+/** @public */
 export function findByTypename<T extends TypeObject, Typename extends T['__typename']>(
   type: (T | undefined | null)[] | undefined | null,
   typename: Typename,
@@ -46,6 +50,7 @@ export function findByTypename<T extends TypeObject, Typename extends T['__typen
   return type?.find((item) => item?.__typename === typename) as FilterTypeByTypename<T, Typename>
 }
 
+/** @public */
 export function isTypename<T extends TypeObject, Typenames extends T['__typename'][]>(
   type: FilterTypeByTypename<T, T['__typename']>,
   typename: Typenames,
@@ -53,6 +58,7 @@ export function isTypename<T extends TypeObject, Typenames extends T['__typename
   return typename.includes(type.__typename)
 }
 
+/** @public */
 export function filterByTypename<T extends TypeObject, Typename extends T['__typename']>(
   type: (T | undefined | null)[] | undefined | null,
   typename: Typename,

package/Row/ButtonLinkList/ButtonLinkList.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
@@ -13,7 +14,7 @@ export type ButtonLinkListProps = {
 
 type OwnerState = { containsBigLinks: boolean }
 
-const compName = 'ButtonLinkList' as const
+const compName = 'ButtonLinkList'
 const parts = ['root', 'links'] as const
 const { withState } = extendableComponent<OwnerState, typeof compName, typeof parts>(
   compName,
@@ -26,11 +27,7 @@ export function ButtonLinkList(props: ButtonLinkListProps) {
   const classes = withState({ containsBigLinks })
 
   return (
-    <Row
-      maxWidth='md'
-      className={classes.root}
-      sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <Row maxWidth='820px' className={classes.root} sx={sx}>
       <Box
         sx={[
           (theme) => ({

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,4 +1,5 @@
-import { ListItemButtonProps, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import type { ListItemButtonProps } from '@mui/material'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { NextLink } from '../../Theme'

package/Row/ColumnOne/variant/VariantMessage.tsx

@@ -1,7 +1,5 @@
-import {
-  DismissibleSnackbar,
-  DismissibleSnackbarProps,
-} from '../../../Snackbar/DismissibleSnackbar'
+import type { DismissibleSnackbarProps } from '../../../Snackbar/DismissibleSnackbar'
+import { DismissibleSnackbar } from '../../../Snackbar/DismissibleSnackbar'
 
 export type VariantMessageProps = DismissibleSnackbarProps
 

package/Row/ColumnOneBoxed/ColumnOneBoxed.tsx

@@ -1,11 +1,13 @@
-import { Box, ContainerProps } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { Box } from '@mui/material'
 import { extendableComponent } from '../../Styles'
 import { Row } from '../Row'
 
-const compName = 'ColumnOneBoxed' as const
+const compName = 'ColumnOneBoxed'
 const parts = ['root', 'boxed'] as const
 const { classes } = extendableComponent(compName, parts)
 
+/** @public */
 export function ColumnOneBoxed(props: ContainerProps) {
   const { children } = props
 

package/Row/ColumnOneCentered/ColumnOneCentered.tsx

@@ -1,4 +1,5 @@
-import { ContainerProps, styled } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { styled } from '@mui/material'
 import { ColumnOne } from '../ColumnOne/ColumnOne'
 
 const Wrapper = styled('div')(({ theme }) => ({
@@ -6,10 +7,11 @@ const Wrapper = styled('div')(({ theme }) => ({
   marginTop: theme.spacings.lg,
   textAlign: 'center',
   maxWidth: `calc(1050px + calc(${theme.spacings.md} * 2))`,
-  margin: `0 auto`,
+  margin: '0 auto',
   position: 'relative',
 }))
 
+/** @public */
 export function ColumnOneCentered(props: ContainerProps) {
   const { children } = props
 

package/Row/ColumnThree/ColumnThree.tsx

@@ -1,9 +1,10 @@
-import { Box, ContainerProps } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { Row } from '../Row'
 
-const compName = 'ColumnThree' as const
+const compName = 'ColumnThree'
 const parts = ['root', 'colOne', 'colTwo', 'colThree'] as const
 const { classes } = extendableComponent(compName, parts)
 
@@ -25,7 +26,7 @@ export function ColumnThree(props: ColumnThreeProps) {
           display: 'grid',
           gridColumnGap: theme.spacings.md,
           gridRowGap: theme.spacings.lg,
-          gridTemplateColumns: `1fr`,
+          gridTemplateColumns: '1fr',
           gridTemplateAreas: `
           "one"
           "two"
@@ -43,14 +44,14 @@ export function ColumnThree(props: ColumnThreeProps) {
             },
           },
           [theme.breakpoints.up('sm')]: {
-            gridTemplateColumns: `1fr 1fr`,
+            gridTemplateColumns: '1fr 1fr',
             gridTemplateAreas: `
             "one two"
             "three three"
           `,
           },
           [theme.breakpoints.up('md')]: {
-            gridTemplateColumns: `1fr 1fr 1fr`,
+            gridTemplateColumns: '1fr 1fr 1fr',
             gridTemplateAreas: '"one two three"',
           },
         }),

package/Row/ColumnTwo/ColumnTwo.tsx

@@ -1,4 +1,5 @@
-import { Box, ContainerProps } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { Row } from '../Row'
@@ -8,7 +9,7 @@ export type ColumnTwoProps = Omit<ContainerProps, 'children'> & {
   colTwoContent: React.ReactNode
 }
 
-const compName = 'ColumnTwo' as const
+const compName = 'ColumnTwo'
 const parts = ['root', 'colOne', 'colTwo'] as const
 const { classes } = extendableComponent(compName, parts)
 
@@ -24,12 +25,12 @@ export function ColumnTwo(props: ColumnTwoProps) {
         (theme) => ({
           gridColumnGap: theme.spacings.md,
           gridRowGap: theme.spacings.lg,
-          display: `grid`,
-          gridTemplateColumns: `1fr`,
-          gridTemplateAreas: `"one" "two"`,
+          display: 'grid',
+          gridTemplateColumns: '1fr',
+          gridTemplateAreas: '"one" "two"',
           [theme.breakpoints.up('sm')]: {
-            gridTemplateColumns: `1fr 1fr`,
-            gridTemplateAreas: `"one two"`,
+            gridTemplateColumns: '1fr 1fr',
+            gridTemplateAreas: '"one two"',
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

package/Row/ColumnTwoSpread/ColumnTwoSpread.tsx

@@ -1,9 +1,11 @@
-import { ColumnTwo, ColumnTwoProps } from '../ColumnTwo/ColumnTwo'
+import type { ColumnTwoProps } from '../ColumnTwo/ColumnTwo'
+import { ColumnTwo } from '../ColumnTwo/ColumnTwo'
 
 type StyleProps = { nodeLength: boolean }
 
 export type ColumnTwoSpreadProps = StyleProps & ColumnTwoProps
 
+/** @public */
 export function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
   const { nodeLength, sx = [], ...colProps } = props
   return (
@@ -13,8 +15,8 @@ export function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
       sx={[
         (theme) => ({
           [theme.breakpoints.up('md')]: {
-            gridTemplateColumns: `1fr 1fr 1fr`,
-            gridTemplateAreas: nodeLength ? `"one one two"` : `"one two two"`,
+            gridTemplateColumns: '1fr 1fr 1fr',
+            gridTemplateAreas: nodeLength ? '"one one two"' : '"one two two"',
             '& h2, & h3': {
               '&:empty': {
                 display: 'block',
@@ -22,8 +24,8 @@ export function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
               },
             },
           },
-          gridTemplateColumns: `1fr`,
-          gridTemplateAreas: `"one" "two"`,
+          gridTemplateColumns: '1fr',
+          gridTemplateAreas: '"one" "two"',
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/Row/ColumnTwoWithTop/ColumnTwoWithTop.tsx

@@ -1,4 +1,5 @@
-import { Box, ContainerProps } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { Row } from '../Row'
@@ -9,7 +10,7 @@ export type ColumnTwoWithTopProps = ContainerProps & {
   right: React.ReactNode
 }
 
-const compName = 'ColumnTwoWithTop' as const
+const compName = 'ColumnTwoWithTop'
 const parts = ['root', 'colOne', 'colTwo'] as const
 const { classes } = extendableComponent(compName, parts)
 
@@ -24,9 +25,9 @@ export function ColumnTwoWithTop(props: ColumnTwoWithTopProps) {
         (theme) => ({
           display: 'grid',
           gap: `${theme.spacings.lg} 0`,
-          gridTemplateAreas: `"top" "left" "right"`,
+          gridTemplateAreas: '"top" "left" "right"',
           [theme.breakpoints.up('md')]: {
-            gridTemplateAreas: `"top  ." "left right"`,
+            gridTemplateAreas: '"top  ." "left right"',
             gridTemplateColumns: '1fr auto',
             gap: `${theme.spacings.sm} ${theme.spacings.xxl}`,
           },

package/Row/ContentLinks/ContentLinks.tsx

@@ -1,5 +1,6 @@
 import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
-import { Container, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Container, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 
@@ -9,7 +10,7 @@ export type ContentLinksProps = {
   sx?: SxProps<Theme>
 }
 
-const compName = 'ContentLinks' as const
+const compName = 'ContentLinks'
 const parts = ['root', 'scroller', 'title'] as const
 const { classes } = extendableComponent(compName, parts)
 
@@ -34,7 +35,7 @@ export function ContentLinks(props: ContentLinksProps) {
           sx={(theme) => ({
             justifyContent: 'start',
             gap: `${theme.spacings.md}`,
-            gridAutoColumns: `max-content`,
+            gridAutoColumns: 'max-content',
           })}
         >
           <Typography variant='subtitle1' component='h2' className={classes.title}>

package/Row/HeroBanner/HeroBanner.tsx

@@ -1,5 +1,6 @@
 import { clientSize } from '@graphcommerce/framer-utils'
-import { ContainerProps, Box, styled, Theme, SxProps } from '@mui/material'
+import type { ContainerProps, SxProps, Theme } from '@mui/material'
+import { Box, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useScrollY } from '../../Layout/hooks/useScrollY'
@@ -13,7 +14,7 @@ export type HeroBannerProps = ContainerProps & {
   sx?: SxProps<Theme>
 }
 
-const compName = 'HeroBanner' as const
+const compName = 'HeroBanner'
 const parts = ['root', 'wrapper', 'copy', 'asset', 'animated', 'video'] as const
 const { classes } = extendableComponent(compName, parts)
 

package/Row/IconBlocks/IconBlock.tsx

@@ -1,4 +1,5 @@
-import { Typography, Button, SxProps, Theme, Box, ButtonProps } from '@mui/material'
+import type { ButtonProps, SxProps, Theme } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 
@@ -10,7 +11,7 @@ export type IconBlockProps = {
   sx?: SxProps<Theme>
 } & ButtonProps
 
-const name = 'IconBlock' as const
+const name = 'IconBlock'
 const parts = ['block', 'link', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 

package/Row/IconBlocks/IconBlocks.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
@@ -10,7 +11,7 @@ export type IconBlocksProps = {
   sx?: SxProps<Theme>
 }
 
-const compName = 'IconBlocks' as const
+const compName = 'IconBlocks'
 const parts = ['container', 'title', 'optionsWrapper', 'block', 'wrapper'] as const
 const { classes } = extendableComponent(compName, parts)
 

package/Row/ImageText/ImageText.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
@@ -10,7 +11,7 @@ export type ImageTextProps = {
   sx?: SxProps<Theme>
 }
 
-const name = 'ImageText' as const
+const name = 'ImageText'
 const parts = ['root', 'wrapper', 'asset', 'copy'] as const
 const { classes } = extendableComponent(name, parts)
 

package/Row/ImageTextBoxed/ImageTextBoxed.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
@@ -11,7 +12,7 @@ export type ImageTextBoxedProps = {
   sx?: SxProps<Theme>
 }
 
-const name = 'ImageTextBoxed' as const
+const name = 'ImageTextBoxed'
 const parts = ['root', 'wrapper', 'asset', 'copy'] as const
 const { classes } = extendableComponent(name, parts)
 
@@ -72,7 +73,7 @@ export function ImageTextBoxed(props: ImageTextBoxedProps) {
             '& img': {
               height: '100% !important',
               width: '100% !important',
-              objectFit: `cover`,
+              objectFit: 'cover',
             },
           })}
         >

package/Row/ParagraphWithSidebarSlide/ParagraphWithSidebarSlide.tsx

@@ -1,4 +1,5 @@
-import { Box, ContainerProps } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { Box } from '@mui/material'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
 import { Row } from '../Row'
@@ -9,7 +10,7 @@ export type ParagraphWithSidebarSlideProps = ContainerProps & {
   children: React.ReactNode
 }
 
-const name = 'ParagraphWithSidebarSlide' as const
+const name = 'ParagraphWithSidebarSlide'
 const parts = ['root', 'wrapper', 'backstory', 'copy', 'slidingItems'] as const
 const { classes } = extendableComponent(name, parts)
 

package/Row/Quote/Quote.tsx

@@ -1,4 +1,4 @@
-import { ContainerProps } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
 import React from 'react'
 import { Row } from '../Row'
 

package/Row/Row.tsx

@@ -1,4 +1,5 @@
-import { Container, styled } from '@mui/material'
+import { styled } from '@mui/material'
+import { Container } from '../Container/Container'
 
 export const Row = styled(Container, { name: 'Row' })(({ theme }) => ({
   marginBottom: theme.spacings.xxl,

package/Row/RowLinks/RowLinks.tsx

@@ -1,15 +1,13 @@
-import {
-  Scroller,
-  ScrollerButton,
-  ScrollerButtonProps,
-  ScrollerProvider,
-} from '@graphcommerce/framer-scroller'
-import { Box, ContainerProps, SxProps, Theme, Typography } from '@mui/material'
+import type { ScrollerButtonProps } from '@graphcommerce/framer-scroller'
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import type { ContainerProps, SxProps, Theme } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import React from 'react'
+import { Container, useContainerSpacing } from '../../Container/Container'
+import { iconChevronLeft, iconChevronRight } from '../../icons'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
-import { iconChevronLeft, iconChevronRight } from '../../icons'
 import { Row } from '../Row'
 
 export type RowLinksProps = {
@@ -21,7 +19,7 @@ export type RowLinksProps = {
 } & Pick<ContainerProps, 'maxWidth'> &
   Pick<ScrollerButtonProps, 'showButtons'>
 
-const compName = 'RowLinks' as const
+const compName = 'RowLinks'
 const parts = [
   'root',
   'scroller',
@@ -38,37 +36,41 @@ export function RowLinks(props: RowLinksProps) {
   const { title, copy, children, sx = [], inlineTitle, showButtons, maxWidth } = props
 
   const fabSize = useFabSize('responsive')
+  const spacing = useContainerSpacing({ maxWidth })
 
   return (
-    <Row
-      className={classes.root}
-      sx={[{ position: 'relative' }, ...(Array.isArray(sx) ? sx : [sx])]}
-      maxWidth={maxWidth}
-    >
-      {!inlineTitle && (
-        <Typography
-          variant='subtitle1'
-          component='h2'
-          className={classes.title}
-          sx={(theme) => ({ mb: theme.spacings.md })}
-        >
-          {title}
-        </Typography>
-      )}
-      {copy && (
-        <Box className={classes.copy} sx={(theme) => ({ my: theme.spacings.md })}>
-          {copy}
-        </Box>
-      )}
-      <Box className={classes.scrollerWrapper} sx={{ position: 'relative' }}>
+    <Box className={classes.root} sx={sx}>
+      <Container maxWidth={maxWidth}>
+        {!inlineTitle && (
+          <Typography
+            variant='subtitle1'
+            component='h2'
+            className={classes.title}
+            sx={(theme) => ({ mb: theme.spacings.md })}
+          >
+            {title}
+          </Typography>
+        )}
+        {copy && (
+          <Box className={classes.copy} sx={(theme) => ({ my: theme.spacings.md })}>
+            {copy}
+          </Box>
+        )}
+      </Container>
+      <Box
+        className={classes.scrollerWrapper}
+        sx={(theme) => ({ position: 'relative', mb: theme.spacings.xxl })}
+      >
         <ScrollerProvider scrollSnapAlign='end'>
           <Scroller
             className={classes.scroller}
             hideScrollbar
             sx={(theme) => ({
+              px: spacing.padding,
+              scrollPaddingInline: spacing.padding,
               justifyContent: 'start',
               gap: `${theme.spacings.md}`,
-              gridAutoColumns: `max-content`,
+              gridAutoColumns: 'max-content',
               alignItems: 'center',
               '&.smGridDirInline > *': {
                 scrollSnapAlign: {
@@ -92,7 +94,7 @@ export function RowLinks(props: RowLinksProps) {
               gridAutoFlow: 'row',
               gap: theme.spacings.xxs,
               position: 'absolute',
-              left: theme.spacings.xs,
+              left: spacing.padding,
               top: `calc(50% - calc(${fabSize} / 2))`,
             })}
           >
@@ -111,7 +113,7 @@ export function RowLinks(props: RowLinksProps) {
               display: 'grid',
               gap: theme.spacings.xxs,
               position: 'absolute',
-              right: theme.spacings.xs,
+              right: spacing.padding,
               top: `calc(50% - calc(${fabSize} / 2))`,
             })}
           >
@@ -126,6 +128,6 @@ export function RowLinks(props: RowLinksProps) {
           </Box>
         </ScrollerProvider>
       </Box>
-    </Row>
+    </Box>
   )
 }

package/Row/RowLinks/variant/VariantImageLabelSwiper.tsx

@@ -1,4 +1,5 @@
-import { RowLinks, RowLinksProps } from '../RowLinks'
+import type { RowLinksProps } from '../RowLinks'
+import { RowLinks } from '../RowLinks'
 
 export function VariantImageLabelSwiper(props: RowLinksProps) {
   const { sx = [], ...rowLinksProps } = props
@@ -8,7 +9,10 @@ export function VariantImageLabelSwiper(props: RowLinksProps) {
       {...rowLinksProps}
       sx={[
         {
-          '& .Scroller-root': {
+          // '& .Scroller-root': {
+          //   alignItems: 'start',
+          // },
+          '& .Scroller-scroller': {
             alignItems: 'start',
           },
           '& .RowLinks-title': {

package/Row/RowLinks/variant/VariantInline.tsx

@@ -1,4 +1,5 @@
-import { RowLinks, RowLinksProps } from '../RowLinks'
+import type { RowLinksProps } from '../RowLinks'
+import { RowLinks } from '../RowLinks'
 
 export function VariantInline(props: RowLinksProps) {
   const { sx = [], inlineTitle = true, ...rowLinksProps } = props
@@ -7,7 +8,10 @@ export function VariantInline(props: RowLinksProps) {
     <RowLinks
       inlineTitle={inlineTitle}
       {...rowLinksProps}
-      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={[
+        (theme) => ({ '& .RowLinks-scrollerWrapper': { my: theme.spacings.md } }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     />
   )
 }

package/Row/RowLinks/variant/VariantLogoSwiper.tsx

@@ -1,4 +1,5 @@
-import { RowLinks, RowLinksProps } from '../RowLinks'
+import type { RowLinksProps } from '../RowLinks'
+import { RowLinks } from '../RowLinks'
 
 export function VariantLogoSwiper(props: RowLinksProps) {
   const { sx = [], ...rowLinksProps } = props