<repo_name>ns1/ns1-gui<file_sep>/components/navbar/index.js
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

export class NavBar extends React.Component {

  static propTypes = {
    className: PropTypes.string,
    // <a href="#/"><img src="assets/ns1@2x.png" /></a>
    left: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.bool]),
    children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.bool]),
    right: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.bool]),
    leftClassName: PropTypes.string,
    rightClassName: PropTypes.string,
    stickyTop: PropTypes.bool
  };

  static defaultProps = {
    className: '',
    leftClassName: 'logo',
    rightClassName: 'nav-right self-center',
    stickyTop: false
  };

  constructor(props) {
    super(props);
    this.state = {
      sticky: false
    };
    this.handleScroll = _.debounce(this.handleScroll.bind(this), 20);
  }

  componentDidMount() {
    if (this.props.stickyTop) {
      window.addEventListener('scroll', this.handleScroll);
    }
  }

  componentWillUnmount() {
    if (this.props.stickyTop) {
      window.removeEventListener('scroll', this.handleScroll);
    }
  }

  handleScroll(event) {
    const rect = this.navbarNode.getBoundingClientRect();
    if ((!this.state.sticky && rect.top <= 0) ||
      (this.state.sticky && window.scrollY < rect.bottom)) {
      this.setState({sticky: !this.state.sticky});
      if (this.state.sticky) {
        document.body.classList.add('sticky-present');
      } else{
        document.body.classList.remove('sticky-present');
      }
    }
  }

  render() {
    const classes = `top-nav
      ${this.props.className}
      ${this.state.sticky ? 'sticky' : ''}`;
    return <div
      ref={navbar => this.navbarNode = navbar}
      className={classes}>
      <div className="bunder-container nav-container">
        <div className={this.props.leftClassName}>
          {this.props.left}
        </div>
        <ul className="nav-items">
          {this.props.children}
        </ul>
        <div className={this.props.rightClassName}>
          {this.props.right}
        </div>
      </div>
    </div>;
  }
}

export class NavItem extends React.Component {

  static propTypes = {
    className: PropTypes.string,
    active: PropTypes.bool,
    children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.bool, PropTypes.string]),
    id: PropTypes.string,
    tabIndex: PropTypes.string,
    href: PropTypes.string,
    target: PropTypes.string,
    onClick: PropTypes.func,
    noLi: PropTypes.bool
  };

  static defaultProps = {
    active: false,
    className: '',
    noLi: false
  };

  render() {
    const tagClass = `nav-item
      ${this.props.className ? this.props.className : ''}
      ${this.props.active ? 'active' : ''}`;
    const link = <a
      className="nav-item"
      tabIndex={this.props.tabIndex}
      id={this.props.id}
      href={this.props.href}
      target={this.props.target}
      onClick={this.props.onClick}
      >
      {this.props.children}
    </a>;
    const Tag = this.props.noLi ? 'div' : 'li';
    return <Tag
      className={tagClass}>
        {link}
    </Tag>;
  }
}
<file_sep>/src/demo.js
import {render} from 'react-dom';
import React from 'react';
// import TopNav from '../components/top'
import '../scss/index.scss';
import './demo.scss';
import {BigLoader, bigloaderMD, bigloaderEX} from '../components/bigLoader';
import {Checkbox, checkboxMD, checkboxEX} from '../components/checkbox';
import {Dropdown, MenuItem, dropdownMD, dropdownEX} from '../components/dropdown';
import {FormTabs, FormTab, formtabsEX, formtabsMD} from '../components/formTabs';
import {Modal, modalMD, modalEX} from '../components/modal';
import {Pagination, paginationMD, paginationEX} from '../components/pagination';
import {ProgressBar, progressbarMD, progressbarEX} from '../components/progressBar';
import {Radio, radioMD, radioEX} from '../components/radio';
import {Textarea, textareaMD, textareaEX} from '../components/textarea';
import {Toggle, toggleMD, toggleEX} from '../components/toggle';
import {Tooltip, tooltipMD, tooltipEX} from '../components/tooltip';
import {TypeAhead, typeaheadMD, typeaheadEX} from '../components/typeahead';
import {Text, textMD, textEX} from '../components/text';
import {Tabs, Tab, tabsMD, tabsEX} from '../components/tabs';
import {CleverList, cleverlistMD, cleverlistEX} from '../components/cleverList';
import {CleverButton, cleverbuttonMD, cleverbuttonEX} from '../components/cleverbutton';
import ReactMarkdown from 'react-markdown';
import installation from './installation'
import DemoBlock from './demoblock';

