@graphcommerce/next-ui 4.2.1 → 4.2.4

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

@@ -1,7 +1,7 @@
 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 { SectionHeader } from '../SectionHeader/SectionHeader'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
@@ -43,7 +43,9 @@ export function ChipMenu(props: ChipMenuProps) {
       <Chip
         color='default'
         clickable
-        onDelete={onDelete || ((event) => setOpenEl(event.currentTarget.parentElement))}
+        onDelete={
+          onDelete || ((event: React.MouseEvent) => setOpenEl(event.currentTarget.parentElement))
+        }
         onClick={(event) => {
           setOpenEl(event.currentTarget)
         }}

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/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

@@ -22,7 +22,7 @@ export function useShowBack() {
   return false
 }
 
-export default function LayoutHeaderBack(props: BackProps) {
+export function LayoutHeaderBack(props: BackProps) {
   const router = useRouter()
   const path = router.asPath.split('?')[0]
   const up = useUp()

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'
 

package/LayoutParts/MenuFab.tsx

@@ -97,6 +97,7 @@ export function MenuFab(props: MenuFabProps) {
           open={!!openEl}
           onClose={() => setOpenEl(null)}
           disableScrollLock
+          disablePortal
           transitionDuration={{ appear: 175, enter: 175, exit: 175 }}
           PaperProps={{
             sx: (theme) => ({

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/PageMeta.tsx

@@ -0,0 +1,91 @@
+import { usePageContext } from '@graphcommerce/framer-next-pages'
+import {
+  resolveHref,
+  getDomainLocale,
+  addBasePath,
+  addLocale,
+} from 'next/dist/shared/lib/router/router'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+
+// https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
+export type MetaRobots =
+  | 'noindex'
+  | 'nofollow'
+  | 'noarchive'
+  | 'nosnippet'
+  | 'notranslate'
+  | 'noimageindex'
+  | `unavailable_after:${string}`
+  | `max-snippet:${number}`
+  | `max-image-preview:${'none' | 'standard' | 'large'}`
+  | `max-video-preview:${number}`
+type MetaRobotsAll = ['all' | 'none']
+
+type Canonical = `http://${string}` | `https://${string}` | `/${string}` | string
+
+export type PageMetaProps = {
+  title: string
+  canonical?: Canonical
+  metaDescription?: string
+  metaRobots?: MetaRobotsAll | MetaRobots[]
+}
+
+export function useCanonical(incomming?: Canonical) {
+  const router = useRouter()
+  let canonical = incomming
+
+  if (!canonical) return 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')
+      }
+    }
+
+    let [href, as] = resolveHref(router, canonical, true)
+
+    const curLocale = router.locale
+
+    // Copied from here https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx#L313-L327
+    const localeDomain =
+      router &&
+      router.isLocaleDomain &&
+      getDomainLocale(as, curLocale, router && router.locales, router && router.domainLocales)
+
+    href = localeDomain || addBasePath(addLocale(as, curLocale, router && router.defaultLocale))
+
+    canonical = `${process.env.NEXT_PUBLIC_SITE_URL}${href}`
+  }
+
+  if (canonical && !(canonical ?? 'http').startsWith('http')) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,
+      )
+    }
+    canonical = undefined
+  }
+
+  return canonical
+}
+
+export function PageMeta(props: PageMetaProps) {
+  const { active } = usePageContext()
+  const { title, canonical: canonicalBare, metaDescription, metaRobots = ['all'] } = props
+
+  const canonical = useCanonical(canonicalBare)
+
+  if (!active) return null
+  return (
+    <Head>
+      <title>{title.trim()}</title>
+      {metaDescription && (
+        <meta name='description' content={metaDescription.trim()} key='meta-description' />
+      )}
+      <meta name='robots' content={metaRobots.join(',')} key='meta-robots' />
+      {canonical && <link rel='canonical' href={canonical} key='canonical' />}
+    </Head>
+  )
+}

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

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

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

@@ -1,6 +1,6 @@
 import { ContainerProps } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
+import { Row } from '../Row'
 
 export type QuoteProps = {
   children: React.ReactElement

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

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

package/Row/index.ts

@@ -0,0 +1,18 @@
+export * from './Row'
+export * from './ButtonLinkList'
+export * from './ColumnOne/ColumnOne'
+export * from './ColumnOneBoxed/ColumnOneBoxed'
+export * from './ColumnOneCentered/ColumnOneCentered'
+export * from './ColumnThree/ColumnThree'
+export * from './ColumnTwo/ColumnTwo'
+export * from './ColumnTwoSpread/ColumnTwoSpread'
+export * from './ColumnTwoWithTop/ColumnTwoWithTop'
+export * from './ContentLinks/ContentLinks'
+export * from './HeroBanner/HeroBanner'
+export * from './IconBlocks/IconBlocks'
+export * from './IconBlocks/IconBlock'
+export * from './ImageText/ImageText'
+export * from './ImageTextBoxed/ImageTextBoxed'
+export * from './ParagraphWithSidebarSlide/ParagraphWithSidebarSlide'
+export * from './Quote/Quote'
+export * from './SpecialBanner/SpecialBanner'

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

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { SectionHeader, SectionHeaderProps } from '../SectionHeader'
+import { SectionHeader, SectionHeaderProps } from '../SectionHeader/SectionHeader'
 import { extendableComponent } from '../Styles'
 
 export type SectionContainerProps = SectionHeaderProps &

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,4 +1,3 @@
-import { Portal } from '@mui/base'
 import {
   Fab,
   Snackbar,
@@ -8,6 +7,7 @@ import {
   Box,
   SxProps,
   Theme,
+  Portal,
 } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import { IconSvg } from '../IconSvg'
@@ -39,6 +39,7 @@ const name = 'MessageSnackbarImpl' as const
 const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
+// eslint-disable-next-line import/no-default-export
 export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
   const [showSnackbar, setShowSnackbar] = useState<boolean>(false)
 

package/Styles/{index.tsx → index.ts}

@@ -1,12 +1,3 @@
-/**
- * Consider moving to the `sx` prop with `selectors`
- *
- * @deprecated
- */
-export type UseStyles<T extends (...args: never[]) => unknown> = {
-  classes?: Partial<ReturnType<T>['classes']>
-}
-
 export * from './breakpointVal'
 export * from './EmotionProvider'
 export * from './extendableComponent'

package/Styles/withTheme.tsx

@@ -36,6 +36,7 @@ type WithSx = { sx?: SxProps<Theme> }
  * ```
  */
 export function withTheme<T>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Component: (value: T & WithSx) => React.ReactElement<any, any> | null,
   theme: Theme,
 ): React.FC<T & WithSx> {

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

@@ -1,7 +1,6 @@
 import {
   IconButton,
   IconButtonProps,
-  OutlinedTextFieldProps,
   SxProps,
   TextField,
   TextFieldProps,
@@ -25,10 +24,6 @@ export type TextInputNumberProps = Omit<TextFieldProps, 'type'> & {
   sx?: SxProps<Theme>
 }
 
-function isOutlined(props: TextFieldProps): props is OutlinedTextFieldProps {
-  return props.variant === 'outlined'
-}
-
 type OwnerState = { size?: 'small' | 'medium' }
 const name = 'TextInputNumber' as const
 const parts = ['quantity', 'quantityInput', 'button'] as const
@@ -50,6 +45,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
   const forkRef = useForkRef<HTMLInputElement>(ref, inputRef as Ref<HTMLInputElement>)
 
   const [direction, setDirection] = useState<'up' | 'down' | 'runUp' | 'runDown' | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [disabled, setDisabled] = useState<'min' | 'max' | null>(null)
 
   const stop = useCallback(() => setDirection(null), [])

package/Theme/MuiButton.ts

@@ -1,7 +1,7 @@
 import { ComponentsVariants } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
-declare module '@mui/material/Button' {
+declare module '@mui/material/Button/Button' {
   interface ButtonPropsVariantOverrides {
     pill: true
   }
@@ -12,10 +12,10 @@ type ButtonVariants = NonNullable<ComponentsVariants['MuiButton']>
 export const MuiButtonResponsive: ButtonVariants = [
   {
     props: {},
-    style: ({ theme }) => ({
+    style: {
       textTransform: 'none',
       fontWeight: 500,
-    }),
+    },
   },
   {
     props: { size: 'small' },

package/Theme/MuiFab.ts

@@ -40,7 +40,7 @@ export const useFabSize = (size: FabSize) => {
   return fabSize(size, theme)
 }
 
-declare module '@mui/material/Fab' {
+declare module '@mui/material/Fab/Fab' {
   interface FabPropsSizeOverrides {
     responsive: true
   }

package/Theme/MuiSlider.ts

@@ -14,6 +14,7 @@ import { Components, Theme } from '@mui/material'
 //   }
 // }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const MuiSlider = (theme: Theme): Components['MuiSlider'] => ({
   // variants: [
   //   {

package/Theme/themeDefaults.ts

@@ -1,4 +1,4 @@
-import { BreakpointsOptions, experimental_sx, SxProps, Theme, ThemeOptions } from '@mui/material'
+import { BreakpointsOptions, experimental_sx, SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
 
 import { SetRequired } from 'type-fest'

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Button, ButtonProps } from '@mui/material'
 import React, { FormEvent } from 'react'
 import { extendableComponent } from '../Styles'