UNPKG

keystone

Version:

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

1,074 lines (862 loc) 580 kB
require=(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ "use strict"; var _theme = _interopRequireDefault(require("../../../theme")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } module.exports = { danger: _theme["default"].alert.color.danger, error: _theme["default"].alert.color.danger, info: _theme["default"].alert.color.info, success: _theme["default"].alert.color.success, warning: _theme["default"].alert.color.warning }; },{"../../../theme":79}],2:[function(require,module,exports){ "use strict"; var _glamor = require("glamor"); var _react = _interopRequireWildcard(require("react")); var _styles = _interopRequireDefault(require("./styles")); var _colors = _interopRequireDefault(require("./colors")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _extends() { _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; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } // clone children if a class exists for the tagname var cloneWithClassnames = function cloneWithClassnames(c) { var type = c.type && c.type.displayName ? c.type.displayName : c.type || null; if (!type || !_styles["default"][type]) return c; return (0, _react.cloneElement)(c, { className: (0, _glamor.css)(_styles["default"][type]) }); }; function Alert(_ref) { var children = _ref.children, className = _ref.className, color = _ref.color, Component = _ref.component, props = _objectWithoutProperties(_ref, ["children", "className", "color", "component"]); props.className = (0, _glamor.css)(_styles["default"].alert, _styles["default"][color], className); props.children = _react.Children.map(children, cloneWithClassnames); return _react["default"].createElement(Component, _extends({}, props, { "data-alert-type": color })); } ; Alert.propTypes = { color: _react.PropTypes.oneOf(Object.keys(_colors["default"])).isRequired, component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]) }; Alert.defaultProps = { component: 'div' }; module.exports = Alert; },{"./colors":1,"./styles":3,"glamor":undefined,"react":undefined}],3:[function(require,module,exports){ "use strict"; var _colors = _interopRequireDefault(require("./colors")); var _theme = _interopRequireDefault(require("../../../theme")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } 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; } // Prepare variants var colorVariants = {}; Object.keys(_colors["default"]).forEach(function (color) { colorVariants[color] = { backgroundColor: _colors["default"][color].background, borderColor: _colors["default"][color].border, color: _colors["default"][color].text }; }); // Prepare headings var headingTagnames = {}; ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (tag) { headingTagnames[tag] = { color: 'inherit' }; }); var linkStyles = { color: 'inherit', textDecoration: 'underline', ':hover': { color: 'inherit' }, ':focus': { color: 'inherit' } }; module.exports = _objectSpread({ alert: { borderColor: 'transparent', borderRadius: _theme["default"].alert.borderRadius, borderStyle: 'solid', borderWidth: _theme["default"].alert.borderWidth, margin: _theme["default"].alert.margin, padding: _theme["default"].alert.padding }, // tagnames a: linkStyles, Link: linkStyles, strong: { fontWeight: 500 } }, headingTagnames, colorVariants); },{"../../../theme":79,"./colors":1}],4:[function(require,module,exports){ "use strict"; var _glamor = require("glamor"); var _react = _interopRequireWildcard(require("react")); var _theme = _interopRequireDefault(require("../../../theme")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function BlankState(_ref) { var className = _ref.className, children = _ref.children, heading = _ref.heading, Component = _ref.component, props = _objectWithoutProperties(_ref, ["className", "children", "heading", "component"]); props.className = (0, _glamor.css)(classes.container, className); return _react["default"].createElement(Component, props, !!heading && _react["default"].createElement("h2", { "data-e2e-blank-state-heading": true, className: (0, _glamor.css)(classes.heading) }, heading), children); } ; BlankState.propTypes = { component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]).isRequired, heading: _react.PropTypes.string }; BlankState.defaultProps = { component: 'div' }; /* eslint quote-props: ["error", "as-needed"] */ var classes = { container: { backgroundColor: _theme["default"].blankstate.background, borderRadius: _theme["default"].blankstate.borderRadius, color: _theme["default"].blankstate.color, paddingBottom: _theme["default"].blankstate.paddingVertical, paddingLeft: _theme["default"].blankstate.paddingHorizontal, paddingRight: _theme["default"].blankstate.paddingHorizontal, paddingTop: _theme["default"].blankstate.paddingVertical, textAlign: 'center' }, heading: { color: 'inherit', ':last-child': { marginBottom: 0 } } }; module.exports = BlankState; },{"../../../theme":79,"glamor":undefined,"react":undefined}],5:[function(require,module,exports){ "use strict"; var _glamor = require("glamor"); var _react = _interopRequireWildcard(require("react")); var _styles = _interopRequireDefault(require("./styles")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } var commonClasses = _styles["default"].common; var stylesheetCache = {}; function getStyleSheet(variant, color) { var cacheKey = "".concat(variant, "-").concat(color); if (!stylesheetCache[cacheKey]) { var variantStyles = _styles["default"][variant](color); stylesheetCache[cacheKey] = variantStyles; } return stylesheetCache[cacheKey]; } var BUTTON_SIZES = ['large', 'medium', 'small', 'xsmall']; var BUTTON_VARIANTS = ['fill', 'hollow', 'link']; var BUTTON_COLORS = ['default', 'primary', 'success', 'warning', 'danger', 'cancel', 'delete']; // NOTE must NOT be functional component to allow `refs` var Button = /*#__PURE__*/ function (_Component) { _inherits(Button, _Component); function Button() { _classCallCheck(this, Button); return _possibleConstructorReturn(this, _getPrototypeOf(Button).apply(this, arguments)); } _createClass(Button, [{ key: "render", value: function render() { var _this$props = this.props, active = _this$props.active, cssStyles = _this$props.cssStyles, block = _this$props.block, className = _this$props.className, color = _this$props.color, Tag = _this$props.component, disabled = _this$props.disabled, size = _this$props.size, variant = _this$props.variant, props = _objectWithoutProperties(_this$props, ["active", "cssStyles", "block", "className", "color", "component", "disabled", "size", "variant"]); // get the styles var variantClasses = getStyleSheet(variant, color); props.className = _glamor.css.apply(void 0, [commonClasses.base, commonClasses[size], variantClasses.base, block ? commonClasses.block : null, disabled ? commonClasses.disabled : null, active ? variantClasses.active : null].concat(_toConsumableArray(cssStyles))); if (className) { props.className += ' ' + className; } // return an anchor or button if (!Tag) { Tag = props.href ? 'a' : 'button'; } // Ensure buttons don't submit by default if (Tag === 'button' && !props.type) { props.type = 'button'; } return _react["default"].createElement(Tag, props); } }]); return Button; }(_react.Component); ; Button.propTypes = { active: _react.PropTypes.bool, block: _react.PropTypes.bool, color: _react.PropTypes.oneOf(BUTTON_COLORS), component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]), cssStyles: _react.PropTypes.arrayOf(_react.PropTypes.shape({ _definition: _react.PropTypes.object, _name: _react.PropTypes.string })), disabled: _react.PropTypes.bool, href: _react.PropTypes.string, size: _react.PropTypes.oneOf(BUTTON_SIZES), variant: _react.PropTypes.oneOf(BUTTON_VARIANTS) }; Button.defaultProps = { cssStyles: [], color: 'default', variant: 'fill' }; module.exports = Button; },{"./styles":6,"glamor":undefined,"react":undefined}],6:[function(require,module,exports){ "use strict"; var _css = require("../../../utils/css"); var _color = require("../../../utils/color"); var _theme = _interopRequireDefault(require("../../../theme")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } 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; } // Common Styles // ---------------- exports.common = { // Base Button // ---------------- base: { 'appearance': 'none', 'background': 'none', 'borderWidth': _theme["default"].button.borderWidth, 'borderStyle': 'solid', 'borderColor': 'transparent', 'borderRadius': _theme["default"].button.borderRadius, 'cursor': 'pointer', 'display': 'inline-block', 'fontWeight': _theme["default"].button.font.weight, 'height': _theme["default"].component.height, 'lineHeight': _theme["default"].component.lineHeight, 'marginBottom': 0, 'padding': "0 ".concat(_theme["default"].button.paddingHorizontal), 'outline': 0, 'textAlign': 'center', 'touchAction': 'manipulation', 'userSelect': 'none', 'verticalAlign': 'middle', 'whiteSpace': 'nowrap', ':hover': { color: _theme["default"].button["default"].textColor, textDecoration: 'none' }, ':focus': { color: _theme["default"].button["default"].textColor, textDecoration: 'none' } }, // Block Display // ---------------- block: { display: 'block', width: '100%' }, // Disabled // ---------------- disabled: { opacity: 0.4, pointerEvents: 'none' }, // Sizes // ---------------- large: { fontSize: _theme["default"].font.size.large }, "default": { fontSize: _theme["default"].font.size["default"] }, small: { fontSize: _theme["default"].font.size.small }, xsmall: { fontSize: _theme["default"].font.size.xsmall, lineHeight: '1.9', paddingLeft: '.66em', paddingRight: '.66em' } }; // Fill Variant // ---------------- function buttonFillVariant(textColor, bgColor) { var hoverStyles = _objectSpread({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 10), (0, _color.darken)(bgColor, 5)), { borderColor: "".concat((0, _color.darken)(bgColor, 5), " ").concat((0, _color.darken)(bgColor, 10), " ").concat((0, _color.darken)(bgColor, 15)), boxShadow: '0 1px 0 rgba(0,0,0,0.1)', color: textColor, outline: 'none' }); var focusStyles = _objectSpread({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 10), (0, _color.darken)(bgColor, 5)), { borderColor: "".concat((0, _color.darken)(bgColor, 5), " ").concat((0, _color.darken)(bgColor, 10), " ").concat((0, _color.darken)(bgColor, 15)), boxShadow: "0 0 0 3px ".concat((0, _color.fade)(bgColor, 25)), color: textColor, outline: 'none' }); var activeStyles = { backgroundColor: (0, _color.darken)(bgColor, 10), backgroundImage: 'none', borderColor: "".concat((0, _color.darken)(bgColor, 25), " ").concat((0, _color.darken)(bgColor, 15), " ").concat((0, _color.darken)(bgColor, 10)), boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)' }; return { base: _objectSpread({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 5), (0, _color.darken)(bgColor, 10), bgColor), { 'borderColor': "".concat((0, _color.darken)(bgColor, 10), " ").concat((0, _color.darken)(bgColor, 20), " ").concat((0, _color.darken)(bgColor, 25)), 'boxShadow': 'inset 0 1px 0 rgba(255, 255, 255, 0.1)', 'color': textColor, 'fontWeight': 400, 'textShadow': '0 -1px 0 rgba(0, 0, 0, 0.25)', ':hover': hoverStyles, ':focus': focusStyles, ':active': activeStyles }), active: activeStyles }; } // TODO: This is pretty hacky, needs to be consolidated with the Variant() method // above (needs more theme variables to be implemented though) function buttonFillDefault() { var borderColor = _theme["default"].input.border.color["default"]; var hoverStyles = _objectSpread({}, (0, _css.gradientVertical)('#fff', '#eee'), { borderColor: "".concat((0, _color.darken)(borderColor, 5), " ").concat((0, _color.darken)(borderColor, 5), " ").concat((0, _color.darken)(borderColor, 10)), boxShadow: '0 1px 0 rgba(0,0,0,0.1)', color: _theme["default"].color.text }); var focusStyles = { borderColor: _theme["default"].color.primary, boxShadow: "0 0 0 3px ".concat((0, _color.fade)(_theme["default"].color.primary, 10)), color: _theme["default"].color.text, outline: 'none' }; var activeStyles = { background: '#e6e6e6', borderColor: (0, _color.darken)(borderColor, 10), boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)', color: _theme["default"].color.text }; return { base: _objectSpread({}, (0, _css.gradientVertical)('#fafafa', '#eaeaea'), { 'borderColor': "".concat(borderColor, " ").concat((0, _color.darken)(borderColor, 6), " ").concat((0, _color.darken)(borderColor, 12)), 'color': _theme["default"].color.text, 'textShadow': '0 1px 0 white', ':hover': hoverStyles, ':focus': focusStyles, ':active': activeStyles }), // gross hack active: _objectSpread({}, activeStyles, { ':hover': activeStyles, ':focus': _objectSpread({}, activeStyles, focusStyles, { boxShadow: "0 0 0 3px ".concat((0, _color.fade)(_theme["default"].color.primary, 10), ", inset 0 1px 2px rgba(0, 0, 0, 0.1)") }), ':active': activeStyles }) }; } exports.fill = function (color) { switch (color) { case 'default': return buttonFillDefault(); case 'cancel': case 'delete': return buttonFillVariant('white', _theme["default"].button.danger.bgColor); default: return buttonFillVariant('white', _theme["default"].button[color].bgColor); } }; // Hollow Variant // ---------------- function buttonHollowVariant(textColor, borderColor) { var focusAndHoverStyles = { backgroundImage: 'none', backgroundColor: (0, _color.fade)(borderColor, 15), borderColor: (0, _color.darken)(borderColor, 15), boxShadow: 'none', color: textColor, outline: 'none' }; var focusOnlyStyles = { boxShadow: "0 0 0 3px ".concat((0, _color.fade)(borderColor, 10)) }; var activeStyles = { backgroundColor: (0, _color.fade)(borderColor, 35), borderColor: (0, _color.darken)(borderColor, 25), boxShadow: 'none' }; return { base: { 'background': 'none', 'borderColor': borderColor, 'color': textColor, ':hover': focusAndHoverStyles, ':focus ': Object.assign({}, focusAndHoverStyles, focusOnlyStyles), ':active': activeStyles }, active: activeStyles }; } ; exports.hollow = function (color) { // TODO: better handling of cancel and delete colors if (color === 'cancel' || color === 'delete') color = 'danger'; return buttonHollowVariant(_theme["default"].button[color].bgColor, _theme["default"].button[color].borderColor); }; // Link Variant // ---------------- function buttonLinkVariant(textColor, hoverColor) { var hoverStyles = { color: hoverColor, textDecoration: 'underline' }; return { base: { 'background': 'none', 'border': 0, 'boxShadow': 'none', 'color': textColor, 'fontWeight': 'normal', 'outline': 'none', ':hover': hoverStyles, ':focus': hoverStyles, ':active': hoverStyles }, active: hoverStyles }; } ; function buttonLinkDelete() { var styles = buttonLinkVariant(_theme["default"].color.gray40, _theme["default"].color.danger); var hoverStyles = _objectSpread({}, (0, _css.gradientVertical)((0, _color.lighten)(_theme["default"].color.danger, 10), (0, _color.darken)(_theme["default"].color.danger, 10)), { backgroundColor: _theme["default"].color.danger, borderColor: "".concat((0, _color.darken)(_theme["default"].color.danger, 4), " ").concat((0, _color.darken)(_theme["default"].color.danger, 8), " ").concat((0, _color.darken)(_theme["default"].color.danger, 12)), boxShadow: '0 1px 0 rgba(0,0,0,0.1)', color: 'white', textDecoration: 'none' }); var activeStyles = { backgroundColor: (0, _color.darken)(_theme["default"].color.danger, 4), backgroundImage: 'none', borderColor: "".concat((0, _color.darken)(_theme["default"].color.danger, 12), " ").concat((0, _color.darken)(_theme["default"].color.danger, 8), " ").concat((0, _color.darken)(_theme["default"].color.danger, 8)), boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)', color: 'white' }; return { base: _objectSpread({}, styles.base, { ':hover': hoverStyles, ':focus': hoverStyles, ':active': activeStyles }), active: activeStyles }; } exports.link = function (color) { switch (color) { case 'default': return buttonLinkVariant(_theme["default"].color.link, _theme["default"].color.linkHover); case 'cancel': return buttonLinkVariant(_theme["default"].color.gray40, _theme["default"].color.danger); case 'delete': return buttonLinkDelete(); default: return buttonLinkVariant(_theme["default"].color[color], _theme["default"].color[color]); } }; },{"../../../theme":79,"../../../utils/color":82,"../../../utils/css":84}],7:[function(require,module,exports){ "use strict"; var _react = _interopRequireWildcard(require("react")); var _glamor = require("glamor"); var _styles = _interopRequireDefault(require("./styles")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } 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; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function Center(_ref) { var className = _ref.className, Component = _ref.component, height = _ref.height, style = _ref.style, props = _objectWithoutProperties(_ref, ["className", "component", "height", "style"]); props.className = (0, _glamor.css)(_styles["default"].center, className); props.style = _objectSpread({ height: height }, style); return _react["default"].createElement(Component, props); } ; Center.propTypes = { component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]), height: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]) }; Center.defaultProps = { component: 'div', height: 'auto' }; module.exports = Center; },{"./styles":8,"glamor":undefined,"react":undefined}],8:[function(require,module,exports){ "use strict"; // ============================== // Center // ============================== module.exports = { center: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }; },{}],9:[function(require,module,exports){ "use strict"; var _theme = _interopRequireDefault(require("../../../theme")); var _color = require("../../../utils/color"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } 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 baseColors = {}; ['danger', 'info', 'primary', 'success', 'warning'].forEach(function (color) { baseColors[color] = { background: (0, _color.fade)(_theme["default"].color[color], 10), backgroundActive: (0, _color.fade)(_theme["default"].color[color], 20), backgroundHover: (0, _color.fade)(_theme["default"].color[color], 15), text: _theme["default"].color[color] }; }); var invertedColors = {}; ['danger', 'info', 'primary', 'success', 'warning'].forEach(function (color) { invertedColors[color + '__inverted'] = { background: _theme["default"].color[color], backgroundActive: (0, _color.lighten)(_theme["default"].color[color], 5), backgroundHover: (0, _color.lighten)(_theme["default"].color[color], 15), text: 'white' }; }); module.exports = _objectSpread({ "default": { background: _theme["default"].color.gray10, backgroundActive: _theme["default"].color.gray20, backgroundHover: _theme["default"].color.gray15, text: _theme["default"].color.gray60 } }, baseColors, { // inverted default__inverted: { background: _theme["default"].color.gray60, backgroundActive: (0, _color.lighten)(_theme["default"].color.gray60, 5), backgroundHover: (0, _color.lighten)(_theme["default"].color.gray60, 15), text: 'white' } }, invertedColors); },{"../../../theme":79,"../../../utils/color":82}],10:[function(require,module,exports){ "use strict"; var _glamor = require("glamor"); var _react = _interopRequireWildcard(require("react")); var _styles = _interopRequireDefault(require("./styles")); var _colors = _interopRequireDefault(require("./colors")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function Chip(_ref) { var className = _ref.className, children = _ref.children, color = _ref.color, inverted = _ref.inverted, label = _ref.label, onClear = _ref.onClear, onClick = _ref.onClick, props = _objectWithoutProperties(_ref, ["className", "children", "color", "inverted", "label", "onClear", "onClick"]); props.className = (0, _glamor.css)(_styles["default"].chip, className); var labelClassName = (0, _glamor.css)(_styles["default"].button, _styles["default"].label, _styles["default"]['button__' + color + (inverted ? '__inverted' : '')]); var clearClassName = (0, _glamor.css)(_styles["default"].button, _styles["default"].clear, _styles["default"]['button__' + color + (inverted ? '__inverted' : '')]); return _react["default"].createElement("div", props, _react["default"].createElement("button", { type: "button", onClick: onClick, className: labelClassName }, label, children), !!onClear && _react["default"].createElement("button", { type: "button", onClick: onClear, className: clearClassName }, "\xD7")); } ; Chip.propTypes = { color: _react.PropTypes.oneOf(Object.keys(_colors["default"])).isRequired, inverted: _react.PropTypes.bool, label: _react["default"].PropTypes.string.isRequired, onClear: _react["default"].PropTypes.func, onClick: _react["default"].PropTypes.func }; Chip.defaultProps = { color: 'default' }; module.exports = Chip; },{"./colors":9,"./styles":11,"glamor":undefined,"react":undefined}],11:[function(require,module,exports){ "use strict"; var _colors = _interopRequireDefault(require("./colors")); var _theme = _interopRequireDefault(require("../../../theme")); var _css = require("../../../utils/css"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } 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; } // Prepare variants var colorVariants = {}; Object.keys(_colors["default"]).forEach(function (color) { var hoverStyles = { backgroundColor: _colors["default"][color].backgroundHover }; colorVariants['button__' + color] = { backgroundColor: _colors["default"][color].background, color: _colors["default"][color].text, ':hover': hoverStyles, ':focus': hoverStyles, ':active': { backgroundColor: _colors["default"][color].backgroundActive } }; }); module.exports = _objectSpread({ chip: { display: 'inline-block', fontSize: _theme["default"].font.size.small, fontWeight: 500, marginRight: '0.5em', overflow: 'hidden', lineHeight: '2.2em' }, // tagnames button: { appearance: 'none', background: 'none', border: 'none', cursor: 'pointer', display: 'block', "float": 'left', padding: '0 .9em', outline: 'none', // make pills - exaggerate the padding toward the radii so it looks even ':first-child': _objectSpread({}, (0, _css.borderLeftRadius)('3em'), { paddingLeft: '1.1em' }), ':last-child': _objectSpread({}, (0, _css.borderRightRadius)('3em'), { paddingRight: '1.1em' }) }, // provide separation between the label and clear buttons // floating stops the margins from collapsing into eaching label: { marginRight: 1 }, clear: { marginLeft: 1 } }, colorVariants); },{"../../../theme":79,"../../../utils/css":84,"./colors":9}],12:[function(require,module,exports){ "use strict"; var _glamor = require("glamor"); var _react = _interopRequireWildcard(require("react")); var _styles = _interopRequireDefault(require("./styles")); var _sizes = _interopRequireDefault(require("./sizes")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function Container(_ref) { var className = _ref.className, clearFloatingChildren = _ref.clearFloatingChildren, Component = _ref.component, width = _ref.width, props = _objectWithoutProperties(_ref, ["className", "clearFloatingChildren", "component", "width"]); props.className = (0, _glamor.css)(_styles["default"].container, _styles["default"][width], clearFloatingChildren ? _styles["default"].clearfix : null, className); return _react["default"].createElement(Component, props); } ; Container.propTypes = { clearFloatingChildren: _react.PropTypes.bool, component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]).isRequired, width: _react.PropTypes.oneOf(Object.keys(_sizes["default"])).isRequired }; Container.defaultProps = { component: 'div', width: 'large' }; module.exports = Container; },{"./sizes":13,"./styles":14,"glamor":undefined,"react":undefined}],13:[function(require,module,exports){ "use strict"; var _theme = _interopRequireDefault(require("../../../theme")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } module.exports = { small: _theme["default"].container.size.small, medium: _theme["default"].container.size.medium, large: _theme["default"].container.size.large }; },{"../../../theme":79}],14:[function(require,module,exports){ "use strict"; var _sizes = _interopRequireDefault(require("./sizes")); var _theme = _interopRequireDefault(require("../../../theme")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } 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; } // Prepare sizes var sizeVariants = {}; Object.keys(_sizes["default"]).forEach(function (size) { sizeVariants[size] = { maxWidth: _sizes["default"][size] }; }); /* Micro clearfix hack 1. The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that are clearfixed. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */ var clearfixStyles = { clear: 'both', content: '" "', // 1 display: 'table' // 2 }; module.exports = _objectSpread({ container: { marginLeft: 'auto', marginRight: 'auto', paddingLeft: _theme["default"].container.gutter, paddingRight: _theme["default"].container.gutter }, // clear floating children clearfix: { ':before': clearfixStyles, ':after': clearfixStyles } }, sizeVariants); },{"../../../theme":79,"./sizes":13}],15:[function(require,module,exports){ "use strict"; var _react = _interopRequireDefault(require("react")); var _glamor = require("glamor"); var _Button = _interopRequireDefault(require("../Button")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function DropdownButton(_ref) { var children = _ref.children, props = _objectWithoutProperties(_ref, ["children"]); return _react["default"].createElement(_Button["default"], props, children, _react["default"].createElement("span", { className: (0, _glamor.css)(classes.arrow) })); } ; // NOTE // 1: take advantage of `currentColor` by leaving border top color undefined // 2: even though the arrow is vertically centered, visually it appears too low // because of lowercase characters beside it var classes = { arrow: { borderLeft: '0.3em solid transparent', borderRight: '0.3em solid transparent', borderTop: '0.3em solid', // 1 display: 'inline-block', height: 0, marginTop: '-0.125em', // 2 verticalAlign: 'middle', width: 0, // add spacing ':first-child': { marginRight: '0.5em' }, ':last-child': { marginLeft: '0.5em' } } }; module.exports = DropdownButton; },{"../Button":5,"glamor":undefined,"react":undefined}],16:[function(require,module,exports){ "use strict"; var _glamor = require("glamor"); var _react = _interopRequireWildcard(require("react")); var _styles = _interopRequireDefault(require("./styles")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } var Form = /*#__PURE__*/ function (_Component) { _inherits(Form, _Component); function Form() { _classCallCheck(this, Form); return _possibleConstructorReturn(this, _getPrototypeOf(Form).apply(this, arguments)); } _createClass(Form, [{ key: "getChildContext", value: function getChildContext() { return { formLayout: this.props.layout, labelWidth: this.props.labelWidth }; } }, { key: "render", value: function render() { // NOTE `labelWidth` is declared to remove it from `props`, though never used var _this$props = this.props, className = _this$props.className, Component = _this$props.component, labelWidth = _this$props.labelWidth, layout = _this$props.layout, props = _objectWithoutProperties(_this$props, ["className", "component", "labelWidth", "layout"]); props.className = (0, _glamor.css)(_styles["default"].Form, _styles["default"]['Form__' + layout], className); return _react["default"].createElement(Component, props); } }]); return Form; }(_react.Component); ; Form.childContextTypes = { formLayout: _react.PropTypes.oneOf(['basic', 'horizontal', 'inline']), labelWidth: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]) }; Form.propTypes = { children