class Docs extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      textExample: '',
      cleverSelected: {
        someKey: 'somevalue 1',
        name: 'Example Item 1'
      }
    };
    this.hideModal = this.hideModal.bind(this);
  }
  hideModal(){
    this.setState({
      showModal: false
    });
  }
  render(){
    return <div className="bunder-container">
      <h1>NS1 GUI components</h1>
      <p>
        This is an extremely early version of a self-contained version of our GUI component library.<br/>
        We will be pushing up new components here very rapidly, and then when theres a usable subset<br/>
        published we will focus on polish, more examples, bundle size improvements, and more documentation.
      </p>
      <h1>Installation</h1>
      <ReactMarkdown source={installation} />
      <h1>Components</h1>
      <DemoBlock
          title="Bigloader"
          ex={bigloaderEX}
          doc={bigloaderMD}
          wrapStyle={{
            height: '150px', backgroundColor: 'white', position: 'relative'
          }}>
            <BigLoader
              warn={false} 
              warnText="This would be showing in the context of a warning."
              loading={true}
              loadingText="This is loading explainer text"
              noDatat={false}
              noDataText="This would be showing if there wasn't data" />
        </DemoBlock>
      <DemoBlock
          title="Checkbox"
          ex={checkboxEX}
          doc={checkboxMD}>
          <div>
            <Checkbox
              label="demo1"
              onChange={e=>this.setState({checkbox: e.currentTarget.value})}
              checked={this.state.checkbox === 'demo1'}
              value="demo1"/>
            <Checkbox
              label="demo2"
              onChange={e=>this.setState({checkbox: e.currentTarget.value})}
              checked={this.state.checkbox === 'demo2'}
              value="demo2"/>
          </div>
        </DemoBlock>
      <DemoBlock
          title="Cleverlist"
          ex={cleverlistEX}
          doc={cleverlistMD}>
          <div style={{width: '100%'}}>
            selected value: {this.state.cleverSelected.someKey}
            <CleverList
              formatting={i=>i.name}
              onSelect={i=>this.setState({cleverSelected: i})}
              interior={true}
              itemsVisible={2}
              pills={[
                (i) => `Demopill ${i.someKey}`
              ]}
              items={[{
                someKey: 'somevalue 1',
                name: 'Example Item 1'
              }, {
                someKey: 'somevalue 2',
                name: 'Example Item 2'
              }, {
                someKey: 'somevalue 3',
                name: 'Example Item 3'
              }]} 
              options={[
                {
                  icon: 'alert',
                  name: 'Demo Action',
                  onClick: (i, index, selector) => selector(index) || 
                    window.alert(JSON.stringify(i))
                },
                {
                  icon: 'folder',
                  name: 'Demo Disabled',
                  disabled: e=>true,
                  onClick: (i, index, selector) => window.alert(JSON.stringify(i))
                }
              ]}/>
          </div>
        </DemoBlock>
        <DemoBlock
          title="Dropdown"
          ex={dropdownEX}
          doc={dropdownMD}>
          <Dropdown
            onSelect={e=>this.setState({
              dropdown: e.currentTarget.value
            })}
            className="flex-half"
            label="Example Dropdown"
            defaultValue="first"
            value={this.state.dropdown}>
            <MenuItem
              value="first">First Item</MenuItem>
            <MenuItem
              value="second">Second Item</MenuItem>
          </Dropdown>
        </DemoBlock>
        <DemoBlock
          title="Form Tabs"
          ex={formtabsEX}
          doc={formtabsMD}>
          <div className="enclosure">
            <div className="body">
              <FormTabs
                headerLabel="Important Stuff: "
                defaultActiveKey={0}
                activeKey={this.state.formTabActive}
                onSelect={idx => this.setState({formTabActive: idx})}>
                <FormTab
                  label="Tab 1">
                  ... put form elements here
                </FormTab>
                <FormTab
                  label="Tab 2">
                  ... put more form elements here
                </FormTab>
              </FormTabs>
            </div>
          </div>
        </DemoBlock>

        <DemoBlock
          title="Modal"
          ex={modalEX}
          doc={modalMD}>
          <div>         
            <button
              onClick={() => this.setState({showModal: true})}
              className="button primary short inline">
                Pop Demo Modal
            </button>
            <Modal
              show={this.state.showModal}
              onHide={() => this.hideModal()}>
              <Modal.Header
                close={true}>
                <Modal.Title>Example Modal</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                  here is a modal body, you can put anything in here
              </Modal.Body>
              <Modal.Footer>
                  here is a modal footer, usually you'd put buttons here
              </Modal.Footer>
            </Modal>
          </div>
        </DemoBlock>
        <DemoBlock
          title="Pagination"
          ex={paginationEX}
          doc={paginationMD}>
            <Pagination
              next={true}
              prev={true}
              items={8}
              maxButtons={5}
              activePage={this.state.activePage || 0}
              onSelect={i=>this.setState({activePage: i})} />
        </DemoBlock>
        <DemoBlock
          title="Progress Bar"
          ex={progressbarEX}
          doc={progressbarMD}>
          <ProgressBar
            className="flex-whole"
            label='Progress'
            percent={82}
            showValue={true} />

        </DemoBlock>
        <DemoBlock
          title="Radio"
          ex={radioEX}
          doc={radioMD}>
          <div>
            <Radio
              label="Thing1"
              checked={this.state.radio === 'thing1'}
              name="first"
              onChange={e => this.setState({radio: e.currentTarget.value})}
              value="thing1" />
            <Radio
              label="Thing2"
              checked={this.state.radio === 'thing2'}
              name="second"
              onChange={e => this.setState({radio: e.currentTarget.value})}
              value="thing2" />
          </div>
        </DemoBlock>

        <DemoBlock
          title="Tabs"
          ex={tabsEX}
          doc={tabsMD}>
        <Tabs
          defaultActiveKey={0}
          activeKey={this.state.tabActive}
          onSelect={idx => {
            this.setState({tabActive: idx});
          }}
          className="interactive flex-whole">
          <Tab
            token={0}
            className="minheight"
            label="Demotab 1">
            <BigLoader
              warn={false} 
              warnText="This would be showing in the context of a warning."
              loading={true}
              loadingText="Demo Bigloader in tab"
              noDatat={false}
              noDataText="This woul"/>
          </Tab>
          <Tab
            token={1}
            className="minheight"
            label="Demotab 2">
            <BigLoader
              warn={true} 
              warnText="Demo warning in tab"
              loading={false}
              loadingText="This is loading explainer text"
              noDatat={false}
              noDataText="This woul"/>

          </Tab>
        </Tabs>
        </DemoBlock>
        <DemoBlock
          title="Text/number"
          ex={textEX}
          doc={textMD}>
          <Text
            onChange={e => {
              this.setState({textExample: e.currentTarget.value});
            }}
            label="Sample text field"
            value={this.state.textExample}
            help="example help text."
            pattern={{
              pattern: val => val % 5 === 0,
              message: 'Value should be divisible by 5'
            }}
            className="flex-half gutter-right" />
        </DemoBlock>
        <DemoBlock
          title="Textarea"
          ex={textareaEX}
          doc={textareaMD}>
          <Textarea
            onChange={(e) => this.setState({textArea: e.currentTarget.value})}
            value={this.state.textArea}
            readOnly={false}
            id="demotext"
            label="Demo Textarea"
            placeHolder="Some text"
            name="demotextarea"
            help="textareas are for longer blocks of text"
            disabled={false}
            className="foo" />
        </DemoBlock>
        <DemoBlock
          title="Toggle"
          ex={toggleEX}
          doc={toggleMD}>
          <Toggle
            label="Demo Toggle"
            checked={this.state.toggleDemo}
            onChange={e=>this.setState({toggleDemo: e.currentTarget.checked})}
            inline={true}
            labelFirst={true} />
        </DemoBlock>
        <DemoBlock
          title="Tooltip"
          ex={tooltipEX}
          doc={tooltipMD}>
          <Tooltip
            content="demo tooltip text"
            direction='top'>
              <span> Info <span className="icon info" /></span>
          </Tooltip>
        </DemoBlock>
        <DemoBlock
          title="Cleverbutton"
          ex={cleverbuttonEX}
          doc={cleverbuttonMD}>
          <CleverButton
            saving={this.state.saving}
            saved={false}
            error={false}
            text="Submit Record"
            classes="short inline"
            onClick={()=>{
              this.setState({saving: true});
              setTimeout(()=>this.setState({saving: false}), 2000)
            }} />
        </DemoBlock>
        <DemoBlock
          title="Typeahead"
          ex={typeaheadEX}
          doc={typeaheadMD}>
          typehead stub
        </DemoBlock>

    </div>;
  }
}
window.onload = () => {
  render(<Docs />, document.getElementById('app-body'));
};
<file_sep>/components/modal/modal.ex.md.js
export default `\`\`\`html
<button
  onClick={() => this.setState({showModal: true})}
  className="button primary short inline">
    Pop Demo Modal
</button>
<Modal
  show={this.state.showModal}
  onHide={() => this.hideModal()}>
  <Modal.Header
    close={true}>
    <Modal.Title>Example Modal</Modal.Title>
  </Modal.Header>
  <Modal.Body>
      here is a modal body, you can put anything in here
  </Modal.Body>
  <Modal.Footer>
      here is a modal footer, usually you'd put buttons here
  </Modal.Footer>
</Modal>
\`\`\``;
<file_sep>/components/dropdown/dropdown.md.js
export default `import dropdown and menuitem from ns1-gui
### Dropdown props
- **onSelect** *(func)* function called when user makes a selection. access selected value with e.currentTarget.value
---
### MenuItem props
- **value** *(string)* value to pass to onselect function`;
<file_sep>/components/textarea/textarea.ex.md.js
export default `\`\`\`html
<Textarea
  onChange={(e) => this.setState({textArea: e.currentTarget.value})}
  value={this.state.textArea}
  readOnly={false}
  id="demotext"
  label="Demo Textarea"
  placeHolder="Some text"
  name="demotextarea"
  help="textareas are for longer blocks of text"
  disabled={false}
  className="foo" />
\`\`\`
`;

<file_sep>/components/pagination/index.js
import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import './pagination.scss';

class PaginationComp extends React.Component {
  static propTypes = {
      /* eslint-disable react/no-deprecated */
      className: PropTypes.string,
      style: PropTypes.object,
      next: PropTypes.bool,
      prev: PropTypes.bool,
      items: PropTypes.number.isRequired,
      maxButtons: PropTypes.number,
      activePage: PropTypes.number,
      onSelect: PropTypes.func
  }
  constructor(props) {
    super(props);

    this.state = {
      currentItem: props.activePage || 1,
      items: props.items
    };
    this.buildPageItems = this.buildPageItems.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.items) {
      this.setState({items: nextProps.items});
      this.setState({currentItem: nextProps.activePage});
    }
  }
  changePage(item) {
    if (item < 1 || item > this.state.items) {
      return;
    }
    this.setState({currentItem : item});
    this.props.onSelect && this.props.onSelect(item);
  }
  showHeaderAndFooter() {
    const {maxButtons} = this.props;
    const {items} = this.state;
    let buttonRange = maxButtons;

    if (this.props.items < maxButtons) {
      return {
        showHeader: false,
        showFooter: false
      };
    }

    let showHeader = this.state.currentItem > Math.ceil(buttonRange/2);

    if (showHeader) {
      buttonRange -= 2;
    }

    let showFooter = this.state.currentItem < items - Math.floor(buttonRange/2);

    if (showFooter) {
      buttonRange -= 2;
      showHeader = this.state.currentItem > Math.ceil(buttonRange/2);
    }

    return {
      showHeader: showHeader,
      showFooter: showFooter
    };
  }
  getMaxButtons() {
    return this.props.items < this.props.maxButtons ? this.props.items : this.props.maxButtons;
  }
  getButtonRange() {
    const {showHeader, showFooter} = this.showHeaderAndFooter();

    let buttonRange = this.getMaxButtons();

    if (showHeader) {
      buttonRange -= 2;
    }

    if (showFooter) {
      buttonRange -= 2;
    }

    return buttonRange;
  }
  buildPageItems() {
    if (this.props.items < this.props.maxButtons) {
      return _.range(1, 1+this.props.items);
    }

    const {items, currentItem} = this.state;

    let buttonRange = this.getButtonRange();

    const midCeil = Math.ceil(buttonRange/2);

    let last = currentItem < midCeil ? 1 + buttonRange : currentItem + midCeil;

    if (last > items) {
      last = items+1;
    }

    const first = this.props.items < this.props.maxButtons ? 1 : last - buttonRange;

    return _.range(first, last);
  }
  render() {
    const {
      className, style, next, prev} = this.props;
    const {currentItem, items} = this.state;
    const {showHeader, showFooter} = this.showHeaderAndFooter();
    return <div
      className={`pagination ${className || ''} flex-wrap vert-middle auto`}
      style={style}>
      {/* PREV */}
      {prev && <span onClick={this.changePage.bind(this, currentItem-1)}
                className={`prev ${currentItem <= 1 ? 'no' : '' }`}>‹</span>}
      <span className='items'>
      {/* FIRST */}
      <span
        onClick={this.changePage.bind(this, 1)}
        className={`firstNumber item ${showHeader ? '' : 'hide'}`}>1</span>
      {/* ELLIPSIS */}
      <span
        className={`ellipsis ${showHeader ? '' : 'hide'}`}>...</span>
      {/* ITEMS */}
      {this.buildPageItems().map((elem) => {
          return <span
            key={elem}
            onClick={this.changePage.bind(this, elem)}
            className={`item ${elem === currentItem ? 'active' : ''}`}>{elem}</span>;
      })}
      {/* ELLIPSIS */}
      {<span
        className={`ellipsis ${showFooter ? '' : 'hide'}`}>...</span>}
      {/* LAST */}
      <span
        onClick={this.changePage.bind(this, this.state.items)}
        className={`item lastNumber ${showFooter ? '' : 'hide'}`}>{items}</span>
      </span>
      {next && <span
        onClick={this.changePage.bind(this, currentItem+1)}
        className={`next ${currentItem === items ? 'no' : '' }`}>›</span>}
    </div>;
  }
}

