How to use the @mdx-js/tag/dist/mdx-provider.withMDXComponents function in @mdx-js/tag

}

  return (
    
  );
};

// tslint:disable-next-line:no-unsafe-any - mdx-tag
export const ForwardRefAsExoticComponentDoc = withMDXComponents(
  BaseForwardRefAsExoticComponentDoc,
);

)) }
                      
                    
                  
                
              ) }
            
          ) }
        
      
    )
  }
}

// This component is not rendered, but used as placeholding.
export const Annotation = withMDXComponents(({ children, ...props }) =>
  typeof children === 'function' ? children(props) : children || null
)

Annotation.displayName = 'Annotation'

export default memo(withMDXComponents(AnnotatedCode))

}) => {
  const componentFeaturesProps = { asType, customize, docPath };

  return (
    
      <title size="{4}">
        {name}
      </title>
      
      
    
  );
};

// tslint:disable-next-line:no-unsafe-any - mdx-tag
export const ComponentDoc = withMDXComponents(BaseComponentDoc);

export type ForwardRefAsExoticComponentDoc = {
  // tslint:disable-next-line:no-any
  component: ForwardRefAsExoticComponent;
  components: BaseSimplePropsTableProps["components"];
  customize: BaseComponentDocProps["customize"];
  docPath?: ComponentFeaturesProps["docPath"];
  props: BaseSimplePropsTableProps["props"];
};

const BaseForwardRefAsExoticComponentDoc: React.FC&lt;
  ForwardRefAsExoticComponentDoc
&gt; = ({ component, components, customize, docPath, props }) =&gt; {
  const asType = component.defaultProps.as as React.ReactType;
  const asTypeString =
    typeof asType === "string"

) }
        
      
    )
  }
}

// This component is not rendered, but used as placeholding.
export const Annotation = withMDXComponents(({ children, ...props }) =>
  typeof children === 'function' ? children(props) : children || null
)

Annotation.displayName = 'Annotation'

export default memo(withMDXComponents(AnnotatedCode))

private readonly renderRow = (name: string, propDoc: PropDoc) => {
    return (
      
        {this.renderCellName(name)}
        {this.renderCellType(propDoc.typeName, propDoc.typeTip)}
        {this.renderCellRequired(propDoc.required)}
        {this.renderCellDefaultValue(propDoc.defaultValue)}
        {this.renderCellDescription(propDoc.description)}
      
    );
  };
}

// tslint:disable-next-line: no-unsafe-any
export const SimplePropsTable = withMDXComponents(BaseSimplePropsTable);

import React from 'react'
import {
  LiveProvider,
  LivePreview,
  LiveEditor,
  LiveError
} from 'react-live'
import { MDXProvider } from '@mdx-js/tag'
import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
export { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'

export const LiveCode = withMDXComponents(({
  previewStyle = {},
  editorStyle = {},
  errorStyle = {},
  previewProps = {},
  editorProps = {},
  errorProps = {},
  components,
  scope,
  ...props
}) =>

import React from 'react'
import {
  LiveProvider,
  LivePreview,
  LiveEditor,
  LiveError
} from 'react-live'
import { MDXProvider } from '@mdx-js/tag'
import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
export { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'

export const LiveCode = withMDXComponents(({
  previewStyle = {},
  editorStyle = {},
  errorStyle = {},
  previewProps = {},
  editorProps = {},
  errorProps = {},
  components,
  scope,
  ...props
}) =>

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'

const Context = React.createContext()

export const DocsProvider = withRouter(withMDXComponents(class extends React.Component {
  static propTypes = {
    routes: PropTypes.array.isRequired,
    location: PropTypes.object.isRequired,
  }

  render () {
    const { children, ...props } = this.props

    const route = props.routes.find(route => route.path === props.location.pathname)

    const context = {
      ...props,
      route
    }

    return (

return 
}

type ProviderProps = Pick>
const AnnotationsProvider: React.SFC = props => (
  <>
    {state.get(({ metadata }) => {
      const annotations = get('annotations', metadata)
      return annotations ? (
        
      ) : null
    })}
  
)

export const Annotations = withMDXComponents(AnnotationsProvider)

margin: 0;
  background-color: ${palette('danger')};
  color: ${palette('dangerInverted')};
  overflow-x: auto;
`;
const LivePreview = styled(_LivePreview)`
  padding: 1.5em;
`;
const LiveProvider = styled(_LiveProvider)`
  border: 1px solid ${palette('white700')};
  border-radius: 2;
  margin-top: 1em;
  margin-bottom: 1em;
`;

export const LiveCode = withMDXComponents(({ components, scope, ...props }) => {
  const [code, setCode] = React.useState(props.code);

  const playroomUrl = React.useMemo(() => {
    return `/playroom/#?code=${code ? base64url.encode(code) : ''}`;
  }, [code]);

  function handleClickPlayroom() {
    window.open(playroomUrl, '_blank');
  }

  return (