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

package/Row/RowLinks/variant/VariantUsps.tsx

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

package/Row/SpecialBanner/SpecialBanner.tsx

@@ -1,4 +1,5 @@
-import { Box, ContainerProps, Typography } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
 import { responsiveVal } from '../../Styles/responsiveVal'
@@ -11,7 +12,7 @@ export type SpecialBannerProps = ContainerProps & {
   children: React.ReactNode
 }
 
-const name = 'SpecialBanner' as const
+const name = 'SpecialBanner'
 const parts = ['root', 'wrapper', 'copy', 'asset', 'topic', 'links', 'textContainer'] as const
 const { classes } = extendableComponent(name, parts)
 

package/SectionContainer/SectionContainer.tsx

@@ -1,12 +1,13 @@
 import { Box } from '@mui/material'
-import { SectionHeader, SectionHeaderProps } from '../SectionHeader/SectionHeader'
+import type { SectionHeaderProps } from '../SectionHeader/SectionHeader'
+import { SectionHeader } from '../SectionHeader/SectionHeader'
 import { extendableComponent } from '../Styles'
 
 export type SectionContainerProps = SectionHeaderProps &
   OwnerState & { children?: React.ReactNode; className?: string }
 
 type OwnerState = { borderBottom?: boolean }
-const name = 'SectionContainer' as const
+const name = 'SectionContainer'
 const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/SectionHeader/SectionHeader.tsx

@@ -1,4 +1,5 @@
-import { Box, Typography, TypographyProps, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme, TypographyProps } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 

package/Separator/Separator.tsx

@@ -1,4 +1,5 @@
-import { Box, Typography, TypographyProps } from '@mui/material'
+import type { TypographyProps } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 
@@ -6,7 +7,7 @@ export type DividedLinksProps = {
   icon?: React.ReactNode
 } & Pick<TypographyProps, 'color' | 'sx'>
 
-const name = 'Separator' as const
+const name = 'Separator'
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 