export default PaginationComp;
export const Pagination = PaginationComp;
export paginationEX from './pagination.ex.md.js';
export paginationMD from './pagination.md.js';
<file_sep>/components/textarea/index.js
import PropTypes from 'prop-types';
import React from 'react';
import TextareaAutosize from 'react-autosize-textarea';

class TextareaComp extends React.Component{
  static propTypes = {
    onChange: PropTypes.func,
    onKeyDown: PropTypes.func,
    value: PropTypes.string,
    readOnly: PropTypes.bool,
    id: PropTypes.string,
    label: PropTypes.string,
    placeHolder: PropTypes.string,
    name: PropTypes.string,
    key: PropTypes.string,
    help: PropTypes.string,
    disabled: PropTypes.bool,
    // enable spellcheck, autocomplete, etc
    accoutrements: PropTypes.bool,
    required: PropTypes.bool,
    className: PropTypes.string
  };

  static defaultProps = {
    accoutrements: false,
    required: false
  };

  state = {
    touched: false
  };

  componentDidMount() {
    this.setState({
      touched: false
    });
  }

  render(){
    const {required, value, className, label, accoutrements, name,
      placeHolder, readOnly, disabled, onChange, help, id, onKeyDown} = this.props;
    let extraClasses = [];
    if (required && !value && this.state.touched) {
      extraClasses.push('invalid');
    } else if (required && this.state.touched && value) {
      extraClasses.push('valid');
    }
    if (extraClasses.length > 0) {
      extraClasses.push('touched');
    }
    return <div className={`textarea-wrap ${help && 'has-help'} ${extraClasses.join(' ')}`}>
      <label>
        {label}{required && label ? '*' : ''}</label>
      <TextareaAutosize
        autocomplete={accoutrements ? 'on' : 'off'}
        autocorrect={accoutrements ? 'on' : 'off'}
        autocapitalize={accoutrements ? 'on' : 'off'}
        spellcheck={accoutrements ? 'true' : 'false'}
        name={name}
        className="textarea"
        value={value}
        id={id}
        onKeyDown={e => {
          e.stopPropagation();
          onKeyDown && onKeyDown(e);
          if(!this.setState.touched){
            this.setState({
              touched: true
            });
          }
        }}
        placeHolder={placeHolder}
        readOnly={readOnly}
        disabled={disabled}
        onChange={onChange} />
      <span className="help-text">{help}</span>
    </div>;
  }
}

export default TextareaComp;
export const Textarea = TextareaComp;
export textareaEX from './textarea.ex.md.js';
export textareaMD from './textarea.md.js';
<file_sep>/components/loader/loader.md.js
export default `loader stub`;
<file_sep>/components/notification/index.js
import PropTypes from 'prop-types';
import React from 'react';
import './notifications.scss';

class Notification extends React.Component {
  static propTypes = {
    children: PropTypes.any,
    icon: PropTypes.string,
    className: PropTypes.string,
    close: PropTypes.func,
    actionText: PropTypes.string,
    actionUrl: PropTypes.string,
    wait: PropTypes.bool
  };
  componentDidMount() {
    if (!this.props.wait){
      setTimeout(this.props.close, 3000);
    }
  }
  render() {
    const {icon, className, message, close} = this.props;
    return <div className={`notification ${className}`}>
      {icon && <span className={`icon ${icon}`} />}
        {this.props.children}
        {this.props.actionUrl && 
          <span className="action">
            <a href={this.props.actionUrl}>
              {this.props.actionText}
            </a>
          </span>}
      {close && <span
        onClick={this.props.close}
        className="icon closex" />}
      </div>;
  }
}

class NotificationBody extends React.Component {
  static propTypes = {
    children: PropTypes.any
  };

  render() {
    return <div className="notification-body">
      {this.props.children}
      </div>;
  }
}

Notification.Body = NotificationBody;

export default Notification;
<file_sep>/components/tooltip/tooltip.md.js
export default `provide contextual info on hover
- **content** *(string)* help text content
- **direction** *(string)* top | bottom | left | right direction to pop the tooltip
- **className** *(string)* classname appened to wrapper div
- **style** *(object)* react style object to apply to the tooltip itself
`;
<file_sep>/components/modal/modal.md.js
export default `Import Modal from ns1-gui. this component has sub components.

### Modal props

- **show** *(boolean)* show or hide the modal
- **onHide** *(number)* what to do when modal is closed from the inside
---
### Modal.Header props
- **close** *(bool)* allow user to close modal internally
---
### Misc
- You can place a Modal.Title inside of a Modal.Header
- Modal.Body and Modal.Footer are available slots as well
- All subcomponents should be wrapped in a Modal component
`;
<file_sep>/components/radio/radio.md.js
export default `radio button wrapper with styles and dataprop passthrough

- **label** *(string)* human readable label for the option
- **checked** *(bool)* whether or not to display the option as checked
- **name** *(name)* html name attribute
- **onChange** *(func)* handler for user selection
- **value** *(string)* value to pass onChange
- **data-*** *(string)*  any prop that starts with data- will be attached as if it were an attribute and passed to the onchange handler
- **disabled*** *(bool)* dissallow click events
`;
<file_sep>/components/bigLoader/index.js
import React from 'react';
import Loader from '../loader';
import './bigLoader.scss';
class BigLoaderComp extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    const {
      className,
      loadingText,
      details,
      loading,
      warn,
      warnText,
      noData,
      noDataText
    } = this.props;
    return <div className="bl-wrapper">
        <div className={`big-loader ${className} flex-wrap vert-middle`}>
          {loading &&
            <div className="loading vert-middle flex-whole">
              <h3>{loadingText}</h3>
              {details && <h4>{details}</h4>}
              <Loader />
            </div>}
          {noData &&
            <div className="no-data vert-middle flex-whole">
              <h3>{noDataText}</h3>
            </div>}
          {warn &&
            <div className="warning vert-middle flex-whole">
              <h3>{warnText}</h3>
            </div>}
      </div>
    </div>;
  }
}

export const BigLoader = BigLoaderComp;
export default BigLoaderComp;
export bigloaderMD from './bigloader.md.js';
export bigloaderEX from './bigloader.ex.md.js';
<file_sep>/index.js
export BigLoader from './components/bigLoader';
export Checkbox from './components/checkbox';
export CleverButton from './components/cleverbutton';
export CleverList from './components/cleverList';
export {Dropdown, MenuItem, OptionsMenu, TextMenu} from './components/dropdown';
export {FormTabs, FormTab} from './components/formTabs';
// export KeyValue from './components/keyValue';
export Loader from './components/loader';
export Modal from './components/modal';
export Notification from './components/notification';
export Pagination from './components/pagination';
export {NavBar, NavItem} from './components/navbar';
// export Phaser from './components/phaser';
export ProgressBar from './components/progressBar';
export Radio from './components/radio';
// export Sub from './components/sub';
export {Tabs, Tab} from './components/tabs/index.js';
export Text from './components/text';
export Textarea from './components/textarea';
export Toggle from './components/toggle';
export Tooltip from './components/tooltip';
export Typeahead from './components/typeahead';
<file_sep>/components/text/index.js
import PropTypes from 'prop-types';
import React from 'react';
import _ from 'lodash';
import './text.scss';

