import * as React from 'react' ; import { MDXProvider } from '@mdx-js/react' ; import { styled } from '@twilio-paste/styling-library' ; import { Anchor , isExternalUrl } from '@twilio-paste/anchor' ; import type { AnchorProps } from '@twilio-paste/anchor' ; import { Box } from '@twilio-paste/box' ; import { Heading } from '@twilio-paste/heading' ; import type { HeadingProps } from '@twilio-paste/heading' ; import { Paragraph } from '@twilio-paste/paragraph' ; import { OrderedList , UnorderedList , ListItem } from '@twilio-paste/list' ; import { Separator } from '@twilio-paste/separator' ; import type { SeparatorProps } from '@twilio-paste/separator' ; import { Table , THead , TBody , TFoot , Tr , Th , Td } from '@twilio-paste/table' ; import { Codeblock } from '../codeblock' ; import type { CodeblockProps } from '../codeblock' ; import { AnchoredHeading } from '../Heading' ; import { InlineCode , Pre } from '../Typography' ; import { ComponentHeader } from '../shortcodes/component-header' ; import { NormalizePatternHeader } from '../shortcodes/normalize-pattern-header' ; import { LivePreview } from '../shortcodes/live-preview' ; import { TableOfContents } from '../shortcodes/table-of-contents' ; import { PageAside } from '../shortcodes/PageAside' ; import { ChangelogRevealer } from '../shortcodes/ChangelogRevealer' ; import { ArticleHeader } from '../shortcodes/ArticleHeader' ; import { ArticleContent , ArticleAside } from '../shortcodes/ArticleLayouts' ; import { NormalizeComponentHeader } from '../shortcodes/normalize-component-header' ; interface PasteMDXProviderProps { children ? : React . ReactElement ; } const StyledSup = styled . sup `
  vertical-align: baseline;
  position: relative;
  top: -0.4rem;
` ; const MdxLink = ( props ) => { return < Anchor { ... props } showExternal = { isExternalUrl ( props . href ) } / > ; } ; const shortcodes = { ChangelogRevealer , ComponentHeader , LivePreview , PageAside , NormalizePatternHeader , TableOfContents , ArticleHeader , ArticleContent , ArticleAside , NormalizeComponentHeader , } ; const MDXPoviderComponents = { ... shortcodes , h1 : ( props ) : React . ReactElement => < Heading { ... props } as = "h1" variant = "heading10" / > , h2 : ( props ) : React . ReactElement => < AnchoredHeading { ... props } as = "h2" variant = "heading20" / > , h3 : ( props ) : React . ReactElement => < AnchoredHeading { ... props } as = "h3" variant = "heading30" / > , h4 : ( props ) : React . ReactElement => < AnchoredHeading { ... props } as = "h4" variant = "heading40" / > , h5 : ( props ) : React . ReactElement => < AnchoredHeading { ... props } as = "h5" variant = "heading50" / > , h6 : ( props ) : React . ReactElement => < AnchoredHeading { ... props } as = "h6" variant = "heading60" / > , p : ( props ) : React . ReactElement => < Paragraph { ... props } / > , ul : ( props ) : React . ReactElement => < UnorderedList { ... props } / > , ol : ( props ) : React . ReactElement => < OrderedList { ... props } / > , li : ( props ) : React . ReactElement => < ListItem { ... props } / > , blockquote : ( props ) : React . ReactElement => < blockquote { ... props } / > , table : ( props ) : React . ReactElement => ( < Box marginBottom = "space60" > < Table tableLayout = "fixed" { ... props } / > < /Box>), thead : ( props ) : React . ReactElement => < THead { ... props } / > , tbody : ( props ) : React . ReactElement => < TBody { ... props } / > , tfoot : ( props ) : React . ReactElement => < TFoot { ... props } / > , tr : ( props ) : React . ReactElement => < Tr { ... props } / > , th : ( props ) : React . ReactElement => < Th { ... props } / > , td : ( props ) : React . ReactElement => < Td { ... props } / > , pre : ( props ) : React . ReactElement => < Pre { ... props } / > , code : ( props ) : React . ReactElement => < Codeblock { ... props } / > , inlineCode : ( props ) : React . ReactElement => < InlineCode { ... props } / > , em : ( props ) : React . ReactElement => < em { ... props } / > , strong : ( props ) : React . ReactElement => < strong { ... props } / > , del : ( props ) : React . ReactElement => < del { ... props } / > , hr : ( props ) : React . ReactElement => ( < Separator { ... props } orientation = "horizontal" verticalSpacing = "space100" / > ) , a : ( props ) : React . ReactElement => < MdxLink { ... props } / > , img : ( props ) : React . ReactElement => < img { ... props } / > , sup : ( props ) : React . ReactElement => < StyledSup { ... props } / > , content : ( props ) : React . ReactElement => ( < Box as = "div" maxWidth = "size70" minWidth = "0" { ... props } />), contentwrapper : ( props ) : React . ReactElement => ( < Box as = "div" display = { [ 'block' , 'block' , 'flex' ] } { ... props } />), } ; interface PasteMDXProviderProps { componentOverrides ? : { [ key ] : ( props : unknown ) => React . ReactNode ; } ; } export const PasteMDXProvider = ( { componentOverrides , children , } ) : React . ReactElement => { const components = componentOverrides != null ? { ... MDXPoviderComponents , ... componentOverrides } : MDXPoviderComponents ; return < MDXProvider components = { components } > { children } < /MDXProvider>; } ;