package/Snackbar/DismissibleSnackbar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { MessageSnackbar } from './MessageSnackbar'
-import { MessageSnackbarProps } from './MessageSnackbarImpl'
+import type { MessageSnackbarProps } from './MessageSnackbarImpl'
 
 export type DismissibleSnackbarProps = MessageSnackbarProps & {
   id: string

package/Snackbar/ErrorSnackbar.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { MessageSnackbar } from './MessageSnackbar'
-import { MessageSnackbarProps } from './MessageSnackbarImpl'
+import type { MessageSnackbarProps } from './MessageSnackbarImpl'
 
 export type ErrorSnackbarProps = MessageSnackbarProps
 

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,20 +1,11 @@
 import { i18n } from '@lingui/core'
-import {
-  Fab,
-  Snackbar,
-  SnackbarContent,
-  SnackbarProps,
-  lighten,
-  Box,
-  SxProps,
-  Theme,
-  Portal,
-  SvgIconProps,
-} from '@mui/material'
+import type { SnackbarProps, SxProps, Theme } from '@mui/material'
+import { Box, Fab, Portal, Snackbar, SnackbarContent, lighten } from '@mui/material'
 import React, { useEffect, useState } from 'react'
-import { IconSvg, IconSvgProps } from '../IconSvg'
-import { extendableComponent, breakpointVal } from '../Styles'
-import { iconClose, iconCheckmark, iconSadFace } from '../icons'
+import type { IconSvgProps } from '../IconSvg'
+import { IconSvg } from '../IconSvg'
+import { breakpointVal, extendableComponent } from '../Styles'
+import { iconCheckmark, iconClose, iconSadFace } from '../icons'
 import iconInfo from '../icons/info.svg'
 
 type Size = 'normal' | 'wide'
@@ -46,7 +37,7 @@ type OwnerState = {
   disableIcon?: boolean
 }
 
-const name = 'MessageSnackbarImpl' as const
+const name = 'MessageSnackbarImpl'
 const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/StarRatingField/StarRatingField.tsx

@@ -1,4 +1,5 @@
-import { RatingProps, Rating } from '@mui/material'
+import type { RatingProps } from '@mui/material'
+import { Rating } from '@mui/material'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 import { iconStar } from '../icons'
@@ -8,7 +9,7 @@ export type StarRatingFieldProps = {
   onChange?: (id: string, value: number) => void
 } & Omit<RatingProps, 'id' | 'onChange'>
 
-const name = 'StarRatingField' as const
+const name = 'StarRatingField'
 const parts = ['root', 'startEmpty', 'starFull'] as const
 const { classes } = extendableComponent(name, parts)
 

package/Stepper/Stepper.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 { extendableComponent } from '../Styles'
 
 export type StepperProps = {
@@ -7,7 +8,7 @@ export type StepperProps = {
   sx?: SxProps<Theme>
 }
 
-const name = 'Stepper' as const
+const name = 'Stepper'
 const parts = ['root', 'step', 'activeStep'] as const
 const { classes } = extendableComponent(name, parts)
 

package/Styles/__tests__/spreadVal.test.ts

@@ -3,9 +3,9 @@ import { spreadLinear, spreadVal } from '../spreadVal'
 it('generates the right spreadVal', () => {
   const s = (val: unknown) => JSON.stringify(val)
 
-  expect(s(spreadLinear(15, 18, 'xl'))).toMatchInlineSnapshot(`"[15,15.53,16.2,17.28,18]"`)
-  expect(s(spreadLinear(15, 18))).toMatchInlineSnapshot(`"[15,16.31,18,18,18]"`)
+  expect(s(spreadLinear(15, 18, 'xl'))).toMatchInlineSnapshot('"[15,15.53,16.2,17.28,18]"')
+  expect(s(spreadLinear(15, 18))).toMatchInlineSnapshot('"[15,16.31,18,18,18]"')
 
-  expect(s(spreadVal(15, 18, 'xl'))).toMatchInlineSnapshot(`"[15,15.09,15.48,16.73,18]"`)
-  expect(s(spreadVal(15, 18))).toMatchInlineSnapshot(`"[15,15.57,18,18,18]"`)
+  expect(s(spreadVal(15, 18, 'xl'))).toMatchInlineSnapshot('"[15,15.09,15.48,16.73,18]"')
+  expect(s(spreadVal(15, 18))).toMatchInlineSnapshot('"[15,15.57,18,18,18]"')
 })

package/Styles/extendableComponent.ts

@@ -1,4 +1,5 @@
-import { capitalize, Interpolation, Theme } from '@mui/material'
+import type { Interpolation, Theme } from '@mui/material'
+import { capitalize } from '@mui/material'
 
 export type ExtendableComponent<StyleProps extends Record<string, unknown>> = {
   /**
@@ -15,7 +16,7 @@ export type ExtendableComponent<StyleProps extends Record<string, unknown>> = {
   variants?: { props: Partial<StyleProps>; style: Interpolation<{ theme: Theme }> }[]
 }
 
-export function slotClasses<Name extends string, ClassNames extends ReadonlyArray<string>>(
+function slotClasses<Name extends string, ClassNames extends ReadonlyArray<string>>(
   name: Name,
   slotNames: ClassNames,
 ) {
@@ -25,7 +26,7 @@ export function slotClasses<Name extends string, ClassNames extends ReadonlyArra
 }
 
 /** Maps incoming classes to a selectors that can be used to extend the component */
-export const partselectorsMap = <O extends Record<string, string>>(
+const partselectorsMap = <O extends Record<string, string>>(
   obj: O,
 ): {
   [P in keyof O]: `& .${O[P]}`

package/Styles/withEmotionCache.tsx

@@ -1,11 +1,11 @@
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
-import { AppType } from 'next/app'
+import type { AppType } from 'next/app'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type { DocumentContext } from 'next/document'
-import { EmotionProviderProps } from './EmotionProvider'
+import type { EmotionProviderProps } from './EmotionProvider'
 import { createEmotionCache } from './createEmotionCache'
 
 export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }

package/Styles/withTheme.tsx

@@ -1,4 +1,5 @@
-import { SxProps, Theme, ThemeProvider } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { ThemeProvider } from '@mui/material'
 import React from 'react'
 
 type WithSx = { sx?: SxProps<Theme> }
@@ -34,6 +35,8 @@ type WithSx = { sx?: SxProps<Theme> }
  *   Layout: withTheme(LayoutFull, darkTheme),
  * } as PageOptions
  * ```
+ *
+ * @public
  */
 export function withTheme<T>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/TextInputNumber/TextInputNumber.tsx

@@ -1,16 +1,13 @@
 import { i18n } from '@lingui/core'
+import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
 import {
-  IconButtonProps,
-  SxProps,
   Box,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
+  Fab, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   TextField,
-  TextFieldProps,
   useForkRef,
-  Theme,
-  Fab,
 } from '@mui/material'
-import { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
+import type { ChangeEvent, Ref } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
@@ -28,7 +25,7 @@ export type TextInputNumberProps = Omit<TextFieldProps, 'type'> & {
 }
 
 type OwnerState = { size?: 'small' | 'medium' }
-const name = 'TextInputNumber' as const
+const name = 'TextInputNumber'
 const parts = ['quantity', 'quantityInput', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/Theme/DarkLightModeThemeProvider.tsx

@@ -1,19 +1,17 @@
 import { Trans } from '@lingui/react'
+import type { FabProps, ListItemButtonProps, Theme } from '@mui/material'
 import {
-  Theme,
-  ThemeProvider,
-  useMediaQuery,
   Fab,
-  FabProps,
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  ListItemButtonProps,
+  ThemeProvider, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
+  useMediaQuery,
 } from '@mui/material'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
-import { IconSvg } from '../IconSvg'
 import { iconMoon, iconSun } from '../icons'
+import { IconSvg } from '../IconSvg'
 import { getCssFlag, setCssFlag } from '../utils/cssFlags'
 
 type Mode = 'dark' | 'light'
@@ -27,10 +25,11 @@ type ColorModeContext = {
   toggle: () => void
 }
 
+/** @public */
 export const colorModeContext = createContext(undefined as unknown as ColorModeContext)
 colorModeContext.displayName = 'ColorModeContext'
 
-type ThemeProviderProps = {
+export type ThemeProviderProps = {
   children: React.ReactNode
   ssrMode?: Mode
   listenToBrowser?: boolean
@@ -93,10 +92,12 @@ export function DarkLightModeThemeProvider(props: ThemeProviderProps) {
   )
 }
 
+/** @public */
 export function useColorMode() {
   return useContext(colorModeContext)
 }
 
+/** @public */
 export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
   const { currentMode, isSingleMode, toggle } = useColorMode()
 
@@ -115,6 +116,8 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
  * A button that switches between light and dark mode
  *
  * To disable this functionality
+ *
+ * @public
  */
 export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   const { sx = [] } = props

package/Theme/MuiButton.ts

@@ -1,4 +1,5 @@
-import { ComponentsVariants, Theme, alpha, darken, lighten } from '@mui/material'
+import type { ComponentsVariants, Theme } from '@mui/material'
+import { alpha, darken, lighten } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
 declare module '@mui/material/Button/Button' {

package/Theme/MuiChip.ts

@@ -1,4 +1,5 @@
-import { ComponentsVariants, Theme, darken } from '@mui/material'
+import type { ComponentsVariants, Theme } from '@mui/material'
+import { darken } from '@mui/material'
 import { responsiveVal } from '../Styles'
 
 declare module '@mui/material/Chip/Chip' {

package/Theme/MuiFab.ts

@@ -1,4 +1,5 @@
-import { ComponentsVariants, FabProps, Theme, useTheme } from '@mui/material'
+import type { ComponentsVariants, FabProps, Theme } from '@mui/material'
+import { useTheme } from '@mui/material'
 import { responsiveVal } from '../Styles'
 
 type FabSize = NonNullable<FabProps['size']>

package/Theme/MuiSlider.ts

@@ -1,4 +1,4 @@
-import { ComponentsVariants, Theme } from '@mui/material'
+import type { ComponentsVariants, Theme } from '@mui/material'
 
 declare module '@mui/material/Slider/Slider' {
   interface SliderPropsSizeOverrides {
@@ -36,8 +36,8 @@ export const MuiSlider: SliderVariants = [
   {
     props: { size: 'large' },
     style: {
-      maxWidth: `calc(100% - 28px)`,
-      margin: `0 auto`,
+      maxWidth: 'calc(100% - 28px)',
+      margin: '0 auto',
       display: 'block',
       '& .MuiSlider-rail': {
         height: 4,

package/Theme/MuiSnackbar.ts

@@ -1,4 +1,4 @@
-import { ComponentsVariants, Theme } from '@mui/material'
+import type { ComponentsVariants, Theme } from '@mui/material'
 
 type SnackbarVariants = NonNullable<ComponentsVariants<Theme>['MuiSnackbar']>
 

package/Theme/NextLink.tsx

@@ -1,15 +1,21 @@
-import Link, { LinkProps as NextLinkProps } from 'next/link'
+import type { LinkProps as NextLinkProps } from 'next/link'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 import React, { forwardRef } from 'react'
+import { useStorefrontConfig } from '../hooks/useStorefrontConfig'
 
-type LinkProps = Omit<NextLinkProps, 'legacyBehavior' | 'passHref' | 'as'>
-type AnchorWithoutLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>
-type LinkProppies = AnchorWithoutLinkProps & Partial<LinkProps> & { relative?: boolean }
+export type NextLinkPropsBase = Omit<NextLinkProps, 'legacyBehavior' | 'passHref' | 'as'>
+export type AnchorWithoutLinkProps = Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  keyof NextLinkPropsBase
+>
+export type LinkProps = AnchorWithoutLinkProps & Partial<NextLinkPropsBase> & { relative?: boolean }
 
 /**
  * This is a wrapper around the Next.js Link component which can be used with MUI's Link component
  * or any ButtonBase derivative.
  *
- * By default you can use the the props provided by the Link or Button component, but you to pass
+ * By default you can use the props provided by the Link or Button component, but you can pass
  * any next/link specific props like `prefetch`, `replace`, `scroll`, `shallow`
  *
  * ```typescript
@@ -20,22 +26,36 @@ type LinkProppies = AnchorWithoutLinkProps & Partial<LinkProps> & { relative?: b
  * )
  * ```
  */
-export const NextLink = forwardRef<HTMLAnchorElement, LinkProppies>((props, ref) => {
-  let { href, target, relative, ...rest } = props
+export const NextLink = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  let { href, target, relative, locale, ...rest } = props
+
+  const router = useRouter()
+  const canonicalBaseUrl =
+    useStorefrontConfig().canonicalBaseUrl ?? import.meta.graphCommerce.canonicalBaseUrl
 
   // The href is optional in a MUI link, but required in a Next.js link
-  // eslint-disable-next-line jsx-a11y/anchor-has-content
-  if (!href) return <a {...rest} ref={ref} />
+  // When the href is not a string, we pass it through directly
+  if (!href || typeof href !== 'string') return <Link href={href ?? ''} {...rest} ref={ref} />
+
+  const isFullUrl = href.includes(':') || href.startsWith('//')
 
-  const hrefString = href.toString()
-  const isExternal = hrefString.includes(':') || hrefString.startsWith('//')
-  const isHash = hrefString.startsWith('#')
+  /**
+   * When an internal link is provided and it is on the same domain, extract the locale
+   * from the URL and make the URL relative without the locale. Prevents Next.js prefixing
+   * again with the current locale.
+   */
+  if (!locale && isFullUrl && href.startsWith(canonicalBaseUrl)) {
+    const url = new URL(href)
+    locale = router.locales?.find((l) => url.pathname.startsWith(`/${l}/`))
+    href = locale ? url.pathname.replace(`/${locale}/`, '/') : url.pathname
+  }
 
+  const isExternal = isFullUrl && !href.startsWith(canonicalBaseUrl)
   if (isExternal) target = target || '_blank'
-  target = typeof target === 'undefined' && isExternal ? '_blank' : target
 
   // Relative URL's cause more pain than they're worth
-  if (!isExternal && !isHash && !hrefString.startsWith('/') && !relative) href = `/${href}`
+  const isHash = href.startsWith('#')
+  if (!isExternal && !isHash && !href.startsWith('/') && !relative) href = `/${href}`
 
-  return <Link href={href} {...rest} target={target} ref={ref} />
+  return <Link href={href} {...rest} target={target} ref={ref} locale={locale} />
 })

package/Theme/createTheme.ts

@@ -1,3 +1,5 @@
+import { Breakpoint } from '@mui/material'
+
 export {}
 
 declare module '@mui/material/styles/createPalette' {
@@ -26,6 +28,8 @@ declare module '@mui/material/styles/createTheme' {
       headerHeightMd: string
       appBarHeightMd: string
       appBarInnerHeightMd: string
+      containerSizingShell: false | Breakpoint | undefined
+      containerSizingContent: false | Breakpoint | undefined
     }
 
     // todo: should be cleaned up to be compatible with the default mui-styles
@@ -50,6 +54,8 @@ declare module '@mui/material/styles/createTheme' {
       headerHeightMd: string
       appBarHeightMd: string
       appBarInnerHeightMd: string
+      containerSizingShell: false | Breakpoint | undefined
+      containerSizingContent: false | Breakpoint | undefined
     }
 
     // todo: should be cleaned up to be compatible with the default mui-styles

package/Theme/index.ts

@@ -6,3 +6,4 @@ export * from './MuiSlider'
 export * from './MuiSnackbar'
 export * from './themeDefaults'
 export * from './NextLink'
+export * from './useContainerSizing'

package/Theme/themeDefaults.ts

@@ -1,4 +1,4 @@
-import { Shadows } from '@mui/material/styles/shadows'
+import type { Shadows } from '@mui/material/styles/shadows'
 import { spreadVal } from '../Styles/spreadVal'
 import { breakpoints } from './breakpoints'
 
@@ -6,22 +6,22 @@ import { breakpoints } from './breakpoints'
 
 const shadows: Shadows = [
   /* 0 */ 'none',
-  /* 1 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 1.4px 1.8px -1.5px hsl(0deg 0% 0% / 0.09)`,
-  /* 2 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 2.6px 3.3px -1.5px hsl(0deg 0% 0% / 0.09)`,
-  /* 3 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 3.8px 4.8px -1.5px hsl(0deg 0% 0% / 0.09)`,
-  /* 4 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.04),0px 1.7px 2.2px -0.7px hsl(0deg 0% 0% / 0.06),0px 5px 6.4px -1.5px hsl(0deg 0% 0% / 0.08)`,
+  /* 1 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 1.4px 1.8px -1.5px hsl(0deg 0% 0% / 0.09)',
+  /* 2 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 2.6px 3.3px -1.5px hsl(0deg 0% 0% / 0.09)',
+  /* 3 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 3.8px 4.8px -1.5px hsl(0deg 0% 0% / 0.09)',
+  /* 4 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.04),0px 1.7px 2.2px -0.7px hsl(0deg 0% 0% / 0.06),0px 5px 6.4px -1.5px hsl(0deg 0% 0% / 0.08)',
   /* 5 */ 'none',
-  /* 6 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.04),0px 2.3px 2.9px -0.7px hsl(0deg 0% 0% / 0.06),0px 7.6px 9.7px -1.5px hsl(0deg 0% 0% / 0.08)`,
+  /* 6 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.04),0px 2.3px 2.9px -0.7px hsl(0deg 0% 0% / 0.06),0px 7.6px 9.7px -1.5px hsl(0deg 0% 0% / 0.08)',
   /* 7 */ 'none',
-  /* 8 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 2.9px 3.7px -0.7px hsl(0deg 0% 0% / 0.07),0px 10px 12.8px -1.5px hsl(0deg 0% 0% / 0.1)`,
+  /* 8 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 2.9px 3.7px -0.7px hsl(0deg 0% 0% / 0.07),0px 10px 12.8px -1.5px hsl(0deg 0% 0% / 0.1)',
   /* 9 */ 'none',
   /* 10 */ 'none',
   /* 11 */ 'none',
-  /* 12 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 4.2px 5.4px -0.7px hsl(0deg 0% 0% / 0.09),0px 15px 19.1px -1.5px hsl(0deg 0% 0% / 0.11)`,
+  /* 12 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 4.2px 5.4px -0.7px hsl(0deg 0% 0% / 0.09),0px 15px 19.1px -1.5px hsl(0deg 0% 0% / 0.11)',
   /* 13 */ 'none',
   /* 14 */ 'none',
   /* 15 */ 'none',
-  /* 16 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 3.5px 4.5px -0.5px hsl(0deg 0% 0% / 0.07),0px 8.6px 11px -1px hsl(0deg 0% 0% / 0.08),0px 20px 25.5px -1.5px hsl(0deg 0% 0% / 0.1)`,
+  /* 16 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 3.5px 4.5px -0.5px hsl(0deg 0% 0% / 0.07),0px 8.6px 11px -1px hsl(0deg 0% 0% / 0.08),0px 20px 25.5px -1.5px hsl(0deg 0% 0% / 0.1)',
   /* 17 */ 'none',
   /* 18 */ 'none',
   /* 19 */ 'none',
@@ -29,7 +29,7 @@ const shadows: Shadows = [
   /* 21 */ 'none',
   /* 22 */ 'none',
   /* 23 */ 'none',
-  /* 24 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 3.9px 5px -0.4px hsl(0deg 0% 0% / 0.07),0px 8.1px 10.3px -0.7px hsl(0deg 0% 0% / 0.08),0px 15.8px 20.1px -1.1px hsl(0deg 0% 0% / 0.1),0px 30px 38.3px -1.5px hsl(0deg 0% 0% / 0.11)`,
+  /* 24 */ '0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 3.9px 5px -0.4px hsl(0deg 0% 0% / 0.07),0px 8.1px 10.3px -0.7px hsl(0deg 0% 0% / 0.08),0px 15.8px 20.1px -1.1px hsl(0deg 0% 0% / 0.1),0px 30px 38.3px -1.5px hsl(0deg 0% 0% / 0.11)',
 ]
 
 export const themeBaseDefaults = {

package/Theme/useContainerSizing.ts

@@ -0,0 +1,20 @@
+import type { Theme } from '@mui/material'
+import { useTheme } from '@mui/material'
+
+function containerSizing(variant: ContainerSizingVariant, theme: Theme) {
+  const breakpoint =
+    variant === 'shell'
+      ? theme.appShell.containerSizingShell
+      : theme.appShell.containerSizingContent
+
+  return {
+    breakpoint,
+    value: breakpoint ? `${theme.breakpoints.values[breakpoint]}px` : '100%',
+  }
+}
+
+export type ContainerSizingVariant = 'shell' | 'content'
+export function useContainerSizing(variant: ContainerSizingVariant) {
+  const theme = useTheme()
+  return containerSizing(variant, theme)
+}

package/TimeAgo/TimeAgo.tsx

@@ -2,14 +2,14 @@ import { useLocale } from '../hooks/useLocale'
 
 export type TimeAgoProps = {
   date: Date
-  /**
-   * @deprecated No longer used
-   */
+  /** @deprecated No longer used */
+  // eslint-disable-next-line react/no-unused-prop-types
   locale?: string
 }
 
 /**
  * @deprecated Use <RelativeToTimeFormat /> instead.
+ * @public
  */
 export function TimeAgo(props: TimeAgoProps) {
   const { date } = props

package/ToggleButton/ToggleButton.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { alpha, Button, ButtonProps } from '@mui/material'
-import React, { FormEvent } from 'react'
+import type { ButtonProps } from '@mui/material'
+import { Button, alpha } from '@mui/material'
+import type { FormEvent } from 'react'
+import React from 'react'
 import { extendableComponent } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
 
@@ -12,7 +14,7 @@ export type ToggleButtonProps = Omit<ButtonProps, 'onClick' | 'onChange'> & {
 
 type OwnerState = Pick<ButtonProps, 'size' | 'disabled'> & { selected?: boolean }
 
-const compName = 'ToggleButton' as const
+const compName = 'ToggleButton'
 const parts = ['root', 'button', 'helperText'] as const
 const { withState } = extendableComponent<OwnerState, typeof compName, typeof parts>(
   compName,
@@ -93,7 +95,7 @@ export const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref
               theme.shape.borderRadius * 1.5,
               theme.breakpoints.values,
             ),
-            padding: `8px 12px`,
+            padding: '8px 12px',
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),