class TextComp extends React.Component{
  static propTypes = {
    autoComp: PropTypes.bool,
    autoFocus: PropTypes.bool,
    caption: PropTypes.string,
    className: PropTypes.string,
    data: PropTypes.any,
    defaultValue: PropTypes.any,
    disabled: PropTypes.bool,
    error: PropTypes.any,
    help: PropTypes.string,
    icon: PropTypes.string,
    id: PropTypes.string,
    key: PropTypes.string,
    label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
    name: PropTypes.string,
    noValid: PropTypes.bool,
    onBlur: PropTypes.func,
    onCancel: PropTypes.func,
    onChange: PropTypes.func.isRequired,
    onFocus: PropTypes.func,
    onKeyDown: PropTypes.func,
    onKeyPress: PropTypes.func,
    passKey: PropTypes.string,
    passRef: PropTypes.string,
    pattern: PropTypes.any,
    placeholder: PropTypes.any,
    rapid: PropTypes.bool,
    readOnly: PropTypes.bool,
    required: PropTypes.bool,
    style: PropTypes.string,
    type: PropTypes.string,
    // can be used to override internal validation
    valid: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
    validationMessage: PropTypes.string, // ditto
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  }
  constructor(props) {
    super(props);
    this.state = {
      valid: true,
      touched: false,
      pastfocus: false,
      bounced: props.value && props.value.toString().length > 0 ||
        (typeof props.defaultValue !== 'undefined' && props.defaultValue !== null) &&
          (!props.defaultValue.toString().length ||
            props.defaultValue.toString().length > 0) ||
        typeof props.placeholder !== 'undefined' ||
        props.autoFocus ||
        (props.value && props.value === 0)
    };
    this.parseValidation = this.parseValidation.bind(this);
    this.setFocus = this.setFocus.bind(this);
    this.focusHandler = this.focusHandler.bind(this);
    this.genRef = !props.passRef ? this.genRef = Math.random() : false;
  }
  componentWillReceiveProps(np){
    if(typeof this.props.placeholder === 'undefined' && typeof np.placeholder !== 'undefined'){
      this.setState({
        bounced: true
      });
    }
  }
  componentDidMount() {
    if (this.props.rapid){
      this.parseValidation();
    }
  }
  processPattern(pattern, val) {
    switch (typeof pattern) {
    case 'undefined':
      return true;
    case 'function':
      return pattern(val);
    case 'object':
      return Array.isArray(pattern) ?
        pattern.some(pat => pat.test(val)) :
        // regexp
        pattern.test(val);
    case 'string':
      return RegExp(pattern).test(val);
    }
  }
  parseValidation(e){
    const {required} = this.props;
    const pattern = this.props.pattern && this.props.pattern.pattern;
    const val = (e && e.currentTarget && e.currentTarget.value) ||
      this.props.value || this.props.defaultValue;
    let valid = true;
    if (this.props.noValid) {
      return true;
    } else if (val) {
      if (typeof this.props.valid === 'boolean' || !!this.props.valid) {
        valid = this.props.valid;
      } else {
        if (required) {
          valid = (val.length && val.length > 0) || typeof val === 'number';
        }
        if (valid) {
          valid = this.processPattern(pattern, val);
        }
      }
    } else {
      valid = !required;
    }
    this.setState({
      valid,
      bounced: typeof val !== 'undefined' ?
        (val.length > 0 || !_.isNaN(new Number(val))) :
        true
    });
    if (this.props.rapid){
      this.props.rapid(this.state.valid);
    }
    return false;
  }
  setFocus(){
    this[this.props.passRef].focus();
  }
  focusHandler(){
    // this.parseValidation();
    this.setState({touched: true, bounced: true});
    this.props.onFocus && this.props.onFocus();
    setTimeout(() => {
      if (this.props.passRef && this[this.props.passRef]){
        this[this.props.passRef].setSelectionRange(this.props.value.length,
          this.props.value.length);
      }
    }, 20);
  }
  classList() {
    const {help, defaultValue, error, required, disabled, pattern, className, value,
      noValid, icon, onCancel} = this.props;
    const {valid, touched, bounced, pastFocus} = this.state;
    return [
      className,
      'text-input',
      disabled && 'disabled',
      ((!required && !pattern) || noValid) && 'hide-validation',
      help || this.propsValidationMessage || pattern && pattern.message && 'has-help',
      noValid && !icon && 'no-icon',
      (bounced || defaultValue || (value && value.length > 0) || _.isNumber(value)) && 'bounced',
      error && 'error',
      touched && 'touched',
      (pastFocus || onCancel) && 'pastFocus',
      icon && 'has-icon',
      valid ?
        'valid' :
        touched && pastFocus && 'invalid'].filter(i => i).join(' ');

  }
  render() {
    const {label, help, defaultValue, style, type, onChange, required, disabled, pattern,
      readOnly, autoComp, autoFocus, noValid, icon, placeholder, onBlur,
      key, name, onCancel, passKey} = this.props;
    var {value} = this.props;
    const {valid, touched} = this.state;
    const validationMessage = this.props.validationMessage || pattern && pattern.message;
    return <div
      style={style}
      key={passKey || key}
      className={this.classList()}>
      <input
        {...Object.keys(this.props).reduce((acc, prop) => {
          return prop.indexOf('data-') > -1 ?
            Object.assign({}, acc, {[prop]: this.props[prop]}) :
            acc;
        }, {})}

        ref={(input) => {
          if (this.props.passRef){
            this[this.props.passRef] = input;
          } else {
            this[this.genRef] = input;
          }
        }}
        required={required}
        id={`text-${this.props.id || name}`}
        type={type}
        value={value}
        placeholder={defaultValue || placeholder}
        disabled={disabled}
        onKeyPress={this.props.onKeyPress}
        onFocus={e => this.focusHandler(e)}
        onBlur={e => this.setState({pastFocus: true}) ||
            (!noValid && this.parseValidation(e)) ||
            onBlur && onBlur(e)}
        onChange={e => {
          if (this.props.rapid){
            this.parseValidation(e);
          }
          onChange(e);
        }
        }
        autoComplete={!autoComp && 'off'}
        autoFocus={autoFocus}
        readOnly={readOnly}
        onKeyDown={e => {
          e.stopPropagation();
          if (e.key === 'Escape'){
            this.props.passRef && this[this.props.passRef].blur();
            !this.props.passRef && this[this.genRef].blur();
          }
          this.props.onKeyDown && this.props.onKeyDown(e);
        }} />
      {label && <label htmlFor={`text-${name}`}>{label}{required && ' *'}</label>}
      <span className="bar" />
      {valid && !noValid && <span className="icon check"/>}
      {(!valid && touched) && !noValid && <span className="icon closex invalid" />}
      {noValid && icon && !onCancel && <span className={`icon pink ${icon}`}/>}
      {this.props.caption && <span className="icon caption">{this.props.caption}</span>}
      {help && <span className="help-text">
        {help} {!valid && validationMessage ? validationMessage : ''}</span>}
      {!help && !valid && validationMessage && <span className="help-text">
        {validationMessage}</span>}
      {onCancel && <span className="icon closex" onClick={onCancel} />}
    </div>;
  }
}
export textMD from './text.md.js';
export textEX from './text.ex.md.js';
export const Text = TextComp;
export default Text;
<file_sep>/components/toggle/index.js
import PropTypes from 'prop-types';
import React from 'react';
import Tooltip from '../tooltip';
import './toggle.scss';
class ToggleComp extends React.Component{
  static propTypes = {
    /* eslint-disable react/no-deprecated */
    label: PropTypes.string.isRequired,
    checked: PropTypes.bool,
    onChange: PropTypes.func,
    key: PropTypes.string,
    value: PropTypes.string,
    inline: PropTypes.bool,
    style: PropTypes.object,
    labelFirst: PropTypes.bool,
    className: PropTypes.string,
    passKey: PropTypes.string,
    tooltip: PropTypes.string.isRequired
  }
  constructor(props) {
    super(props);

    // unsure if using state for this is ok? i needed a
    // uniqueId mostly for htmlFor label reasons
    const id = Math.random
    this.state = {
      id: `toggle-${(""+Math.random()).substring(2,7)}`
    };
  }
  render() {
    const {label, checked, onChange, inline, style, className} = this.props;
    const id = this.state.id;
    return <label
      style={style}
      key={this.props.passKey}
      className={`toggle-label ${inline && 'inline'} ${className || ''}`}>
      {this.props.tooltip ?
        this.props.labelFirst && <Tooltip content={this.props.tooltip} direction="top">
          <span dangerouslySetInnerHTML={{__html: label}}></span>
        </Tooltip> :
        this.props.labelFirst && <span dangerouslySetInnerHTML={{__html: label}}></span>
      }
      <input
        {...Object.keys(this.props).reduce((acc, prop) => {
          return prop.indexOf('data-') > -1 ?
            Object.assign({}, acc, {[prop]: this.props[prop]}) :
            acc;
        }, {})}
        type="checkbox"
        id={id}
        className="cbx hidden"
        checked={checked || false}
        onChange={onChange}  />
      <label className='inner-lbl' htmlFor={id}></label>
      {this.props.tooltip ?
        this.props.labelFirst === false &&
          <Tooltip content={this.props.tooltip} direction="top">
            <span dangerouslySetInnerHTML={{__html: label}}></span>
          </Tooltip> :
        !this.props.labelFirst && <span dangerouslySetInnerHTML={{__html: label}}></span>
      }
    </label>;
  }
}

export default ToggleComp;
export const Toggle = ToggleComp;
export toggleEX from './toggle.ex.md.js';
export toggleMD from './toggle.md.js';
<file_sep>/components/cleverList/index.js
// unification
import React from 'react';
import PropTypes from 'prop-types';
import {OptionsMenu, MenuItem} from '../dropdown';
import {VariableSizeList as List} from 'react-window';
import {WindowScroller} from 'react-virtualized/dist/commonjs/WindowScroller';
import debounce from 'lodash.debounce';
import './cleverlist.scss';

