+ custom components
+var getBaseOverrides = memoize(function (classes) {
+ var styleOverrides = (0, _mapValues2.default)(classes, function (value) {
+ return {
+ props: {
+ className: value
+ }
+ };
+ });
+
+ return _extends({}, styleOverrides, {
+ code: {
+ component: Code,
+ props: {
+ className: classes.code
+ }
+ }
+ });
+}, function () {
+ return 'getBaseOverrides';
+});
+
+// Inline mode: replace (usual root component) with
+var getInlineOverrides = memoize(function (classes) {
+ var overrides = getBaseOverrides(classes);
+
+ return _extends({}, overrides, {
+ p: {
+ component: 'span',
+ props: {
+ className: classes.base
+ }
+ }
+ });
+}, function () {
+ return 'getInlineOverrides';
+});
+
+var styles = function styles(_ref2) {
+ var space = _ref2.space,
+ fontFamily = _ref2.fontFamily,
+ fontSize = _ref2.fontSize,
+ color = _ref2.color,
+ borderRadius = _ref2.borderRadius;
+ return {
+ base: {
+ color: color.base,
+ fontFamily: fontFamily.base,
+ fontSize: 'inherit'
+ },
+ para: {
+ color: color.base,
+ fontFamily: fontFamily.base,
+ fontSize: 'inherit',
+ margin: [[0, 0, space[2], 0]],
+ lineHeight: 1.5
+ },
+ a: (0, _Link.styles)({ color: color }).link,
+ h1: {
+ composes: '$para',
+ fontSize: fontSize.h1,
+ fontWeight: 'normal'
+ },
+ h2: {
+ composes: '$para',
+ fontSize: fontSize.h2,
+ fontWeight: 'normal'
+ },
+ h3: {
+ composes: '$para',
+ fontSize: fontSize.h3,
+ fontWeight: 'normal'
+ },
+ h4: {
+ composes: '$para',
+ fontSize: fontSize.h4,
+ fontWeight: 'normal'
+ },
+ h5: {
+ composes: '$para',
+ fontSize: fontSize.h5,
+ fontWeight: 'normal'
+ },
+ h6: {
+ composes: '$para',
+ fontSize: fontSize.h6,
+ fontWeight: 'normal',
+ fontStyle: 'italic'
+ },
+ p: {
+ composes: '$para'
+ },
+ ul: {
+ composes: '$para',
+ paddingLeft: space[3]
+ },
+ ol: {
+ composes: '$para',
+ listStyleType: 'decimal',
+ paddingLeft: space[3]
+ },
+ li: {
+ composes: '$base',
+ listStyleType: 'inherit'
+ },
+ input: {
+ color: color.base,
+ display: 'inline-block',
+ margin: [[0, '0.35em', '0.25em', '-1.2em']],
+ verticalAlign: 'middle'
+ },
+ blockquote: {
+ composes: '$para',
+ fontSize: fontSize.base,
+ margin: [[space[2], space[4]]],
+ padding: 0
+ },
+ hr: {
+ composes: '$para',
+ borderWidth: [[0, 0, 1, 0]],
+ borderColor: color.border,
+ borderStyle: 'solid'
+ },
+ em: {
+ composes: '$base',
+ fontStyle: 'italic'
+ },
+ strong: {
+ composes: '$base',
+ fontWeight: 'bold'
+ },
+ code: {
+ fontFamily: fontFamily.monospace,
+ fontSize: 'inherit',
+ color: 'inherit',
+ background: 'transparent',
+ whiteSpace: 'inherit'
+ },
+ pre: {
+ composes: '$para',
+ backgroundColor: color.codeBackground,
+ border: [[1, color.border, 'solid']],
+ padding: [[space[1], space[2]]],
+ fontSize: fontSize.small,
+ borderRadius: borderRadius,
+ whiteSpace: 'pre'
+ },
+ table: {
+ composes: '$para',
+ borderCollapse: 'collapse'
+ },
+ thead: {
+ composes: '$hr'
+ },
+ tbody: {},
+ td: {
+ fontFamily: fontFamily.base,
+ padding: [[space[0], space[2], space[0], 0]],
+ fontSize: fontSize.base
+ },
+ th: {
+ composes: '$td',
+ fontWeight: 'bold'
+ },
+ tr: {}
+ };
+};
+
+function Markdown(_ref3) {
+ var classes = _ref3.classes,
+ text = _ref3.text,
+ inline = _ref3.inline;
+
+ var overrides = inline ? getInlineOverrides(classes) : getBaseOverrides(classes);
+ return (0, _markdownToJsx.compiler)(text, { overrides: overrides });
+}
+
+Markdown.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ text: _propTypes2.default.string.isRequired,
+ inline: _propTypes2.default.bool
+};
+
+exports.default = (0, _Styled2.default)(styles)(Markdown);
+
+/***/ }),
+/* 825 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.MethodsRenderer = MethodsRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Markdown = __webpack_require__(36);
+
+var _Markdown2 = _interopRequireDefault(_Markdown);
+
+var _Argument = __webpack_require__(297);
+
+var _Argument2 = _interopRequireDefault(_Argument);
+
+var _Arguments = __webpack_require__(298);
+
+var _Arguments2 = _interopRequireDefault(_Arguments);
+
+var _Name = __webpack_require__(182);
+
+var _Name2 = _interopRequireDefault(_Name);
+
+var _JsDoc = __webpack_require__(181);
+
+var _JsDoc2 = _interopRequireDefault(_JsDoc);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+var _classnames = __webpack_require__(37);
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(_ref) {
+ var space = _ref.space,
+ color = _ref.color,
+ fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize;
+ return {
+ table: {
+ width: '100%',
+ borderCollapse: 'collapse'
+ },
+ tableHead: {
+ borderBottom: [[1, color.border, 'solid']]
+ },
+ cell: {
+ color: color.base,
+ paddingRight: space[2],
+ paddingTop: space[1],
+ verticalAlign: 'top',
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.small
+ },
+ cellHeading: {
+ color: color.base,
+ paddingRight: space[2],
+ paddingBottom: space[1],
+ textAlign: 'left',
+ fontFamily: fontFamily.base,
+ fontWeight: 'bold',
+ fontSize: fontSize.small
+ },
+ cellDesc: {
+ width: '70%',
+ paddingLeft: space[2],
+ paddingRight: 0
+ },
+ para: {
+ marginBottom: space[2],
+ fontSize: fontSize.small
+ }
+ };
+};
+
+function MethodsRenderer(_ref2) {
+ var classes = _ref2.classes,
+ methods = _ref2.methods;
+
+ function renderRow(method) {
+ var name = method.name,
+ description = method.description,
+ returns = method.returns,
+ _method$params = method.params,
+ params = _method$params === undefined ? [] : _method$params,
+ _method$tags = method.tags,
+ tags = _method$tags === undefined ? {} : _method$tags;
+
+ return _react2.default.createElement(
+ 'tr',
+ { key: name },
+ _react2.default.createElement(
+ 'td',
+ { className: classes.cell },
+ _react2.default.createElement(_Name2.default, { name: name + '()', deprecated: tags.deprecated })
+ ),
+ _react2.default.createElement(
+ 'td',
+ { className: classes.cell },
+ _react2.default.createElement(_Arguments2.default, { args: params })
+ ),
+ _react2.default.createElement(
+ 'td',
+ { className: (0, _classnames2.default)(classes.cell, classes.cellDesc) },
+ description && _react2.default.createElement(_Markdown2.default, { text: description }),
+ returns && _react2.default.createElement(_Argument2.default, _extends({ className: classes.para, returns: true }, returns)),
+ _react2.default.createElement(_JsDoc2.default, tags)
+ )
+ );
+ }
+
+ return _react2.default.createElement(
+ 'table',
+ { className: classes.table },
+ _react2.default.createElement(
+ 'thead',
+ { className: classes.tableHead },
+ _react2.default.createElement(
+ 'tr',
+ null,
+ _react2.default.createElement(
+ 'th',
+ { className: classes.cellHeading },
+ 'Name'
+ ),
+ _react2.default.createElement(
+ 'th',
+ { className: classes.cellHeading },
+ 'Parameters'
+ ),
+ _react2.default.createElement(
+ 'th',
+ { className: (0, _classnames2.default)(classes.cellHeading, classes.cellDesc) },
+ 'Description'
+ )
+ )
+ ),
+ _react2.default.createElement(
+ 'tbody',
+ null,
+ methods.map(renderRow)
+ )
+ );
+}
+
+MethodsRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ methods: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+ name: _propTypes2.default.string.isRequired,
+ description: _propTypes2.default.string,
+ returns: _propTypes2.default.object,
+ params: _propTypes2.default.array,
+ tags: _propTypes2.default.object
+ })).isRequired
+};
+
+exports.default = (0, _Styled2.default)(styles)(MethodsRenderer);
+
+/***/ }),
+/* 826 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _MethodsRenderer = __webpack_require__(825);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_MethodsRenderer).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 827 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.NameRenderer = NameRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Code = __webpack_require__(180);
+
+var _Code2 = _interopRequireDefault(_Code);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+var _classnames = __webpack_require__(37);
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles(_ref) {
+ var fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize,
+ color = _ref.color;
+ return {
+ name: {
+ fontFamily: fontFamily.monospace,
+ fontSize: fontSize.small,
+ color: color.name
+ },
+ isDeprecated: {
+ color: color.light,
+ textDecoration: 'line-through'
+ }
+ };
+};
+
+function NameRenderer(_ref2) {
+ var classes = _ref2.classes,
+ name = _ref2.name,
+ deprecated = _ref2.deprecated;
+
+ var classNames = (0, _classnames2.default)(classes.name, _defineProperty({}, classes.isDeprecated, deprecated));
+ return _react2.default.createElement(
+ _Code2.default,
+ { className: classNames },
+ name
+ );
+}
+
+NameRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ name: _propTypes2.default.string.isRequired,
+ deprecated: _propTypes2.default.bool
+};
+
+exports.default = (0, _Styled2.default)(styles)(NameRenderer);
+
+/***/ }),
+/* 828 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _debounce = __webpack_require__(332);
+
+var _debounce2 = _interopRequireDefault(_debounce);
+
+var _PlaygroundRenderer = __webpack_require__(829);
+
+var _PlaygroundRenderer2 = _interopRequireDefault(_PlaygroundRenderer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Playground = function (_Component) {
+ _inherits(Playground, _Component);
+
+ function Playground(props, context) {
+ _classCallCheck(this, Playground);
+
+ var _this = _possibleConstructorReturn(this, (Playground.__proto__ || Object.getPrototypeOf(Playground)).call(this, props, context));
+
+ var code = props.code;
+ var showCode = context.config.showCode;
+
+
+ _this.state = {
+ code: code,
+ showCode: showCode
+ };
+ return _this;
+ }
+
+ _createClass(Playground, [{
+ key: 'componentWillReceiveProps',
+ value: function componentWillReceiveProps(nextProps) {
+ var code = nextProps.code;
+
+ this.setState({
+ code: code
+ });
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return nextState.code !== this.state.code || nextState.showCode !== this.state.showCode;
+ }
+ }, {
+ key: 'componentWillUnmount',
+ value: function componentWillUnmount() {
+ // clear pending changes before unmount
+ if (this.queuedChange) {
+ this.queuedChange.cancel();
+ }
+ }
+ }, {
+ key: 'handleChange',
+ value: function handleChange(code) {
+ var _this2 = this;
+
+ // clear pending changes before proceed
+ if (this.queuedChange) {
+ this.queuedChange.cancel();
+ }
+
+ // stored update action
+ var queuedChange = function queuedChange() {
+ return _this2.setState({
+ code: code
+ });
+ };
+
+ var previewDelay = this.context.config.previewDelay;
+
+
+ if (previewDelay) {
+ // if previewDelay is enabled debounce the code
+ this.queuedChange = (0, _debounce2.default)(queuedChange, previewDelay);
+ this.queuedChange();
+ } else {
+ // otherwise execute it
+ queuedChange();
+ }
+ }
+ }, {
+ key: 'handleCodeToggle',
+ value: function handleCodeToggle() {
+ this.setState({
+ showCode: !this.state.showCode
+ });
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ var _this3 = this;
+
+ var _state = this.state,
+ code = _state.code,
+ showCode = _state.showCode;
+ var _props = this.props,
+ evalInContext = _props.evalInContext,
+ index = _props.index,
+ name = _props.name;
+ var isolatedExample = this.context.isolatedExample;
+
+ return _react2.default.createElement(_PlaygroundRenderer2.default, {
+ code: code,
+ showCode: showCode,
+ index: index,
+ name: name,
+ isolatedExample: isolatedExample,
+ evalInContext: evalInContext,
+ onChange: function onChange(code) {
+ return _this3.handleChange(code);
+ },
+ onCodeToggle: function onCodeToggle() {
+ return _this3.handleCodeToggle();
+ }
+ });
+ }
+ }]);
+
+ return Playground;
+}(_react.Component);
+
+Playground.propTypes = {
+ code: _propTypes2.default.string.isRequired,
+ evalInContext: _propTypes2.default.func.isRequired,
+ index: _propTypes2.default.number.isRequired,
+ name: _propTypes2.default.string
+};
+Playground.contextTypes = {
+ config: _propTypes2.default.object.isRequired,
+ isolatedExample: _propTypes2.default.bool
+};
+exports.default = Playground;
+
+/***/ }),
+/* 829 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.PlaygroundRenderer = PlaygroundRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Editor = __webpack_require__(816);
+
+var _Editor2 = _interopRequireDefault(_Editor);
+
+var _Link = __webpack_require__(109);
+
+var _Link2 = _interopRequireDefault(_Link);
+
+var _Preview = __webpack_require__(834);
+
+var _Preview2 = _interopRequireDefault(_Preview);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(_ref) {
+ var space = _ref.space,
+ color = _ref.color,
+ fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize,
+ borderRadius = _ref.borderRadius;
+ return {
+ root: {
+ color: color.base,
+ position: 'relative',
+ marginBottom: space[4],
+ border: [[1, color.border, 'solid']],
+ borderRadius: [[borderRadius, borderRadius, 0, borderRadius]],
+ marginTop: space[0],
+ '&:hover $isolatedLink': {
+ isolate: false,
+ opacity: 1
+ }
+ },
+ preview: {
+ marginBottom: space[0],
+ padding: space[2]
+ },
+ codeToggle: {
+ position: 'absolute',
+ right: -1,
+ margin: 0,
+ padding: [[space[0], space[1]]],
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.base,
+ lineHeight: 1,
+ color: color.link,
+ border: [[1, color.border, 'solid']],
+ borderTop: 0,
+ borderBottomLeftRadius: borderRadius,
+ borderBottomRightRadius: borderRadius,
+ cursor: 'pointer',
+ '&:hover, &:active': {
+ isolate: false,
+ color: color.linkHover
+ }
+ },
+ showCode: {
+ composes: '$codeToggle',
+ backgroundColor: color.baseBackground
+ },
+ hideCode: {
+ composes: '$codeToggle',
+ backgroundColor: color.codeBackground
+ },
+ isolatedLink: {
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ padding: [[space[0], space[1]]],
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.base,
+ opacity: 0,
+ transition: 'opacity ease-in-out .15s .2s'
+ }
+ };
+};
+
+function PlaygroundRenderer(_ref2) {
+ var classes = _ref2.classes,
+ code = _ref2.code,
+ showCode = _ref2.showCode,
+ name = _ref2.name,
+ index = _ref2.index,
+ isolatedExample = _ref2.isolatedExample,
+ evalInContext = _ref2.evalInContext,
+ onChange = _ref2.onChange,
+ onCodeToggle = _ref2.onCodeToggle;
+
+ return _react2.default.createElement(
+ 'div',
+ { className: classes.root },
+ _react2.default.createElement(
+ 'div',
+ { className: classes.preview, 'data-preview': name ? name : '' },
+ _react2.default.createElement(
+ 'div',
+ { className: classes.isolatedLink },
+ name && (isolatedExample ? _react2.default.createElement(
+ _Link2.default,
+ { href: '#!/' + name },
+ '\u21FD Exit Isolation'
+ ) : _react2.default.createElement(
+ _Link2.default,
+ { href: '#!/' + name + '/' + index },
+ 'Open isolated \u21E2'
+ ))
+ ),
+ _react2.default.createElement(_Preview2.default, { code: code, evalInContext: evalInContext })
+ ),
+ showCode ? _react2.default.createElement(
+ 'div',
+ null,
+ _react2.default.createElement(_Editor2.default, { code: code, onChange: onChange }),
+ _react2.default.createElement(
+ 'button',
+ { type: 'button', className: classes.hideCode, onClick: onCodeToggle },
+ 'Hide code'
+ )
+ ) : _react2.default.createElement(
+ 'button',
+ { type: 'button', className: classes.showCode, onClick: onCodeToggle },
+ 'Show code'
+ )
+ );
+}
+
+PlaygroundRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ code: _propTypes2.default.string.isRequired,
+ showCode: _propTypes2.default.bool.isRequired,
+ index: _propTypes2.default.number.isRequired,
+ evalInContext: _propTypes2.default.func.isRequired,
+ onChange: _propTypes2.default.func.isRequired,
+ onCodeToggle: _propTypes2.default.func.isRequired,
+ name: _propTypes2.default.string,
+ isolatedExample: _propTypes2.default.bool
+};
+
+exports.default = (0, _Styled2.default)(styles)(PlaygroundRenderer);
+
+/***/ }),
+/* 830 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _Playground = __webpack_require__(828);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_Playground).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 831 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.PlaygroundErrorRenderer = PlaygroundErrorRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(_ref) {
+ var fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize,
+ color = _ref.color,
+ space = _ref.space;
+ return {
+ root: {
+ margin: [[-space[2], -space[2], -(space[2] + space[0])]],
+ padding: space[2],
+ lineHeight: 1.2,
+ fontSize: fontSize.small,
+ fontFamily: fontFamily.monospace,
+ color: color.error,
+ backgroundColor: color.errorBackground,
+ whiteSpace: 'pre'
+ }
+ };
+};
+
+function PlaygroundErrorRenderer(_ref2) {
+ var classes = _ref2.classes,
+ message = _ref2.message;
+
+ return _react2.default.createElement(
+ 'pre',
+ { className: classes.root },
+ message
+ );
+}
+
+PlaygroundErrorRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ message: _propTypes2.default.string.isRequired
+};
+
+exports.default = (0, _Styled2.default)(styles)(PlaygroundErrorRenderer);
+
+/***/ }),
+/* 832 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _PlaygroundErrorRenderer = __webpack_require__(831);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_PlaygroundErrorRenderer).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 833 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactDom = __webpack_require__(194);
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _noop = __webpack_require__(693);
+
+var _noop2 = _interopRequireDefault(_noop);
+
+var _buble = __webpack_require__(416);
+
+var _PlaygroundError = __webpack_require__(832);
+
+var _PlaygroundError2 = _interopRequireDefault(_PlaygroundError);
+
+var _Wrapper = __webpack_require__(399);
+
+var _Wrapper2 = _interopRequireDefault(_Wrapper);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/* eslint-disable react/no-multi-comp */
+
+var _compileCode = function _compileCode(code, config) {
+ return (0, _buble.transform)(code, config).code;
+};
+
+// Wrap everything in a React component to leverage the state management of this component
+
+var PreviewComponent = function (_Component) {
+ _inherits(PreviewComponent, _Component);
+
+ function PreviewComponent() {
+ _classCallCheck(this, PreviewComponent);
+
+ var _this = _possibleConstructorReturn(this, (PreviewComponent.__proto__ || Object.getPrototypeOf(PreviewComponent)).call(this));
+
+ _this.state = {};
+ _this.setState = _this.setState.bind(_this);
+ _this.setInitialState = _this.setInitialState.bind(_this);
+ return _this;
+ }
+
+ // Synchronously set initial state, so it will be ready before first render
+ // Ignore all consequent calls
+
+
+ _createClass(PreviewComponent, [{
+ key: 'setInitialState',
+ value: function setInitialState(initialState) {
+ Object.assign(this.state, initialState);
+ this.setInitialState = _noop2.default;
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ return this.props.component(this.state, this.setState, this.setInitialState);
+ }
+ }]);
+
+ return PreviewComponent;
+}(_react.Component);
+
+PreviewComponent.propTypes = {
+ component: _propTypes2.default.func.isRequired
+};
+
+var Preview = function (_Component2) {
+ _inherits(Preview, _Component2);
+
+ function Preview() {
+ var _ref;
+
+ var _temp, _this2, _ret;
+
+ _classCallCheck(this, Preview);
+
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_ref = Preview.__proto__ || Object.getPrototypeOf(Preview)).call.apply(_ref, [this].concat(args))), _this2), _this2.state = {
+ error: null
+ }, _temp), _possibleConstructorReturn(_this2, _ret);
+ }
+
+ _createClass(Preview, [{
+ key: 'componentDidMount',
+ value: function componentDidMount() {
+ this.executeCode();
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return this.state.error !== nextState.error || this.props.code !== nextProps.code;
+ }
+ }, {
+ key: 'componentDidUpdate',
+ value: function componentDidUpdate(prevProps) {
+ if (this.props.code !== prevProps.code) {
+ this.executeCode();
+ }
+ }
+ }, {
+ key: 'executeCode',
+ value: function executeCode() {
+ var _this3 = this;
+
+ this.setState({
+ error: null
+ });
+
+ var code = this.props.code;
+
+ if (!code) {
+ return;
+ }
+
+ var compiledCode = this.compileCode(code);
+ if (!compiledCode) {
+ return;
+ }
+
+ var exampleComponent = this.evalInContext(compiledCode);
+ var wrappedComponent = _react2.default.createElement(
+ _Wrapper2.default,
+ null,
+ _react2.default.createElement(PreviewComponent, { component: exampleComponent })
+ );
+
+ window.requestAnimationFrame(function () {
+ try {
+ _reactDom2.default.render(wrappedComponent, _this3.mountNode);
+ } catch (err) {
+ _this3.handleError(err);
+ }
+ });
+ }
+ }, {
+ key: 'compileCode',
+ value: function compileCode(code) {
+ try {
+ return _compileCode(code, this.context.config.compilerConfig);
+ } catch (err) {
+ this.handleError(err);
+ }
+ return false;
+ }
+ }, {
+ key: 'evalInContext',
+ value: function evalInContext(compiledCode) {
+ // 1. Use setter/with to call our callback function when user write `initialState = {...}`
+ // 2. Wrap code in JSON.stringify/eval to catch the component and return it
+ var exampleComponentCode = '\n\t\t\tvar stateWrapper = {\n\t\t\t\tset initialState(value) {\n\t\t\t\t\t__setInitialState(value)\n\t\t\t\t},\n\t\t\t}\n\t\t\twith (stateWrapper) {\n\t\t\t\treturn eval(' + JSON.stringify(compiledCode) + ')\n\t\t\t}\n\t\t';
+
+ return this.props.evalInContext(exampleComponentCode);
+ }
+ }, {
+ key: 'handleError',
+ value: function handleError(err) {
+ if (this.mountNode) {
+ _reactDom2.default.unmountComponentAtNode(this.mountNode);
+ }
+
+ this.setState({
+ error: err.toString()
+ });
+
+ console.error(err); // eslint-disable-line no-console
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ var _this4 = this;
+
+ var error = this.state.error;
+
+ return _react2.default.createElement(
+ 'div',
+ null,
+ _react2.default.createElement('div', { ref: function ref(_ref2) {
+ return _this4.mountNode = _ref2;
+ } }),
+ error && _react2.default.createElement(_PlaygroundError2.default, { message: error })
+ );
+ }
+ }]);
+
+ return Preview;
+}(_react.Component);
+
+Preview.propTypes = {
+ code: _propTypes2.default.string.isRequired,
+ evalInContext: _propTypes2.default.func.isRequired
+};
+Preview.contextTypes = {
+ config: _propTypes2.default.object.isRequired
+};
+exports.default = Preview;
+
+/***/ }),
+/* 834 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _Preview = __webpack_require__(833);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_Preview).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 835 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.PropsRenderer = PropsRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactGroup = __webpack_require__(289);
+
+var _reactGroup2 = _interopRequireDefault(_reactGroup);
+
+var _Arguments = __webpack_require__(298);
+
+var _Arguments2 = _interopRequireDefault(_Arguments);
+
+var _Code = __webpack_require__(180);
+
+var _Code2 = _interopRequireDefault(_Code);
+
+var _JsDoc = __webpack_require__(181);
+
+var _JsDoc2 = _interopRequireDefault(_JsDoc);
+
+var _Markdown = __webpack_require__(36);
+
+var _Markdown2 = _interopRequireDefault(_Markdown);
+
+var _Name = __webpack_require__(182);
+
+var _Name2 = _interopRequireDefault(_Name);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+var _map = __webpack_require__(263);
+
+var _map2 = _interopRequireDefault(_map);
+
+var _util = __webpack_require__(837);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var styles = function styles(_ref) {
+ var space = _ref.space,
+ color = _ref.color,
+ fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize;
+ return {
+ table: {
+ width: '100%',
+ borderCollapse: 'collapse'
+ },
+ tableHead: {
+ borderBottom: [[1, color.border, 'solid']]
+ },
+ cell: {
+ color: color.base,
+ paddingRight: space[2],
+ paddingTop: space[1],
+ verticalAlign: 'top',
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.small
+ },
+ cellHeading: {
+ color: color.base,
+ paddingRight: space[2],
+ paddingBottom: space[1],
+ textAlign: 'left',
+ fontFamily: fontFamily.base,
+ fontWeight: 'bold',
+ fontSize: fontSize.small
+ },
+ cellDesc: {
+ color: color.base,
+ width: '99%',
+ paddingLeft: space[2],
+ paddingRight: 0
+ },
+ required: {
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.small,
+ color: color.light
+ },
+ name: {
+ fontSize: fontSize.small,
+ color: color.name
+ },
+ type: {
+ fontSize: fontSize.small,
+ color: color.type
+ },
+ function: {
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.small,
+ color: color.light,
+ borderBottom: [[1, 'dotted', color.lightest]]
+ },
+ heading: {
+ marginBottom: 3,
+ fontWeight: 'bold',
+ fontSize: 13
+ },
+ para: {
+ marginBottom: 15,
+ fontSize: 13
+ }
+ };
+};
+
+function renderType(type) {
+ if (!type) {
+ return 'unknown';
+ }
+
+ var name = type.name;
+
+
+ switch (name) {
+ case 'arrayOf':
+ return type.value.name + '[]';
+ case 'objectOf':
+ return '{' + renderType(type.value) + '}';
+ case 'instanceOf':
+ return type.value;
+ default:
+ return name;
+ }
+}
+
+function renderEnum(prop) {
+ if (!Array.isArray((0, _util.getType)(prop).value)) {
+ return _react2.default.createElement(
+ 'span',
+ null,
+ (0, _util.getType)(prop).value
+ );
+ }
+
+ var values = (0, _util.getType)(prop).value.map(function (_ref2) {
+ var value = _ref2.value;
+ return _react2.default.createElement(
+ _Code2.default,
+ { key: value },
+ (0, _util.showSpaces)((0, _util.unquote)(value))
+ );
+ });
+ return _react2.default.createElement(
+ 'span',
+ null,
+ 'One of: ',
+ _react2.default.createElement(
+ _reactGroup2.default,
+ { separator: ', ', inline: true },
+ values
+ )
+ );
+}
+
+function PropsRenderer(_ref3) {
+ var classes = _ref3.classes,
+ props = _ref3.props;
+
+ function renderRow(prop, name) {
+ var deprecated = !!(prop.tags && prop.tags.deprecated);
+ return _react2.default.createElement(
+ 'tr',
+ { key: name },
+ _react2.default.createElement(
+ 'td',
+ { className: classes.cell },
+ _react2.default.createElement(_Name2.default, { name: name, deprecated: deprecated })
+ ),
+ _react2.default.createElement(
+ 'td',
+ { className: classes.cell },
+ _react2.default.createElement(
+ _Code2.default,
+ { className: classes.type },
+ renderType((0, _util.getType)(prop))
+ )
+ ),
+ _react2.default.createElement(
+ 'td',
+ { className: classes.cell },
+ renderDefault(prop)
+ ),
+ _react2.default.createElement(
+ 'td',
+ { className: classes.cell + ' ' + classes.cellDesc },
+ renderDescription(prop)
+ )
+ );
+ }
+
+ function renderDefault(prop) {
+ if (prop.required) {
+ return _react2.default.createElement(
+ 'span',
+ { className: classes.required },
+ 'Required'
+ );
+ } else if (prop.defaultValue) {
+ if (prop.type && prop.type.name === 'func') {
+ return _react2.default.createElement(
+ 'span',
+ { className: classes.function, title: (0, _util.showSpaces)((0, _util.unquote)(prop.defaultValue.value)) },
+ 'Function'
+ );
+ }
+
+ return _react2.default.createElement(
+ _Code2.default,
+ null,
+ (0, _util.showSpaces)((0, _util.unquote)(prop.defaultValue.value))
+ );
+ }
+ return '';
+ }
+
+ function renderDescription(prop) {
+ var description = prop.description,
+ _prop$tags = prop.tags,
+ tags = _prop$tags === undefined ? {} : _prop$tags;
+
+ var extra = renderExtra(prop);
+ var args = [].concat(_toConsumableArray(tags.arg || []), _toConsumableArray(tags.argument || []), _toConsumableArray(tags.param || []));
+ return _react2.default.createElement(
+ 'div',
+ null,
+ description && _react2.default.createElement(_Markdown2.default, { text: description }),
+ extra && _react2.default.createElement(
+ 'div',
+ { className: classes.para },
+ extra
+ ),
+ _react2.default.createElement(_JsDoc2.default, tags),
+ args.length > 0 && _react2.default.createElement(
+ 'div',
+ null,
+ _react2.default.createElement(
+ 'h4',
+ { className: classes.heading },
+ 'Arguments'
+ ),
+ _react2.default.createElement(_Arguments2.default, { args: args })
+ )
+ );
+ }
+
+ function renderExtra(prop) {
+ var type = (0, _util.getType)(prop);
+
+ if (!type) {
+ return null;
+ }
+ switch (type.name) {
+ case 'enum':
+ return renderEnum(prop);
+ case 'union':
+ return renderUnion(prop);
+ case 'shape':
+ return renderShape(prop.type.value);
+ case 'arrayOf':
+ if (type.value.name === 'shape') {
+ return renderShape(prop.type.value.value);
+ }
+ return null;
+ case 'objectOf':
+ if (type.value.name === 'shape') {
+ return renderShape(prop.type.value.value);
+ }
+ return null;
+ default:
+ return null;
+ }
+ }
+
+ function renderUnion(prop) {
+ if (!Array.isArray((0, _util.getType)(prop).value)) {
+ return _react2.default.createElement(
+ 'span',
+ null,
+ (0, _util.getType)(prop).value
+ );
+ }
+
+ var values = (0, _util.getType)(prop).value.map(function (value) {
+ return _react2.default.createElement(
+ _Code2.default,
+ { key: value.name, className: classes.type },
+ renderType(value)
+ );
+ });
+ return _react2.default.createElement(
+ 'span',
+ null,
+ 'One of type: ',
+ _react2.default.createElement(
+ _reactGroup2.default,
+ { separator: ', ', inline: true },
+ values
+ )
+ );
+ }
+
+ function renderShape(props) {
+ var rows = [];
+ for (var name in props) {
+ var prop = props[name];
+ var defaultValue = renderDefault(prop);
+ var description = prop.description;
+ rows.push(_react2.default.createElement(
+ 'div',
+ { key: name },
+ _react2.default.createElement(
+ _Code2.default,
+ { className: classes.name },
+ name
+ ),
+ ': ',
+ _react2.default.createElement(
+ _Code2.default,
+ { className: classes.type },
+ renderType(prop)
+ ),
+ defaultValue && ' — ',
+ defaultValue,
+ description && ' — ',
+ description && _react2.default.createElement(_Markdown2.default, { text: description, inline: true })
+ ));
+ }
+ return rows;
+ }
+
+ return _react2.default.createElement(
+ 'table',
+ { className: classes.table },
+ _react2.default.createElement(
+ 'thead',
+ { className: classes.tableHead },
+ _react2.default.createElement(
+ 'tr',
+ null,
+ _react2.default.createElement(
+ 'th',
+ { className: classes.cellHeading },
+ 'Name'
+ ),
+ _react2.default.createElement(
+ 'th',
+ { className: classes.cellHeading },
+ 'Type'
+ ),
+ _react2.default.createElement(
+ 'th',
+ { className: classes.cellHeading },
+ 'Default'
+ ),
+ _react2.default.createElement(
+ 'th',
+ { className: classes.cellHeading + ' ' + classes.cellDesc },
+ 'Description'
+ )
+ )
+ ),
+ _react2.default.createElement(
+ 'tbody',
+ null,
+ (0, _map2.default)(props, renderRow)
+ )
+ );
+}
+
+PropsRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ props: _propTypes2.default.object.isRequired
+};
+
+exports.default = (0, _Styled2.default)(styles)(PropsRenderer);
+
+/***/ }),
+/* 836 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _PropsRenderer = __webpack_require__(835);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_PropsRenderer).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 837 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.unquote = unquote;
+exports.getType = getType;
+exports.showSpaces = showSpaces;
+/**
+ * Remove quotes around given string.
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+function unquote(string) {
+ return string.replace(/^['"]|['"]$/g, '');
+}
+
+/**
+ * Return prop type object.
+ *
+ * @param {object} prop
+ * @returns {object}
+ */
+function getType(prop) {
+ return prop.flowType || prop.type;
+}
+
+/**
+ * Show starting and ending whitespace around given string.
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+function showSpaces(string) {
+ return string.replace(/^\s|\s$/g, '␣');
+}
+
+/***/ }),
+/* 838 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = ReactComponent;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Props = __webpack_require__(836);
+
+var _Props2 = _interopRequireDefault(_Props);
+
+var _Methods = __webpack_require__(826);
+
+var _Methods2 = _interopRequireDefault(_Methods);
+
+var _Examples = __webpack_require__(299);
+
+var _Examples2 = _interopRequireDefault(_Examples);
+
+var _ReactComponentRenderer = __webpack_require__(839);
+
+var _ReactComponentRenderer2 = _interopRequireDefault(_ReactComponentRenderer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ExamplePlaceholder = false ? require('rsg-components/ExamplePlaceholder').default : function () {
+ return _react2.default.createElement('div', null);
+};
+
+function ReactComponent(_ref, _ref2) {
+ var component = _ref.component;
+ var _ref2$isolatedCompone = _ref2.isolatedComponent,
+ isolatedComponent = _ref2$isolatedCompone === undefined ? false : _ref2$isolatedCompone;
+ var name = component.name,
+ slug = component.slug,
+ pathLine = component.pathLine;
+ var _component$props = component.props,
+ description = _component$props.description,
+ props = _component$props.props,
+ examples = _component$props.examples,
+ methods = _component$props.methods,
+ tags = _component$props.tags;
+
+ if (!name) {
+ return null;
+ }
+
+ return _react2.default.createElement(_ReactComponentRenderer2.default, {
+ name: name,
+ slug: slug,
+ pathLine: pathLine,
+ description: description,
+ props: props && _react2.default.createElement(_Props2.default, { props: props }),
+ methods: methods.length > 0 && _react2.default.createElement(_Methods2.default, { methods: methods }),
+ examples: examples.length > 0 ? _react2.default.createElement(_Examples2.default, { examples: examples, name: name }) : _react2.default.createElement(ExamplePlaceholder, { name: name }),
+ isolated: isolatedComponent,
+ tags: tags
+ });
+}
+
+ReactComponent.propTypes = {
+ component: _propTypes2.default.object.isRequired
+};
+
+ReactComponent.contextTypes = {
+ isolatedComponent: _propTypes2.default.bool
+};
+
+/***/ }),
+/* 839 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.ReactComponentRenderer = ReactComponentRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Link = __webpack_require__(109);
+
+var _Link2 = _interopRequireDefault(_Link);
+
+var _Heading = __webpack_require__(300);
+
+var _Heading2 = _interopRequireDefault(_Heading);
+
+var _Markdown = __webpack_require__(36);
+
+var _Markdown2 = _interopRequireDefault(_Markdown);
+
+var _JsDoc = __webpack_require__(181);
+
+var _JsDoc2 = _interopRequireDefault(_JsDoc);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+var _classnames = __webpack_require__(37);
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles(_ref) {
+ var color = _ref.color,
+ fontSize = _ref.fontSize,
+ fontFamily = _ref.fontFamily,
+ space = _ref.space;
+ return {
+ root: {
+ marginBottom: space[6],
+ fontSize: fontSize.text,
+ '&:hover $isolatedLink': {
+ isolate: false,
+ opacity: 1
+ }
+ },
+ header: {
+ position: 'relative',
+ marginBottom: space[3]
+ },
+ isolatedLink: {
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.base,
+ opacity: 0,
+ transition: 'opacity ease-in-out .15s .2s'
+ },
+ primaryHeading: {
+ color: color.base,
+ position: 'relative',
+ marginTop: 0,
+ marginBottom: space[1],
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.h2,
+ fontWeight: 'normal'
+ },
+ heading: {
+ color: color.base,
+ margin: [[0, 0, space[1]]],
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.h4,
+ fontWeight: 'normal'
+ },
+ pathLine: {
+ fontFamily: fontFamily.monospace,
+ color: color.light,
+ fontSize: fontSize.small
+ },
+ description: {
+ color: color.base,
+ marginBottom: space[3],
+ fontSize: fontSize.text
+ },
+ subsection: {
+ marginBottom: space[4]
+ },
+ isDeprecated: {
+ textDecoration: 'line-through',
+ color: color.light
+ }
+ };
+};
+
+function ReactComponentRenderer(_ref2) {
+ var classes = _ref2.classes,
+ name = _ref2.name,
+ slug = _ref2.slug,
+ pathLine = _ref2.pathLine,
+ description = _ref2.description,
+ props = _ref2.props,
+ methods = _ref2.methods,
+ tags = _ref2.tags,
+ examples = _ref2.examples,
+ _ref2$isolated = _ref2.isolated,
+ isolated = _ref2$isolated === undefined ? false : _ref2$isolated;
+
+ var headingClasses = (0, _classnames2.default)(classes.primaryHeading, _defineProperty({}, classes.isDeprecated, tags.deprecated));
+ return _react2.default.createElement(
+ 'div',
+ { className: classes.root, id: name + '-container' },
+ _react2.default.createElement(
+ 'header',
+ { className: classes.header },
+ _react2.default.createElement(
+ _Heading2.default,
+ { level: 2, className: headingClasses, slug: slug },
+ name
+ ),
+ _react2.default.createElement(
+ 'div',
+ { className: classes.pathLine },
+ pathLine
+ ),
+ _react2.default.createElement(
+ 'div',
+ { className: classes.isolatedLink },
+ isolated ? _react2.default.createElement(
+ _Link2.default,
+ { href: '/' },
+ '\u2190 Back'
+ ) : _react2.default.createElement(
+ _Link2.default,
+ { href: '#!/' + name },
+ 'Open isolated \u21E2'
+ )
+ )
+ ),
+ _react2.default.createElement(
+ 'div',
+ { className: classes.description },
+ description && _react2.default.createElement(_Markdown2.default, { text: description }),
+ _react2.default.createElement(_JsDoc2.default, tags)
+ ),
+ props && _react2.default.createElement(
+ 'div',
+ { className: classes.subsection },
+ _react2.default.createElement(
+ 'h3',
+ { className: classes.heading },
+ 'Props'
+ ),
+ props
+ ),
+ methods && _react2.default.createElement(
+ 'div',
+ { className: classes.subsection },
+ _react2.default.createElement(
+ 'h3',
+ { className: classes.heading },
+ 'Methods'
+ ),
+ methods
+ ),
+ examples
+ );
+}
+
+ReactComponentRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ tags: _propTypes2.default.object,
+ name: _propTypes2.default.string.isRequired,
+ slug: _propTypes2.default.string.isRequired,
+ pathLine: _propTypes2.default.string.isRequired,
+ description: _propTypes2.default.string,
+ props: _propTypes2.default.node,
+ methods: _propTypes2.default.node,
+ examples: _propTypes2.default.node,
+ isolated: _propTypes2.default.bool
+};
+
+ReactComponentRenderer.defaultProps = {
+ tags: {}
+};
+
+exports.default = (0, _Styled2.default)(styles)(ReactComponentRenderer);
+
+/***/ }),
+/* 840 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _ReactComponent = __webpack_require__(838);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_ReactComponent).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 841 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = Section;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Examples = __webpack_require__(299);
+
+var _Examples2 = _interopRequireDefault(_Examples);
+
+var _Components = __webpack_require__(811);
+
+var _Components2 = _interopRequireDefault(_Components);
+
+var _Sections = __webpack_require__(301);
+
+var _Sections2 = _interopRequireDefault(_Sections);
+
+var _SectionRenderer = __webpack_require__(842);
+
+var _SectionRenderer2 = _interopRequireDefault(_SectionRenderer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Section(_ref) {
+ var section = _ref.section;
+ var name = section.name,
+ slug = section.slug,
+ content = section.content,
+ components = section.components,
+ sections = section.sections;
+
+
+ var contentJsx = content && _react2.default.createElement(_Examples2.default, { examples: content });
+ var componentsJsx = components && _react2.default.createElement(_Components2.default, {
+ components: components
+ });
+ var sectionsJsx = sections && _react2.default.createElement(_Sections2.default, {
+ sections: sections
+ });
+ return _react2.default.createElement(_SectionRenderer2.default, {
+ name: name,
+ slug: slug,
+ content: contentJsx,
+ components: componentsJsx,
+ sections: sectionsJsx
+ });
+}
+
+Section.propTypes = {
+ section: _propTypes2.default.object.isRequired
+};
+
+/***/ }),
+/* 842 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.SectionRenderer = SectionRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+var _Heading = __webpack_require__(300);
+
+var _Heading2 = _interopRequireDefault(_Heading);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(_ref) {
+ var space = _ref.space,
+ fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize;
+ return {
+ root: {
+ marginBottom: space[4]
+ },
+ heading: {
+ margin: [[0, 0, space[2]]],
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.h1
+ }
+ };
+};
+
+function SectionRenderer(_ref2) {
+ var classes = _ref2.classes,
+ name = _ref2.name,
+ slug = _ref2.slug,
+ content = _ref2.content,
+ components = _ref2.components,
+ sections = _ref2.sections;
+
+ return _react2.default.createElement(
+ 'section',
+ { className: classes.root },
+ name && _react2.default.createElement(
+ _Heading2.default,
+ { level: 1, slug: slug, className: classes.heading },
+ name
+ ),
+ content,
+ components,
+ sections
+ );
+}
+
+SectionRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ name: _propTypes2.default.string,
+ slug: _propTypes2.default.string,
+ content: _propTypes2.default.node,
+ components: _propTypes2.default.node,
+ sections: _propTypes2.default.node
+};
+
+exports.default = (0, _Styled2.default)(styles)(SectionRenderer);
+
+/***/ }),
+/* 843 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _Section = __webpack_require__(841);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_Section).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 844 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = Sections;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Section = __webpack_require__(843);
+
+var _Section2 = _interopRequireDefault(_Section);
+
+var _SectionsRenderer = __webpack_require__(845);
+
+var _SectionsRenderer2 = _interopRequireDefault(_SectionsRenderer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Sections(_ref) {
+ var sections = _ref.sections;
+
+ return _react2.default.createElement(
+ _SectionsRenderer2.default,
+ null,
+ sections.map(function (section, idx) {
+ return _react2.default.createElement(_Section2.default, {
+ key: idx,
+ section: section
+ });
+ })
+ );
+}
+
+Sections.propTypes = {
+ sections: _propTypes2.default.array.isRequired
+};
+
+/***/ }),
+/* 845 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.SectionsRenderer = SectionsRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles() {
+ return {
+ // Just default jss-isolate rules
+ root: {}
+ };
+};
+
+function SectionsRenderer(_ref) {
+ var classes = _ref.classes,
+ children = _ref.children;
+
+ return _react2.default.createElement(
+ 'section',
+ { className: classes.root },
+ children
+ );
+}
+
+SectionsRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ children: _propTypes2.default.node
+};
+
+exports.default = (0, _Styled2.default)(styles)(SectionsRenderer);
+
+/***/ }),
+/* 846 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _TableOfContents = __webpack_require__(852);
+
+var _TableOfContents2 = _interopRequireDefault(_TableOfContents);
+
+var _StyleGuideRenderer = __webpack_require__(847);
+
+var _StyleGuideRenderer2 = _interopRequireDefault(_StyleGuideRenderer);
+
+var _Sections = __webpack_require__(301);
+
+var _Sections2 = _interopRequireDefault(_Sections);
+
+var _Welcome = __webpack_require__(854);
+
+var _Welcome2 = _interopRequireDefault(_Welcome);
+
+var _consts = __webpack_require__(305);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var StyleGuide = function (_Component) {
+ _inherits(StyleGuide, _Component);
+
+ function StyleGuide() {
+ _classCallCheck(this, StyleGuide);
+
+ return _possibleConstructorReturn(this, (StyleGuide.__proto__ || Object.getPrototypeOf(StyleGuide)).apply(this, arguments));
+ }
+
+ _createClass(StyleGuide, [{
+ key: 'getChildContext',
+ value: function getChildContext() {
+ return {
+ codeKey: this.props.codeKey,
+ config: this.props.config,
+ isolatedComponent: this.props.isolatedComponent,
+ isolatedExample: this.props.isolatedExample
+ };
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ var _props = this.props,
+ config = _props.config,
+ sections = _props.sections,
+ welcomeScreen = _props.welcomeScreen,
+ patterns = _props.patterns,
+ isolatedComponent = _props.isolatedComponent;
+
+
+ if (welcomeScreen) {
+ return _react2.default.createElement(_Welcome2.default, { patterns: patterns });
+ }
+
+ return _react2.default.createElement(
+ _StyleGuideRenderer2.default,
+ {
+ title: config.title,
+ homepageUrl: _consts.HOMEPAGE,
+ toc: _react2.default.createElement(_TableOfContents2.default, { sections: sections }),
+ hasSidebar: config.showSidebar && !isolatedComponent
+ },
+ _react2.default.createElement(_Sections2.default, { sections: sections })
+ );
+ }
+ }]);
+
+ return StyleGuide;
+}(_react.Component);
+
+StyleGuide.propTypes = {
+ codeKey: _propTypes2.default.number.isRequired,
+ config: _propTypes2.default.object.isRequired,
+ sections: _propTypes2.default.array.isRequired,
+ welcomeScreen: _propTypes2.default.bool,
+ patterns: _propTypes2.default.array,
+ isolatedComponent: _propTypes2.default.bool,
+ isolatedExample: _propTypes2.default.bool
+};
+StyleGuide.childContextTypes = {
+ codeKey: _propTypes2.default.number.isRequired,
+ config: _propTypes2.default.object.isRequired,
+ isolatedComponent: _propTypes2.default.bool,
+ isolatedExample: _propTypes2.default.bool
+};
+StyleGuide.defaultProps = {
+ isolatedComponent: false
+};
+exports.default = StyleGuide;
+
+/***/ }),
+/* 847 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.StyleGuideRenderer = StyleGuideRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Logo = __webpack_require__(823);
+
+var _Logo2 = _interopRequireDefault(_Logo);
+
+var _Markdown = __webpack_require__(36);
+
+var _Markdown2 = _interopRequireDefault(_Markdown);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+var _classnames = __webpack_require__(37);
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles(_ref) {
+ var _content;
+
+ var color = _ref.color,
+ fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize,
+ sidebarWidth = _ref.sidebarWidth,
+ mq = _ref.mq,
+ space = _ref.space,
+ maxWidth = _ref.maxWidth;
+ return {
+ root: {
+ color: color.base,
+ backgroundColor: color.baseBackground
+ },
+ hasSidebar: _defineProperty({
+ paddingLeft: sidebarWidth
+ }, mq.small, {
+ paddingLeft: 0
+ }),
+ content: (_content = {
+ maxWidth: maxWidth,
+ padding: [[space[2], space[4]]],
+ margin: [[0, 'auto']]
+ }, _defineProperty(_content, mq.small, {
+ padding: space[2]
+ }), _defineProperty(_content, 'display', 'block'), _content),
+ sidebar: _defineProperty({
+ backgroundColor: color.sidebarBackground,
+ border: [[color.border, 'solid']],
+ borderWidth: [[0, 1, 0, 0]],
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ bottom: 0,
+ width: sidebarWidth,
+ overflow: 'auto'
+ }, mq.small, {
+ position: 'static',
+ width: 'auto',
+ borderWidth: [[1, 0, 0, 0]],
+ paddingBottom: space[0]
+ }),
+ logo: {
+ padding: space[2],
+ borderBottom: [[1, color.border, 'solid']]
+ },
+ footer: {
+ display: 'block',
+ color: color.light,
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.small
+ }
+ };
+};
+
+function StyleGuideRenderer(_ref2) {
+ var classes = _ref2.classes,
+ title = _ref2.title,
+ homepageUrl = _ref2.homepageUrl,
+ children = _ref2.children,
+ toc = _ref2.toc,
+ hasSidebar = _ref2.hasSidebar;
+
+ return _react2.default.createElement(
+ 'div',
+ { className: (0, _classnames2.default)(classes.root, hasSidebar && classes.hasSidebar) },
+ _react2.default.createElement(
+ 'main',
+ { className: classes.content },
+ children,
+ _react2.default.createElement(
+ 'footer',
+ { className: classes.footer },
+ _react2.default.createElement(_Markdown2.default, { text: 'Generated with [React Styleguidist](' + homepageUrl + ')' })
+ )
+ ),
+ hasSidebar && _react2.default.createElement(
+ 'div',
+ { className: classes.sidebar },
+ _react2.default.createElement(
+ 'div',
+ { className: classes.logo },
+ _react2.default.createElement(
+ _Logo2.default,
+ null,
+ title
+ )
+ ),
+ toc
+ )
+ );
+}
+
+StyleGuideRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ title: _propTypes2.default.string.isRequired,
+ homepageUrl: _propTypes2.default.string.isRequired,
+ children: _propTypes2.default.node.isRequired,
+ toc: _propTypes2.default.node.isRequired,
+ hasSidebar: _propTypes2.default.bool
+};
+
+exports.default = (0, _Styled2.default)(styles)(StyleGuideRenderer);
+
+/***/ }),
+/* 848 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _StyleGuide = __webpack_require__(846);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_StyleGuide).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 849 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _addStyles = __webpack_require__(855);
+
+var _addStyles2 = _interopRequireDefault(_addStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+exports.default = function (styles) {
+ return function (WrappedComponent) {
+ var _class, _temp;
+
+ return _temp = _class = function (_Component) {
+ _inherits(_class, _Component);
+
+ function _class() {
+ _classCallCheck(this, _class);
+
+ return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
+ }
+
+ _createClass(_class, [{
+ key: 'componentWillMount',
+ value: function componentWillMount() {
+ var componentName = WrappedComponent.name.replace(/Renderer$/, '');
+ this.classes = (0, _addStyles2.default)(styles, this.context.config || {}, componentName);
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ return _react2.default.createElement(WrappedComponent, _extends({}, this.props, { classes: this.classes }));
+ }
+ }]);
+
+ return _class;
+ }(_react.Component), _class.contextTypes = {
+ config: _propTypes2.default.object
+ }, _temp;
+ };
+};
+
+/***/ }),
+/* 850 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _utils = __webpack_require__(303);
+
+var _ComponentsList = __webpack_require__(813);
+
+var _ComponentsList2 = _interopRequireDefault(_ComponentsList);
+
+var _TableOfContentsRenderer = __webpack_require__(851);
+
+var _TableOfContentsRenderer2 = _interopRequireDefault(_TableOfContentsRenderer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var TableOfContents = function (_Component) {
+ _inherits(TableOfContents, _Component);
+
+ function TableOfContents() {
+ var _ref;
+
+ var _temp, _this, _ret;
+
+ _classCallCheck(this, TableOfContents);
+
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableOfContents.__proto__ || Object.getPrototypeOf(TableOfContents)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+ searchTerm: ''
+ }, _temp), _possibleConstructorReturn(_this, _ret);
+ }
+
+ _createClass(TableOfContents, [{
+ key: 'renderLevel',
+ value: function renderLevel(sections) {
+ var _this2 = this;
+
+ var items = sections.map(function (section) {
+ var children = [].concat(_toConsumableArray(section.sections || []), _toConsumableArray(section.components || []));
+ return Object.assign({}, section, {
+ heading: !!section.name && children.length > 0,
+ content: children.length > 0 && _this2.renderLevel(children)
+ });
+ });
+ return _react2.default.createElement(_ComponentsList2.default, { items: items });
+ }
+ }, {
+ key: 'renderSections',
+ value: function renderSections() {
+ var searchTerm = this.state.searchTerm;
+ var sections = this.props.sections;
+
+ // If there is only one section, we treat it as a root section
+ // In this case the name of the section won't be rendered and it won't get left padding
+
+ var firstLevel = sections.length === 1 ? sections[0].components : sections;
+ var filtered = (0, _utils.filterSectionsByName)(firstLevel, searchTerm);
+
+ return this.renderLevel(filtered);
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ var _this3 = this;
+
+ var searchTerm = this.state.searchTerm;
+
+ return _react2.default.createElement(
+ _TableOfContentsRenderer2.default,
+ {
+ searchTerm: searchTerm,
+ onSearchTermChange: function onSearchTermChange(searchTerm) {
+ return _this3.setState({ searchTerm: searchTerm });
+ }
+ },
+ this.renderSections()
+ );
+ }
+ }]);
+
+ return TableOfContents;
+}(_react.Component);
+
+TableOfContents.propTypes = {
+ sections: _propTypes2.default.array.isRequired
+};
+exports.default = TableOfContents;
+
+/***/ }),
+/* 851 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.TableOfContentsRenderer = TableOfContentsRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(_ref) {
+ var space = _ref.space,
+ color = _ref.color,
+ fontFamily = _ref.fontFamily,
+ fontSize = _ref.fontSize,
+ borderRadius = _ref.borderRadius;
+ return {
+ root: {
+ fontFamily: fontFamily.base
+ },
+ search: {
+ padding: space[2]
+ },
+ input: {
+ display: 'block',
+ width: '100%',
+ padding: space[1],
+ color: color.base,
+ backgroundColor: color.baseBackground,
+ fontFamily: fontFamily.base,
+ fontSize: fontSize.base,
+ border: [[1, color.border, 'solid']],
+ borderRadius: borderRadius,
+ transition: 'border-color ease-in-out .15s',
+ '&:focus': {
+ isolate: false,
+ borderColor: color.link,
+ outline: 0
+ }
+ }
+ };
+};
+
+function TableOfContentsRenderer(_ref2) {
+ var classes = _ref2.classes,
+ children = _ref2.children,
+ searchTerm = _ref2.searchTerm,
+ onSearchTermChange = _ref2.onSearchTermChange;
+
+ return _react2.default.createElement(
+ 'div',
+ null,
+ _react2.default.createElement(
+ 'div',
+ { className: classes.root },
+ _react2.default.createElement(
+ 'div',
+ { className: classes.search },
+ _react2.default.createElement('input', {
+ value: searchTerm,
+ className: classes.input,
+ placeholder: 'Filter by name',
+ onChange: function onChange(event) {
+ return onSearchTermChange(event.target.value);
+ }
+ })
+ ),
+ children
+ )
+ );
+}
+
+TableOfContentsRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ children: _propTypes2.default.node,
+ searchTerm: _propTypes2.default.string.isRequired,
+ onSearchTermChange: _propTypes2.default.func.isRequired
+};
+
+exports.default = (0, _Styled2.default)(styles)(TableOfContentsRenderer);
+
+/***/ }),
+/* 852 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _TableOfContents = __webpack_require__(850);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_TableOfContents).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 853 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.WelcomeRenderer = WelcomeRenderer;
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = __webpack_require__(1);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Markdown = __webpack_require__(36);
+
+var _Markdown2 = _interopRequireDefault(_Markdown);
+
+var _Styled = __webpack_require__(10);
+
+var _Styled2 = _interopRequireDefault(_Styled);
+
+var _consts = __webpack_require__(305);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(_ref) {
+ var space = _ref.space,
+ maxWidth = _ref.maxWidth;
+ return {
+ root: {
+ maxWidth: maxWidth,
+ margin: [[0, 'auto']],
+ padding: space[4]
+ }
+ };
+};
+
+function WelcomeRenderer(_ref2) {
+ var classes = _ref2.classes,
+ patterns = _ref2.patterns;
+
+ return _react2.default.createElement(
+ 'div',
+ { className: classes.root },
+ _react2.default.createElement(_Markdown2.default, {
+ text: '\n# Welcome to React Styleguidist!\n\n**We couldn\u2019t find any components** using these patterns:\n\n' + patterns.map(function (p) {
+ return '- `' + p + '`';
+ }).join('\n') + '\n\nCreate **styleguide.config.js** file in your project root directory like this:\n\n module.exports = {\n components: \'src/components/**/*.js\'\n };\n\nRead more in the [locating components guide](' + _consts.DOCS_COMPONENTS + ').\n\t\t\t\t'
+ })
+ );
+}
+
+WelcomeRenderer.propTypes = {
+ classes: _propTypes2.default.object.isRequired,
+ patterns: _propTypes2.default.array.isRequired
+};
+
+exports.default = (0, _Styled2.default)(styles)(WelcomeRenderer);
+
+/***/ }),
+/* 854 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _WelcomeRenderer = __webpack_require__(853);
+
+Object.defineProperty(exports, 'default', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_WelcomeRenderer).default;
+ }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 855 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _jss = __webpack_require__(85);
+
+var _jss2 = _interopRequireDefault(_jss);
+
+var _merge = __webpack_require__(692);
+
+var _merge2 = _interopRequireDefault(_merge);
+
+var _memoize = __webpack_require__(264);
+
+var _memoize2 = _interopRequireDefault(_memoize);
+
+var _theme = __webpack_require__(861);
+
+var theme = _interopRequireWildcard(_theme);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = (0, _memoize2.default)(function (styles, config, componentName) {
+ var mergedTheme = (0, _merge2.default)(theme, config.theme);
+ var mergedStyles = (0, _merge2.default)(styles(mergedTheme), config.styles && config.styles[componentName]);
+ return _jss2.default.createStyleSheet(mergedStyles, { meta: componentName }).attach().classes;
+});
+
+/***/ }),
+/* 856 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+__webpack_require__(859);
+
+__webpack_require__(860);
+
+/***/ }),
+/* 857 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint-disable */
+
+exports.default = jssIsolate;
+
+var _inherited = __webpack_require__(858);
+
+var _inherited2 = _interopRequireDefault(_inherited);
+
+var _noninherited = __webpack_require__(302);
+
+var _noninherited2 = _interopRequireDefault(_noninherited);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var debounce = function debounce(fn) {
+ var timeoutId = void 0;
+ return function () {
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ clearTimeout(timeoutId);
+ timeoutId = setTimeout(function () {
+ return fn.apply(undefined, args);
+ });
+ };
+};
+
+var setSelector = debounce(function (rule, selectors) {
+ rule.selector = selectors.join(',\n');
+});
+
+var getReset = function getReset() {
+ var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inherited';
+
+ switch (option) {
+ case 'inherited':
+ return _inherited2.default;
+ case 'nonInherited':
+ return _noninherited2.default;
+ case 'all':
+ return _extends({}, _inherited2.default, _noninherited2.default);
+ default:
+ // If option is an object, merge it with the `inherited` props.
+ return _extends({}, _inherited2.default, option);
+ }
+};
+
+function jssIsolate() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+ var globalIsolate = options.isolate == null ? true : options.isolate;
+ var selectors = [];
+ var resetSheet = null;
+ var resetRule = void 0;
+
+ function onProcessRule(rule, sheet) {
+ if (rule.type !== 'regular' || !sheet || sheet === resetSheet || !rule.style) {
+ return;
+ }
+
+ var parent = rule.options.parent;
+
+ if (parent && (parent.type === 'keyframe' || parent.type === 'conditional')) {
+ return;
+ }
+
+ var isolate = globalIsolate;
+ if (sheet.options.isolate != null) {
+ isolate = sheet.options.isolate;
+ }
+ if (rule.style.isolate != null) {
+ isolate = rule.style.isolate;
+ delete rule.style.isolate;
+ }
+
+ if (isolate === false) {
+ return;
+ }
+
+ // Option `isolate` may be for e.g. `{isolate: 'root'}`.
+ // In this case it must match the rule name in order to isolate it.
+ if (isolate !== rule.name && typeof isolate === 'string') {
+ return;
+ }
+
+ // Create a separate style sheet once and use it for all rules.
+ if (!resetSheet && rule.options.jss) {
+ resetSheet = rule.options.jss.createStyleSheet({}, {
+ link: true,
+ meta: 'jss-isolate',
+ // Lets make it always the first one in sheets for testing
+ // and specificity.
+ index: -Infinity
+ });
+ resetRule = resetSheet.addRule('reset', getReset(options.reset));
+ resetSheet.attach();
+ }
+ if (selectors.indexOf(rule.selector) === -1) {
+ selectors.push(rule.selector);
+ }
+ setSelector(resetRule, selectors);
+ };
+
+ return { onProcessRule: onProcessRule };
+}
+
+/***/ }),
+/* 858 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+/* eslint-disable */
+/**
+ * List of inheritable properties.
+ *
+ * Borrowed from https://github.com/suitcss/preprocessor/blob/master/lib/encapsulation.js
+ */
+exports.default = {
+ 'border-collapse': 'separate',
+ 'border-spacing': 0,
+ 'caption-side': 'top',
+ 'color': 'initial',
+ 'cursor': 'auto',
+ 'direction': 'initial',
+ 'empty-cells': 'show',
+ 'font': 'initial',
+ 'font-size-adjust': 'none',
+ 'font-family': 'initial',
+ 'font-size': 'medium',
+ 'font-style': 'normal',
+ 'font-stretch': 'normal',
+ 'font-variant': 'normal',
+ 'font-weight': 'normal',
+ 'letter-spacing': 'normal',
+ 'line-height': 'normal',
+ 'list-style-image': 'none',
+ 'list-style-position': 'outside',
+ 'list-style-type': 'disc',
+ 'list-style': 'initial',
+ 'orphans': 2,
+ 'quotes': 'initial',
+ 'tab-size': 8,
+ 'text-align': 'initial',
+ 'text-align-last': 'auto',
+ 'text-decoration-color': 'initial',
+ 'text-indent': 0,
+ 'text-justify': 'auto',
+ 'text-shadow': 'none',
+ 'text-transform': 'none',
+ 'visibility': 'visible',
+ 'white-space': 'normal',
+ 'widows': 2,
+ 'word-break': 'normal',
+ 'word-spacing': 'normal',
+ 'word-wrap': 'normal'
+};
+
+/***/ }),
+/* 859 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+// XXX: Waiting for release:
+// https://github.com/cssinjs/jss-isolate/commit/c09c9355dfa02374971b8d929d13e651ac301990
+// https://github.com/cssinjs/jss-isolate/pull/9
+
+
+var _jss = __webpack_require__(85);
+
+var _jss2 = _interopRequireDefault(_jss);
+
+var _jssIsolate = __webpack_require__(857);
+
+var _jssIsolate2 = _interopRequireDefault(_jssIsolate);
+
+var _noninherited = __webpack_require__(302);
+
+var _noninherited2 = _interopRequireDefault(_noninherited);
+
+var _jssNested = __webpack_require__(476);
+
+var _jssNested2 = _interopRequireDefault(_jssNested);
+
+var _jssCamelCase = __webpack_require__(471);
+
+var _jssCamelCase2 = _interopRequireDefault(_jssCamelCase);
+
+var _jssDefaultUnit = __webpack_require__(474);
+
+var _jssDefaultUnit2 = _interopRequireDefault(_jssDefaultUnit);
+
+var _jssCompose = __webpack_require__(472);
+
+var _jssCompose2 = _interopRequireDefault(_jssCompose);
+
+var _jssGlobal = __webpack_require__(475);
+
+var _jssGlobal2 = _interopRequireDefault(_jssGlobal);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_jss2.default.setup({
+ plugins: [(0, _jssGlobal2.default)(), (0, _jssIsolate2.default)({
+ reset: _extends({}, _noninherited2.default, {
+
+ // “Global” styles for all components
+ boxSizing: 'border-box',
+
+ // Allow inheritance because it may be set on body and should be available for user components
+ fontFamily: 'inherit'
+ })
+ }), (0, _jssNested2.default)(), (0, _jssCamelCase2.default)(), (0, _jssDefaultUnit2.default)(), (0, _jssCompose2.default)()]
+});
+
+/***/ }),
+/* 860 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _jss = __webpack_require__(85);
+
+var _jss2 = _interopRequireDefault(_jss);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+ // Global styles
+ body: {
+ isolate: false,
+ margin: 0,
+ padding: 0,
+ border: 0
+ }
+};
+
+// Attach styles to body
+
+var body = _jss2.default.createStyleSheet(styles).attach().classes.body;
+
+document.body.classList.add(body);
+
+/***/ }),
+/* 861 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+var spaceFactor = exports.spaceFactor = 8;
+var space = exports.space = [spaceFactor / 2, // 4
+spaceFactor, // 8
+spaceFactor * 2, // 16
+spaceFactor * 3, // 24
+spaceFactor * 4, // 32
+spaceFactor * 5, // 40
+spaceFactor * 6];
+
+var color = exports.color = {
+ base: '#333',
+ light: '#999',
+ lightest: '#ccc',
+ link: '#1978c8',
+ linkHover: '#f28a25',
+ border: '#e8e8e8',
+ name: '#7f9a44',
+ type: '#b77daa',
+ error: '#fff',
+ baseBackground: '#fff',
+ errorBackground: '#c00',
+ codeBackground: '#f5f5f5',
+ sidebarBackground: '#f5f5f5'
+};
+
+var fontFamily = exports.fontFamily = {
+ base: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Roboto"', '"Oxygen"', '"Ubuntu"', '"Cantarell"', '"Fira Sans"', '"Droid Sans"', '"Helvetica Neue"', 'sans-serif'],
+ monospace: ['Consolas', '"Liberation Mono"', 'Menlo', 'monospace']
+};
+
+var fontSize = exports.fontSize = {
+ base: 15,
+ text: 16,
+ small: 13,
+ h1: 48,
+ h2: 36,
+ h3: 24,
+ h4: 18,
+ h5: 16,
+ h6: 16
+};
+
+var mq = exports.mq = {
+ small: '@media (max-width: 600px)'
+};
+
+var borderRadius = exports.borderRadius = 3;
+var maxWidth = exports.maxWidth = 1000;
+var sidebarWidth = exports.sidebarWidth = 200;
+
+/***/ }),
+/* 862 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(330)(undefined);
+// imports
+
+
+// module
+exports.push([module.i, "/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */\n\n/* Tomorrow Comment */\n.hljs-comment,\n.hljs-quote {\n color: #8e908c;\n}\n\n/* Tomorrow Red */\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class,\n.hljs-regexp,\n.hljs-deletion {\n color: #c82829;\n}\n\n/* Tomorrow Orange */\n.hljs-number,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-literal,\n.hljs-type,\n.hljs-params,\n.hljs-meta,\n.hljs-link {\n color: #f5871f;\n}\n\n/* Tomorrow Yellow */\n.hljs-attribute {\n color: #eab700;\n}\n\n/* Tomorrow Green */\n.hljs-string,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-addition {\n color: #718c00;\n}\n\n/* Tomorrow Blue */\n.hljs-title,\n.hljs-section {\n color: #4271ae;\n}\n\n/* Tomorrow Purple */\n.hljs-keyword,\n.hljs-selector-tag {\n color: #8959a8;\n}\n\n.hljs {\n display: block;\n overflow-x: auto;\n background: white;\n color: #4d4d4c;\n padding: 0.5em;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 863 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = { 'react': __webpack_require__(0) };
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'code',
+ 'content': 'Inspire the lazy',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'code',
+ 'content': '\n Inspire the lazy secondary\n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 864 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ '../button': __webpack_require__(121),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'markdown',
+ 'content': 'In the mockups, the spacing between elements is done through a baseline grid.\n\nWhat that means is that spacing is measured in `units` over a `base`. I.e. `1.5 unit` where the base is `6px` corresponds to `9px`.\n\n{insert image from sketch}\n\nTo allow a declarative way of defining spacing in every component in our UI framework, a composer was written that styles each component instance with based on the props passed to it. E.g.:\n\n```html\n<Button margin=\'2\'>Hello World</Button>\n```\n\nIs going to translate into a `` that has `12px` of margin.\n\nWhat enables this is the [`Baseline` composer](https://github.com/yldio/joyent-portal/blob/a5774063ed8caf2569aff2905af2d7dca7a01a52/ui/src/shared/composers/index.js#L51). \n\nThe Baseline composer is essentially an [HOC](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750): It exposes a function that accepts a Component as a parameter. That component is then wrapped in a [styled-component](https://github.com/styled-components/styled-components#overriding-component-styles). \n\nThe `styled-component` that wraps the Component just goes through a list of supported rules - see list below. From each rule it does the match to the corresponding prop and calculates the `rem`.\n\nList of supported props:\n\n- `border`\n- `margin`\n- `marginTop`\n- `marginRight`\n- `marginBottom`\n- `marginLeft`\n- `padding`\n- `paddingTop`\n- `paddingRight`\n- `paddingBottom`\n- `paddingLeft`\n- `borderTopWidth`\n- `borderRightWidth`\n- `borderBottomWidth`\n- `borderLeftWidth`\n\nTo use this composer, you just do it as you would with any other HOC:\n\n```js\n\nconst Button = (props) => (\n <button>my button</button>\n);\n\n\nexport default Baseline(Button);\n```\n\nWhoever required that ``, will be able to declare any of the properties especified above and have the style of the component be applied accordingly.\n\n#### examples'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const Button = require(\'../button\').default;\n\n\n \n \n \n \n \n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 865 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = { 'react': __webpack_require__(0) };
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'markdown',
+ 'content': '### with text'
+ },
+ {
+ 'type': 'code',
+ 'content': '\n \n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '### secondary'
+ },
+ {
+ 'type': 'code',
+ 'content': '\n \n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '### tertiary'
+ },
+ {
+ 'type': 'code',
+ 'content': '\n \n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '### disabled'
+ },
+ {
+ 'type': 'code',
+ 'content': '\n \n \n \n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 866 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './': __webpack_require__(390),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'code',
+ 'content': 'const {\n CardDescription,\n CardHeader,\n CardMeta,\n CardOptions,\n CardOutlet,\n CardSubTitle,\n CardTitle,\n CardView,\n CardGroupView\n} = require(\'./\');\n\n\n \n \n Title\n Subtitle\n Description\n \n Outlet\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `collapsed`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const {\n CardDescription,\n CardHeader,\n CardMeta,\n CardOptions,\n CardOutlet,\n CardSubTitle,\n CardTitle,\n CardView,\n CardGroupView\n} = require(\'./\');\n\n\n \n \n Title\n Subtitle\n Description\n \n Outlet\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `headed`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const {\n CardDescription,\n CardHeader,\n CardMeta,\n CardOptions,\n CardOutlet,\n CardSubTitle,\n CardTitle,\n CardView,\n CardGroupView\n} = require(\'./\');\n\n\n \n \n Title\n Subtitle\n Description\n \n \n \n \n \n Description\n \n Outlet\n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `headed` and `collapsed`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const {\n CardDescription,\n CardHeader,\n CardMeta,\n CardOptions,\n CardOutlet,\n CardSubTitle,\n CardTitle,\n CardView,\n CardGroupView\n} = require(\'./\');\n\n\n \n \n Title\n Subtitle\n Description\n \n \n \n \n \n Description\n \n Outlet\n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `stacked`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const {\n CardDescription,\n CardHeader,\n CardMeta,\n CardOptions,\n CardOutlet,\n CardSubTitle,\n CardTitle,\n CardView,\n CardGroupView\n} = require(\'./\');\n\n\n \n \n Title\n Subtitle\n Description\n \n Outlet\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### group'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const {\n CardDescription,\n CardHeader,\n CardMeta,\n CardOptions,\n CardOutlet,\n CardSubTitle,\n CardTitle,\n CardView,\n CardGroupView\n} = require(\'./\');\n\n\n \n \n Title\n Subtitle\n Description\n \n \n \n \n \n \n \n Title\n \n Outlet\n \n \n \n \n \n Title\n Subtitle\n Description\n \n Outlet\n \n \n \n \n \n Title\n Subtitle\n \n Outlet\n \n \n \n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 867 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './group': __webpack_require__(66),
+ './label': __webpack_require__(81),
+ './meta': __webpack_require__(82),
+ 'react-styled-flexboxgrid': __webpack_require__(59),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `checked`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `disabled`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### label before'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### warning'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children warning!\n \n \n \n \n \n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### error'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children error!\n \n \n \n \n \n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### success'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children success!\n \n \n \n \n \n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### label before with status'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n Thanks for ticking, you are a star!\n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### multiple with meta'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { Col, Row } = require(\'react-styled-flexboxgrid\');\nconst FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n \n \n \n \n
\n \n \n \n Thanks for ticking, you are a star!\n \n \n
\n \n \n \n \n \n \n \n Thanks for ticking, you are a star!\n \n \n
\n \n \n \n \n \n
\n \n \n
',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 868 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './group': __webpack_require__(66),
+ './label': __webpack_require__(81),
+ '../text/small': __webpack_require__(401),
+ './meta': __webpack_require__(82),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'code',
+ 'content': '',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `type`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\nconst Small = require(\'../text/small\').default;\n\n\n \n \n We'll never share your email with anyone else.\n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### error'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children error!\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### warning'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children warning!\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### success'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children success!\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### meta'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n \n I'm a children of meta\n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 869 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './radio': __webpack_require__(204),
+ './group': __webpack_require__(66),
+ './label': __webpack_require__(81),
+ './legend': __webpack_require__(203),
+ './meta': __webpack_require__(82),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'code',
+ 'content': 'const { RadioList } = require(\'./radio\');\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\nconst Legend = require(\'./legend\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `disabled`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { RadioList } = require(\'./radio\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\n\n\n \n \n Video\n TV\n Netflix\n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### error'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { RadioList } = require(\'./radio\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n Unexpected children error!\n \n \n Video\n TV\n Netflix\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### warning'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { RadioList } = require(\'./radio\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n Unexpected children warning!\n \n \n Video\n TV\n Netflix\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### success'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { RadioList } = require(\'./radio\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n \n Video\n TV\n Netflix\n \n \n \n \n \n Unexpected children success!\n \n \n Video\n TV\n Netflix\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### meta before'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { RadioList } = require(\'./radio\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\nconst FormMeta = require(\'./meta\').default;\n\n\n \n I'm a children of meta\n \n Video\n TV\n Netflix\n \n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 870 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './group': __webpack_require__(66),
+ './label': __webpack_require__(81),
+ './meta': __webpack_require__(82),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### placeholder'
+ },
+ {
+ 'type': 'code',
+ 'content': '',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `disabled`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### selected'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### multiple'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### warning'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children warning!\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### error'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children error!\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### success'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Unexpected children success!\n \n \n
',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### meta'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const FormMeta = require(\'./meta\').default;\nconst FormGroup = require(\'./group\').default;\nconst Label = require(\'./label\').default;\n\n\n \n \n \n I'm a children of meta!\n \n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 871 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './toggle': __webpack_require__(205),
+ './group': __webpack_require__(66),
+ './legend': __webpack_require__(203),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [
+ {
+ 'type': 'code',
+ 'content': 'const { ToggleList } = require(\'./toggle\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\n\n\n \n \n Video\n TV\n Netflix\n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### selected'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { ToggleList } = require(\'./toggle\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\n\n\n \n \n Video\n TV\n Netflix\n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### two items'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { ToggleList } = require(\'./toggle\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\n\n\n \n \n TV\n Netflix\n \n',
+ 'evalInContext': evalInContext
+ },
+ {
+ 'type': 'markdown',
+ 'content': '#### `disabled`'
+ },
+ {
+ 'type': 'code',
+ 'content': 'const { ToggleList } = require(\'./toggle\');\nconst FormGroup = require(\'./group\').default;\nconst Legend = require(\'./legend\').default;\n\n\n \n \n Video\n TV\n Netflix\n \n',
+ 'evalInContext': evalInContext
+ }
+]
+
+
+/***/ }),
+/* 872 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './colors': __webpack_require__(402),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [{
+ 'type': 'code',
+ 'content': 'const Colors = require(\'./colors\').default;\n\n',
+ 'evalInContext': evalInContext
+ }]
+
+
+/***/ }),
+/* 873 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+var requireMap = {
+ './data/wp.json': __webpack_require__(1033),
+ 'react': __webpack_require__(0)
+};
+var requireInRuntimeBase = __webpack_require__(21);
+var requireInRuntime = requireInRuntimeBase.bind(null, requireMap);
+var evalInContextBase = __webpack_require__(20);
+var evalInContext = evalInContextBase.bind(null, "var React = require('react');", requireInRuntime);
+
+module.exports = [{
+ 'type': 'code',
+ 'content': 'const data = require(\'./data/wp.json\');\n',
+ 'evalInContext': evalInContext
+ }]
+
+
+/***/ }),
+/* 874 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+module.exports = {
+ 'description': '\n',
+ 'methods': [],
+ 'displayName': 'Anchor',
+ 'props': {
+ 'children': {
+ 'type': { 'name': 'node' },
+ 'required': false,
+ 'description': 'The `` text',
+ 'tags': {}
+ },
+ 'secondary': {
+ 'type': { 'name': 'bool' },
+ 'required': false,
+ 'description': '',
+ 'defaultValue': {
+ 'value': 'false',
+ 'computed': false
+ },
+ 'tags': {}
+ }
+ },
+ 'doclets': {},
+ 'tags': {
+ 'example': [{
+ 'title': 'example',
+ 'description': './usage.md'
+ }]
+ },
+ 'example': __webpack_require__(863),
+ 'examples': []
+}
+
+
+/***/ }),
+/* 875 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+if (false) {
+ module.hot.accept([])
+}
+
+module.exports = {
+ 'description': '\n',
+ 'methods': [],
+ 'displayName': 'Button',
+ 'props': {
+ 'children': {
+ 'type': { 'name': 'node' },
+ 'required': false,
+ 'description': 'The `