diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index dbf0a29314..904164e5da 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -2,16 +2,16 @@ import * as _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router'
-import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
 import * as copyToClipboard from 'copy-to-clipboard'
+import SourceRender from 'react-source-render'
 import { Divider, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
 import { Provider, themes } from '@stardust-ui/react'
 
 import { examplePathToHash, getFormattedHash, knobsContext, scrollToAnchor } from 'docs/src/utils'
-import evalTypeScript from 'docs/src/utils/evalTypeScript'
 import { callable, doesNodeContainClick, pxToRem, constants } from 'src/lib'
 import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
+import { babelConfig, importResolver } from 'docs/src/components/Playground/renderConfig'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
 import ContributionPrompt from '../ContributionPrompt'
@@ -31,14 +31,10 @@ interface ComponentExampleState {
   knobs: Object
   themeName: string
   componentVariables: Object
-  exampleElement?: JSX.Element
-  handleMouseLeave?: () => void
-  handleMouseMove?: () => void
+  handleMouseLeave: () => void
+  handleMouseMove: () => void
   sourceCode: string
-  markup: string
-  error?: string
   showCode: boolean
-  showHTML: boolean
   showRtl: boolean
   showTransparent: boolean
   showVariables: boolean
@@ -67,14 +63,14 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private kebabExamplePath: string
   private KnobsComponent: any
 
-  public state: ComponentExampleState = {
+  state = {
     knobs: {},
     themeName: 'teams',
     componentVariables: {},
+    handleMouseLeave: _.noop,
+    handleMouseMove: _.noop,
     sourceCode: '',
-    markup: '',
     showCode: false,
-    showHTML: false,
     showRtl: false,
     showTransparent: false,
     showVariables: false,
@@ -101,16 +97,12 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const { examplePath } = this.props
     this.sourceCodeMgr = new SourceCodeManager(examplePath)
     this.anchorName = examplePathToHash(examplePath)
-    const exampleElement = this.renderExampleFromCode(this.sourceCodeMgr.currentCode)
 
     this.setState({
-      exampleElement,
       handleMouseLeave: this.handleMouseLeave,
       handleMouseMove: this.handleMouseMove,
       showCode: this.isActiveHash(),
-      showHTML: false,
       sourceCode: this.sourceCodeMgr.currentCode,
-      markup: renderToStaticMarkup(exampleElement),
     })
   }
 
@@ -125,23 +117,22 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     }
     const { themeName } = nextProps
     if (this.state.themeName !== themeName) {
-      this.setState({ themeName }, this.renderSourceCode)
+      this.setState({ themeName })
     }
   }
 
   private clearActiveState = () => {
     this.setState({
       showCode: false,
-      showHTML: false,
       showRtl: false,
       showVariables: false,
     })
   }
 
   private isActiveState = () => {
-    const { showCode, showHTML, showVariables } = this.state
+    const { showCode, showVariables } = this.state
 
-    return showCode || showHTML || showVariables
+    return showCode || showVariables
   }
 
   private isActiveHash = () => this.anchorName === getFormattedHash(this.props.location.hash)
@@ -203,26 +194,10 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     }
   }
 