class CleverListComp extends React.Component{
  static propTypes = {
    onEdit: PropTypes.func,
    onNavigate: PropTypes.func,
    onSelect: PropTypes.func,
    items: PropTypes.array.isRequired,
    listkey: PropTypes.string.isRequired,
    formatting: PropTypes.func,
    showOptions: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
    // onClick's signature is (item, index)
    options: PropTypes.arrayOf(PropTypes.shape({
      name: PropTypes.string.isRequired,
      onClick: PropTypes.func,
      icon: PropTypes.string,
      url: PropTypes.func, // instead of onClick, you can provide a url to click
      className: PropTypes.string,
      show: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])
    })),
    pills: PropTypes.arrayOf(PropTypes.func),
    // rendered below the formatted-triggered layout
    subTemplate: PropTypes.func,
    // takes precedence over the formatted, subTemplate rendered layout
    itemTemplate: PropTypes.func,
    // a way to add data-test attributes for testing
    testTemplate: PropTypes.func
  };

  constructor(props){
    super(props);
    this.selectDirect = this.selectDirect.bind(this);
    this.edit = this.edit.bind(this);
    this.fullRender = this.fullRender.bind(this);
    this.placeRender = this.placeRender.bind(this);
    this.handleListRef = this.handleListRef.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.isInViewport = this.isInViewport.bind(this);
    this.scrollToIdx = this.scrollToIdx.bind(this);
    if (this.props.asyncRenderSides){
      this.updatedRender = _.debounce(this.props.asyncRenderSides, 500);
    }
    this.state = {
      selected: 0,
      firstOnSelectFired: false
    };
    this.dummyMenu = <div className="vert-middle stack-right pull-right">
      <div className="opt-wrap item-options">
        <label className="options-menu item-options">
          <div className="dots"></div>
        </label></div>
    </div>;
  }

  componentWillMount(){
    const {listkey} = this.props;
  }

  componentDidUpdate(prevProps) {
    /* this just hooks to see if items was empty before, and now has items.
    If that's the case, fire onSelect, as the default selection logic happens
    too soon in the lifecycle to do anything meaningful.

    state.firstOnSelectFired isn't technically necessary, but is a defensive
    flag to prevent recursive handler executions if there's a bug later. */
    if (!this.state.firstOnSelectFired &&
      prevProps.items.length === 0 &&
      this.props.items.length > 0) {
      const {onSelect, items} = this.props;
      onSelect && onSelect(items[this.state.selected]);
      this.setState({firstOnSelectFired: true});
    }
  }

  scrollToIdx(idx, dir){
    const mult = typeof this.props.itemSize === 'function' ? this.props.itemSize(0) : this.props.itemSize || 48;
    window.scrollTo(0, idx * mult + (dir === 'down' ? 250 : -250));
  }
  isInViewport(e){
    if (!e){
      return false;
    }
    const bounder = e.getBoundingClientRect();
    const {top} = bounder;
    return top <= innerHeight - 80 && top >= 80;
  }

  edit(e){
    e.stopPropagation();
    const {onEdit, items} = this.props;
    const {selected} = this.state;
    onEdit && setTimeout(() => onEdit(items[selected]), 0);
  }
  selectDirect(i){
    const {onSelect, items} = this.props;
    this.setState({
      selected: i
    });
    onSelect && onSelect(items[i]);
  }

  handleListRef (component) {
    this.list = component;
    if (this.props.regRef){
      this.props.regRef(this.list);
    }
  }
  handleScroll({scrollTop}) {
    if (this.list) {
      this.list.scrollTo(scrollTop);
    }
  }
  fullRender(items){
    const {formatting, listkey, options, href, pills, navPill, itemTemplate,
      testTemplate, showOptions, hrefButton} = this.props;
    const {selected} = this.state;
    return ({index, style}) => {
      // formatted prop formats the value for display in the row
      const i = items[index];
      const formatted = typeof formatting === 'function' && formatting(i);
      const templated = typeof itemTemplate === 'function';
      // href prop returns a relative URL for the item if clicked
      const altHref = this.props.altHref ? this.props.altHref(i) : false;
      const hreffed = typeof href === 'function' && href(i);
      const np = navPill && navPill(i);
      const optionsShown = (typeof showOptions === 'function' && showOptions(i)) || true;
      // generate the list of options/pills for later use
      const appendix = (options || pills || hrefButton) &&
        <div className="vert-middle stack-right pull-right">
          {pills && pills.map((fn, ii) => {
            const res = fn(i);
            if (res) {
              return typeof res === 'string' ? <a
                key={`res-${i}-${ii}`}
                className="small upper round gray pill">{res}</a> :
                res;
            }
          })}
          {np && <a
            className="small boxy magenta pill"
            data-test-name={`${formatted}`}
            href={hreffed}>{np}<span className="icon chevron">►</span></a>}
          {hrefButton && hrefButton(i)}
          {options && optionsShown && <OptionsMenu className="item-options">
            {options && options.filter(option =>
              typeof option.show === 'function' ? !option.show(i) : true)
              .map(option => <MenuItem
                icon={option.icon}
                disabled={option.disabled && option.disabled(i)}
                key={option.name}
                className={option.className ? option.className : ''}
                url={option.url && option.url(i)}
                onClick={e => option.onClick && option.onClick(i, index, this.selectDirect)}>{option.name}</MenuItem>
              )}
          </OptionsMenu>}
        </div>;
      // if itemTemplate prop is provided, this overrides the rest.
      if (templated) {
        return <div
          onClick={() => this.selectDirect(index)}
          key={index}
          data-test={testTemplate && testTemplate(i)}
          style={style}
          id={`cleverlist-${index}`}>
          {itemTemplate(i, {
            selected: selected === index,
            appendix: appendix
          })}
        </div>;
      }
      // If unformatted, provide a default <pre> placeholder (preholder???)
      if (!formatted) {
        return <pre key={index}>{JSON.stringify(i, null, 2)}</pre>;
      }
      // otherwise, the primary rendering format uses formatted for the hyperlink
      return <div
        key={index}
        style={style}
        id={`cleverlist-${index}`}
        data-test={testTemplate && testTemplate(i)}>
        <div
          key={`${listkey}-${index}`}
          onClick={() => this.selectDirect(index)}
          className={[
            'flex-wrap flex-whole item-row address-item vert-middle',
            `${selected === index ? 'selected' : ''}`
          ].join(' ')}>
          {altHref ? altHref : hreffed ?
            <a className={this.props.widths ? this.props.widths[0] : ''} href={hreffed}><h4>{formatted}</h4></a> :
            <h4 className={this.props.widths ? this.props.widths[0] : ''}>{formatted}</h4>
          }
          {!templated && appendix}
        </div>
        {this.props.subTemplate && this.props.subTemplate(i)}
      </div>;
    };
  }
  placeRender(items){
    const {formatting, scroller, options} = this.props;
    const {selected} = this.state;
    return ({index, style}) => {
      return scroller ? scroller(items[index], style) : <div
        style={style}
        key={index}>
        <div
          className={`flex-whole flex-wrap item-row address-item vert-middle ${index === selected ? 'selected' : ''}`}>
          <h4 className={this.props.widths ? this.props.widths[0] : ''}>{formatting(items[index])}</h4>
          {options && this.dummyMenu}
        </div>
      </div>;
    };
  }
  windowScroller = () => {
    const {items, itemSize} = this.props;
    return <WindowScroller ref={ref => this.windowScroller = ref} onScroll={this.handleScroll}>
          {({height, isScrolling}) =>
            <List
              onItemsRendered={this.props.asyncRenderSides ? this.updatedRender : undefined}
              overscanCount={0}
              ref={this.handleListRef}
              className="List window-scroller-override"
              height={height}
              itemCount={items.length}
              itemSize={itemSize ? itemSize : () => {
                return 48;
              }}>{isScrolling ? this.placeRender(items) : this.fullRender(items)}</List>}
        </WindowScroller>
  }
  normalList = () => {
    const {items, itemSize} = this.props;
    const itemSized = itemSize ? itemSize : () => 48;
    const itemsVisible = this.props.itemsVisible || 10;
    return <List
      className="allow-overflow"
      onItemsRendered={this.props.asyncRenderSides ? this.updatedRender : undefined}
      overscanCount={0}
      ref={this.handleListRef}
      className="List window-scroller-override"
      height={itemSized() * itemsVisible}
      itemCount={items.length}
      itemSize={itemSized}>{this.fullRender(items)}</List>

  }

  render(){
    const {items, itemSize} = this.props;
    if (this.props.passRef){
      this.props.passRef(this);
    }
    return <div className={['cleverlist', this.props.wrapClass].join(' ')}
      onDrop={(e) => {
        const data = e.dataTransfer.getData('text/html');
        e.preventDefault();
        this.forceUpdate();
      }}>
      <div className={['clever-list', 'item-list', 'virtual', this.props.className ? this.props.className : ''].join(' ')}>
        {!this.props.interior ? this.windowScroller() : this.normalList()}
      </div>
    </div>;
  }
}

export const CleverList = CleverListComp;
export default CleverList;
export cleverlistMD from './cleverList.md.js';
export cleverlistEX from './cleverList.ex.md.js';
<file_sep>/components/textarea/textarea.md.js
export default `auto resizing textarea component
- **onChange** *(func)* function to be called when user changes field value
- **value** *(string)* element value
- **readOnly** *(bool)* allow user to edit values
- **id** *(string)*  html passthrough to input
- **label** *(string)* label for field
- **placeHolder** *(string)* text to display if value is 0 length
- **name** *(string)* html attribute passthrough
- **help** *(string)* help text
- **disabled** *(bool)* allow user input
- **className** *(string)*  classname appended for wrapper div
`;
<file_sep>/components/tabs/tabs.md.js
export default `import this as Tabs and Tab. Nest Tab in Tabs wrapper component
### Tab props
- **className** *(string)* optional classname string to append to builtin
- **defaultActiveKey** *(number)* default active key if none provided
- **activeKey** *(number)* current tab index to show tab content for
- **onSelect** *(func)* function to call when a different tab is selected
---
### Tab props
- **label** *(string)* label for this tab
- **icon** *(string)* optional icon for tab label`;
<file_sep>/utils/buildIconSass.js
const fs = require('fs');

const files = fs.readdirSync('./assets/svg')
  .sort()
  .map(f=>
    f.split('.svg')[0]);

