<commit_before>// @flow weak

import React, { Component, PropTypes } from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import shallowEqual from 'recompose/shallowEqual';
import customPropTypes from 'material-ui/utils/customPropTypes';
import IconButton from 'material-ui/IconButton';
import Collapse from 'material-ui/transitions/Collapse';
import CodeIcon from 'material-ui/svg-icons/code';
import MarkdownElement from 'docs/site/src/components/MarkdownElement';

const requireDemos = require.context('docs/site/src', true, /\.js$/);
const requireDemoSource = require.context('!raw!docs/site/src', true, /\.js$/);

const styleSheet = createStyleSheet('Demo', (theme) => {
  const { palette, mixins } = theme;
  return {
    root: {
      position: 'relative',
      backgroundColor: palette.background.contentFrame,
      marginBottom: 40,
      marginLeft: -16,
      marginRight: -16,
    },
    demo: mixins.gutters({
      display: 'flex',
      justifyContent: 'center',
      paddingTop: 20,
      paddingBottom: 20,
    }),
    codeButton: {
      display: 'none',
      zIndex: 10,
      position: 'absolute',
      top: 2,
      right: 7,
    },
    code: {
      display: 'none',
      padding: 0,
      margin: 0,
      '& pre': {
        overflow: 'auto',
        margin: '0px !important',
        borderRadius: '0px !important',
      },
    },
    [theme.breakpoints.up(600)]: {
      codeButton: {
        display: 'block',
      },
      code: {<commit_msg>remove display flex from demo component<commit_after>// @flow weak

import React, { Component, PropTypes } from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import shallowEqual from 'recompose/shallowEqual';
import customPropTypes from 'material-ui/utils/customPropTypes';
import IconButton from 'material-ui/IconButton';
import Collapse from 'material-ui/transitions/Collapse';
import CodeIcon from 'material-ui/svg-icons/code';
import MarkdownElement from 'docs/site/src/components/MarkdownElement';

const requireDemos = require.context('docs/site/src', true, /\.js$/);
const requireDemoSource = require.context('!raw!docs/site/src', true, /\.js$/);

const styleSheet = createStyleSheet('Demo', (theme) => {
  const { palette, mixins } = theme;
  return {
    root: {
      position: 'relative',
      backgroundColor: palette.background.contentFrame,
      marginBottom: 40,
      marginLeft: -16,
      marginRight: -16,
    },
    demo: mixins.gutters({
      justifyContent: 'center',
      paddingTop: 20,
      paddingBottom: 20,
    }),
    codeButton: {
      display: 'none',
      zIndex: 10,
      position: 'absolute',
      top: 2,
      right: 7,
    },
    code: {
      display: 'none',
      padding: 0,
      margin: 0,
      '& pre': {
        overflow: 'auto',
        margin: '0px !important',
        borderRadius: '0px !important',
      },
    },
    [theme.breakpoints.up(600)]: {
      codeButton: {
        display: 'block',
      },
      code: {
{'fraction_non_alphanumeric': 0.14127887512554402, 'fraction_numerical': 0.014060930699698694, 'mean_word_length': 2.9007832898172325, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6252678', 'n_tokens_mistral': 959, 'n_tokens_neox': 912, 'n_words': 221}