-  handleShowHTML = (shouldShowHTML: boolean) => {
-    if (shouldShowHTML !== this.state.showHTML) {
-      this.setState({ showHTML: shouldShowHTML }, this.updateHash)
-    }
-  }
-
-  handleShowHTMLInactive = (e: Event) => {
-    if (this.clickedOutsideComponent(e)) {
-      this.handleShowHTML(false)
-    }
-  }
-
   private handleShowRtlClick = e => {
     e.preventDefault()
 
-    const { showRtl } = this.state
-
-    this.setState({ showRtl: !showRtl }, () => {
-      this.renderSourceCode()
-    })
+    this.setState(prevState => ({ showRtl: !prevState.showRtl }))
   }
 
   private handleShowCodeClick = e => {
@@ -278,13 +253,28 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
   private hasKnobs = () => _.includes(knobsContext.keys(), this.getKnobsFilename())
 
-  private setErrorDebounced = _.debounce(error => {
-    this.setState({ error })
-  }, 800)
+  private renderExampleFromCode = (): JSX.Element => {
+    const { sourceCode } = this.state
+
+    if (sourceCode == null) {
+      return this.renderMissingExample()
+    }
 
-  private renderExampleFromCode = (code: string): JSX.Element => {
-    const Example = code != null ? evalTypeScript(code) : this.renderMissingExample()
-    return _.isFunction(Example) ? this.renderWithProvider(Example) : Example
+    const { showRtl, componentVariables, themeName } = this.state
+    const theme = themes[themeName]
+
+    const newTheme: ThemeInput = {
+      componentVariables: mergeThemeVariables(theme.componentVariables, {
+        [this.getDisplayName()]: componentVariables,
+      }),
+      rtl: showRtl,
+    }
+
+    return (
+      <Provider theme={newTheme}>
+        <SourceRender.Consumer>{({ element }) => element}</SourceRender.Consumer>
+      </Provider>
+    )
   }
 
   private renderMissingExample = (): JSX.Element => {
@@ -297,40 +287,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     )
   }
 
-  private renderSourceCode = _.debounce(() => {
-    try {
-      const exampleElement = this.renderExampleFromCode(this.state.sourceCode)
-
-      if (!React.isValidElement(exampleElement)) {
-        this.setErrorDebounced(
-          `Default export is not a valid React element. Check the example syntax.`,
-        )
-      } else {
-        // immediately render a null error
-        // but also ensure the last debounced error call is a null error
-        const error = undefined
-        this.setErrorDebounced(error)
-        this.setState({
-          error,
-          exampleElement,
-          markup: renderToStaticMarkup(exampleElement),
-        })
-      }
-    } catch (err) {
-      this.setErrorDebounced(err.message)
-    }
-  }, 250)
-
   private handleKnobChange = knobs => {
-    this.setState(
-      prevState => ({
-        knobs: {
-          ...prevState.knobs,
-          ...knobs,
-        },
-      }),
-      this.renderSourceCode,
-    )
+    this.setState(prevState => ({
+      knobs: {
+        ...prevState.knobs,
+        ...knobs,
+      },
+    }))
   }
 
   private getKnobsComponent = () => {
@@ -357,31 +320,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
   private getDisplayName = () => this.props.examplePath.split('/')[1]
 
-  private renderWithProvider(ExampleComponent) {
-    const { showRtl, componentVariables, themeName } = this.state
-    const theme = themes[themeName]
-
-    const newTheme: ThemeInput = {
-      componentVariables: mergeThemeVariables(theme.componentVariables, {
-        [this.getDisplayName()]: componentVariables,
-      }),
-      rtl: showRtl,
-    }
-
-    return (
-      <Provider theme={newTheme}>
-        <ExampleComponent knobs={this.getKnobsValue()} />
-      </Provider>
-    )
-  }
-
   private handleChangeCode = (sourceCode: string) => {
     this.sourceCodeMgr.currentCode = sourceCode
     this.updateAndRenderSourceCode()
   }
 
   private updateAndRenderSourceCode = () => {
-    this.setState({ sourceCode: this.sourceCodeMgr.currentCode }, this.renderSourceCode)
+    this.setState({ sourceCode: this.sourceCodeMgr.currentCode })
   }
 
   private setApiCodeType = (codeType: SourceCodeType) => {
@@ -494,51 +439,58 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   }
 
   private renderError = () => {
-    const { error } = this.state
-
-    if (!error) return null
-
     return (
-      <Segment size="small" color="red" basic inverted padded secondary>
-        <pre>{error}</pre>
-      </Segment>
+      <SourceRender.Consumer>
+        {({ error }) =>
+          error && (
+            <Segment size="small" color="red" basic inverted padded secondary>
+              <pre>{error.toString()}</pre>
+            </Segment>
+          )
+        }
+      </SourceRender.Consumer>
     )
   }
 
   private renderHTML = () => {
-    const { error, showCode, markup } = this.state
-    if (error || !showCode) return null
-
-    // add new lines between almost all adjacent elements
-    // moves inline elements to their own line
-    const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span|option)/g, '>\n<')
-
-    const beautifiedHTML = html(preFormattedHTML, {
-      indent_size: 2,
-      indent_char: ' ',
-      wrap_attributes: 'auto',
-      wrap_attributes_indent_size: 2,
-      end_with_newline: false,
-    })
+    const { showCode } = this.state
+    if (!showCode) return null
 
     return (
-      <div>
-        <Divider inverted horizontal>
-          <span style={{ opacity: 0.5 }}>HTML</span>
-        </Divider>
-        <div style={{ padding: '1rem', filter: 'grayscale()' } as React.CSSProperties}>
-          <Editor
-            mode="html"
-            showGutter={false}
-            showCursor={false}
-            readOnly
-            highlightActiveLine={false}
-            id={`${this.getKebabExamplePath()}-html`}
-            onOutsideClick={this.handleShowHTMLInactive}
-            value={beautifiedHTML}
-          />
-        </div>
-      </div>
+      <SourceRender.Consumer>
+        {({ markup }) => {
+          // add new lines between almost all adjacent elements
+          // moves inline elements to their own line
+          const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span)/g, '>\n<')
+
+          const beautifiedHTML = html(preFormattedHTML, {
+            indent_size: 2,
+            indent_char: ' ',
+            wrap_attributes: 'auto',
+            wrap_attributes_indent_size: 2,
+            end_with_newline: false,
+          })
+
+          return (
+            <div>
+              <Divider inverted horizontal>
+                <span style={{ opacity: 0.5 }}>HTML</span>
+              </Divider>
+              <div style={{ padding: '1rem', filter: 'grayscale()' } as React.CSSProperties}>
+                <Editor
+                  mode="html"
+                  showGutter={false}
+                  showCursor={false}
+                  readOnly
+                  highlightActiveLine={false}
+                  id={`${this.getKebabExamplePath()}-html`}
+                  value={beautifiedHTML}
+                />
+              </div>
+            </div>
+          )
+        }}
+      </SourceRender.Consumer>
     )
   }
 