fs
  .writeFileSync(`./scss/icons.scss`,
    files
      .filter(f=>f)
      .filter(f=>f[0]!=='.')
      .map((f,i) =>
        `$${f}: '${
          String
            .fromCharCode(0xEA01 + (i))
          }' !global`)
      .join('\n'), 'utf8', (e, done)=>{
        if (e){
          console.log(e);
        }
        console.log(done);
      });
<file_sep>/components/modal/index.js
import PropTypes from 'prop-types';
import React from 'react';
import {ModalTitle, ModalHeader} from './header';
import ModalBody from './body';
import ModalFooter from './footer';
import './modal.scss';

class ModalComp extends React.Component {

  static propTypes = {
    /* eslint-disable react/no-deprecated */
    className: PropTypes.string,
    children: PropTypes.any,
    show: PropTypes.bool,
    close: PropTypes.func,
    onHide: PropTypes.func,
    id: PropTypes.string,
    style: PropTypes.object,
    blocking: PropTypes.bool
  };

  static defaultProps = {
    className: '',
    show: false,
    children: []
  };
  constructor(props){
    super(props);
    this.closeModal = this.closeModal.bind(this);
  }

  closeModal() {
    this.props.onHide && this.props.onHide();
    this.props.close && this.props.close();
  }

  render() {
    return <div
      id={this.props.id}
      onClick={e => this.props.blocking ? e.stopPropagation() : false}
      className={`
        bunder-wrapper
        ${this.props.show ? 'show-modal' : ''}`}>
      <div
        className="bunder-modal-background"
        onClick={this.props.close || this.closeModal} />
      <div
        style={this.props.style}
        className={`bunder-modal ${this.props.className}`}>
        {this.props.show && this.props.children.map &&
              this.props.children.filter(a => a).map(c => {
                return typeof c.type === 'function' ?
                  Object.assign({}, c, {
                    props: Object.assign({},c.props, {onHide: this.closeModal})
                  }) :
                  c;
              })}
      </div>
    </div>;
  }
}

ModalComp.Title = ModalTitle;
ModalComp.Header = ModalHeader;
ModalComp.Body = ModalBody;
ModalComp.Footer = ModalFooter;

export default ModalComp;
export const Modal = ModalComp;
export modalMD from './modal.md.js';
export modalEX from './modal.ex.md';
<file_sep>/components/toggle/toggle.ex.md.js
export default `\`\`\`html
<Toggle
  label="Demo Toggle"
  checked={this.state.toggleDemo}
  onChange={e=>this.setState({
    toggleDemo: e.currentTarget.checked
  })}
  inline={true}
  labelFirst={true} />
  \`\`\`
`;
<file_sep>/webpack.config.js
'use strict';
/* globals __dirname, require, process */
var path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var isProd = process.env.NODE_ENV === 'production';
const IconfontPlugin = require('iconfont-plugin-webpack');
const EditFontPlugin = require('./utils/editFontPlugin');
const devPort = 8500; 
console.log('isProd: ', isProd);

const url = (suffix) => {
  return `${suffix}`;
};

let ico = () => {
  return new IconfontPlugin({
      src: `${__dirname}/assets/svg`,
      family: 'iconfont',
      dest: {
        font: `${__dirname}/docs/[family].[type]`,
        css: `${__dirname}/docs/[family].css`
      },
      watch: {
        pattern: `${__dirname}/assets/svg/**/*.svg`,
        cwd: `${__dirname}/assets/svg`
      },
      cssTemplate: function(unicodes) {
        return unicodes.unicodes.map((char)=>{
          return `.icon.${char.name}:before{
            content: '${char.unicode}';
          }`;
        }).concat(`
            @font-face {
            font-family: "icons";
            src: url("${url('eot')}");
            src: url("${url('iconfont.eot?#iefix')}") format("embedded-opentype"),
                 url("${url('iconfont.woff')}") format("woff"),
                 url("${url('iconfont.ttf')}") format("truetype"),
                 url("${url('iconfont.svg#iconfont')}") format("svg");
            font-weight: normal;
            font-style: normal;
          }
          .icon::before{
            vertical-align: middle;
            font-family: "icons"!important;
            display: inline-block;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            padding: 0 4px;
            line-height: 1;
            font-size: 18px;
            text-decoration: inherit;
            text-rendering: optimizeLegibility;
            text-transform: none;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
          }
        `).join('\n');
      }
    });
};
let config = {
  entry: isProd ? './demo.js' : [`webpack-dev-server/client?http://localhost:${devPort}`, './demo.js'],
  devtool: 'cheap-module-source-map',
  context: `${__dirname}/src`,
  watchOptions: {
    ignored: /node_modules/
  },
  resolve: {
    modules: [
      path.resolve('./components'),
      path.resolve('./src'),
      path.resolve('./scss'),
      path.resolve('./node_modules'),
      path.resolve('.')
    ],
    moduleExtensions: ['-compat']
  },
  output: {
    path: `${__dirname}/docs`,
    filename: 'bundle.js',
    library: 'gui'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'postcss-loader', 'sass-loader'],
        exclude: /node_modules/,
        include: [
          path.resolve(__dirname, 'scss'),
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'components')
        ]
      },
      {
        test: /\.css$/i,
        sideEffects: true,
        loaders: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          }
        ],
        exclude: /node_modules/,
        include: [
          path.resolve(__dirname, 'scss'),
          path.resolve(__dirname, 'components')
        ]
      },
      {test: /\.(js|jsx)$/,
        include:[
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'components')
        ],
        exclude: /node_modules(?!\/input-moment|lodash-compat|lodash)|lodash/,
        loader: 'babel-loader',
        query: {
          presets: isProd ? ['react', 'es2015', 'stage-0'] : ['react', 'react-hmre', 'es2015', 'stage-0'],
          plugins: ['transform-decorators-legacy']
        }
      },
      {test: /\.(woff|woff2|eot|ttf)$/, loader: 'file-loader'},
      {
        test: /\.(jpg|png|gif|jpeg)$/,
        loader: 'file-loader',
        include: [path.resolve(__dirname, 'assets')]
      },
    ]
  },
  // env conditional plugins for filesize, dashboard, etc.
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    ico(),
    new EditFontPlugin()
  ]
};
if (!isProd){
  config.devServer = {
    contentBase: ['./', './docs'],
    compress: true,
    port: devPort,
    public: `localhost:${devPort}`,
    host: '0.0.0.0'
  };
  config.output.publicPath = `http://localhost:${devPort}/`;
}
module.exports = config;
<file_sep>/src/installation.js
export default `## deps
\`\`\`js 
npm install --save-dev node-sass, style-loader, postcss-loader, sass-loader,
babel-loader, babel-preset-react, babel-preset-es2015, babel-preset-stage-0, 
babel-plugin-transform-decorators-legacy
\`\`\`

## add loaders to your webpack config
\`\`\`
  {
    test: /\.scss$/,
    loaders: ['style-loader', 'postcss-loader', 'sass-loader'],
    exclude: /node_modules/,
    include: [
      path.resolve(__dirname, 'node_modules/ns1-gui/scss'),
      path.resolve(__dirname, 'node_modules/ns1-gui/components')
    ]
  },
  {
    test: /\.css$/i,
    sideEffects: true,
    loaders: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          url: false
        }
      }
    ],
    exclude: /node_modules/,
    include: [
      path.resolve(__dirname, 'node_modules/ns1-gui/scss'),
      path.resolve(__dirname, 'node_modules/ns1-gui/components')
    ]
  },
  {test: /\.(woff|woff2|eot|ttf)$/, loader: 'file-loader'},
  {test: /\.(js|jsx)$/,
    include:[
      path.resolve(__dirname, 'node_modules/ns1-gui/scss'),
      path.resolve(__dirname, 'node_modules/ns1-gui/components')
    ],
    loader: 'babel-loader',
    query: {
      presets: ['react', 'es2015', 'stage-0'],
      plugins: ['transform-decorators-legacy']
    }
  },
\`\`\`
## add fonts
in your html, include
\`\`\`
<link href='//fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600|Open+Sans:300,600&amp;subset=latin' rel='stylesheet' type='text/css'>
\`\`\`
# Usage
make a toplevel wrapper div with the class "theme-light",
then put all components in a div with the class 'bunder-container'
\`\`\`
import {Tabs, Tab} from 'ns1-gui';
<div className="theme-light">
  <div className="bunder-container">
    <Tabs ...props>
      <Tab ...props>Some Content</Tab>
    </Tabs>
    <Modal ...props>
      <Modal.Header ...props>
      </Modal.Header>
    </Modal>
  </div>
</div>
\`\`\`
`;
<file_sep>/components/radio/radio.ex.md.js
export default `\`\`\`html
<Radio
  label="Thing1"
  checked={this.state.radio === 'thing1'}
  name="first"
  onChange={e => this.setState({radio: e.currentTarget.value})}
  value="thing1" />
<Radio
  label="Thing2"
  checked={this.state.radio === 'thing2'}
  name="second"
  onChange={e => this.setState({radio: e.currentTarget.value})}
  value="thing2" />
\`\`\`
`;
<file_sep>/components/tabs/index.js
import PropTypes from 'prop-types';
import React from 'react';
import './tabs.scss';
export class Tabs extends React.Component{
  static propTypes = {
    defaultActiveKey: PropTypes.number.isRequired,
    activeKey: PropTypes.number,
    onSelect: PropTypes.func.isRequired,
    children: PropTypes.any,
    tabClassName: PropTypes.string,
    className: PropTypes.string
  }
  constructor(props) {
    super(props);
  }
  render() {
    const {onSelect, activeKey,  className, children} = this.props;
    return children && <div className={`tabs ${className || ''}`}>
      <ul>
        {//sorry sorry, needed for single tabs
          (() => children.filter ? children : [children])()
            .filter(d => d)
            .map((c, idx) =>
              <li
                className={activeKey === idx && 'active' || ''}
                key={idx}
                onClick={() => onSelect &&
                onSelect(idx, c.props.token)}>
                <span className={`icon ${c.props.icon ? c.props.icon : ''}`} />
                <span className='tab-label'>{c.props.label}</span></li>)}
      </ul>

      <div className={`tabs-body ${this.props.tabClassName || ''}`}>
        {// it is dumb needed for single tabs sorry sorry
          children.filter ?
            children.filter(a => a)[typeof this.props.activeKey !== 'undefined' ?
              this.props.activeKey :
              this.props.defaultActiveKey] :
            children}
      </div>
    </div>;
  }
}
export class Tab extends React.Component{
  static propTypes={
    label: PropTypes.string.isRequired,
    icon: PropTypes.string,
    children: PropTypes.any,
    className: PropTypes.string,
    token: PropTypes.string
  }
  constructor(props) {
    super(props);
  }
  render() {
    return <div className={`tab ${this.props.className || ''}`}>
      {this.props.children}
    </div>;
  }
}

