import React from 'react' ; import * as bumbag from 'bumbag' ; import CapsizeExample from '../components/CapsizeExample' ; import SlugHeading from '../components/SlugHeading' ; import LiveCode from '../components/Live/LiveCode' ; import Theme from '../components/Theme' ; import PaletteColor from '../components/PaletteColor' ; export default function useDocsComponents ( { platform } ) { const { colorMode } = bumbag . useColorMode ( ) ; const components = React . useMemo ( ( ) => ( { ... bumbag , CapsizeExample , PaletteColor , Theme : ( props ) => < Theme { ... props } / > , a : ( props ) => < bumbag . Link { ... props } / > , blockquote : ( props ) => ( < bumbag . Blockquote backgroundColor = { colorMode === 'dark' ? 'primaryShade' : 'primaryTint' } borderColor = "primary" marginTop = "major-2" marginBottom = "major-2" { ... props } / > ) , code : ( props ) => < bumbag . Code { ... props } />, inlineCode : ( props ) => ( < bumbag . Code fontSize = "15px" { ... props } backgroundColor = "transparent" palette = "primary" / > ) , h1 : ( props ) => ( < SlugHeading marginTop = "major-2" marginBottom = "major-6" fontWeight = "800" letterSpacing = "300" { ... props } />), h2 : ( props ) => ( < SlugHeading use = "h2" fontSize = "500" marginTop = "major-6" marginBottom = "major-4" fontWeight = "800" letterSpacing = "300" { ... props } />), h3 : ( props ) => ( < SlugHeading fontSize = "400" use = "h3" marginTop = "major-6" marginBottom = "major-4" fontWeight = "700" letterSpacing = "300" { ... props } />), h4 : ( props ) => < SlugHeading fontSize = "300" use = "h4" marginTop = "major-6" marginBottom = "major-4" { ... props } />, h5 : ( props ) => < bumbag . Heading use = "h5" marginTop = "major-6" marginBottom = "major-4" { ... props } />, h6 : ( props ) => < bumbag . Heading use = "h6" marginTop = "major-6" marginBottom = "major-4" { ... props } />, p : ( props ) => ( < bumbag . Paragraph { ... props } color = "text200" lineHeight = "300" fontSize = "17px" overrides = { { Paragraph : { styles : { base : bumbag . css `
                &:not(:last-child) {
                  margin-bottom: 1.75rem;
                }
              ` , } , } , } } />), ul : ( props ) => ( < bumbag . List listStyleType = "disc" listStylePosition = "outside" marginLeft = "major-4" marginBottom = "major-4" marginTop = "-0.5rem" { ... props } />), ol : ( props ) => ( < bumbag . List listStyleType = "decimal" listStylePosition = "outside" marginLeft = "major-4" marginBottom = "major-4" marginTop = "-0.5rem" { ... props } />), li : ( props ) => < bumbag . ListItem marginBottom = "major-1" { ... props } />, strong : ( props ) => < bumbag . Text fontWeight = "semibold" { ... props } />, pre : ( props ) => < LiveCode platform = { platform } { ... props . children . props } />, table : ( props ) => < bumbag . Table marginBottom = "major-4" marginTop = "major-4" { ... props } />, th : ( props ) => < bumbag . Table . HeadCell { ... props } / > , tr : ( props ) => < bumbag . Table . Row { ... props } / > , td : ( props ) => < bumbag . Table . Cell { ... props } / > , tbody : ( props ) => < bumbag . Table . Body { ... props } / > , thead : ( props ) => < bumbag . Table . Head { ... props } / > , } ) , [ colorMode , platform ] ) ; return { components } ; }