@@ -596,15 +548,12 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   }
 
   private handleVariableChange = (component, variable) => (e, { value }) => {
-    this.setState(
-      state => ({
-        componentVariables: {
-          ...state.componentVariables,
-          [variable]: value,
-        },
-      }),
-      this.renderSourceCode,
-    )
+    this.setState(state => ({
+      componentVariables: {
+        ...state.componentVariables,
+        [variable]: value,
+      },
+    }))
   }
 
   public render() {
@@ -612,13 +561,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const {
       handleMouseLeave,
       handleMouseMove,
-      exampleElement,
       isHovering,
+      knobs,
       showCode,
-      showHTML,
       showRtl,
       showTransparent,
       showVariables,
+      sourceCode,
     } = this.state
 
     const isActive = this.isActiveHash() || this.isActiveState()
@@ -639,8 +588,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
           }),
     }
 
-    const knobs = this.renderKnobs()
-
     return (
       <Visibility
         once={false}
@@ -671,7 +618,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                   onShowVariables={this.handleShowVariablesClick}
                   onShowTransparent={this.handleShowTransparentClick}
                   showCode={showCode}
-                  showHTML={showHTML}
                   showRtl={showRtl}
                   showTransparent={showTransparent}
                   showVariables={showVariables}
@@ -679,7 +625,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                 />
               </div>
             </div>
-            {knobs}
+            {this.renderKnobs()}
           </Grid.Column>
 
           {children && (
@@ -688,35 +634,43 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
             </Grid.Column>
           )}
 
-          <Provider.Consumer
-            render={({ siteVariables }) => {
-              return (
-                <Grid.Column
-                  width={16}
-                  dir={showRtl ? 'rtl' : undefined}
-                  className={`rendered-example ${this.getKebabExamplePath()}`}
-                  style={{
-                    padding: '2rem',
-                    color: siteVariables.bodyColor,
-                    backgroundColor: siteVariables.bodyBackground,
-                    ...(showTransparent && {
-                      backgroundImage:
-                        'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
-                      backgroundRepeat: 'repeat',
-                    }),
-                  }}
-                >
-                  {exampleElement}
-                </Grid.Column>
-              )
-            }}
-          />
-          <Grid.Column width={16} style={{ padding: 0, background: EDITOR_BACKGROUND_COLOR }}>
-            {this.renderJSX()}
-            {this.renderError()}
-            {this.renderHTML()}
-            {this.renderVariables()}
-          </Grid.Column>
+          <SourceRender
+            babelConfig={babelConfig}
+            knobs={knobs}
+            source={sourceCode}
+            renderHtml={showCode}
+            resolver={importResolver}
+          >
+            <Provider.Consumer
+              render={({ siteVariables }) => {
+                return (
+                  <Grid.Column
+                    width={16}
+                    dir={showRtl ? 'rtl' : undefined}
+                    className={`rendered-example ${this.getKebabExamplePath()}`}
+                    style={{
+                      padding: '2rem',
+                      color: siteVariables.bodyColor,
+                      backgroundColor: siteVariables.bodyBackground,
+                      ...(showTransparent && {
+                        backgroundImage:
+                          'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
+                        backgroundRepeat: 'repeat',
+                      }),
+                    }}
+                  >
+                    {this.renderExampleFromCode()}
+                  </Grid.Column>
+                )
+              }}
+            />
+            <Grid.Column width={16} style={{ padding: 0, background: EDITOR_BACKGROUND_COLOR }}>
+              {this.renderJSX()}
+              {this.renderError()}
+              {this.renderHTML()}
+              {this.renderVariables()}
+            </Grid.Column>
+          </SourceRender>
         </Grid>
         <Divider section horizontal />
       </Visibility>
diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts
new file mode 100644
index 0000000000..c816b88ecf
--- /dev/null
+++ b/docs/src/components/Playground/renderConfig.ts
@@ -0,0 +1,25 @@
+import * as _ from 'lodash'
+import * as React from 'react'
+import * as Stardust from '@stardust-ui/react'
+
+export const babelConfig = {
+  plugins: ['proposal-class-properties', ['transform-typescript', { isTSX: true }]],
+  presets: [
+    [
+      'env',
+      {
+        targets: {
+          browsers: ['last 4 versions', 'not dead'],
+        },
+      },
+    ],
+  ],
+}
+
+const imports = {
+  '@stardust-ui/react': Stardust,
+  lodash: _,
+  react: React,
+}
+
+export const importResolver = importName => imports[importName]
diff --git a/docs/src/index.ejs b/docs/src/index.ejs
index e5f209d11f..8cba2cc46f 100644
--- a/docs/src/index.ejs
+++ b/docs/src/index.ejs
@@ -33,6 +33,10 @@
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/umd/react<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom-server.browser<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@babel/preset-env-standalone@7/babel-preset-env.js"></script>
+
   <style>
     html, body {
       background: #f7f7f7;
diff --git a/docs/src/utils/evalTypeScript.ts b/docs/src/utils/evalTypeScript.ts
deleted file mode 100644
index 8242575f4d..0000000000
--- a/docs/src/utils/evalTypeScript.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import * as Stardust from '@stardust-ui/react'
-import * as _ from 'lodash'
-import * as ts from 'typescript'
-
-/**
- * Converts import statement to expression by converting the module name in
- * upper snake case and declaring variables for the named bindings. The relative
- * imports have special converting strategy.
- *
- * import * as React from "react"; => const React = REACT;
- * import { Component1, Component2 } from "module"; => const {Component1, Component2} = MODULE;
- */
-export const convertImportStatementToExpression = (node: ts.ImportDeclaration) => {
-  const MODULE = _.snakeCase((node.moduleSpecifier as ts.Identifier).text).toUpperCase()
-  return _.cond([
-    // import * as React from 'react' => const React = REACT
-    [
-      ts.isNamespaceImport,
-      (namedBindings: ts.NamespaceImport) => {
-        return `\nconst ${namedBindings.name.escapedText} = ${MODULE};\n`
-      },
-    ],
-
-    // import { Component1, Component2 } from "module"; => const {Component1, Component2} = MODULE;
-    [
-      ts.isNamedImports,
-      (namedBindings: ts.NamedImports) => {
-        const imports = namedBindings.elements.map(item => item.name.escapedText)
-        return `const {${imports.join()}} = ${MODULE};\n`
-      },
-    ],
-  ])(node.importClause!.namedBindings)
-}
-
-/**
- * Transpiles TypeScript to executable JavaScript.
- */
-const transpileTypeScript = (sourceCode): string => {
-  // TODO(zuko): remove this once we get rid of synthetic default imports
-  sourceCode = sourceCode.replace(/import (\w+)/g, 'import * as $1') // tslint:disable-line
-
-  const inMemorySourceFile = ts.createSourceFile(
-    'example.ts',
-    sourceCode,
-    ts.ScriptTarget.Latest,
-    false,
-  )
-
-  let transformedCode = sourceCode
-  ts.forEachChild(inMemorySourceFile, (node: ts.Node) => {
-    let replacementCode
-    switch (node.kind) {
-      case ts.SyntaxKind.ImportDeclaration:
-        replacementCode = convertImportStatementToExpression(node as ts.ImportDeclaration)
-        transformedCode = transformedCode.replace(
-          sourceCode.substr(node.pos, node.end - node.pos),
-          replacementCode,
-        )
-        break
-      case ts.SyntaxKind.ExportAssignment:
-        replacementCode = `return ${(node as any).expression.escapedText}`
-        transformedCode = transformedCode.replace(
-          sourceCode.substr(node.pos, node.end - node.pos),
-          replacementCode,
-        )
-        break
-    }
-  })
-
-  const IIFE = `;(function () { ${transformedCode} })()`
-  return ts.transpile(IIFE, {
-    jsx: ts.JsxEmit.React,
-    module: ts.ModuleKind.CommonJS,
-    allowSyntheticDefaultImports: true,
-  })
-}
-
-interface ExecutionSandboxGlobals {
-  REACT: any
-  REACT_DOM: any
-  STARDUST_UI_REACT: any
-  LODASH: any
-}
-/**
- * Executes JavaScript code within our sandbox. Returns the result of the
- * last evaluated expression.
- */
-const execute = (
-  code,
-  { REACT, REACT_DOM, STARDUST_UI_REACT, LODASH }: ExecutionSandboxGlobals,
-) => {
-  return eval(code) // tslint:disable-line
-}
-
-/**
- * Evaluates TypeScript source code by transpiling it to JavaScript and then
- * executing it within our sandbox, which provides a suite of global variables.
- */
-const evalTypeScript = (sourceCode): any => {
-  const transpiledCode = transpileTypeScript(sourceCode)
-  return execute(transpiledCode, {
-    REACT: React,
-    REACT_DOM: ReactDOM,
-    STARDUST_UI_REACT: Stardust,
-    LODASH: _,
-  })
-}
-
-export default evalTypeScript
diff --git a/package.json b/package.json
index 1ed6cd97c0..82f0042c59 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "what-input": "^5.1.2"
   },
   "devDependencies": {
+    "@babel/standalone": "^7.1.0",
     "@types/classnames": "^2.2.4",
     "@types/enzyme": "^3.1.14",
     "@types/faker": "^4.1.3",
@@ -131,6 +132,7 @@
     "react-hot-loader": "^4.1.3",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
+    "react-source-render": "^2.0.0-beta.3",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.1",
     "satisfied": "^1.1.1",
diff --git a/webpack.config.ts b/webpack.config.ts
index 8862a1724c..f3d399d645 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -25,6 +25,7 @@ const webpackConfig: any = {
   },
   devtool: config.compiler_devtool,
   externals: {
+    '@babel/standalone': 'Babel',
     'anchor-js': 'AnchorJS',
     'prop-types': 'PropTypes',
     react: 'React',
diff --git a/yarn.lock b/yarn.lock
index 96e94051b4..89978b2054 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,6 +34,11 @@
     core-js "^2.5.7"
     regenerator-runtime "^0.12.0"
 
+"@babel/standalone@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.1.0.tgz#d79774a17e8df4a53def891864882f5d81c42001"
+  integrity sha512-3yROQ+PlAAi2uf3Crpdl11hhrYDQ6af+uNmrpLn26WTSdGkOubMXvJKKmHMmiSm2MlOUVrqyotudpQS3hL9UBg==
+
 "@fimbul/bifrost@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@fimbul/bifrost/-/bifrost-0.15.0.tgz#f3a48dee3046681e926c1f970f0b1a67e29e088e"
@@ -2363,6 +2368,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 default-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
@@ -3300,6 +3310,11 @@ fast-loops@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.0.1.tgz#a3d33e71654a7e6e67d7c2de0fee4ea11c6f2526"
   integrity sha512-1MA7cT6Q/o1JnhyNCcxuBqZHeIHf784ZjyjayZwwj7X7nRDkCS2qoj6vUh961yxEJP1aldrYrY7+DC/xOdv05A==
 
+fast-memoize@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.1.tgz#c3519241e80552ce395e1a32dcdde8d1fd680f5d"
+  integrity sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g==
+
 fb-watchman@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
@@ -8218,7 +8233,7 @@ react-is@^16.4.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
   integrity sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==
 
-react-is@^16.6.1:
+react-is@^16.6.1, react-is@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
   integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
@@ -8273,6 +8288,16 @@ react-side-effect@^1.0.2:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-source-render@^2.0.0-beta.3:
+  version "2.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-2.0.0-beta.3.tgz#9a871c7a5cfd50f994a3b96315e0e46c427df09a"
+  integrity sha512-mYip/OnYs1e2DEjR7TkRpBRkotjpGL40D3ZvlExYlzKZVMIgveYpzdZKzzBESiXHB9e1GHELBbKPUlU8zx8kIQ==
+  dependencies:
+    deepmerge "^2.2.1"
+    fast-memoize "^2.5.1"
+    prop-types "^15.6.2"
+    react-is "^16.6.3"
+
 react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"