export tabsMD from './tabs.md.js';
export tabsEX from './tabs.ex.md.js';
<file_sep>/components/pagination/pagination.ex.md.js
export default `\`\`\`html
  <Pagination
    next={true}
    prev={true}
    items={8}
    maxButtons={5}
    activePage={this.state.activePage || 0}
    onSelect={i=>this.setState({activePage: i})} />
\`\`\` 
`;
<file_sep>/components/tooltip/index.js
import PropTypes from 'prop-types';
import React from 'react';
import './tooltip.scss';

class TooltipComp extends React.Component{
  static propTypes = {
    /* eslint-disable react/no-deprecated */
    content: PropTypes.string.isRequired,
    direction: PropTypes.string,
    children: PropTypes.any,
    className: PropTypes.string,
    style: PropTypes.object
  }

  render() {
    const {children, content, direction, className} = this.props;
    return <div className={`tooltip-wrapper ${className ?
      className :
      ''}`}>
      <div
        style={this.props.style}
        className={`tip ${direction}`}
        dangerouslySetInnerHTML={{__html: content}} />
      {children}
    </div>;
  }
}
export default TooltipComp;
export const Tooltip = TooltipComp;
export tooltipEX from './tooltip.ex.md.js';
export tooltipMD from './tooltip.md.js';
<file_sep>/components/loader/index.js
import React from 'react';
class LoaderComp extends React.Component{
  render(){
    return <div
      className="loader">
      <span className="loader-dot">.</span>
      <span className="loader-dot">.</span>
      <span className="loader-dot">.</span>
    </div>;
  }
}
export default LoaderComp;
export const Loader = LoaderComp;
export loaderMD from './loader.md.js';
export loaderEX from './loader.ex.md.js'
<file_sep>/components/tabs/tabs.ex.md.js
export default `\`\`\`html
<Tabs
  defaultActiveKey={0}
  activeKey={this.state.tabActive}
  onSelect={idx => {
    this.setState({tabActive: idx});
  }}
  className="interactive flex-whole">
  <Tab
    token={0}
    className="minheight"
    label="Demotab 1">
    <BigLoader
      warn={false} 
      warnText="Some warning."
      loading={true}
      loadingText="Demo Bigloader in tab"
      noDatat={false}
      noDataText="No Data" />
  </Tab>
  <Tab
    token={1}
    className="minheight"
    label="Demotab 2">
    <BigLoader
      warn={true} 
      warnText="Demo warning in tab"
      loading={false}
      loadingText="This is loading explainer text"
      noDatat={false}
      noDataText="No data"

  </Tab>
</Tabs>
\`\`\``;
<file_sep>/components/cleverbutton/index.js
import PropTypes from 'prop-types';
import React from 'react';
import Loader from '../loader';
class CleverButtonComp extends React.Component{
  static propTypes = {
    saved: PropTypes.bool,
    saving: PropTypes.bool,
    hot: PropTypes.bool,
    disabled: PropTypes.bool,
    classes: PropTypes.string,
    text: PropTypes.string,
    error: PropTypes.bool,
    onClick: PropTypes.func,
    role: PropTypes.string,
    type: PropTypes.string
  }
  constructor(props) {
    super(props);
  }
  render(){
    const {
      saved,
      saving,
      hot,
      disabled,
      classes,
      text,
      error,
      onClick,
      type,
    } = this.props;
    return <button
      type={type || 'button'}
      role={this.props.role}
      onClick={onClick}
      disabled={disabled}
      className={['cleverbutton', 'button', (hot || saved) && !error ? 'primary' : 'secondary', classes].join(' ')}>
        {saving && <Loader />}
        {((!saving && !saved && !error) || (hot && !saving)) && (!error) && (text || 'Save All Changes')}
        {saved && !hot &&
          [
            <span className="icon check" key={0}/>,
            <span key={1}>&nbsp;Saved!</span>
          ]}
        {!saving && error && <span className="icon closex"/>}
      </button>;
  }
}
export const CleverButton = CleverButtonComp;
export default CleverButton;
export cleverbuttonMD from './cleverbutton.md.js';
export cleverbuttonEX from './cleverbutton.ex.md.js';
<file_sep>/components/progressBar/progressBar.md.js
export default `show progress
- **label** *(string)* name of percentage bar
- **percent** *(int)* 0-100 completion
- **showValue** *(bool)* show or hide the number value
- **customValue** *(int)* override the percent value
`;
<file_sep>/components/dropdown/dropdown.ex.md.js
export default `\`\`\`html
<Dropdown
  onSelect={e =>
    this.setState({
      dropdown: e.currentTarget.value
    })}
  className="flex-half"
  label="Example Dropdown"
  defaultValue="first"
  value={this.state.dropdown}>
  <MenuItem
    value="first">First Item</MenuItem>
  <MenuItem
    value="second">Second Item</MenuItem>
</Dropdown>
\`\`\`
`;
<file_sep>/components/formTabs/formTabs.ex.md.js
export default `\`\`\`html
<div className="enclosure">
  <FormTabs
    headerLabel="Important Stuff: "
    defaultActiveKey={0}
    activeKey={this.state.formTabActive}
    onSelect={idx => this.setState({formTabActive: idx})}>
    <FormTab
      label="Tab 1">
      ... put form elements here
    </FormTab>
    <FormTab
      label="Tab 2">
      ... put more form elements here
    </FormTab>
  </FormTabs>
</div>
\`\`\`
`;
<file_sep>/components/text/text.ex.md.js
export default `\`\`\`html
<Text
  onChange={e => {
    this.setState({textExample: e.currentTarget.value});
  }}
  label="Sample text field"
  value={this.state.textExample}
  help="example help text."
  pattern={{
    pattern: val => val % 5 === 0,
    message: 'Value should be divisible by 5'
  }}
  className="flex-half gutter-right" />
\`\`\``;
<file_sep>/components/checkbox/index.js
import PropTypes from 'prop-types';
import React from 'react';
import './checkbox.scss';
class CheckBoxComp extends React.Component{
  static propTypes = {
    /* eslint-disable react/no-deprecated */
    label: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    checked: PropTypes.bool,
    name: PropTypes.string,
    id: PropTypes.string,
    value: PropTypes.any,
    disabled: PropTypes.bool,
    className: PropTypes.string,
    help: PropTypes.string
  }
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.props.onChange(e);
  }
  render() {
    const {help, value, label, checked, name, className} =
      this.props;
    return <label id={this.props.id} className={`checkbox-label ${className} ${help && 'has-help'} flex-wrap vert-middle`}>
      <input type="checkbox"
        value={value}
        checked={checked || false}
        onChange={this.handleChange}
        {...Object.keys(this.props).reduce((acc, prop)=>{
          return prop.indexOf('data-') > -1 ?
            Object.assign({}, acc, {[prop]: this.props[prop]}) :
            acc;
        }, {})}
        name={name}
        disabled={this.props.disabled} />
      <span className={`icon flex-wrap vert-middle ${checked ? 'checkedbox' : 'checkbox' } 
        ${this.props.disabled ? 'disabled' : ''}`}>
        <span className="check" />
      </span>
      <span>{label}</span>
      {help && <span className="help-text">{help}</span>}
    </label>;
  }
}

export const Checkbox = CheckBoxComp;
export default CheckBoxComp;
export checkboxMD from './checkbox.md';
export checkboxEX from './checkbox.ex.md';
<file_sep>/components/progressBar/progressBar.ex.md.js
export default `\`\`\`html
<ProgressBar
  label='Progress'
  percent={82}
  showValue={true} />

\`\`\`
`;
<file_sep>/components/cleverbutton/cleverbutton.md.js
export default `- a button with a builtin loader
- **saved** *(bool)* optionally show "saved" state in button
- **saving** *(bool)* show internal loader instead of button label
- **hot** *(bool)* optionally add a class to make the button pink
- **disabled** *(bool)* disable passthrough attr
- **classes** *(string)* css class passthru
- **text** *(string)* button label text
- **error** *(bool)* show "X" if some async request errored
- **onClick** *(func)* action to perform on click
- **role** *(string)* role attr passthrough for use in form elements`;
<file_sep>/components/bigLoader/bigloader.ex.md.js
export default `\`\`\`html
<BigLoader
  warn={false} 
  warnText="This would be showing if warning."
  loading={true}
  loadingText="This is loading explainer text"
  noData={false}
  noDataText="No data text." />
\`\`\`
`;
<file_sep>/components/cleverList/cleverList.ex.md.js
export default `\`\`\`html
<div style={{width: '100%'}}>
  selected value: {this.state.cleverSelected.someKey}
  <CleverList
    formatting={i=>i.name}
    onSelect={i=>this.setState({cleverSelected: i})}
    interior={true}
    itemsVisible={2}
    pills={[
      (i) => \`Demopill $\{i.someKey}\`
    ]}
    items={[{
      someKey: 'somevalue 1',
      name: 'Example Item 1'
    }, {
      someKey: 'somevalue 2',
      name: 'Example Item 2'
    }, {
      someKey: 'somevalue 3',
      name: 'Example Item 3'
    }]} 
    options={[
      {
        icon: 'alert',
        name: 'Demo Action',
        onClick: (i, index, selector) => selector(index) || 
          window.alert(JSON.stringify(i))
      },
      {
        icon: 'folder',
        name: 'Demo Disabled',
        disabled: e=>true,
        onClick: (i, index, selector) => window.alert(JSON.stringify(i))
      }
    ]}/>
</div>
\`\`\`
`;
<file_sep>/components/typeahead/index.js
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../text';
import {TextMenu, MenuItem} from '../dropdown';

class TypeAheadComp extends React.Component{
  static propTypes = {
    value: PropTypes.array,
    placeholder: PropTypes.string,
    help: PropTypes.string,
    onChange: PropTypes.func,
    async: PropTypes.func,
    options: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.any
    })),
    multi: PropTypes.bool,
    selected: PropTypes.array,
    disabled: PropTypes.bool,
    className: PropTypes.string,
    selectedPosition: PropTypes.string,
    disabledText: PropTypes.string,
    parseVal: PropTypes.func,
    onCancel: PropTypes.func,
    icon: PropTypes.any
  };
  constructor(props){
    super(props);
    this.state = {
      options: props.options || [],
      searchVal: props.searchVal || '',
      filteredOptions: [],
      selected: props.value || [],
      hideOptions: true
    };
    this.hideOptions = this.hideOptions.bind(this);
    this.renderSelected = this.renderSelected.bind(this);
    this.filter = this.filter.bind(this);
  }
  componentWillReceiveProps(nextProps){
    if (nextProps.value !== this.state.selected){
      this.setState({
        selected: nextProps.value || []
      });
    }
    if (nextProps.options !== this.state.options){
      this.setState({options: nextProps.options});
    }
    // if(this.props.async){
    //   this.setState({options: nextProps.options})
    // }
  }
  hideOptions(){
    this.setState({hideOptions: true});
  }
  renderSelected(){
    const {parseOpt, parseVal} = this.props;
    return this.props.multi && <div className="selected">
      {this.state.selected.map(select => {
        return <span
          className="small round blue pill gutter-right"
          key={select}>
          {select}
          <span
            onClick={() => {
              this.setState({
                selected: this.state.selected
                  .filter(item => item !== select)
              });
              setTimeout(() => {
                this.props.onSelect(this.state.selected);
              });
            }}
            className="closer">
            <span className="icon closex" />
          </span>
        </span>;
      })}
    </div>;
  }
  filter(options){
    const {parseOpt, parseVal} = this.props;
    const {searchVal} = this.state;
    const small = searchVal.toLowerCase();

    return options ? options.filter(opt => {
      const val = opt.value;
      return parseOpt ?
        this.props.searchLabelIndex ? opt.label.toLowerCase().includes(small) :
          (parseOpt(opt).toLowerCase().indexOf(small) > -1 ||
        (parseVal && val) && parseVal(val).toLowerCase().indexOf(small)) :
        opt.label ? opt.label.toLowerCase().indexOf(small) > -1 ||
        opt.value.toLowerCase().indexOf(small) > -1 :
          typeof opt === 'string' ? opt.toLowerCase().indexOf(small) > 1 : false;
    }) : [];
  }
  render(){
    const {
      help, parseOpt, disabled, disabledText, parseVal, multi
    } = this.props;
    return <div id={this.props.id || ''} className={`typeahead ${this.props.className || ''}`}>
      {(!this.props.selectedPosition ||
        this.props.selectedPosition === 'above') &&
        this.props.selectedPosition !== false &&
        this.props.multi &&
        this.renderSelected()}
      <div className="relative">
        <Text
          autoComp={false}
          className={this.props.help ? this.props.className : `short ${this.props.className}`}
          noValid={true}
          help={help}
          ref={ta => this.ta = ta}
          passRef="typeahead"
          disabled={this.props.disabled}
          icon={typeof this.props.icon === 'undefined' ?
            (this.state.searchVal &&
              this.state.searchVal.length > 0) ?
              'closex' :
              'search' :
            false}
          onKeyDown={e => e.stopPropagation()}
          onCancel={this.props.onCancel ? () => {
            if (this.props.onCancel){
              this.props.onCancel();
            }
            this.setState({
              searchVal: '',
              filteredOptions: [],
              selected: []
            });
          } : false}
          onFocus={() =>
            this.setState({hideOptions: false})
          }
          onBlur={() => !this.state.eatEvent &&
              this.setState({
                hideOptions: true,
                searchVal: ''
              })}
          value={multi || !this.state.hideOptions ? this.state.searchVal : this.props.value}
          label={this.props.label}
          onChange={(e, val) => {
            this.setState({searchVal: e.currentTarget.value});
            if (this.props.async){
              const asynced = this.props.async(e.currentTarget.value);
              if (asynced && asynced.then){
                asynced
                  .then(vals => {
                    this.setState({options: vals || []});
                  })
                  .catch(e => {
                    console.log('catch', e);
                  });
              }
            }
            if (e.currentTarget.value.length === 0){
              this.setState({hideOptions: true});
            } else if (this.state.hideOptions){
              this.setState({hideOptions: false});
            }
          }}
          placeholder={disabled && disabledText ?
            disabledText :
            this.props.placeholder} />
        {!multi &&
            this.state.options &&
            this.state.options.length > 0 &&
            !this.state.hideOptions &&
            <ul
              onMouseLeave={() => this.setState({hideOptions: true})}
              className="options dd-menu opened">
              {this.props.async && <li
                onClick={() => this.setState({
                  options: [],
                  searchVal: '',
                  hideOptions: true
                })}>Clear results</li>}
              {this.state.options.filter(a => this.props.async ?
                a :
                a.label.toLowerCase().indexOf(this.state.searchVal.toLowerCase()) > -1)
                .map((val, idx) =>
                  <li
                    key={idx}
                    onMouseDown={() => this.setState({eatEvent: true})}
                    onMouseUp={() => {
                      this.setState({
                        selected: val,
                        eatEvent: false,
                        hideOptions: true,
                        searchVal: ''
                      });
                      setTimeout(() =>
                        this.props.onSelect &&
                            this.props.onSelect(this.state.selected), 0);
                    }}>
                    {parseOpt ?
                      parseOpt(val) :
                      val.label ?
                        val.label :
                        val}
                  </li>
                )}
            </ul>}
        {multi &&
            this.state.options && this.state.options.length > 0 &&
            <TextMenu
              onMouseDown={() => {
                this.setState({eatEvent: true});
              }}
              onSelect={(e, val) => {
                this.ta.typeahead.focus();
                this.setState({
                  selected: [...new Set(this.state.selected.indexOf(val.value ? val.value : val) > -1 ?
                    this.state.selected.filter(v => v !== (val.value ? val.value : val)) :
                    this.state.selected.concat([val.value ? val.value : val]))]
                });
                setTimeout(() =>
                  this.props.onSelect &&
                    this.props.onSelect(this.state.selected), 0);
                this.setState({eatEvent: false});
              }}
              force={!this.state.hideOptions}
              multiselect={true}
              hideButton={true}>
              {this.filter(this.state.options).map((o, i) => {
                const val = parseVal ?
                  parseVal(o) :
                  o.value ?
                    o.value :
                    o;
                const label = parseOpt ?
                  parseOpt(o) :
                  o.label ?
                    o.label :
                    o;
                return <MenuItem
                  key={i}
                  checked={this.state.selected.indexOf(val) > -1}
                  value={val}>
                  {label}
                </MenuItem>;
              })}
            </TextMenu>}
      </div>
      {this.props.selectedPosition === 'below' &&
        this.props.multi &&
        this.renderSelected()}
    </div>;
  }
}
export default TypeAheadComp;
export const TypeAhead = TypeAheadComp;
export typeaheadEX from './typeahead.ex.md.js';
export typeaheadMD from './typeahead.md.js';
