cyverse-ui - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

es/ActionGroup.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames2 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,16 +32,16 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ActionGroup', function (theme) {
-        return {
-            wrapper: {
-                display: "flex",
-                alignItems: "center"
-            }
-        };
-    });
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            display: "flex",
+            alignItems: "center"
+        }
+    };
 };
+
 /**
@@ -49,14 +51,12 @@ * Organize groups of IconButtons on list cards or in app bars.
 var ActionGroup = function ActionGroup(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ActionGroup", classes.wrapper);
 
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            display: 'flex',
-            className: classes.wrapper
-        }),
+        _extends({}, rest, { className: wrapperClasses }),
         children
@@ -74,2 +74,2 @@ );
 
-exports.default = ActionGroup;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ActionGroup));

es/ButtonMenu.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,23 +11,31 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Div = require('./Div');
+var _reactJss = require("react-jss");
 
-var _Div2 = _interopRequireDefault(_Div);
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _RaisedButton = require('material-ui/RaisedButton');
+var _classnames2 = require("classnames");
 
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
+var _RaisedButton = require("material-ui/RaisedButton");
+
 var _RaisedButton2 = _interopRequireDefault(_RaisedButton);
 
-var _Popover = require('material-ui/Popover');
+var _Popover = require("material-ui/Popover");
 
 var _Popover2 = _interopRequireDefault(_Popover);
 
-var _Menu = require('material-ui/Menu');
+var _Menu = require("material-ui/Menu");
 
@@ -38,2 +46,6 @@ var _Menu2 = _interopRequireDefault(_Menu);
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -45,2 +57,9 @@
 
+// Each key of the returned object will be available as a className below.
+var styles = {
+    wrapper: {
+        display: "inline-block"
+    }
+};
+
 /**
@@ -51,6 +70,7 @@ * A ButtonMenu is a menu that can be displayed by pressing a RaisedButton. In Troposphere a ButtonMenu is used to with the label "New" and opens a list of things that can be created.
  */
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
 
-    function _class() {
+var ButtonMenu = function (_React$Component) {
+    _inherits(ButtonMenu, _React$Component);
+
+    function ButtonMenu() {
         var _ref;
@@ -60,3 +80,3 @@
 
-        _classCallCheck(this, _class);
+        _classCallCheck(this, ButtonMenu);
 
@@ -67,3 +87,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ButtonMenu.__proto__ || Object.getPrototypeOf(ButtonMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
             open: false
@@ -89,7 +109,8 @@ }, _this.handleTouchTap = function (event) {
 
-    _createClass(_class, [{
-        key: 'render',
+    _createClass(ButtonMenu, [{
+        key: "render",
         value: function render() {
             var _props = this.props,
-                style = _props.style,
+                classes = _props.classes,
+                className = _props.className,
                 buttonIcon = _props.buttonIcon,
@@ -102,16 +123,16 @@ buttonLabel = _props.buttonLabel,
                 _props$anchorOrigin = _props.anchorOrigin,
-                anchorOrigin = _props$anchorOrigin === undefined ? { horizontal: 'right', vertical: 'bottom' } : _props$anchorOrigin,
+                anchorOrigin = _props$anchorOrigin === undefined ? {
+                horizontal: "right",
+                vertical: "bottom"
+            } : _props$anchorOrigin,
                 _props$targetOrigin = _props.targetOrigin,
-                targetOrigin = _props$targetOrigin === undefined ? { horizontal: 'right', vertical: 'top' } : _props$targetOrigin;
+                targetOrigin = _props$targetOrigin === undefined ? { horizontal: "right", vertical: "top" } : _props$targetOrigin,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "buttonIcon", "buttonLabel", "children", "primary", "secondary", "disabled", "anchorOrigin", "targetOrigin"]);
 
-
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ButtonMenu", classes.wrapper);
             return _react2.default.createElement(
-                _Div2.default,
-                {
-                    style: _extends({}, style, {
-                        display: "inline-block"
-                    }),
-                    id: this.props.id
-                },
+                _Element2.default,
+                _extends({}, rest, { className: wrapperClasses }),
                 _react2.default.createElement(_RaisedButton2.default, {
+                    className: "CY-ButtonMenu-btn",
                     onTouchTap: this.handleTouchTap,
@@ -127,2 +148,3 @@ label: buttonLabel,
                     {
+                        className: "CY-ButtonMenu-popover",
                         open: this.state.open,
@@ -137,2 +159,3 @@ anchorEl: this.state.anchorEl,
                         {
+                            className: "CY-ButtonMenu-menu",
                             onItemTouchTap: this.handleItemTouchTap
@@ -147,7 +170,7 @@ },
 
-    return _class;
+    return ButtonMenu;
 }(_react2.default.Component);
 
-_class.displayName = "ButtonMenu";
-_class.propTypes = {
+ButtonMenu.displayName = "ButtonMenu";
+ButtonMenu.propTypes = {
     /**
@@ -186,2 +209,2 @@ * Override the inline-styles of the root element.
 };
-exports.default = _class;
+exports.default = (0, _reactJss2.default)(styles)(ButtonMenu);

es/Element.js

@@ -7,6 +7,6 @@ "use strict";
 
+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 _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 = require("react");
@@ -24,20 +24,20 @@
 
-var _jssThemeReactor = require("jss-theme-reactor");
+var _classnames5 = require("classnames");
 
-var _getStyleManager = require("./styles/getStyleManager");
+var _classnames6 = _interopRequireDefault(_classnames5);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _reactJss = require("react-jss");
 
-var _muiThemeable = require("material-ui/styles/muiThemeable");
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
-
 var _events = require("./utils/events");
 
-var _events2 = _interopRequireDefault(_events);
+var events = _interopRequireWildcard(_events);
 
-var _styles = require("./styles");
+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 }; }
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -51,8 +51,25 @@
 
+// Each key of the returned styles object will be available as a className below.
+var getColor = function getColor(palette, background) {
+    return palette[background] || background;
+};
+var styles = function styles(theme) {
+    return _extends({
+        wrapper: {
+            background: function background(props) {
+                return getColor(theme.palette, props.background);
+            },
+            color: function color(props) {
+                return getColor(theme.palette, props.color);
+            }
+        }
+    }, theme.utility, theme.typography, theme.whitespace, theme.elevation);
+};
+
 /**
- * Element is the building block for creating other components. All of CyVerse-UI is built with Element.
- * It has the core functionality that is common across the CY-UI world. These features let you access global values for whitespace and typography to maintain consistency throughout your components.
+ * All of CyVerse-UI is built with "Element". It is the same basic idea as MUI's "Paper" with the core features that are common across the CY-UI world. These features let you access global utilities for whitespace and typography to maintain consistency throughout your components without leaking global variables.
  *
- * Render the html tag you want by a string to the el prop and pass any html attributes as you would with any other element.
+ * Render the html tag you want using the root prop and pass any html attributes that element accepts.
  **/
+
 var Element = function (_React$Component) {
@@ -72,9 +89,3 @@ _inherits(Element, _React$Component);
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Element.__proto__ || Object.getPrototypeOf(Element)).call.apply(_ref, [this].concat(args))), _this), _this.styleSheet = function () {
-            return (0, _jssThemeReactor.createStyleSheet)("Element", function (theme) {
-                return {
-                    wrapper: {}
-                };
-            });
-        }, _this.clickHandler = function (e) {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Element.__proto__ || Object.getPrototypeOf(Element)).call.apply(_ref, [this].concat(args))), _this), _this.clickHandler = function (e) {
             var _this$props = _this.props,
@@ -84,61 +95,58 @@ stopPropagation = _this$props.stopPropagation,
 
-            stopPropagation ? _events2.default.stopPropagation(e) : null;
+            stopPropagation ? events.stopPropagation(e) : null;
             onClick ? onClick(e) : null;
-        }, _this.styles = function () {
-            var _this$props2 = _this.props,
-                palette = _this$props2.muiTheme.palette,
-                colorProp = _this$props2.color,
-                _this$props2$whiteSpa = _this$props2.whiteSpace,
-                whiteSpace = _this$props2$whiteSpa === undefined ? {} : _this$props2$whiteSpa,
-                _this$props2$typograp = _this$props2.typography,
-                typography = _this$props2$typograp === undefined ? "body1" : _this$props2$typograp,
-                backgroundProp = _this$props2.background,
-                hide = _this$props2.hide,
-                _this$props2$display = _this$props2.display,
-                displayProp = _this$props2$display === undefined ? "block" : _this$props2$display;
-
-
-            var display = hide ? "none" : displayProp;
-            var typoStack = _styles.styles.t;
-
-            var background = palette[backgroundProp] ? palette[backgroundProp] : backgroundProp;
-
-            var color = palette[colorProp] ? palette[colorProp] : colorProp;
-
-            var fontStyle = typoStack[typography];
-
-            return _extends({
-                color: color,
-                background: background,
-                display: display
-            }, fontStyle, (0, _styles.marg)(whiteSpace), (0, _styles.pad)(whiteSpace));
+        }, _this.onKeyDown = function (e) {
+            if (e.keyCode === 13) {
+                _this.clickHandler(e);
+            }
         }, _temp), _possibleConstructorReturn(_this, _ret);
     }
-    // Define static styles here.
-    // Each key of the returned object will be available as a className below.
-    // TODO: Move styles from inline to here and compose classNames
 
-
     _createClass(Element, [{
-        key: "componentWillMount",
-        value: function componentWillMount() {
-            // Generate classes object and render corresponding style definitions in header.
-            this.classes = (0, _getStyleManager2.default)({}).render(this.styleSheet());
-        }
-    }, {
         key: "render",
         value: function render() {
             var _props = this.props,
-                style = _props.style,
-                _props$tag = _props.tag,
-                tag = _props$tag === undefined ? "div" : _props$tag,
-                rest = _objectWithoutProperties(_props, ["style", "tag"]);
+                theme = _props.theme,
+                _props$root = _props.root,
+                root = _props$root === undefined ? "div" : _props$root,
+                className = _props.className,
+                classes = _props.classes,
+                _props$hide = _props.hide,
+                hide = _props$hide === undefined ? false : _props$hide,
+                _props$hideReadable = _props.hideReadable,
+                hideReadable = _props$hideReadable === undefined ? false : _props$hideReadable,
+                _props$typography = _props.typography,
+                typography = _props$typography === undefined ? "body1" : _props$typography,
+                _props$whitespace = _props.whitespace,
+                whitespace = _props$whitespace === undefined ? [] : _props$whitespace,
+                _props$elevation = _props.elevation,
+                elevation = _props$elevation === undefined ? 0 : _props$elevation,
+                tabindex = _props.tabindex,
+                onClick = _props.onClick,
+                rest = _objectWithoutProperties(_props, ["theme", "root", "className", "classes", "hide", "hideReadable", "typography", "whitespace", "elevation", "tabindex", "onClick"]);
 
-            var Tag = tag;
+            // Throw an error if not using a CY-UI compatible theme
 
+
+            var themeTypography = theme.typography;
+
+            if (!themeTypography) {
+                throw "missing \"cyverse-ui\" dependency\n\nThe theme field \"typography\" is missing. \"cyverse-ui\" requires that the material-ui base theme be extended with \"cyverseTheme\". Visit https://cyverse.github.io/cyverse-ui/ to learn more about cyverse-ui theming.";
+            }
+
+            var Root = root;
+            var whitespaceClass = Array.isArray(whitespace) ? whitespace.map(function (i) {
+                return classes[i];
+            }).join(" ") : classes[whitespace];
+            var elevationClass = [classes["elevation" + elevation]];
+
+            var wrapperClasses = (0, _classnames6.default)(_defineProperty({}, className, className), "Element", _defineProperty({}, classes.hide, hide), _defineProperty({}, classes.hideReadable, hideReadable), _defineProperty({}, elevationClass, elevation > 0), classes.wrapper, classes[typography], whitespaceClass);
+
             return _react2.default.createElement(
-                Tag,
+                Root,
                 _extends({}, (0, _filterReactDomProps2.default)(rest), {
-                    style: _extends({}, style, this.styles()),
-                    onClick: this.clickHandler
+                    tabIndex: tabindex ? tabindex : onClick ? "0" : null,
+                    className: wrapperClasses,
+                    onClick: this.clickHandler,
+                    onKeyDown: this.onKeyDown
                 }),
@@ -159,5 +167,35 @@ this.props.children
      */
-    children: _propTypes2.default.node
+    children: _propTypes2.default.node,
+    /**
+     * The html tag to render, For example, "p", "div", "span". All html atrributes like "title", "src" etc.. are passed down.
+     */
+    root: _propTypes2.default.string,
+    /**
+     * The color of the text. You can use theme palette names like "primary1Color"
+     */
+    color: _propTypes2.default.string,
+    /**
+     * The color of the background. You can use theme palette names like "primary1Color"
+     */
+    background: _propTypes2.default.string,
+    /**
+     * The typography styles from the theme like "title" or "body1"
+     */
+    typography: _propTypes2.default.string,
+    /**
+     * Whitespace can be a string or an array of strings representing a spacing property followed by a spacing unit ranging 0 - 20. The expected values are shorthand "mb1" is "margin-bottom" with a unit of 1 so "mt1" is top "ml1" is left etc..., Padding is the same with a "p" instead of an "m". Other values are: top and bottom "mv1" for vertical, right and left "ms1" for sides, and all directions "m1" see example above or in the theme documentation on whitespace for a list of values. It is good to use whitespace units (multiples of 8px) over other values for margin or padding for consistancy and best alignment. See the Material Design specs for guidence.
+     */
+    whitespace: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
+    /**
+     * Elevation is how high the element comes off the page visually through shadow depth. Expects values between 0 and 24.
+     */
+    elevation: _propTypes2.default.number
 };
 
-exports.default = (0, _muiThemeable2.default)()(Element);
+Element.defaultProps = {
+    root: "div",
+    typography: "body1",
+    whitespace: ["m0", "p0"]
+};
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Element));

es/Hr.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,58 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 
-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 _react = require("react");
 
-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 = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _classnames2 = require("classnames");
 
-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; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-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 _Element = require("./Element");
 
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var _Element2 = _interopRequireDefault(_Element);
 
-    function _class() {
-        var _ref;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-        var _temp, _this, _ret;
+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; }
 
-        _classCallCheck(this, _class);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+// Each key of the returned object will be available in the prop "classes" below.
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            border: "0px",
+            height: "1px",
+            background: "rgba( 0, 0, 0, .1 )"
         }
+    };
+};
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.style = function () {
-            return _extends({
-                border: "0px",
-                height: "1px",
-                background: "rgba( 0, 0, 0, .1 )"
-            }, (0, _styles.marg)(_this.props), _this.props.style);
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-    /**
-     * Hr renders the proper styling on a horizontal rule.
-     */
+/**
+ * Hr renders the proper styling on a horizontal rule.
+ */
+var Hr = function Hr(_ref) {
+    var classes = _ref.classes,
+        className = _ref.className;
 
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Hr", classes.wrapper);
+    return _react2.default.createElement(_Element2.default, { root: "hr", className: wrapperClasses });
+};
 
-    _createClass(_class, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('hr', { style: this.style() });
-        }
-    }]);
-
-    return _class;
-}(_react2.default.Component);
-
-_class.displayName = "Hr";
-exports.default = _class;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Hr));

es/icons/AttachInstanceIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { fillRule: 'evenodd', d: 'M11,11.3548387 L8,11.3548387 L12.5,15.8172043 L17,11.3548387 L14,11.3548387 L14,3 L11,3 L11,11.3548387 Z M2,20.2795699 L2,16.7096774 L22,16.7096774 L22,20.2795699 L2,20.2795699 Z M6,17.6021505 L4,17.6021505 L4,19.3870968 L6,19.3870968 L6,17.6021505 Z', id: 'path-1' })

es/icons/BootscriptIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { transform: 'translate(.3)', d: 'M7,3.66666667 L13.6666667,3.66666667 L18.6666667,8.66666667 L18.6666667,18.6666667 C18.6666667,19.5833333 17.9166667,20.3333333 17,20.3333333 L6.99166667,20.3333333 C6.075,20.3333333 5.33333333,19.5833333 5.33333333,18.6666667 L5.34166667,5.33333333 C5.34166667,4.41666667 6.08333333,3.66666667 7,3.66666667 Z M12.7225867,15.4566801 L12.3762844,15.4566801 L12.3762844,15.8029825 L12.3762844,16.5311039 L12.3762844,16.8774063 L12.7225867,16.8774063 L15.7439506,16.8774063 L16.090253,16.8774063 L16.090253,16.5311039 L16.090253,15.8029825 L16.090253,15.4566801 L15.7439506,15.4566801 L12.7225867,15.4566801 Z M8.62855849,15.3392451 L8.91745758,15.1691225 L12.0953335,13.2977823 L12.265914,13.1973334 L12.265914,12.9993746 L12.265914,12.6591309 L12.265914,12.4665384 L12.1023014,12.3649374 L8.92442543,10.3915241 L8.63282776,10.2104463 L8.44917285,10.5004277 L8.06129506,11.1128664 L7.87208709,11.4116158 L8.17472983,11.5945317 L10.1470439,12.7969143 L8.17773894,13.9601027 L7.8701615,14.1417761 L8.06129506,14.443566 L8.44917285,15.0560046 L8.62855849,15.3392451 Z M12.8333333,9.5 L17.4166667,9.5 L12.8333333,4.91666667 L12.8333333,9.5 Z', id: 'path-1' })

es/icons/ConsoleIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement(

es/icons/DetachInstanceIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { fillRule: 'evenodd', d: 'M14,6.8172043 L17,6.8172043 L12.5,2.35483871 L8,6.8172043 L11,6.8172043 L11,15.1400003 L14,15.1400003 L14,6.8172043 Z M2,20.2795699 L2,16.7096774 L22,16.7096774 L22,20.2795699 L2,20.2795699 Z M6,17.6021505 L4,17.6021505 L4,19.3870968 L6,19.3870968 L6,17.6021505 Z', id: 'path-1' })

es/icons/GithubIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,4 +31,4 @@
                 width: size
-            }, (0, _styles.marg)(rest), rest.style),
-            viewBox: '0 0 38 38'
+            }, rest.style),
+            viewBox: '0 0 40 40'
         }),
@@ -37,0 +35,0 @@ _react2.default.createElement(

es/icons/IntercomIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style),
+            },
             viewBox: '0 0 24 24'
@@ -36,0 +34,0 @@ }),

es/icons/IPIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { fillRule: 'evenodd', d: 'M8.03396842,8.86623844 C8.08371958,9.23108028 8.1003033,9.47154422 8.1003033,10.0934337 L8.1003033,14.5378707 C8.1003033,15.0934253 8.08371958,15.4416834 8.03396842,15.765066 L9.85817762,15.765066 C9.80842646,15.4168079 9.79184274,15.110009 9.79184274,14.5378707 L9.79184274,10.0934337 C9.79184274,9.48812794 9.80842646,9.2062047 9.85817762,8.86623844 L8.03396842,8.86623844 Z M12.6691182,15.765066 L10.8863683,15.765066 C10.9361194,15.4002241 10.9527031,15.0270904 10.9527031,14.5378707 L10.9527031,10.0519744 C10.9527031,9.60421398 10.9361194,9.23108028 10.8863683,8.84136286 C11.2760857,8.85794658 11.5745926,8.86623844 12.1052717,8.86623844 L13.921189,8.86623844 C15.5629773,8.86623844 16.4667901,9.65396514 16.4667901,11.0967488 C16.4667901,12.5726999 15.521518,13.451637 13.9128972,13.451637 L12.6027833,13.451637 L12.6027833,14.5129951 C12.6027833,15.0022149 12.6276589,15.408516 12.6691182,15.765066 Z M4.52116166,7.12858215 C4.52116166,6.02885185 5.40881628,5.1373443 6.5123995,5.1373443 L17.0699238,5.1373443 C18.1696541,5.1373443 19.0611616,6.02499892 19.0611616,7.12858215 L19.0611616,17.6861064 C19.0611616,18.7858367 18.173507,19.6773443 17.0699238,19.6773443 L6.5123995,19.6773443 C5.41266921,19.6773443 4.52116166,18.7896896 4.52116166,17.6861064 L4.52116166,7.12858215 Z M12.6027833,12.0420208 L13.8382704,12.0420208 C14.4187006,12.0420208 14.7586669,11.7186383 14.7586669,11.1464999 C14.7586669,10.5743616 14.4352844,10.2758546 13.8382704,10.2758546 L12.6027833,10.2758546 L12.6027833,12.0420208 Z', id: 'path-1' })

es/icons/LaunchIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,3 +31,3 @@
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }, rest.style)
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { className: 'cls-2', d: 'M2,22a.33.33,0,0,1-.37-.39c.42-2.25,1.29-3.86,3.73-4.43l-.11,1.21a.33.33,0,0,0,.32.35h1.2C6,21.18,4.23,21.67,2,22Z', transform: 'translate(-0.24 -0.49)' }),

es/icons/LinkIcon.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,10 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _materialUi = require('material-ui');
+var _materialUi = require("material-ui");
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +23,4 @@
         size = _ref$size === undefined ? 24 : _ref$size,
-        rest = _objectWithoutProperties(_ref, ['size']);
+        style = _ref.style,
+        rest = _objectWithoutProperties(_ref, ["size", "style"]);
 
@@ -34,7 +33,7 @@ return _react2.default.createElement(
                 width: size
-            }, (0, _styles.marg)(rest), rest.style),
-            viewBox: '0 0 40 40'
+            }, style),
+            viewBox: "0 0 40 40"
         }),
-        _react2.default.createElement('path', { d: 'M16.9169748,14.4193613 C17.207395,14.0708571 17.4978151,13.6642689 17.7882353,13.3738487 C19.4145882,11.6894118 21.0990252,10.0049748 22.7834622,8.37862185 C24.9325714,6.34568067 27.4301849,5.7067563 30.2182185,6.69418487 C33.0062521,7.68161345 34.7487731,9.77263866 35.1553613,12.7349244 C35.4457815,15.0002017 34.7487731,17.0331429 33.1805042,18.6594958 C31.4960672,20.3439328 29.8116303,22.0864538 28.1271933,23.7128067 C25.3391597,26.4427563 20.808605,26.3846723 18.0786555,23.6547227 C17.265479,22.8415462 17.4397311,21.5056134 18.4271597,20.9247731 C19.1241681,20.5181849 19.8792605,20.6343529 20.5181849,21.2151933 C21.6798655,22.3187899 23.0738824,22.6092101 24.5840672,21.9702857 C25.0487395,21.7960336 25.4553277,21.5056134 25.8038319,21.1571092 C27.4882689,19.5307563 29.1146218,17.9044034 30.7409748,16.2199664 C32.3092437,14.6516975 32.2511597,12.3283361 30.6248067,10.7600672 C29.0565378,9.19179832 26.7331765,9.13371429 25.1649076,10.7019832 C23.8870588,11.9798319 22.6092101,13.1995966 21.3894454,14.4774454 C21.2151933,14.6516975 21.0990252,14.7097815 20.8666891,14.5936134 C19.5888403,14.3612773 18.2529076,14.2451092 16.9169748,14.4193613 Z' }),
-        _react2.default.createElement('path', { d: 'M24.6421513,27.0235966 C24.3517311,27.4301849 24.0613109,27.7786891 23.7708908,28.0691092 C22.0864538,29.8116303 20.4020168,31.4960672 18.6594958,33.1805042 C16.5103866,35.2134454 14.0127731,35.7942857 11.2247395,34.7487731 C8.43670588,33.7613445 6.75226891,31.7284034 6.34568067,28.7661176 C5.99717647,26.5008403 6.75226891,24.4678992 8.32053782,22.8415462 C10.0049748,21.1571092 11.6894118,19.4145882 13.3738487,17.7882353 C16.1618824,15.0582857 20.5762689,15.0582857 23.3062185,17.7301513 C24.0613109,18.4852437 24.119395,19.5307563 23.4804706,20.2277647 C22.7834622,20.9247731 21.7960336,20.9247731 20.9828571,20.2277647 C19.4145882,18.7756639 17.1493109,18.8337479 15.6391261,20.3439328 C14.0127731,21.9702857 12.3864202,23.5966387 10.7600672,25.2229916 C9.19179832,26.7912605 9.24988235,29.1146218 10.8181513,30.6828908 C12.4445042,32.3092437 14.7097815,32.3673277 16.2780504,30.7990588 C17.5558992,29.5212101 18.8337479,28.3014454 20.0535126,27.0235966 C20.2277647,26.8493445 20.4020168,26.7912605 20.6343529,26.9074286 C21.8541176,27.2559328 23.0738824,27.3721008 24.3517311,27.1397647 C24.4678992,27.0235966 24.5259832,27.0235966 24.6421513,27.0235966 Z' })
+        _react2.default.createElement("path", { d: "M16.9169748,14.4193613 C17.207395,14.0708571 17.4978151,13.6642689 17.7882353,13.3738487 C19.4145882,11.6894118 21.0990252,10.0049748 22.7834622,8.37862185 C24.9325714,6.34568067 27.4301849,5.7067563 30.2182185,6.69418487 C33.0062521,7.68161345 34.7487731,9.77263866 35.1553613,12.7349244 C35.4457815,15.0002017 34.7487731,17.0331429 33.1805042,18.6594958 C31.4960672,20.3439328 29.8116303,22.0864538 28.1271933,23.7128067 C25.3391597,26.4427563 20.808605,26.3846723 18.0786555,23.6547227 C17.265479,22.8415462 17.4397311,21.5056134 18.4271597,20.9247731 C19.1241681,20.5181849 19.8792605,20.6343529 20.5181849,21.2151933 C21.6798655,22.3187899 23.0738824,22.6092101 24.5840672,21.9702857 C25.0487395,21.7960336 25.4553277,21.5056134 25.8038319,21.1571092 C27.4882689,19.5307563 29.1146218,17.9044034 30.7409748,16.2199664 C32.3092437,14.6516975 32.2511597,12.3283361 30.6248067,10.7600672 C29.0565378,9.19179832 26.7331765,9.13371429 25.1649076,10.7019832 C23.8870588,11.9798319 22.6092101,13.1995966 21.3894454,14.4774454 C21.2151933,14.6516975 21.0990252,14.7097815 20.8666891,14.5936134 C19.5888403,14.3612773 18.2529076,14.2451092 16.9169748,14.4193613 Z" }),
+        _react2.default.createElement("path", { d: "M24.6421513,27.0235966 C24.3517311,27.4301849 24.0613109,27.7786891 23.7708908,28.0691092 C22.0864538,29.8116303 20.4020168,31.4960672 18.6594958,33.1805042 C16.5103866,35.2134454 14.0127731,35.7942857 11.2247395,34.7487731 C8.43670588,33.7613445 6.75226891,31.7284034 6.34568067,28.7661176 C5.99717647,26.5008403 6.75226891,24.4678992 8.32053782,22.8415462 C10.0049748,21.1571092 11.6894118,19.4145882 13.3738487,17.7882353 C16.1618824,15.0582857 20.5762689,15.0582857 23.3062185,17.7301513 C24.0613109,18.4852437 24.119395,19.5307563 23.4804706,20.2277647 C22.7834622,20.9247731 21.7960336,20.9247731 20.9828571,20.2277647 C19.4145882,18.7756639 17.1493109,18.8337479 15.6391261,20.3439328 C14.0127731,21.9702857 12.3864202,23.5966387 10.7600672,25.2229916 C9.19179832,26.7912605 9.24988235,29.1146218 10.8181513,30.6828908 C12.4445042,32.3092437 14.7097815,32.3673277 16.2780504,30.7990588 C17.5558992,29.5212101 18.8337479,28.3014454 20.0535126,27.0235966 C20.2277647,26.8493445 20.4020168,26.7912605 20.6343529,26.9074286 C21.8541176,27.2559328 23.0738824,27.3721008 24.3517311,27.1397647 C24.4678992,27.0235966 24.5259832,27.0235966 24.6421513,27.0235966 Z" })
     );
@@ -41,0 +40,0 @@ };

es/icons/VolumeIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { transform: 'translate(3, 4)', d: 'M16.6884456,4.40606062 L16.6884456,8.12043011 L16.5888256,8.46451613 C16.5888256,8.51612903 15.692245,10.3225806 8.96789092,10.3225806 C2.34315687,10.3225806 1.3967663,8.56774194 1.34695626,8.46451613 L1.34695626,4.4132812 C2.36706914,5.13649264 4.51862698,5.93548387 9.01770095,5.93548387 C13.5317532,5.93548387 15.6826326,5.13116379 16.6884456,4.40606062 Z M16.6884456,2.64946237 L16.5888256,2.99354839 C16.5888256,2.99354839 15.7918651,4.8516129 8.96789092,4.8516129 C2.34315687,4.8516129 1.3967663,3.09677419 1.34695626,2.99354839 L1.34695626,2.58064516 C1.34695626,1.39354839 4.78384836,0.412903226 9.01770095,0.412903226 C13.2515535,0.412903226 16.6884456,1.39354839 16.6884456,2.58064516 L16.6884456,2.64946237 Z M16.6884456,9.84444362 L16.6884456,13.6774194 C16.6884456,14.8645161 13.2515535,15.8451613 9.01770095,15.8451613 C4.78384836,15.8451613 1.34695626,14.8645161 1.34695626,13.6774194 L1.34695626,9.88424895 C2.36706914,10.6074604 4.51862698,11.4064516 9.01770095,11.4064516 C13.5317532,11.4064516 15.6826326,10.5842578 16.6884456,9.84444362 Z', id: 'path-1' })

es/Identity.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,85 +9,102 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-var _P = require('./P');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _P2 = _interopRequireDefault(_P);
+var _classnames4 = require("classnames");
 
-var _Title = require('./Title');
+var _classnames5 = _interopRequireDefault(_classnames4);
 
-var _Title2 = _interopRequireDefault(_Title);
+var _Element = require("./Element");
 
+var _Element2 = _interopRequireDefault(_Element);
+
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+// Each key of the returned object will be available in the prop "classes" below.
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center"
+        },
+        text: {
+            marginBottom: 2
+        },
+        img: {
+            borderRadius: "999px",
+            overflow: "hidden"
+        },
+        img__sm: _extends({}, theme.whitespace.mr2),
+        img__lg: _extends({}, theme.whitespace.mr3)
+    };
+};
+
 /**
-* Identity is used on a card or view to provide context to the content. A resource for example, would have the resource name as the primary text and useful meta as the secondary text, like the date the resource was created or a quick summary.
-
-An Identity is located at the top left of a card or view. A small Identity is used on cards and a large Identity or small Identity can be used on views.
- */
+ * Identity is used on a card or view to provide context to the content. A resource for example, would have the resource name as the primary text and useful meta as the secondary text, like the date the resource was created or a quick summary.
+ *
+ * An Identity is located at the top left of a card or view. A small Identity is used on cards and a large Identity or small Identity can be used on views.
+ **/
 var Identity = function Identity(props) {
-    var lg = props.lg,
+    var classes = props.classes,
+        className = props.className,
+        lg = props.lg,
         image = props.image,
         primaryText = props.primaryText,
-        secondaryText = props.secondaryText;
+        secondaryText = props.secondaryText,
+        rest = _objectWithoutProperties(props, ["classes", "className", "lg", "image", "primaryText", "secondaryText"]);
 
+    // Set Image size
 
+
     var imageSize = lg ? 60 : 40;
-    var renderImage = _react2.default.cloneElement(image, { size: imageSize });
+    var renderImage = _react2.default.cloneElement(image, {
+        size: imageSize
+    });
 
-    var margSize = lg ? 3 : 2;
-    var imgMarg = (0, _styles.marg)({ mr: margSize });
+    // Define wrapper classes
+    var wrapperClasses = (0, _classnames5.default)(_defineProperty({}, className, className), "CY-Identity", classes.wrapper);
 
-    var style = {
-        wrapper: _extends({
-            position: "relative",
-            display: "flex",
-            alignItems: "center"
-        }, (0, _styles.marg)(props)),
-        img: _extends({
-            borderRadius: "999px",
-            overflow: "hidden"
-        }, imgMarg)
-    };
+    // Define Image classes
+    var imgClasses = (0, _classnames5.default)("CY-Identity-img", classes.img, _defineProperty({}, classes.img__sm, !lg), _defineProperty({}, classes.img__lg, lg));
 
     return _react2.default.createElement(
-        'div',
-        { style: style.wrapper },
+        _Element2.default,
+        _extends({}, rest, { className: wrapperClasses }),
         _react2.default.createElement(
-            'div',
-            { style: style.img },
+            "div",
+            { className: imgClasses },
             renderImage
         ),
         _react2.default.createElement(
-            'div',
-            null,
+            "div",
+            { className: "CY-Identity-textGroup" },
             _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(
-                    _Title2.default,
-                    {
-                        m: 0,
-                        title: lg,
-                        body2: !lg
-                    },
-                    primaryText
-                ),
-                _react2.default.createElement(
-                    _P2.default,
-                    {
-                        m: 0,
-                        subheading: lg,
-                        caption: !lg,
-                        lineHeight: '1.15'
-                    },
-                    secondaryText
-                )
+                _Element2.default,
+                {
+                    className: "CY-Identity-text " + classes.text,
+                    typography: lg ? "title" : "body2"
+                },
+                primaryText
+            ),
+            _react2.default.createElement(
+                _Element2.default,
+                {
+                    className: "CY-Identity-subtext " + classes.text,
+                    typography: lg ? "subheading" : "caption"
+                },
+                secondaryText
             )
@@ -119,2 +136,2 @@ )
 
-exports.default = Identity;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Identity));

es/index.js

@@ -79,11 +79,2 @@ 'use strict';
 
-var _Div = require('./Div');
-
-Object.defineProperty(exports, 'Div', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Div).default;
-  }
-});
-
 var _Section = require('./Section');
@@ -107,11 +98,2 @@
 
-var _Title = require('./Title');
-
-Object.defineProperty(exports, 'Title', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Title).default;
-  }
-});
-
 var _SubHeader = require('./SubHeader');
@@ -153,11 +135,2 @@
 
-var _FlatButtonConfirm = require('./FlatButtonConfirm');
-
-Object.defineProperty(exports, 'FlatButtonConfirm', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_FlatButtonConfirm).default;
-  }
-});
-
 var _Identity = require('./Identity');
@@ -190,11 +163,29 @@
 
-var _FAB = require('./FAB');
+var _FloatingActionButton = require('./FloatingActionButton');
 
-Object.defineProperty(exports, 'FAB', {
+Object.defineProperty(exports, 'FloatingActionButton', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_FAB).default;
+    return _interopRequireDefault(_FloatingActionButton).default;
   }
 });
 
+var _FloatingActionButtonAction = require('./FloatingActionButtonAction');
+
+Object.defineProperty(exports, 'FloatingActionButtonAction', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_FloatingActionButtonAction).default;
+  }
+});
+
+var _FloatingActionButtonActions = require('./FloatingActionButtonActions');
+
+Object.defineProperty(exports, 'FloatingActionButtonActions', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_FloatingActionButtonActions).default;
+  }
+});
+
 var _ListCard = require('./ListCard');
@@ -263,8 +254,8 @@
 
-var _CheckableAvatar = require('./CheckableAvatar');
+var _Checkable = require('./Checkable');
 
-Object.defineProperty(exports, 'CheckableAvatar', {
+Object.defineProperty(exports, 'Checkable', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_CheckableAvatar).default;
+    return _interopRequireDefault(_Checkable).default;
   }
@@ -300,2 +291,20 @@ });
 
+var _Paper = require('./Paper');
+
+Object.defineProperty(exports, 'Paper', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Paper).default;
+  }
+});
+
+var _BarGraph = require('./BarGraph');
+
+Object.defineProperty(exports, 'BarGraph', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_BarGraph).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

es/InfoBlock.js

@@ -9,4 +9,2 @@ "use strict";
 
-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 = require("react");
@@ -20,2 +18,6 @@
 
+var _classnames2 = require("classnames");
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
 var _info = require("material-ui/svg-icons/action/info");
@@ -29,15 +31,27 @@
 
-var _P = require("./P");
+var _Element = require("./Element");
 
-var _P2 = _interopRequireDefault(_P);
+var _Element2 = _interopRequireDefault(_Element);
 
-var _styles = require("./styles");
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
 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 _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 _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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-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; }
+// Each key of the returned object will be available in the prop "classes" below.
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            display: "flex"
+        },
+        Icon: _extends({
+            minWidth: "30px"
+        }, theme.whitespace.mr3)
+    };
+};
 
@@ -47,53 +61,34 @@ /**
  */
-var InfoBlock = function (_React$Component) {
-    _inherits(InfoBlock, _React$Component);
+var InfoBlock = function InfoBlock(_ref) {
+    var className = _ref.className,
+        warning = _ref.warning,
+        classes = _ref.classes,
+        text = _ref.text,
+        rest = _objectWithoutProperties(_ref, ["className", "warning", "classes", "text"]);
 
-    function InfoBlock() {
-        var _ref;
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Infoblock", classes.wrapper);
 
-        var _temp, _this, _ret;
+    var icon = function icon() {
+        var iconClasses = "CY-InfoBlock-icon " + classes.Icon;
 
-        _classCallCheck(this, InfoBlock);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+        if (warning) {
+            return _react2.default.createElement(_warning2.default, { className: iconClasses });
         }
+        return _react2.default.createElement(_info2.default, { className: iconClasses });
+    };
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InfoBlock.__proto__ || Object.getPrototypeOf(InfoBlock)).call.apply(_ref, [this].concat(args))), _this), _this.icon = function () {
-            var warning = _this.props.warning;
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, { className: wrapperClasses }),
+        icon(),
+        _react2.default.createElement(
+            "div",
+            { className: "CY-InfoBlock-text" },
+            text
+        )
+    );
+};
+"";
 
-            if (warning) {
-                return _react2.default.createElement(_warning2.default, {
-                    style: (0, _styles.marg)({ mr: 3 })
-                });
-            }
-            return _react2.default.createElement(_info2.default, {
-                style: (0, _styles.marg)({ mr: 3 })
-            });
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(InfoBlock, [{
-        key: "render",
-        value: function render() {
-            return _react2.default.createElement(
-                "div",
-                {
-                    style: _extends({
-                        display: "flex"
-                    }, (0, _styles.marg)(this.props))
-                },
-                this.icon(),
-                _react2.default.createElement(
-                    _P2.default,
-                    { mb: 0 },
-                    this.props.text
-                )
-            );
-        }
-    }]);
-
-    return InfoBlock;
-}(_react2.default.Component);
-
+InfoBlock.displayName = "InfoBlock";
 InfoBlock.propTypes = {
@@ -103,3 +98,3 @@ /**
      */
-    text: _propTypes2.default.string,
+    text: _propTypes2.default.node,
     /**
@@ -110,2 +105,3 @@ * Show the warning icon over the default info icon
 };
+
 InfoBlock.defaultProps = {
@@ -115,5 +111,2 @@ warning: false
 
-
-InfoBlock.displayName = "InfoBlock";
-
-exports.default = InfoBlock;
+exports.default = (0, _reactJss2.default)(styles)(InfoBlock);

es/ListCard.js

@@ -17,9 +17,9 @@ "use strict";
 
-var _jssThemeReactor = require("jss-theme-reactor");
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require("./styles/getStyleManager");
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _styles = require("./styles");
+var _classnames4 = _interopRequireDefault(_classnames3);
 
@@ -32,21 +32,20 @@ var _Element = require("./Element");
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)("ListCard", function (theme) {
-        return {
-            ListCard: _extends({
-                position: "relative",
-                transition: "all ease .1s",
-                background: "white"
-            }, _styles.styles.boxShadow.li),
-            isExpanded: _extends({
-                margin: "40px -20px",
-                borderLeft: "solid 5px #0971ab"
-            }, _styles.styles.boxShadow.lg)
-        };
-    });
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({
+            position: "relative",
+            transition: "all ease .1s",
+            background: "white"
+        }, theme.elevation.elevation2),
+        wrapper__isExpanded: _extends({
+            margin: "32px -16px"
+        }, theme.elevation.elevation6)
+    };
 };
+
 /**
@@ -58,21 +57,12 @@ * ListCard and it's corresponding child components are used for listing entities that require more information and actions than MUI's `ListItem`.
 var ListCard = function ListCard(props) {
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet(props));
-
-    var _props$white = props.white,
-        white = _props$white === undefined ? {} : _props$white,
+    var classes = props.classes,
+        className = props.className,
         isExpanded = props.isExpanded,
-        _props$className = props.className,
-        className = _props$className === undefined ? "" : _props$className,
-        style = props.style,
-        rest = _objectWithoutProperties(props, ["white", "isExpanded", "className", "style"]);
+        rest = _objectWithoutProperties(props, ["classes", "className", "isExpanded"]);
 
-    var computedStyle = _extends({}, (0, _styles.pad)(white), (0, _styles.marg)(white));
+    var ListCardClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-ListCard", classes.wrapper, _defineProperty({}, classes.wrapper__isExpanded, isExpanded));
 
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            className: classes.ListCard + " " + (isExpanded ? classes.isExpanded : null) + " " + className,
-            style: _extends({}, computedStyle, style)
-        }),
+        _extends({}, rest, { className: ListCardClasses }),
         props.children
@@ -90,2 +80,2 @@ );
 
-exports.default = ListCard;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ListCard));

es/ListCardActions.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,33 +9,24 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _classnames2 = require("classnames");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _ActionGroup = require("./ActionGroup");
 
-var _Element = require('./Element');
+var _ActionGroup2 = _interopRequireDefault(_ActionGroup);
 
-var _Element2 = _interopRequireDefault(_Element);
-
 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; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
-// Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardActions', function (theme) {
-        return {
-            wrapper: {}
-        };
-    });
-};
 /**
@@ -45,14 +36,13 @@ * ListCardActions is the area on ListCard on the right where actions live.
 var ListCardActions = function ListCardActions(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var ActionGroupClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardActions");
     return _react2.default.createElement(
-        _Element2.default,
+        _ActionGroup2.default,
         _extends({}, rest, {
-            display: 'flex',
             stopPropagation: true,
-            className: classes.wrapper
+            className: ActionGroupClasses
         }),
@@ -59,0 +49,0 @@ children

es/ListCardDetail.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,21 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+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 _react = require("react");
+
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _classnames2 = require("classnames");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _Element = require("./Element");
 
-var _Element = require('./Element');
-
 var _Element2 = _interopRequireDefault(_Element);
 
-var _Hr = require('./Hr');
+var _Hr = require("./Hr");
 
@@ -32,16 +32,6 @@ var _Hr2 = _interopRequireDefault(_Hr);
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
-// Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardDetail', function (theme) {
-        return {
-            content: {
-                padding: "0 20px 20px"
-            }
-        };
-    });
-};
-
 /**
@@ -56,14 +46,17 @@ * ListCardDetail is the area below ListCardHeader where the details on the ListCard lives.
     var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, ["children", "className"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardDetail");
 
     return _react2.default.createElement(
         _Element2.default,
-        rest,
-        _react2.default.createElement(_Hr2.default, { style: { margin: "0 0 20px" } }),
+        _extends({ className: wrapperClasses }, rest),
+        _react2.default.createElement(_Hr2.default, { className: "CY-ListCardDetail-Hr", whitespace: "mb3" }),
         _react2.default.createElement(
-            'div',
-            { className: classes.content },
+            _Element2.default,
+            {
+                className: "CY-ListCardDetail-content",
+                whitespace: "p3"
+            },
             children
@@ -70,0 +63,0 @@ )

es/ListCardHeader.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames4 = _interopRequireDefault(_classnames3);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,2 +32,4 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -35,19 +39,22 @@
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardHeader', function (theme) {
-        return {
-            wrapper: {
-                display: "flex",
-                flexWrap: "nowrap",
-                alignContent: "stretch",
-                justifyContent: "space-between",
-                minHeight: "65px",
-                alignItems: "center"
-            },
-            clickable: {
-                cursor: "pointer"
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            display: "flex",
+            flexWrap: "nowrap",
+            alignContent: "stretch",
+            justifyContent: "space-between",
+            minHeight: "65px",
+            alignItems: "center",
+            "&:focus": {
+                outline: "transparent",
+                borderLeft: "solid 5px " + theme.palette.primary1Color
             }
-        };
-    });
+        },
+        wrapper__clickable: {
+            cursor: "pointer"
+        }
+    };
 };
+
 /**
@@ -59,17 +66,11 @@ * The ListCardHeader is the area the appears at the top of the ListCard and contains the ListCards identity and actions.
 var ListCardHeader = function ListCardHeader(_ref) {
-    var children = _ref.children,
-        onClick = _ref.onClick,
-        rest = _objectWithoutProperties(_ref, ['children', 'onClick']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-ListCardHeader", classes.wrapper, _defineProperty({}, classes.wrapper__clickable, rest.onClick));
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            onClick: onClick,
-            display: 'flex',
-            whiteSpace: { p: 2 },
-            className: classes.wrapper + ' ' + (onClick ? classes.clickable : null)
-        }),
+        _extends({}, rest, { className: wrapperClasses, whiteSpace: "p2" }),
         children
@@ -89,2 +90,2 @@ );
 
-exports.default = ListCardHeader;
+exports.default = (0, _reactJss2.default)(styles)(ListCardHeader);

es/ListCardIdentity.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames2 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,2 +32,4 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -35,12 +39,10 @@
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardIdentity', function (theme) {
-        return {
-            wrapper: {
-                alignItems: "center",
-                minWidth: "300px"
-            }
-        };
-    });
+var styles = {
+    wrapper: {
+        display: "flex",
+        alignItems: "center",
+        minWidth: "300px"
+    }
 };
+
 /**
@@ -50,13 +52,13 @@ * ListCardIdentity is the space on the left side within ListCardHeader that contains the ListCard's identity.
 var ListCardIdentity = function ListCardIdentity(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardIdentity", classes.wrapper);
     return _react2.default.createElement(
         _Element2.default,
         _extends({}, rest, {
-            display: 'flex',
-            className: classes.wrapper
+            whitespace: "pl2",
+            className: wrapperClasses
         }),
@@ -77,2 +79,2 @@ children
 
-exports.default = ListCardIdentity;
+exports.default = (0, _reactJss2.default)(styles)(ListCardIdentity);

es/ListCardSummary.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,22 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _classnames2 = require("classnames");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _reactJss = require("react-jss");
 
-var _styles = require('./styles/styles');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _styles2 = _interopRequireDefault(_styles);
+var _Element = require("./Element");
 
-var _Element = require('./Element');
-
 var _Element2 = _interopRequireDefault(_Element);
@@ -34,19 +32,17 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardSummary', function (theme) {
-        return {
-            wrapper: _extends({
-                width: "0%",
-                marginRight: "20px",
-                flex: "1"
-            }, _styles2.default.t.body1)
-        };
-    });
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            width: "0%",
+            flex: "1"
+        }
+    };
 };
-/**
- * ListCardSummary is the area in ListCardHeader between ListCardIdentity and ListCardActions. Used to display a short summary or overview information at a birds eye view. Works well with SummaryText for truncating / previewing large blocks of text into a single line. For to display more information make the card expandable and render the additional information in ListCardDetail.
+
+/** ListCardSummary is the area in ListCardHeader between ListCardIdentity and ListCardActions. Used to display a short summary or overview information at a birds eye view. Works well with SummaryText for truncating / previewing large blocks of text into a single line. For to display more information make the card expandable and render the additional information in ListCardDetail.
  *
@@ -56,12 +52,13 @@ * For a more "automagic" solution or to see an example of how ListCardSummary and ListCardDetail work together on expandable cards see `MediaCard`.
 var ListCardSummary = function ListCardSummary(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardSummery", classes.wrapper);
     return _react2.default.createElement(
         _Element2.default,
         _extends({}, rest, {
-            className: classes.wrapper
+            whitespace: "mr3",
+            className: wrapperClasses
         }),
@@ -83,2 +80,2 @@ children
 
-exports.default = ListCardSummary;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ListCardSummary));

es/MDBlock.js

@@ -83,3 +83,2 @@ 'use strict';
     style: _propTypes2.default.object
-
 };
@@ -86,0 +85,0 @@ MDBlock.defaultProps = {

es/MediaCard.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
 var _VerticalMenu = require('./VerticalMenu');
@@ -28,5 +32,5 @@
 
-var _CheckableAvatar = require('./CheckableAvatar');
+var _Checkable = require('./Checkable');
 
-var _CheckableAvatar2 = _interopRequireDefault(_CheckableAvatar);
+var _Checkable2 = _interopRequireDefault(_Checkable);
 
@@ -63,2 +67,4 @@ var _ListCard = require('./ListCard');
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -91,3 +97,3 @@
             cardIsHovered: false
-        }, _this.onCardEnter = function () {
+        }, _this.onCardEnter = function (e) {
             _this.setState({
@@ -115,3 +121,4 @@ cardIsHovered: true
                 _ActionGroup2.default,
-                { hide: isHidden },
+                { hideReadable: isHidden
+                },
                 quickLinks.map(function (link, i) {
@@ -155,2 +162,3 @@ return _react2.default.cloneElement(link, { key: i });
             var _props = this.props,
+                className = _props.className,
                 title = _props.title,
@@ -165,7 +173,9 @@ image = _props.image,
                 batchMode = _props.batchMode,
-                rest = _objectWithoutProperties(_props, ['title', 'image', 'subTitle', 'summary', 'detail', 'isExpanded', 'onBatchClick', 'checked', 'batchMode']);
+                rest = _objectWithoutProperties(_props, ['className', 'title', 'image', 'subTitle', 'summary', 'detail', 'isExpanded', 'onBatchClick', 'checked', 'batchMode']);
 
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-MediaCard");
+
             var cardIsHovered = this.state.cardIsHovered;
 
-            var showCheck = onBatchClick && (batchMode || cardIsHovered);
+            var showCheck = onBatchClick && batchMode || cardIsHovered || isExpanded;
 
@@ -175,2 +185,3 @@ return _react2.default.createElement(
                 _extends({}, rest, {
+                    className: wrapperClasses,
                     isExpanded: isExpanded
@@ -183,3 +194,5 @@ }),
                         onMouseLeave: this.onCardLeave,
-                        onClick: this.handleOnExpand
+                        onClick: this.handleOnExpand,
+                        onFocus: this.onCardEnter,
+                        onBlur: this.onCardLeave
                     },
@@ -190,7 +203,11 @@ _react2.default.createElement(
                         _react2.default.createElement(_Identity2.default, {
-                            image: _react2.default.createElement(_CheckableAvatar2.default, {
-                                image: image,
+                            image: _react2.default.createElement(_Checkable2.default, {
+                                children: image,
                                 isCheckable: showCheck,
-                                onCheck: this.onCheck,
-                                checked: checked
+                                onFocus: this.onCardEnter,
+                                onBlur: this.onCardLeave,
+                                checkboxProps: {
+                                    onCheck: this.onCheck,
+                                    checked: checked
+                                }
                             }),
@@ -245,15 +262,19 @@ primaryText: title,
     /**
-     * The space between the Identity and Actions. Only shown when card is collapsed. Will render any components or string passed.
+     * The space between the Identity and Actions.
+     * Only shown when card is collapsed. Will render any components or string passed.
      */
     summary: _propTypes2.default.node,
     /**
-     * The large space below the card header. Only shown when card is expanded. Will render any components or string passed.
+     * The large space below the card header.
+     * Only shown when card is expanded. Will render any components or string passed.
      */
     detail: _propTypes2.default.node,
     /**
-     * The exposed actions that appear to right of card on hover or when open. Expects an array of components. Best used with MUI IconButtons
+     * The exposed actions that appear to right of card on hover or when open.
+     * Expects an array of components. Best used with MUI IconButtons
      */
     quickLinks: _propTypes2.default.array,
     /**
-     * Works with quicklinks but is visible when quickLinks is not. By having the same button in both props causes said button to always show while the others only show when card is hovered or active.
+     * Works with quicklinks but is visible when quickLinks is not.
+     * By having the same button in both props causes said button to always show while the others only show when card is hovered or active.
      */
@@ -260,0 +281,0 @@ activeQuickLinks: _propTypes2.default.array,

es/MediaCardGroup.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,22 +9,26 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _classnames2 = require("classnames");
 
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _propTypes = require("prop-types");
+
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _reactScroll = require('react-scroll');
+var _reactScroll = require("react-scroll");
 
 var _reactScroll2 = _interopRequireDefault(_reactScroll);
 
-var _reactCssStagger = require('react-css-stagger');
+var _reactCssStagger = require("react-css-stagger");
 
 var _reactCssStagger2 = _interopRequireDefault(_reactCssStagger);
 
-var _styles = require('./styles');
-
 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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -38,5 +42,5 @@
     return _react2.default.createElement(
-        'style',
+        "style",
         null,
-        '\n        .MediaCard__animation-enter {\n            opacity: 0;\n            transform: translate(0,10px);\n            transition:  opacity .2s ease, transform .2s ease !important;\n        }\n\n        .MediaCard__animation-enter-active {\n            opacity: 1;\n            transform: translate(0,0);\n        }\n    '
+        "\n        .CY-MediaCard__animation-enter {\n            opacity: 0;\n            transform: translate(0,10px);\n            transition:  opacity .2s ease, transform .2s ease !important;\n        }\n\n        .CY-MediaCard__animation-enter-active {\n            opacity: 1;\n            transform: translate(0,0);\n        }\n    "
     );
@@ -50,3 +54,3 @@ };
  * MediaCardGroup is a wrapper for MediaCards that helps to manage opening and closing, scroll animation, and stagger animation of MediaCards as children.
-*/
+ */
 
@@ -91,23 +95,27 @@ var MediaCardGroup = function (_React$Component) {
     _createClass(MediaCardGroup, [{
-        key: 'componentDidMount',
+        key: "componentDidMount",
         value: function componentDidMount() {
-            document.addEventListener('click', this.handleDocumentClick, false);
+            document.addEventListener("click", this.handleDocumentClick, false);
         }
     }, {
-        key: 'componentWillUnmount',
+        key: "componentWillUnmount",
         value: function componentWillUnmount() {
-            document.removeEventListener('click', this.handleDocumentClick, false);
+            document.removeEventListener("click", this.handleDocumentClick, false);
         }
     }, {
-        key: 'render',
+        key: "render",
         value: function render() {
             var _this2 = this;
 
-            var stagger = this.props.stagger;
+            var _props = this.props,
+                className = _props.className,
+                stagger = _props.stagger,
+                children = _props.children;
+            var expanded = this.state.expanded;
 
-
-            var children = _react2.default.Children.map(this.props.children, function (child) {
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-MediaCardGroup");
+            var renderChildren = _react2.default.Children.map(children, function (child) {
                 return _react2.default.cloneElement(child, {
                     onExpand: _this2.onExpand.bind(_this2, child),
-                    isExpanded: _this2.state.expanded === child
+                    isExpanded: expanded ? expanded.key === child.key : false
                 });
@@ -118,15 +126,9 @@ });
                 _reactCssStagger2.default,
-                {
-                    transition: 'MediaCard__animation',
-                    delay: 70
-                },
+                { transition: "CY-MediaCard__animation", delay: 70 },
                 children
-            ) : children;
+            ) : renderChildren;
 
             return _react2.default.createElement(
-                'div',
-                {
-                    style: (0, _styles.marg)(this.props),
-                    ref: 'root'
-                },
+                "div",
+                { ref: "root", className: wrapperClasses },
                 renderList,
@@ -144,8 +146,8 @@ _react2.default.createElement(AnimationStyle, null)
     /**
-    * If true the stagger animation is enabled
-    */
+     * If true the stagger animation is enabled
+     */
     stagger: _propTypes2.default.bool,
     /**
-    * If true auto scrolling when card is expaned is disabled
-    */
+     * If true auto scrolling when card is expaned is disabled
+     */
     noScroll: _propTypes2.default.bool
@@ -152,0 +154,0 @@ };

es/MeterGauge.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,22 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 
+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 _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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _muiThemeable = require('material-ui/styles/muiThemeable');
+var _classnames2 = require("classnames");
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
+var _BarGraph = require("./BarGraph");
+
+var _BarGraph2 = _interopRequireDefault(_BarGraph);
+
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -34,8 +48,31 @@
 
-var v = _styles.variables;
-
 /**
-* A MeterGauge is used to depict a percentage of a known quantity. A common use in Troposphere is to show how much of a total resource a user HAS consumed or WILL consume. In the case that a MeterGauge is showing how much of a known quantity a user WILL consume, in a form for example, an after value can be passed in addition to the start value.
-*/
+ * A MeterGauge is used to depict a percentage of a known quantity. A common use in Troposphere is to show how much of a total resource a user HAS consumed or WILL consume. In the case that a MeterGauge is showing how much of a known quantity a user WILL consume, in a form for example, an after value can be passed in addition to the start value.
+ */
 
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            height: "70px",
+            marginTop: 0
+        },
+        data: {
+            margin: 0
+        },
+        data__compact: {
+            maxWidth: "60px"
+        },
+        dataText: _extends({}, theme.typography.caption, theme.whitespace.mb1),
+        dataText__alert: {
+            color: theme.palette.danger
+        },
+        dataText__compact: {
+            textAlign: "center"
+        },
+        alertMessage: _extends({}, theme.typography.body1, {
+            color: theme.palette.danger
+        })
+    };
+};
+
 var MeterGauge = function (_React$Component) {
@@ -62,71 +99,12 @@ _inherits(MeterGauge, _React$Component);
         }, _this.alert = function () {
-            var alertMessage = _this.props.alertMessage;
+            var _this$props2 = _this.props,
+                classes = _this$props2.classes,
+                alertMessage = _this$props2.alertMessage;
 
 
             return _this.isOver() ? _react2.default.createElement(
-                'div',
-                { style: _this.style().alertMessage },
+                "div",
+                { className: classes.alertMessage },
                 alertMessage
             ) : null;
-        }, _this.style = function () {
-            var _this$props2 = _this.props,
-                startValue = _this$props2.startValue,
-                afterValue = _this$props2.afterValue,
-                muiTheme = _this$props2.muiTheme;
-            var _muiTheme$palette = muiTheme.palette,
-                _muiTheme$palette$suc = _muiTheme$palette.success,
-                success = _muiTheme$palette$suc === undefined ? "green" : _muiTheme$palette$suc,
-                _muiTheme$palette$dan = _muiTheme$palette.danger,
-                danger = _muiTheme$palette$dan === undefined ? "red" : _muiTheme$palette$dan;
-
-
-            var startColor = _this.isOver() ? danger : success;
-
-            var dataText = _this.isOver() ? danger : "#333333";
-
-            // Start styles
-            var wrapper = _extends({}, (0, _styles.marg)(_this.props), {
-                height: "70px"
-            });
-
-            var data = _extends({}, _styles.styles.t.caption, {
-                color: dataText,
-                fontSize: "13px",
-                margin: "0px 0px 3px"
-            });
-            var bar = {
-                display: "flex",
-                background: v.c.grey.xLight
-            };
-            var barBefore = {
-                transition: "flex-basis ease .3s",
-                height: "10px",
-                float: "left",
-                flexShrink: "0",
-                maxWidth: "100%",
-                flexBasis: startValue + "%",
-                background: startColor
-            };
-            var barAfter = {
-                transition: "flex-basis ease .3s",
-                height: "10px",
-                float: "left",
-                flexBasis: afterValue + "%",
-                background: startColor,
-                opacity: ".5"
-            };
-            var alertMessage = {
-                marginTop: "5px",
-                fontSize: "12px",
-                color: danger
-
-                // Combine Styles
-            };return {
-                wrapper: wrapper,
-                data: data,
-                bar: bar,
-                barBefore: barBefore,
-                barAfter: barAfter,
-                alertMessage: alertMessage
-            };
         }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -136,34 +114,56 @@ }
     _createClass(MeterGauge, [{
-        key: 'render',
+        key: "render",
         value: function render() {
-            var style = this.style();
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
+                _props$theme$palette = _props.theme.palette,
+                success = _props$theme$palette.success,
+                danger = _props$theme$palette.danger,
+                hideLabel = _props.hideLabel,
+                startValue = _props.startValue,
+                afterValue = _props.afterValue,
+                compact = _props.compact,
+                label = _props.label,
+                data = _props.data,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "theme", "hideLabel", "startValue", "afterValue", "compact", "label", "data"]);
 
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-MeterGauge", classes.wrapper);
+            var dataClasses = (0, _classnames3.default)("CY-MeterGauge-data", classes.data, _defineProperty({}, classes.data__compact, compact));
+            var dataTextClasses = (0, _classnames3.default)("CY-MeterGauge-dataText", classes.dataText, _defineProperty({}, classes.dataText__compact, compact), _defineProperty({}, classes.dataText__alert, this.isOver()));
+
+            var startColor = this.isOver() ? danger : success;
             return _react2.default.createElement(
-                'div',
-                { style: style.wrapper },
+                _Element2.default,
+                _extends({}, rest, {
+                    root: "dl",
+                    className: wrapperClasses
+                }),
                 _react2.default.createElement(
-                    'dl',
-                    null,
+                    _Element2.default,
+                    {
+                        root: "dt",
+                        className: "CY-MeterGauge-dataTitle",
+                        hide: hideLabel,
+                        typography: "label",
+                        whitespace: "mb1"
+                    },
+                    label
+                ),
+                _react2.default.createElement(
+                    "dd",
+                    { className: dataClasses },
                     _react2.default.createElement(
-                        'dt',
-                        { style: _styles.styles.t.label },
-                        this.props.label
+                        "div",
+                        { className: dataTextClasses },
+                        data
                     ),
-                    _react2.default.createElement(
-                        'dd',
-                        { style: { margin: "0px" } },
-                        _react2.default.createElement(
-                            'div',
-                            { style: style.data },
-                            this.props.data
-                        ),
-                        _react2.default.createElement(
-                            'div',
-                            { style: style.bar },
-                            _react2.default.createElement('div', { style: style.barBefore }),
-                            _react2.default.createElement('div', { style: style.barAfter })
-                        ),
-                        this.alert()
-                    )
-                )
+                    _react2.default.createElement(_BarGraph2.default, {
+                        startValue: startValue,
+                        afterValue: afterValue,
+                        barColor: startColor,
+                        compact: compact
+                    })
+                ),
+                this.alert()
             );
@@ -206,2 +206,2 @@ }
 };
-exports.default = (0, _muiThemeable2.default)()(MeterGauge);
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(MeterGauge));

es/P.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,75 +7,65 @@ Object.defineProperty(exports, "__esModule", {
 
+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 _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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _classnames2 = require("classnames");
 
-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; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-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 _Element = require("./Element");
 
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var _Element2 = _interopRequireDefault(_Element);
 
-    function _class() {
-        var _ref;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-        var _temp, _this, _ret;
+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; }
 
-        _classCallCheck(this, _class);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
+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; }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.style = function () {
-            var _this$props$lineHeigh = _this.props.lineHeight,
-                lineHeight = _this$props$lineHeigh === undefined ? "1.7" : _this$props$lineHeigh;
+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 textStyle = _styles.styles.t.body1;
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({
+            maxWidth: "600px",
+            lineHeight: "24px",
+            margin: 0
+        }, theme.whitespace.mb3)
+    };
+};
 
-            if (_this.props.body1) {
-                textStyle = _styles.styles.t.body1;
-            }
+var P = function (_React$Component) {
+    _inherits(P, _React$Component);
 
-            if (_this.props.body2) {
-                textStyle = _styles.styles.t.body2;
-            }
+    function P() {
+        _classCallCheck(this, P);
 
-            if (_this.props.subheading) {
-                textStyle = _styles.styles.t.subheading;
-            }
-
-            if (_this.props.caption) {
-                textStyle = _styles.styles.t.caption;
-            }
-
-            return _extends({}, textStyle, {
-                maxWidth: "600px",
-                lineHeight: lineHeight,
-                margin: "0px",
-                marginBottom: "34px"
-            }, (0, _styles.marg)(_this.props));
-        }, _temp), _possibleConstructorReturn(_this, _ret);
+        return _possibleConstructorReturn(this, (P.__proto__ || Object.getPrototypeOf(P)).apply(this, arguments));
     }
-    /**
-     * P is a typography component for rendering a paragraph with the proper styles.
-     */
 
+    _createClass(P, [{
+        key: "render",
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className;
 
-    _createClass(_class, [{
-        key: 'render',
-        value: function render() {
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-P", classes.wrapper);
             return _react2.default.createElement(
-                'p',
-                { style: _extends({}, this.style(), this.props.style)
+                _Element2.default,
+                {
+                    root: "p",
+                    whitespace: "mb3",
+                    className: wrapperClasses
                 },
@@ -85,8 +75,12 @@ this.props.children
         }
+        /**
+         * P is a typography component for rendering a paragraph with the proper styles.
+         */
+
     }]);
 
-    return _class;
+    return P;
 }(_react2.default.Component);
 
-_class.displayName = "P";
-exports.default = _class;
+P.displayName = "P";
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(P));

es/Pill.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,104 +9,100 @@ Object.defineProperty(exports, "__esModule", {
 
-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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _classnames2 = require("classnames");
 
-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; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-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 _Element = require("./Element");
 
-/**
- * A Pill is used to indicate meta data like number of active users or if an item is featured or recommended. It is sort of like a badge but smaller to fit under a title or in the footer of a card.
- */
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var _Element2 = _interopRequireDefault(_Element);
 
-    function _class() {
-        var _ref;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-        var _temp, _this, _ret;
+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; }
 
-        _classCallCheck(this, _class);
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({
+            display: "inline-block"
+        }, theme.whitespace.mr2),
+        innerWrapper: {
+            display: "flex",
+            alignItems: "center"
+        },
+        pillBody: {
+            display: "inline-block",
+            verticalAlign: "middle",
+            padding: "4px",
+            lineHeight: "74%",
+            fontSize: "12px",
+            borderRadius: "9999px",
+            color: "white"
+        },
+        icon: {
+            height: "24px"
         }
+    };
+};
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.Icon = function () {
-            var _this$props = _this.props,
-                icon = _this$props.icon,
-                color = _this$props.color;
+/**
+ * A Pill is used to indicate meta data like number of active users or if an item is featured or recommended. It is sort of like a badge but smaller to fit under a title or in the footer of a card.
+ */
+var Pill = function Pill(_ref) {
+    var classes = _ref.classes,
+        theme = _ref.theme,
+        className = _ref.className,
+        children = _ref.children,
+        color = _ref.color,
+        icon = _ref.icon,
+        rest = _objectWithoutProperties(_ref, ["classes", "theme", "className", "children", "color", "icon"]);
 
-            if (icon) {
-                return _react2.default.cloneElement(icon, {
-                    color: color,
-                    style: {
-                        width: "16px",
-                        height: "16px"
-                    }
-                });
-            }
-        }, _this.style = function () {
-            var color = _this.props.color;
+    var textColor = theme.palette.textColor;
 
-            return {
-                wrapper: _extends({
-                    display: "inline-block"
-                }, (0, _styles.marg)({ mr: 2 })),
-                flex: {
-                    display: "flex",
-                    alignItems: "center"
+    var iconColor = theme.palette[color] || color;
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Pill", classes.wrapper);
+    var innerWrapperClasses = (0, _classnames3.default)("CY-Pill-innerWrapper", classes.innerWrapper);
+    var pillBodyClasses = (0, _classnames3.default)("CY-Pill-pillBody", classes.pillBody);
+    var pillIconClasses = (0, _classnames3.default)("CY-Pill-icon", classes.icon);
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, { root: "span", className: wrapperClasses }),
+        _react2.default.createElement(
+            "span",
+            { className: innerWrapperClasses },
+            _react2.default.createElement(
+                _Element2.default,
+                {
+                    root: "span",
+                    background: color || textColor,
+                    className: pillBodyClasses
                 },
-                pill: {
-                    display: "inline-block",
-                    verticalAlign: "middle",
-                    padding: "3px",
-                    lineHeight: "74%",
-                    fontSize: "8px",
-                    borderRadius: "9999px",
-                    color: "white",
-                    background: color
-                }
-            };
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
+                children
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: pillIconClasses },
+                icon ? _react2.default.cloneElement(icon, {
+                    color: iconColor
+                }) : null
+            )
+        )
+    );
+};
 
-    _createClass(_class, [{
-        key: 'render',
-        value: function render() {
-            var style = this.style();
-            return _react2.default.createElement(
-                'span',
-                { style: style.wrapper },
-                _react2.default.createElement(
-                    'span',
-                    { style: style.flex },
-                    _react2.default.createElement(
-                        'span',
-                        { style: style.pill },
-                        this.props.children
-                    ),
-                    this.Icon()
-                )
-            );
-        }
-    }]);
+Pill.displayName = "Pill";
 
-    return _class;
-}(_react2.default.Component);
-
-_class.displayName = "Pill";
-_class.propTypes = {
+Pill.propTypes = {
     /**
@@ -125,5 +121,3 @@ *The background color.
 };
-_class.defaultProps = {
-    color: _styles.variables.c.grey.xDark
-};
-exports.default = _class;
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Pill));

es/ProgressAvatar.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,20 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 
-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 _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 _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _muiThemeable = require('material-ui/styles/muiThemeable');
+var _reactJss = require("react-jss");
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _materialUi = require('material-ui');
+var _classnames4 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames5 = _interopRequireDefault(_classnames4);
 
+var _materialUi = require("material-ui");
+
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,104 +34,103 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            position: "relative"
+        },
+        progress: {
+            position: "absolute",
+            top: "0px",
+            left: "0px"
+        },
+        progress__complete: {
+            opacity: 0
+        },
+        avatar__inProgressWithImg: {
+            opacity: 0.3
+        }
+    };
+};
 
-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; }
-
 /**
  * ProgressAvatar can be used in place of MUI's Avatar as a clear way to inform the user that a process is taking place on that item as well as what percentage of that process is finished without taking up valuable real estate and leveraging Avatar being a visual anchor for the item.
  */
-var ProgressAvatar = function (_React$Component) {
-    _inherits(ProgressAvatar, _React$Component);
+var ProgressAvatar = function ProgressAvatar(_ref) {
+    var classes = _ref.classes,
+        children = _ref.children,
+        className = _ref.className,
+        progressColor = _ref.progressColor,
+        backgroundColor = _ref.backgroundColor,
+        src = _ref.src,
+        icon = _ref.icon,
+        size = _ref.size,
+        thickness = _ref.thickness,
+        percent = _ref.percent,
+        name = _ref.name,
+        theme = _ref.theme,
+        rest = _objectWithoutProperties(_ref, ["classes", "children", "className", "progressColor", "backgroundColor", "src", "icon", "size", "thickness", "percent", "name", "theme"]);
 
-    function ProgressAvatar() {
-        _classCallCheck(this, ProgressAvatar);
+    var isInProgress = percent < 100;
+    var wrapperClasses = (0, _classnames5.default)(_defineProperty({}, className, className), "CY-ProgressAvatar", classes.wrapper);
+    var avatarClasses = (0, _classnames5.default)("CY-ProgressAvatar-avatar", _defineProperty({}, classes.avatar__inProgressWithImg, src && isInProgress));
+    var progressClasses = (0, _classnames5.default)("CY-ProgressAvatar-progress", classes.progress, _defineProperty({}, classes.progress__complete, !isInProgress));
 
-        return _possibleConstructorReturn(this, (ProgressAvatar.__proto__ || Object.getPrototypeOf(ProgressAvatar)).apply(this, arguments));
-    }
+    var _theme$palette$succes = theme.palette.success,
+        success = _theme$palette$succes === undefined ? "green" : _theme$palette$succes;
 
-    _createClass(ProgressAvatar, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                children = _props.children,
-                progressColor = _props.progressColor,
-                backgroundColor = _props.backgroundColor,
-                src = _props.src,
-                icon = _props.icon,
-                size = _props.size,
-                thickness = _props.thickness,
-                percent = _props.percent,
-                name = _props.name,
-                muiTheme = _props.muiTheme,
-                rest = _objectWithoutProperties(_props, ['children', 'progressColor', 'backgroundColor', 'src', 'icon', 'size', 'thickness', 'percent', 'name', 'muiTheme']);
+    var padding = 0;
+    var avatarSize = size;
+    var value = 0;
+    var avatarColor = backgroundColor;
 
-            var _muiTheme$palette$suc = muiTheme.palette.success,
-                success = _muiTheme$palette$suc === undefined ? "green" : _muiTheme$palette$suc;
+    if (isInProgress) {
+        value = percent;
+        avatarColor = "lightgrey";
+        avatarSize = size - thickness * 2;
+        padding = thickness;
+    }
 
-            var opacity = 0;
-            var wrapperOpacity = void 0;
-            var padding = 0;
-            var avatarSize = size;
-            var value = 0;
-            var avatarColor = backgroundColor;
+    var strokeColor = progressColor || success;
 
-            if (percent < 100) {
-                value = percent;
-                opacity = 1;
-                wrapperOpacity = src ? .3 : 1;
-                avatarColor = "lightgrey";
-                avatarSize = size - thickness * 2;
-                padding = thickness;
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, {
+            className: wrapperClasses,
+            display: "inline-block",
+            style: {
+                padding: padding
             }
+        }),
+        _react2.default.createElement(
+            "div",
+            { className: progressClasses },
+            _react2.default.createElement(_materialUi.CircularProgress, {
+                className: progressClasses,
+                mode: "determinate",
+                value: value,
+                color: strokeColor,
+                size: size,
+                thickness: thickness
+            })
+        ),
+        _react2.default.createElement(
+            _materialUi.Avatar,
+            {
+                className: avatarClasses,
+                name: name,
+                src: src,
+                icon: icon,
+                backgroundColor: avatarColor,
+                size: avatarSize
+            },
+            children
+        )
+    );
+};
 
-            var strokeColor = progressColor || success;
+ProgressAvatar.displayName = "ProgressAvatar";
 
-            return _react2.default.createElement(
-                _Element2.default,
-                rest,
-                _react2.default.createElement(
-                    'div',
-                    { style: {
-                            position: "relative",
-                            padding: padding
-                        }
-                    },
-                    _react2.default.createElement(_materialUi.CircularProgress, {
-                        style: {
-                            opacity: opacity,
-                            position: "absolute",
-                            top: "0px",
-                            left: "0px"
-                        },
-                        mode: 'determinate',
-                        value: value,
-                        color: strokeColor,
-                        size: size,
-                        thickness: thickness
-                    }),
-                    _react2.default.createElement(
-                        _materialUi.Avatar,
-                        {
-                            style: { opacity: wrapperOpacity },
-                            name: name,
-                            color: 'rgba(255,255,255,.7)',
-                            src: src,
-                            icon: icon,
-                            backgroundColor: avatarColor,
-                            size: avatarSize
-                        },
-                        children
-                    )
-                )
-            );
-        }
-    }]);
-
-    return ProgressAvatar;
-}(_react2.default.Component);
-
-ProgressAvatar.displayName = "ProgressAvatar";
 ProgressAvatar.propTypes = {
@@ -155,2 +158,3 @@ /**
 };
+
 ProgressAvatar.defaultProps = {
@@ -160,2 +164,3 @@ size: 40,
 };
-exports.default = (0, _muiThemeable2.default)()(ProgressAvatar);
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ProgressAvatar));

es/SearchBar.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,38 +7,42 @@ Object.defineProperty(exports, "__esModule", {
 
+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 _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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _muiThemeable = require('material-ui/styles/muiThemeable');
+var _classnames4 = _interopRequireDefault(_classnames3);
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
+var _Element = require("./Element");
 
-var _materialUi = require('material-ui');
+var _Element2 = _interopRequireDefault(_Element);
 
-var _search = require('material-ui/svg-icons/action/search');
+var _materialUi = require("material-ui");
 
+var _search = require("material-ui/svg-icons/action/search");
+
 var _search2 = _interopRequireDefault(_search);
 
-var _close = require('material-ui/svg-icons/navigation/close');
+var _close = require("material-ui/svg-icons/navigation/close");
 
 var _close2 = _interopRequireDefault(_close);
 
-var _styles = require('./styles');
-
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -50,5 +54,34 @@
 
+var styles = function styles(theme) {
+    return {
+        card: _extends({
+            display: "flex",
+            alignItems: "center",
+            height: "40px",
+            background: "white",
+            position: "relative",
+            marginBottom: "20px",
+            transition: "box-shadow 350ms ease"
+        }, theme.elevation.elevation3, {
+            "&:hover": _extends({}, theme.elevation.elevation6)
+        }),
+        card__active: _extends({}, theme.elevation.elevation7),
+        input: {
+            flex: "1 1 100%",
+            border: "none",
+            boxShadow: "none",
+            "&:focus": {
+                outline: "none"
+            }
+        },
+        searchIcon: _extends({
+            minWidth: "24px"
+        }, theme.whitespace.ms2)
+    };
+};
+
 /**
  * The SearchBar is used for searches. It has an active state that helps to inform the user a search is affecting the list in question. An optional onClear prop allows the query to be cleared when the user presses the clear button.
  */
+
 var SearchBar = function (_React$Component) {
@@ -58,54 +91,13 @@ _inherits(SearchBar, _React$Component);
     function SearchBar() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
         _classCallCheck(this, SearchBar);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SearchBar.__proto__ || Object.getPrototypeOf(SearchBar)).call.apply(_ref, [this].concat(args))), _this), _this.styleSheet = function () {
-            var size = { pl: 2, pr: 2 };
-            return (0, _jssThemeReactor.createStyleSheet)('Search', function (theme) {
-                return {
-                    card: _extends({
-                        display: "flex",
-                        alignItems: "center",
-                        height: "40px",
-                        background: "white",
-                        position: "relative",
-                        marginBottom: "20px",
-                        transition: "box-shadow 350ms ease"
-                    }, _styles.styles.boxShadow.xsm, (0, _styles.pad)(size), (0, _styles.marg)(_this.props), {
-                        "&:hover": _extends({}, _styles.styles.boxShadow.sm)
-                    }),
-                    activeCard: _extends({}, _styles.styles.boxShadow.md),
-                    input: {
-                        flex: "1 1 100%",
-                        border: "none",
-                        boxShadow: "none",
-                        "&:focus": {
-                            outline: "none"
-                        }
-                    },
-                    searchIcon: _extends({}, (0, _styles.marg)({ mr: 2 }))
-                };
-            });
-        }, _temp), _possibleConstructorReturn(_this, _ret);
+        return _possibleConstructorReturn(this, (SearchBar.__proto__ || Object.getPrototypeOf(SearchBar)).apply(this, arguments));
     }
 
     _createClass(SearchBar, [{
-        key: 'componentWillMount',
-        value: function componentWillMount() {
-            var muiTheme = this.props.muiTheme;
-
-
-            this.classes = (0, _getStyleManager2.default)(muiTheme).render(this.styleSheet());
-        }
-    }, {
-        key: 'render',
+        key: "render",
         value: function render() {
             var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
                 value = _props.value,
@@ -115,19 +107,23 @@ placeholder = _props.placeholder,
                 onClear = _props.onClear,
-                muiTheme = _props.muiTheme;
+                theme = _props.theme,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "value", "placeholder", "onChange", "onClear", "theme"]);
 
+            var cardClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-SearchBar", classes.card, _defineProperty({}, classes.card__active, value));
+            var iconClasses = (0, _classnames4.default)("CY-SearchBar-searchIcon", classes.searchIcon);
+            var inputClasses = (0, _classnames4.default)("CY-SearchBar-input", classes.input);
 
-            var searchColor = value ? muiTheme.palette.primary1Color : null;
-            var activeCard = value ? this.classes.activeCard : null;
+            var searchColor = value ? theme.palette.primary1Color : null;
+
             var shouldShowClear = onClear && value;
 
             return _react2.default.createElement(
-                'div',
-                { className: this.classes.card + ' ' + activeCard },
+                _Element2.default,
+                _extends({}, rest, { className: cardClasses }),
                 _react2.default.createElement(_search2.default, {
-                    className: this.classes.searchIcon,
+                    className: iconClasses,
                     color: searchColor
                 }),
-                _react2.default.createElement('input', {
-                    className: this.classes.input,
-                    type: 'text',
+                _react2.default.createElement("input", {
+                    className: inputClasses,
+                    type: "text",
                     value: value,
@@ -141,3 +137,3 @@ placeholder: placeholder,
                     {
-                        className: this.classes.closeIcon,
+                        className: "CY-SearchBar-closeButton",
                         onTouchTap: onClear
@@ -176,2 +172,2 @@ },
 };
-exports.default = (0, _muiThemeable2.default)()(SearchBar);
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(SearchBar));

es/Section.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,64 +9,45 @@ Object.defineProperty(exports, "__esModule", {
 
-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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('./styles');
+var _classnames2 = require("classnames");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _Element = require("./Element");
 
-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; }
+var _Element2 = _interopRequireDefault(_Element);
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Section = function (_React$Component) {
-    _inherits(Section, _React$Component);
+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 Section() {
-        var _ref;
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-        var _temp, _this, _ret;
+/**
+ * Section is a layout primitive.
+ */
+var Section = function Section(_ref) {
+    var children = _ref.children,
+        className = _ref.className,
+        whitespace = _ref.whitespace,
+        rest = _objectWithoutProperties(_ref, ["children", "className", "whitespace"]);
 
-        _classCallCheck(this, Section);
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Section");
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, {
+            root: "section",
+            className: wrapperClasses,
+            whitespace: "pv6"
+        }),
+        children
+    );
+};
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Section.__proto__ || Object.getPrototypeOf(Section)).call.apply(_ref, [this].concat(args))), _this), _this.styles = function () {
-            var displayType = _this.props.flex ? { display: "flex" } : { display: "block" };
-
-            return _extends({
-                position: "relative"
-            }, displayType, (0, _styles.marg)(_this.props), (0, _styles.pad)(_this.props), _this.props.styles);
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Section, [{
-        key: 'render',
-
-        /**
-         * Section is a layout primitive.
-         */
-
-        value: function render() {
-            return _react2.default.createElement(
-                'section',
-                { style: this.styles() },
-                this.props.children
-            );
-        }
-    }]);
-
-    return Section;
-}(_react2.default.Component);
-
 Section.propTypes = {
@@ -73,0 +54,0 @@ className: _propTypes2.default.string

es/ShowMoreEllipsis.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,16 +9,41 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _reactJss = require("react-jss");
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _utils = require('./utils');
+var _classnames2 = require("classnames");
 
-var _styles = require('./styles');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({}, theme.whitespace.ml1, {
+            cursor: "pointer",
+            borderRadius: "3px",
+            padding: "0 3px 12px",
+            display: "inline-block",
+            lineHeight: "0",
+            verticalAlign: "middle",
+            fontSize: "22px",
+            background: "rgba(0,0,0,.1)",
+            "&:hover": {
+                background: "rgba(0,0,0,.3)"
+            }
+        })
+    };
+};
 /**
@@ -28,36 +53,11 @@ * ShowMoreEllipsis is used to show he user that there is more content to see that has been hidden by the UI. Generally it is unnecessary to trigger any events with it as it is used on cards which expand when the user clicks anywhere inside.
 var ShowMoreEllipsis = function ShowMoreEllipsis(props) {
-    var isHovered = props.isHovered,
-        onMouseEnter = props.onMouseEnter,
-        onMouseLeave = props.onMouseLeave,
-        onTouchTap = props.onTouchTap;
+    var classes = props.classes,
+        className = props.className,
+        rest = _objectWithoutProperties(props, ["classes", "className"]);
 
-
-    function handleClick() {
-        if (onTouchTap) {
-            onTouchTap();
-        }
-    }
-
-    var styles = _extends({}, (0, _styles.marg)({ mt: 2 }), {
-        cursor: "pointer",
-        borderRadius: "3px",
-        padding: "0 3px 12px",
-        display: "inline-block",
-        lineHeight: "0",
-        verticalAlign: "middle",
-        fontSize: "22px",
-        background: "rgba(0,0,0,.1)",
-        onHover: isHovered ? {
-            background: "rgba(0,0,0,.3)"
-        } : {}
-    });
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ShowMoreEllipsis", classes.wrapper);
     return _react2.default.createElement(
-        'span',
-        {
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
-            onClick: handleClick,
-            style: _extends({}, styles, styles.onHover)
-        },
-        '...'
+        _Element2.default,
+        _extends({ root: "span" }, rest, { className: wrapperClasses }),
+        "..."
     );
@@ -67,9 +67,3 @@ };
 ShowMoreEllipsis.displayName = "ShowMoreEllipsis";
-ShowMoreEllipsis.propTypes = {
-    /**
-     *Callback when clicked or tapped
-    */
-    onTouchTap: _propTypes2.default.func
-};
 
-exports.default = (0, _utils.hoverable)(ShowMoreEllipsis);
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ShowMoreEllipsis));

es/SkeletonList.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,97 +7,140 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _materialUi = require('material-ui');
+var _classnames4 = _interopRequireDefault(_classnames3);
 
-var _MediaCard = require('./MediaCard');
+var _materialUi = require("material-ui");
 
-var _MediaCard2 = _interopRequireDefault(_MediaCard);
+var _ListCard = require("./ListCard");
 
+var _ListCard2 = _interopRequireDefault(_ListCard);
+
+var _ListCardHeader = require("./ListCardHeader");
+
+var _ListCardHeader2 = _interopRequireDefault(_ListCardHeader);
+
+var _ListCardIdentity = require("./ListCardIdentity");
+
+var _ListCardIdentity2 = _interopRequireDefault(_ListCardIdentity);
+
+var _ListCardSummary = require("./ListCardSummary");
+
+var _ListCardSummary2 = _interopRequireDefault(_ListCardSummary);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('Search', function (theme) {
-        return {
-            wrapper: {
-                position: "relative",
-                padding: "2px",
-                margin: "-2px",
-                maskImage: 'gradient(linear, center top, center bottom,\n                        color-stop(0.00,  rgba(0,0,0,1)),\n                        color-stop(0.80,  rgba(0,0,0,.1)),\n                        color-stop(1.00,  rgba(0,0,0,0)))'
-            }
-        };
-    });
+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 = {
+    wrapper: {
+        position: "relative",
+        padding: "2px",
+        margin: "-2px",
+        maskImage: "gradient(linear, center top, center bottom,\n                        color-stop(0.00,  rgba(0,0,0,1)),\n                        color-stop(0.80,  rgba(0,0,0,.1)),\n                        color-stop(1.00,  rgba(0,0,0,0)))"
+    },
+    progress: {
+        position: "absolute !important",
+        marginRight: "auto",
+        marginLeft: "auto",
+        right: 0,
+        left: 0,
+        top: "50px"
+    },
+    avatar: {
+        flexShrink: 0,
+        marginRight: 16
+    }
 };
 
-var SkeletonText = function SkeletonText(props) {
+var SkeletonTextStyles = function SkeletonTextStyles(theme) {
+    return {
+        wrapper: {
+            width: "100%",
+            paddingRight: "32px"
+        },
+        text: {
+            height: "8px",
+            width: "100%",
+            background: "#EFEFEF",
+            borderRadius: "800px"
+        },
+        firstLine: {
+            width: "100%",
+            marginBottom: "12px"
+        },
+        secondLine: {
+            width: "80%"
+        }
+    };
+};
+var SkeletonText = (0, _reactJss.withTheme)((0, _reactJss2.default)(SkeletonTextStyles)(function (_ref) {
+    var classes = _ref.classes,
+        className = _ref.className;
+
+    var wrapperClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-SkelletonText", classes.wrapper);
+    var firstLineClasses = (0, _classnames4.default)("CY-SkelletonText-firstLine", "CY-SkelletonText-text", classes.firstLine, classes.text);
+    var secondLineClasses = (0, _classnames4.default)("CY-SkelletonText-secondLine", "CY-SkelletonText-text", classes.secondLine, classes.text);
     return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement('div', {
-            style: {
-                height: "10px",
-                width: "80%",
-                marginBottom: "10px",
-                background: "#EFEFEF",
-                borderRadius: "800px"
-            }
-        }),
-        _react2.default.createElement('div', {
-            style: {
-                height: "10px",
-                width: "70%",
-                background: "#EFEFEF",
-                borderRadius: "800px"
-            }
-        })
+        "div",
+        { className: wrapperClasses },
+        _react2.default.createElement("div", { className: firstLineClasses }),
+        _react2.default.createElement("div", { className: secondLineClasses })
     );
-};
+}));
 
-var SkeletonList = function SkeletonList(props) {
-    /**
-     * SkeletonLists are placeholders for MediaCards while they are loading. They help to inform the user that a list will show.
-     */
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
+/**
+ * SkeletonLists are placeholders for MediaCards while they are loading. They help to inform the user that a list will show.
+ */
+var SkeletonList = function SkeletonList(_ref2) {
+    var classes = _ref2.classes,
+        className = _ref2.className,
+        cardCount = _ref2.cardCount;
 
-    var cardCount = props.cardCount;
+    var wrapperClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-SkelletonList", classes.wrapper);
+    var avatarClasses = (0, _classnames4.default)("CY-SkelletonCard-avatar", classes.avatar);
+    var progressClasses = (0, _classnames4.default)("CY-SkelletonCard-progress", classes.progress);
 
     var SkeletonCards = [];
     for (var i = 0; i < cardCount; i++) {
-        SkeletonCards.push(_react2.default.createElement(_MediaCard2.default, {
-            key: i,
-            image: _react2.default.createElement(_materialUi.Avatar, {
-                size: 40,
-                backgroundColor: '#EFEFEF'
-            }),
-            title: _react2.default.createElement(SkeletonText, null),
-            summary: _react2.default.createElement(SkeletonText, null)
-        }));
+        SkeletonCards.push(_react2.default.createElement(
+            _ListCard2.default,
+            { className: "CY-SkelletonCard", key: i },
+            _react2.default.createElement(
+                _ListCardHeader2.default,
+                { className: "CY-SkelletonCard-header" },
+                _react2.default.createElement(
+                    _ListCardIdentity2.default,
+                    { className: "CY-SkelletonCard-identity" },
+                    _react2.default.createElement(_materialUi.Avatar, {
+                        className: avatarClasses,
+                        backgroundColor: "#EFEFEF"
+                    }),
+                    _react2.default.createElement(SkeletonText, null)
+                ),
+                _react2.default.createElement(
+                    _ListCardSummary2.default,
+                    { className: "CY-SkelletonCard-summary" },
+                    _react2.default.createElement(SkeletonText, null)
+                )
+            )
+        ));
     }
 
     return _react2.default.createElement(
-        'div',
-        { className: classes.wrapper },
+        "div",
+        { className: wrapperClasses },
         SkeletonCards,
-        _react2.default.createElement(_materialUi.CircularProgress, {
-            size: 75,
-            style: {
-                position: "absolute",
-                marginRight: "auto",
-                marginLeft: "auto",
-                right: 0,
-                left: 0,
-                top: "50px"
-            }
-        })
+        _react2.default.createElement(_materialUi.CircularProgress, { size: 75, className: progressClasses })
     );
@@ -119,2 +162,2 @@ };
 
-exports.default = SkeletonList;
+exports.default = (0, _reactJss2.default)(styles)(SkeletonList);

es/styles/cyverseTheme.js

@@ -7,33 +7,16 @@ "use strict";
 
-var _colors = require("material-ui/styles/colors");
+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 colors = _interopRequireWildcard(_colors);
+var _styles = require("../styles");
 
-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; } }
+var palette = _styles.styleVars.palette;
 
-var primary1Color = "#0971ab",
-    primary2Color = "#318cc8",
-    accent1Color = "#57cbea";
 
-exports.default = {
+var theme = _extends({
+    palette: palette,
     header: {
-        headerColor: primary1Color,
-        headerBorderColor: accent1Color,
+        headerColor: palette.primary1Color,
+        headerBorderColor: palette.accent1Color,
         headerLinkColor: "rgba(255, 255, 255, 0.7)"
     },
-    palette: {
-        primary1Color: primary1Color,
-        primary2Color: primary2Color,
-        primary3Color: colors.grey400,
-        accent1Color: accent1Color,
-        accent2Color: colors.grey100,
-        accent3Color: colors.grey500,
-        alternateTextColor: colors.white,
-        danger: "#ff2f0d",
-        success: "#5cb85c",
-        canvasColor: colors.white,
-        borderColor: colors.grey300,
-        pickerHeaderColor: primary2Color,
-        shadowColor: colors.fullBlack
-    },
     tabs: {
@@ -45,4 +28,5 @@ backgroundColor: "white",
     inkBar: {
-        backgroundColor: primary1Color
+        backgroundColor: palette.primary1Color
     }
-};
+}, _styles.styles);
+exports.default = theme;

es/styles/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 
-var _variables = require('./variables');
+var _styleVars = require("./styleVars");
 
-Object.defineProperty(exports, 'variables', {
+Object.defineProperty(exports, "styleVars", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_variables).default;
+    return _interopRequireDefault(_styleVars).default;
   }
 });
 
-var _styles = require('./styles');
+var _styles = require("./styles");
 
-Object.defineProperty(exports, 'styles', {
+Object.defineProperty(exports, "styles", {
   enumerable: true,
@@ -26,20 +26,11 @@ get: function get() {
 
-var _marg = require('./marg.js');
+var _styleGenerators = require("./styleGenerators");
 
-Object.defineProperty(exports, 'marg', {
+Object.defineProperty(exports, "styleGenerators", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_marg).default;
+    return _interopRequireDefault(_styleGenerators).default;
   }
 });
 
-var _pad = require('./pad.js');
-
-Object.defineProperty(exports, 'pad', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_pad).default;
-  }
-});
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

es/styles/styles.js

@@ -7,46 +7,27 @@ "use strict";
 
-var _variables = require("./variables");
+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 _variables2 = _interopRequireDefault(_variables);
+var _styleVars = require("./styleVars");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styleVars2 = _interopRequireDefault(_styleVars);
 
-var styleVariables = {
-    boxShadow: {
-        xsm: {
-            boxShadow: "0 0 3px rgba(0, 0, 0, .3)"
-        },
-        sm: {
-            boxShadow: "0 1px 3px rgba(0, 0, 0, .3)"
-        },
+var _styleGenerators = require("./styleGenerators");
 
-        md: {
-            boxShadow: "0 1px 10px rgba(0, 0, 0, .5)"
-        },
+var styleGenerators = _interopRequireWildcard(_styleGenerators);
 
-        lg: {
-            boxShadow: "0 5px 15px rgba(0,0,0,.5)"
-        },
+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; } }
 
-        li: {
-            boxShadow: "0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24)"
-        }
-    },
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    t: {
+var sizeUnits = _styleVars2.default.sizeUnits,
+    palette = _styleVars2.default.palette;
+var generateMarginStyles = styleGenerators.generateMarginStyles,
+    generatePaddingStyles = styleGenerators.generatePaddingStyles,
+    generateShadowStyles = styleGenerators.generateShadowStyles;
 
-        label: {
-            display: "block",
-            fontSize: "12px",
-            fontWeight: "200",
-            color: "rgba(0, 0, 0, 0.3)",
-            margin: "0px 0px 10px"
-        },
 
-        caption: {
-            fontSize: "14px",
-            fontWeight: "400",
-            color: _variables2.default.c.grey.dark
-        },
-
+var styles = {
+    elevation: _extends({}, generateShadowStyles()),
+    whitespace: _extends({}, generateMarginStyles(sizeUnits), generatePaddingStyles(sizeUnits)),
+    typography: {
         display4: {
@@ -57,3 +38,2 @@ fontSize: "112px",
         },
-
         display3: {
@@ -64,97 +44,63 @@ fontSize: "56px",
         },
-
         display2: {
-            fontSize: "45px",
+            fontSize: "48px",
+            lineHeight: "48px",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         display1: {
             fontSize: "34px",
+            lineHeight: "40px",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         headline: {
             fontSize: "24px",
+            lineHeight: "1",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         title: {
             fontSize: "20px",
+            lineHeight: "24px",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         subheading: {
-            color: _variables2.default.c.grey.dark,
             fontSize: "16px",
-            fontWeight: "400"
+            lineHeight: "1",
+            fontWeight: "400",
+            color: palette.secondaryTextColor
         },
-
         body2: {
             fontSize: "16px",
+            lineHeight: "1",
             fontWeight: "500"
         },
-
         body1: {
             fontSize: "14px",
+            lineHeight: "16px",
             fontWeight: "300"
         },
-
-        button1: {
+        caption: {
             fontSize: "14px",
+            lineHeight: "16px",
             fontWeight: "400",
+            color: palette.secondaryTextColor
+        },
+        label: {
+            fontSize: "12px",
             lineHeight: "1",
-            marginTop: "0px",
-            marginRight: "0px",
-            marginBottom: "0px",
-            marginLeft: "0px",
-            letterSpacing: "1px"
+            fontWeight: "200",
+            color: "rgba(0, 0, 0, 0.3)",
+            margin: "0px 0px 10px"
         }
     },
-    BgColors: {
-        greyXxDark: {
-            background: _variables2.default.c.grey.xXDark
-        },
-        greyXDark: {
-            background: _variables2.default.c.grey.xDark
-        },
-        greyDark: {
-            background: _variables2.default.c.grey.dark
-        },
-        greyDarkMid: {
-            background: _variables2.default.c.grey.darkMid
-        },
-        greyMid: {
-            background: _variables2.default.c.grey.mid
-        },
-        greyLightMid: {
-            background: _variables2.default.c.grey.lightMid
-        },
-        greyLight: {
-            background: _variables2.default.c.grey.light
-        },
-        greyXLight: {
-            background: _variables2.default.c.grey.xLight
-        },
-        greyXxlight: {
-            background: _variables2.default.c.grey.xXLight
-        }
-    },
-    u: {
-        kHide: {
+    utility: {
+        hideReadable: {
             position: "fixed",
             top: "9999px"
         },
-
-        inlineUl: {
-            padding: 0,
-            margin: 0
-        },
-
-        inlineLi: {
-            display: "inline-block",
-            listStyle: "none"
+        hide: {
+            display: "none !important"
         }
@@ -164,2 +110,2 @@ }
 
-exports.default = styleVariables;
+exports.default = styles;

es/SubHeader.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,152 +7,128 @@ Object.defineProperty(exports, "__esModule", {
 
-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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _IconButton = require('material-ui/IconButton');
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _classnames2 = require("classnames");
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _IconButton = require("material-ui/IconButton");
+
 var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _arrowBack = require('material-ui/svg-icons/navigation/arrow-back');
+var _arrowBack = require("material-ui/svg-icons/navigation/arrow-back");
 
 var _arrowBack2 = _interopRequireDefault(_arrowBack);
 
-var _VerticalMenu = require('./VerticalMenu');
+var _VerticalMenu = require("./VerticalMenu");
 
 var _VerticalMenu2 = _interopRequireDefault(_VerticalMenu);
 
-var _Div = require('./Div');
+var _ActionGroup = require("./ActionGroup");
 
-var _Div2 = _interopRequireDefault(_Div);
+var _ActionGroup2 = _interopRequireDefault(_ActionGroup);
 
-var _Title = require('./Title');
+var _Element = require("./Element");
 
-var _Title2 = _interopRequireDefault(_Title);
+var _Element2 = _interopRequireDefault(_Element);
 
 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 _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 _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; }
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            position: "relative",
+            display: "flex",
+            justifyContent: "space-between"
+        },
 
-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; }
+        titleGroup: {
+            display: "flex",
+            flex: "1",
+            alignItems: "center"
+        },
 
+        backButton: {
+            float: "left",
+            cursor: "pointer",
+            position: "relative",
+            marginRight: "10px"
+        }
+    };
+};
 /**
  * SubHeader is the contextual header located at the top of a sub-view. A Sub-view is a view that one would navigate to from a main-view. For example clicking on a list item might open a sub-view detail of that list item. The SubHeader has a back button to navigate back to the main-view and some top level controls or actions for the particular sub-view.
  */
-var SubHeader = function (_React$Component) {
-    _inherits(SubHeader, _React$Component);
+var SubHeader = function SubHeader(_ref) {
+    var classes = _ref.classes,
+        className = _ref.className,
+        name = _ref.name,
+        quickActions = _ref.quickActions,
+        menuItems = _ref.menuItems,
+        onBack = _ref.onBack;
 
-    function SubHeader() {
-        var _ref;
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-SubHeader", classes.wrapper);
 
-        var _temp, _this, _ret;
+    var titleGroupClasses = (0, _classnames3.default)("CY-SubHeader-titleGroup", classes.titleGroup);
 
-        _classCallCheck(this, SubHeader);
+    var renderOptionGroup = function renderOptionGroup() {
+        var renderQuickActions = function renderQuickActions(option, i) {
+            return _react2.default.createElement(
+                "div",
+                { key: option + i },
+                option
+            );
+        };
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+        if (quickActions || menuItems) {
+            return _react2.default.createElement(
+                _ActionGroup2.default,
+                { className: "CY-SubHeader-Actions" },
+                quickActions ? quickActions.map(renderQuickActions) : null,
+                menuItems ? _react2.default.createElement(_VerticalMenu2.default, { children: menuItems }) : null
+            );
         }
+    };
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SubHeader.__proto__ || Object.getPrototypeOf(SubHeader)).call.apply(_ref, [this].concat(args))), _this), _this.renderOptionGroup = function () {
-            var _this$props = _this.props,
-                quickActions = _this$props.quickActions,
-                menuItems = _this$props.menuItems;
-
-            var style = _this.style();
-
-            var renderQuickActions = function renderQuickActions(option, i) {
-                return _react2.default.createElement(
-                    _Div2.default,
-                    { key: option + i },
-                    option
-                );
-            };
-
-            if (quickActions || menuItems) {
-                return _react2.default.createElement(
-                    'div',
-                    { style: style.actionGroup },
-                    quickActions ? quickActions.map(renderQuickActions) : null,
-                    menuItems ? _react2.default.createElement(_VerticalMenu2.default, {
-                        children: menuItems
-                    }) : null
-                );
-            }
-        }, _this.style = function () {
-            return {
-                header: {
-                    position: "relative",
-                    display: "flex",
-                    justifyContent: "space-between"
+    return _react2.default.createElement(
+        "div",
+        { className: wrapperClasses },
+        _react2.default.createElement(
+            "div",
+            { className: titleGroupClasses },
+            _react2.default.createElement(
+                _IconButton2.default,
+                {
+                    className: "CY-SubHeader-backBtn",
+                    onTouchTap: onBack
                 },
-
-                titleGroup: {
-                    display: "flex",
-                    flex: "1",
-                    alignItems: "center"
-                },
-
-                backButton: {
-                    float: "left",
-                    cursor: "pointer",
-                    position: "relative",
-                    marginRight: "10px"
-                },
-
-                actionGroup: {
-                    display: "flex",
-                    alignItems: "center"
-                }
-            };
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(SubHeader, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                name = _props.name,
-                onBack = _props.onBack;
-
-            var style = this.style();
-
-            return _react2.default.createElement(
-                'div',
+                _react2.default.createElement(_arrowBack2.default, null)
+            ),
+            _react2.default.createElement(
+                _Element2.default,
                 {
-                    style: style.header
+                    className: "CY-SubHeader-title",
+                    root: "h1",
+                    typography: "title"
                 },
-                _react2.default.createElement(
-                    'div',
-                    { style: style.titleGroup },
-                    _react2.default.createElement(
-                        _IconButton2.default,
-                        { onTouchTap: onBack },
-                        _react2.default.createElement(_arrowBack2.default, null)
-                    ),
-                    _react2.default.createElement(
-                        _Title2.default,
-                        {
-                            h1: true,
-                            title: true,
-                            m: 0
-                        },
-                        name
-                    )
-                ),
-                this.renderOptionGroup()
-            );
-        }
-    }]);
+                name
+            )
+        ),
+        renderOptionGroup()
+    );
+};
 
-    return SubHeader;
-}(_react2.default.Component);
+SubHeader.displayName = "SubHeader";
 
-SubHeader.displayName = "SubHeader";
 SubHeader.propTypes = {
@@ -176,2 +152,3 @@ /**
 };
-exports.default = SubHeader;
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(SubHeader));

es/SummaryText.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames2 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,18 +32,16 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('SummaryText', function (theme) {
-        return {
-            wrapper: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                maxWidth: "500px"
-            }
-        };
-    });
+var styles = {
+    wrapper: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        maxWidth: "500px"
+    }
 };
+
 /**
@@ -53,17 +53,17 @@ * SummaryText is used to limit text to a single line and available width. Typically used to preview a large block of text that can be shown by clicking `ShowMoreEllipsis` or a collapsed `MediaCard`.
 var SummaryText = function SummaryText(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        _ref$root = _ref.root,
+        root = _ref$root === undefined ? "p" : _ref$root,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "root", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-SummaryText", classes.wrapper);
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            tag: 'p',
-            className: classes.wrapper
-        }),
+        _extends({}, rest, { root: root, className: wrapperClasses }),
         children
     );
 };
+
 SummaryText.displayName = "SummaryText";
@@ -75,5 +75,9 @@
      */
-    children: _propTypes2.default.string
+    children: _propTypes2.default.string,
+    /**
+     * The root element to be renderd.
+     */
+    root: _propTypes2.default.string
 };
 
-exports.default = SummaryText;
+exports.default = (0, _reactJss2.default)(styles)(SummaryText);

es/Tooltip.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,14 +11,26 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _colors = require('material-ui/styles/colors');
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _classnames5 = require("classnames");
+
+var _classnames6 = _interopRequireDefault(_classnames5);
+
+var _colors = require("material-ui/styles/colors");
+
 var colors = _interopRequireWildcard(_colors);
 
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
 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; } }
@@ -28,2 +40,6 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -35,9 +51,87 @@
 
+var tooltipDirection = function tooltipDirection(direction, classes) {
+    var top = classes.message__top,
+        right = classes.message__right,
+        bottom = classes.message__bottom,
+        left = classes.message__left;
+
+    switch (direction) {
+        case "top":
+            return top;
+        case "right":
+            return right;
+        case "bottom":
+            return bottom;
+        case "left":
+            return left;
+        default:
+            return top;
+    }
+};
+
+// Each key of the returned object will be available as a className below.
+var styles = function styles(theme) {
+    var messageOffset = "calc(100% + 8px)";
+    return {
+        wrapper: {
+            display: "inline-block"
+        },
+        innerWrapper: {
+            position: "relative",
+            display: "flex",
+            alignItems: "start"
+        },
+        message: {
+            zIndex: "9999",
+            display: "block",
+            padding: "5px",
+            background: colors.grey900,
+            borderRadius: "2px",
+            color: "white",
+            fontSize: "12px",
+            textAlign: "center",
+            whiteSpace: "nowrap",
+            position: "absolute",
+            alignSelf: "center",
+            transition: "opacity ease .2s, transform ease .2s"
+        },
+        message__long: {
+            whiteSpace: "normal",
+            minWidth: "250px"
+        },
+        message__hide: {
+            opacity: 0,
+            transform: "scale(0)"
+        },
+        message__show: {
+            opacity: 1,
+            tranform: "scale(1)"
+        },
+        message__top: {
+            transformOrigin: "0% 100%",
+            bottom: messageOffset
+        },
+        message__right: {
+            transformOrigin: "0% 50%",
+            left: messageOffset
+        },
+        message__bottom: {
+            transformOrigin: "0% -100%",
+            top: messageOffset
+        },
+        message__left: {
+            transformOrigin: "100% 50%",
+            right: messageOffset
+        }
+    };
+};
+
 /**
-* A Tooltip is used to show on demand information about an element, usually an action. Is initially hidden to keep the UI clean but can be shown by hovering over the element in question.
-*/
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+ * A Tooltip is used to show on demand information about an element, usually an action. Is initially hidden to keep the UI clean but can be shown by hovering over the element in question.
+ */
 
-    function _class() {
+var Tooltip = function (_React$Component) {
+    _inherits(Tooltip, _React$Component);
+
+    function Tooltip() {
         var _ref;
@@ -47,3 +141,3 @@
 
-        _classCallCheck(this, _class);
+        _classCallCheck(this, Tooltip);
 
@@ -54,3 +148,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
             showTooltip: false
@@ -78,79 +172,43 @@ }, _this.showTooltip = function () {
             }, 2000);
-        }, _this.directionStyle = function () {
-            var direction = _this.props.direction;
-            var offset = "calc(100% + 10px)";
-            switch (direction) {
-                case "top":
-                    return {
-                        transformOrigin: "0% 100%",
-                        bottom: offset
-                    };
-                case "right":
-                    return {
-                        transformOrigin: "0% 50%",
-                        left: offset
-                    };
-                case "bottom":
-                    return {
-                        transformOrigin: "0% 0%",
-                        top: offset
-                    };
-                case "left":
-                    return {
-                        transformOrigin: "100% 50%",
-                        right: offset
-                    };
-                default:
-                    return {
-                        transformOrigin: "0 100%",
-                        bottom: offset
-                    };
-            }
-        }, _this.style = function () {
-            var showTooltip = _this.state.showTooltip;
-
-            var x = showTooltip ? 1 : 0;
-            return {
-                content: _extends({}, _this.directionStyle(), {
-                    zIndex: "9999",
-                    display: "block",
-                    padding: "5px",
-                    background: colors.grey900,
-                    borderRadius: "2px",
-                    color: "white",
-                    fontSize: "10px",
-                    textAlign: "center",
-                    whiteSpace: "nowrap",
-                    position: "absolute",
-                    alignSelf: "center",
-                    opacity: x,
-                    transform: 'scale(' + x + ')',
-                    transition: "opacity ease .2s, transform ease .2s"
-                })
-            };
         }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
-    _createClass(_class, [{
-        key: 'render',
+    _createClass(Tooltip, [{
+        key: "render",
         value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
+                message = _props.message,
+                direction = _props.direction,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "message", "direction"]);
+
+            var showTooltip = this.state.showTooltip;
+
+
+            var wrapperClasses = (0, _classnames6.default)(_defineProperty({}, className, className), "CY-Tooltip", classes.wrapper);
+
+            var innerWrapperClasses = (0, _classnames6.default)("CY-Tooltip-innerWrapper", classes.innerWrapper);
+
+            var messageClasses = (0, _classnames6.default)("CY-Tooltip-message", classes.message, _defineProperty({}, classes.message__show, showTooltip), _defineProperty({}, classes.message__hide, !showTooltip), _defineProperty({}, classes.message__long, message.length > 40), tooltipDirection(direction, classes));
+
             return _react2.default.createElement(
-                'span',
-                {
-                    style: _extends({
-                        position: "relative",
-                        display: "flex",
-                        alignItems: "start"
-                    }, this.props.style),
-                    onMouseEnter: this.onMouseEnter,
-                    onMouseLeave: this.onMouseLeave
-                },
-                this.props.children,
+                _Element2.default,
+                _extends({}, rest, { className: wrapperClasses }),
                 _react2.default.createElement(
-                    'span',
-                    { style: this.style().content },
+                    "span",
+                    {
+                        className: innerWrapperClasses,
+                        onMouseEnter: this.onMouseEnter,
+                        onMouseLeave: this.onMouseLeave
+                    },
+                    this.props.children,
                     _react2.default.createElement(
-                        'div',
-                        null,
-                        this.props.message
+                        "span",
+                        { className: messageClasses },
+                        _react2.default.createElement(
+                            "div",
+                            null,
+                            message
+                        )
                     )
@@ -162,20 +220,23 @@ )
 
-    return _class;
+    return Tooltip;
 }(_react2.default.Component);
 
-_class.propTypes = {
+Tooltip.propTypes = {
     /**
-    * Text that shows on tooltip
-    */
+     * Text that shows on tooltip
+     */
     message: _propTypes2.default.string.isRequired,
     /**
-    * The direction of the element Tooltip will open from. Expects one of: "right", "bottom", "left", "top".
-    */
-    direction: _propTypes2.default.oneOf(['right', 'left', 'top', 'bottom']),
+     * The direction of the element Tooltip will open from. Expects one of: "right", "bottom", "left", "top".
+     */
+    direction: _propTypes2.default.string,
     /**
-    * The element that shows Tooltip on hover and anchors the toopltip's direction
-    */
+     * The element that shows Tooltip on hover and anchors the toopltip's direction
+     */
     children: _propTypes2.default.node.isRequired
 };
-_class.displayName = "Tooltip";
-exports.default = _class;
+Tooltip.defaultProps = {
+    direction: "top"
+};
+Tooltip.displayName = "Tooltip";
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Tooltip));

es/utils/ButtonGroup.js

@@ -15,10 +15,14 @@ 'use strict';
 
-var _styles = require('../styles');
+var _reactJss = require('react-jss');
 
-var _ClearFix = require('./ClearFix');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _ClearFix2 = _interopRequireDefault(_ClearFix);
+var _Element = require('../Element');
 
+var _Element2 = _interopRequireDefault(_Element);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,12 +34,25 @@
 
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var styles = {
+    wrapper: {
+        display: "flex",
+        flexWrap: "wrap",
+        "& > *": {
+            marginRight: "16px"
+        },
+        "& > *:last-child": {
+            marginRight: 0
+        }
+    }
+};
 
-    function _class() {
-        _classCallCheck(this, _class);
+var ButtonGroup = function (_React$Component) {
+    _inherits(ButtonGroup, _React$Component);
 
-        return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
+    function ButtonGroup() {
+        _classCallCheck(this, ButtonGroup);
+
+        return _possibleConstructorReturn(this, (ButtonGroup.__proto__ || Object.getPrototypeOf(ButtonGroup)).apply(this, arguments));
     }
 
-    _createClass(_class, [{
+    _createClass(ButtonGroup, [{
         key: 'render',
@@ -45,36 +62,9 @@ value: function render() {
                 children = _props.children,
-                pullR = _props.pullR,
-                pullL = _props.pullL;
+                classes = _props.classes,
+                rest = _objectWithoutProperties(_props, ['children', 'classes']);
 
-
-            var style = {
-                display: "flex",
-                flexWrap: "wrap"
-            };
-            if (pullR) {
-                style.float = "right";
-            }
-            if (pullL) {
-                style.float = "left";
-            }
-
-            var renderChildren = _react2.default.Children.map(children, function (child, i) {
-                if (i === children.length - 1) {
-                    return _react2.default.cloneElement(child, {
-                        style: _extends({}, (0, _styles.marg)({ mv: 1 }))
-                    });
-                } else {
-                    return _react2.default.cloneElement(child, {
-                        style: _extends({}, (0, _styles.marg)({ mr: 3, mv: 1 }))
-                    });
-                }
-            });
             return _react2.default.createElement(
-                _ClearFix2.default,
-                null,
-                _react2.default.createElement(
-                    'div',
-                    { style: style },
-                    renderChildren
-                )
+                _Element2.default,
+                _extends({}, rest, { className: classes.wrapper + ' ButtonGroup' }),
+                children
             );
@@ -84,6 +74,6 @@ }
 
-    return _class;
+    return ButtonGroup;
 }(_react2.default.Component);
 
-_class.displayName = "ButtonGroup";
-exports.default = _class;
+ButtonGroup.displayName = "ButtonGroup";
+exports.default = (0, _reactJss2.default)(styles)(ButtonGroup);

es/utils/ClearFix.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,8 +11,6 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,20 +34,18 @@
     _createClass(ClearFix, [{
-        key: 'render',
+        key: "render",
         value: function render() {
             var beforeStyle = {
-                display: 'table'
+                display: "table"
             };
 
             var afterStyle = _extends({}, beforeStyle, {
-                clear: 'both'
+                clear: "both"
             });
 
             return _react2.default.createElement(
-                'div',
-                {
-                    style: _extends({}, this.props.style, (0, _styles.marg)(this.props))
-                },
-                _react2.default.createElement('div', { style: beforeStyle }),
+                _react2.default.Fragment,
+                null,
+                _react2.default.createElement("div", { style: beforeStyle }),
                 this.props.children,
-                _react2.default.createElement('div', { style: afterStyle })
+                _react2.default.createElement("div", { style: afterStyle })
             );
@@ -56,0 +52,0 @@ }

es/VerticalMenu.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,14 +11,18 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _materialUi = require('material-ui');
+var _classnames2 = require("classnames");
 
-var _moreVert = require('material-ui/svg-icons/navigation/more-vert');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _materialUi = require("material-ui");
+
+var _moreVert = require("material-ui/svg-icons/navigation/more-vert");
+
 var _moreVert2 = _interopRequireDefault(_moreVert);
@@ -28,2 +32,4 @@
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -61,14 +67,20 @@
     _createClass(VerticalMenu, [{
-        key: 'render',
+        key: "render",
         value: function render() {
             var _props = this.props,
+                className = _props.className,
                 anchorOrigin = _props.anchorOrigin,
                 targetOrigin = _props.targetOrigin;
 
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-VerticalMenu");
 
             return _react2.default.createElement(_materialUi.IconMenu, _extends({}, this.props, {
+                className: wrapperClasses,
                 iconButtonElement: _react2.default.createElement(
                     _materialUi.IconButton,
-                    { onClick: this.onTouch },
-                    _react2.default.createElement(_moreVert2.default, null)
+                    {
+                        className: "CY-VerticalMenu-btn",
+                        onClick: this.onTouch
+                    },
+                    _react2.default.createElement(_moreVert2.default, { className: "CY-VerticalMenu-icon" })
                 ),
@@ -100,5 +112,5 @@ anchorOrigin: anchorOrigin,
 VerticalMenu.defaultProps = {
-    anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-    targetOrigin: { horizontal: 'right', vertical: 'top' }
+    anchorOrigin: { horizontal: "right", vertical: "bottom" },
+    targetOrigin: { horizontal: "right", vertical: "top" }
 };
 exports.default = VerticalMenu;

lib/ActionGroup.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames2 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,16 +32,16 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ActionGroup', function (theme) {
-        return {
-            wrapper: {
-                display: "flex",
-                alignItems: "center"
-            }
-        };
-    });
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            display: "flex",
+            alignItems: "center"
+        }
+    };
 };
+
 /**
@@ -49,14 +51,12 @@ * Organize groups of IconButtons on list cards or in app bars.
 var ActionGroup = function ActionGroup(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ActionGroup", classes.wrapper);
 
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            display: 'flex',
-            className: classes.wrapper
-        }),
+        _extends({}, rest, { className: wrapperClasses }),
         children
@@ -74,2 +74,2 @@ );
 
-exports.default = ActionGroup;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ActionGroup));

lib/ButtonMenu.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,23 +11,31 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Div = require('./Div');
+var _reactJss = require("react-jss");
 
-var _Div2 = _interopRequireDefault(_Div);
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _RaisedButton = require('material-ui/RaisedButton');
+var _classnames2 = require("classnames");
 
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
+var _RaisedButton = require("material-ui/RaisedButton");
+
 var _RaisedButton2 = _interopRequireDefault(_RaisedButton);
 
-var _Popover = require('material-ui/Popover');
+var _Popover = require("material-ui/Popover");
 
 var _Popover2 = _interopRequireDefault(_Popover);
 
-var _Menu = require('material-ui/Menu');
+var _Menu = require("material-ui/Menu");
 
@@ -38,2 +46,6 @@ var _Menu2 = _interopRequireDefault(_Menu);
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -45,2 +57,9 @@
 
+// Each key of the returned object will be available as a className below.
+var styles = {
+    wrapper: {
+        display: "inline-block"
+    }
+};
+
 /**
@@ -51,6 +70,7 @@ * A ButtonMenu is a menu that can be displayed by pressing a RaisedButton. In Troposphere a ButtonMenu is used to with the label "New" and opens a list of things that can be created.
  */
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
 
-    function _class() {
+var ButtonMenu = function (_React$Component) {
+    _inherits(ButtonMenu, _React$Component);
+
+    function ButtonMenu() {
         var _ref;
@@ -60,3 +80,3 @@
 
-        _classCallCheck(this, _class);
+        _classCallCheck(this, ButtonMenu);
 
@@ -67,3 +87,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ButtonMenu.__proto__ || Object.getPrototypeOf(ButtonMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
             open: false
@@ -89,7 +109,8 @@ }, _this.handleTouchTap = function (event) {
 
-    _createClass(_class, [{
-        key: 'render',
+    _createClass(ButtonMenu, [{
+        key: "render",
         value: function render() {
             var _props = this.props,
-                style = _props.style,
+                classes = _props.classes,
+                className = _props.className,
                 buttonIcon = _props.buttonIcon,
@@ -102,16 +123,16 @@ buttonLabel = _props.buttonLabel,
                 _props$anchorOrigin = _props.anchorOrigin,
-                anchorOrigin = _props$anchorOrigin === undefined ? { horizontal: 'right', vertical: 'bottom' } : _props$anchorOrigin,
+                anchorOrigin = _props$anchorOrigin === undefined ? {
+                horizontal: "right",
+                vertical: "bottom"
+            } : _props$anchorOrigin,
                 _props$targetOrigin = _props.targetOrigin,
-                targetOrigin = _props$targetOrigin === undefined ? { horizontal: 'right', vertical: 'top' } : _props$targetOrigin;
+                targetOrigin = _props$targetOrigin === undefined ? { horizontal: "right", vertical: "top" } : _props$targetOrigin,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "buttonIcon", "buttonLabel", "children", "primary", "secondary", "disabled", "anchorOrigin", "targetOrigin"]);
 
-
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ButtonMenu", classes.wrapper);
             return _react2.default.createElement(
-                _Div2.default,
-                {
-                    style: _extends({}, style, {
-                        display: "inline-block"
-                    }),
-                    id: this.props.id
-                },
+                _Element2.default,
+                _extends({}, rest, { className: wrapperClasses }),
                 _react2.default.createElement(_RaisedButton2.default, {
+                    className: "CY-ButtonMenu-btn",
                     onTouchTap: this.handleTouchTap,
@@ -127,2 +148,3 @@ label: buttonLabel,
                     {
+                        className: "CY-ButtonMenu-popover",
                         open: this.state.open,
@@ -137,2 +159,3 @@ anchorEl: this.state.anchorEl,
                         {
+                            className: "CY-ButtonMenu-menu",
                             onItemTouchTap: this.handleItemTouchTap
@@ -147,7 +170,7 @@ },
 
-    return _class;
+    return ButtonMenu;
 }(_react2.default.Component);
 
-_class.displayName = "ButtonMenu";
-_class.propTypes = {
+ButtonMenu.displayName = "ButtonMenu";
+ButtonMenu.propTypes = {
     /**
@@ -186,2 +209,2 @@ * Override the inline-styles of the root element.
 };
-exports.default = _class;
+exports.default = (0, _reactJss2.default)(styles)(ButtonMenu);

lib/Element.js

@@ -7,6 +7,6 @@ "use strict";
 
+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 _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 = require("react");
@@ -24,20 +24,20 @@
 
-var _jssThemeReactor = require("jss-theme-reactor");
+var _classnames5 = require("classnames");
 
-var _getStyleManager = require("./styles/getStyleManager");
+var _classnames6 = _interopRequireDefault(_classnames5);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _reactJss = require("react-jss");
 
-var _muiThemeable = require("material-ui/styles/muiThemeable");
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
-
 var _events = require("./utils/events");
 
-var _events2 = _interopRequireDefault(_events);
+var events = _interopRequireWildcard(_events);
 
-var _styles = require("./styles");
+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 }; }
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -51,8 +51,25 @@
 
+// Each key of the returned styles object will be available as a className below.
+var getColor = function getColor(palette, background) {
+    return palette[background] || background;
+};
+var styles = function styles(theme) {
+    return _extends({
+        wrapper: {
+            background: function background(props) {
+                return getColor(theme.palette, props.background);
+            },
+            color: function color(props) {
+                return getColor(theme.palette, props.color);
+            }
+        }
+    }, theme.utility, theme.typography, theme.whitespace, theme.elevation);
+};
+
 /**
- * Element is the building block for creating other components. All of CyVerse-UI is built with Element.
- * It has the core functionality that is common across the CY-UI world. These features let you access global values for whitespace and typography to maintain consistency throughout your components.
+ * All of CyVerse-UI is built with "Element". It is the same basic idea as MUI's "Paper" with the core features that are common across the CY-UI world. These features let you access global utilities for whitespace and typography to maintain consistency throughout your components without leaking global variables.
  *
- * Render the html tag you want by a string to the el prop and pass any html attributes as you would with any other element.
+ * Render the html tag you want using the root prop and pass any html attributes that element accepts.
  **/
+
 var Element = function (_React$Component) {
@@ -72,9 +89,3 @@ _inherits(Element, _React$Component);
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Element.__proto__ || Object.getPrototypeOf(Element)).call.apply(_ref, [this].concat(args))), _this), _this.styleSheet = function () {
-            return (0, _jssThemeReactor.createStyleSheet)("Element", function (theme) {
-                return {
-                    wrapper: {}
-                };
-            });
-        }, _this.clickHandler = function (e) {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Element.__proto__ || Object.getPrototypeOf(Element)).call.apply(_ref, [this].concat(args))), _this), _this.clickHandler = function (e) {
             var _this$props = _this.props,
@@ -84,61 +95,58 @@ stopPropagation = _this$props.stopPropagation,
 
-            stopPropagation ? _events2.default.stopPropagation(e) : null;
+            stopPropagation ? events.stopPropagation(e) : null;
             onClick ? onClick(e) : null;
-        }, _this.styles = function () {
-            var _this$props2 = _this.props,
-                palette = _this$props2.muiTheme.palette,
-                colorProp = _this$props2.color,
-                _this$props2$whiteSpa = _this$props2.whiteSpace,
-                whiteSpace = _this$props2$whiteSpa === undefined ? {} : _this$props2$whiteSpa,
-                _this$props2$typograp = _this$props2.typography,
-                typography = _this$props2$typograp === undefined ? "body1" : _this$props2$typograp,
-                backgroundProp = _this$props2.background,
-                hide = _this$props2.hide,
-                _this$props2$display = _this$props2.display,
-                displayProp = _this$props2$display === undefined ? "block" : _this$props2$display;
-
-
-            var display = hide ? "none" : displayProp;
-            var typoStack = _styles.styles.t;
-
-            var background = palette[backgroundProp] ? palette[backgroundProp] : backgroundProp;
-
-            var color = palette[colorProp] ? palette[colorProp] : colorProp;
-
-            var fontStyle = typoStack[typography];
-
-            return _extends({
-                color: color,
-                background: background,
-                display: display
-            }, fontStyle, (0, _styles.marg)(whiteSpace), (0, _styles.pad)(whiteSpace));
+        }, _this.onKeyDown = function (e) {
+            if (e.keyCode === 13) {
+                _this.clickHandler(e);
+            }
         }, _temp), _possibleConstructorReturn(_this, _ret);
     }
-    // Define static styles here.
-    // Each key of the returned object will be available as a className below.
-    // TODO: Move styles from inline to here and compose classNames
 
-
     _createClass(Element, [{
-        key: "componentWillMount",
-        value: function componentWillMount() {
-            // Generate classes object and render corresponding style definitions in header.
-            this.classes = (0, _getStyleManager2.default)({}).render(this.styleSheet());
-        }
-    }, {
         key: "render",
         value: function render() {
             var _props = this.props,
-                style = _props.style,
-                _props$tag = _props.tag,
-                tag = _props$tag === undefined ? "div" : _props$tag,
-                rest = _objectWithoutProperties(_props, ["style", "tag"]);
+                theme = _props.theme,
+                _props$root = _props.root,
+                root = _props$root === undefined ? "div" : _props$root,
+                className = _props.className,
+                classes = _props.classes,
+                _props$hide = _props.hide,
+                hide = _props$hide === undefined ? false : _props$hide,
+                _props$hideReadable = _props.hideReadable,
+                hideReadable = _props$hideReadable === undefined ? false : _props$hideReadable,
+                _props$typography = _props.typography,
+                typography = _props$typography === undefined ? "body1" : _props$typography,
+                _props$whitespace = _props.whitespace,
+                whitespace = _props$whitespace === undefined ? [] : _props$whitespace,
+                _props$elevation = _props.elevation,
+                elevation = _props$elevation === undefined ? 0 : _props$elevation,
+                tabindex = _props.tabindex,
+                onClick = _props.onClick,
+                rest = _objectWithoutProperties(_props, ["theme", "root", "className", "classes", "hide", "hideReadable", "typography", "whitespace", "elevation", "tabindex", "onClick"]);
 
-            var Tag = tag;
+            // Throw an error if not using a CY-UI compatible theme
 
+
+            var themeTypography = theme.typography;
+
+            if (!themeTypography) {
+                throw "missing \"cyverse-ui\" dependency\n\nThe theme field \"typography\" is missing. \"cyverse-ui\" requires that the material-ui base theme be extended with \"cyverseTheme\". Visit https://cyverse.github.io/cyverse-ui/ to learn more about cyverse-ui theming.";
+            }
+
+            var Root = root;
+            var whitespaceClass = Array.isArray(whitespace) ? whitespace.map(function (i) {
+                return classes[i];
+            }).join(" ") : classes[whitespace];
+            var elevationClass = [classes["elevation" + elevation]];
+
+            var wrapperClasses = (0, _classnames6.default)(_defineProperty({}, className, className), "Element", _defineProperty({}, classes.hide, hide), _defineProperty({}, classes.hideReadable, hideReadable), _defineProperty({}, elevationClass, elevation > 0), classes.wrapper, classes[typography], whitespaceClass);
+
             return _react2.default.createElement(
-                Tag,
+                Root,
                 _extends({}, (0, _filterReactDomProps2.default)(rest), {
-                    style: _extends({}, style, this.styles()),
-                    onClick: this.clickHandler
+                    tabIndex: tabindex ? tabindex : onClick ? "0" : null,
+                    className: wrapperClasses,
+                    onClick: this.clickHandler,
+                    onKeyDown: this.onKeyDown
                 }),
@@ -159,5 +167,35 @@ this.props.children
      */
-    children: _propTypes2.default.node
+    children: _propTypes2.default.node,
+    /**
+     * The html tag to render, For example, "p", "div", "span". All html atrributes like "title", "src" etc.. are passed down.
+     */
+    root: _propTypes2.default.string,
+    /**
+     * The color of the text. You can use theme palette names like "primary1Color"
+     */
+    color: _propTypes2.default.string,
+    /**
+     * The color of the background. You can use theme palette names like "primary1Color"
+     */
+    background: _propTypes2.default.string,
+    /**
+     * The typography styles from the theme like "title" or "body1"
+     */
+    typography: _propTypes2.default.string,
+    /**
+     * Whitespace can be a string or an array of strings representing a spacing property followed by a spacing unit ranging 0 - 20. The expected values are shorthand "mb1" is "margin-bottom" with a unit of 1 so "mt1" is top "ml1" is left etc..., Padding is the same with a "p" instead of an "m". Other values are: top and bottom "mv1" for vertical, right and left "ms1" for sides, and all directions "m1" see example above or in the theme documentation on whitespace for a list of values. It is good to use whitespace units (multiples of 8px) over other values for margin or padding for consistancy and best alignment. See the Material Design specs for guidence.
+     */
+    whitespace: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
+    /**
+     * Elevation is how high the element comes off the page visually through shadow depth. Expects values between 0 and 24.
+     */
+    elevation: _propTypes2.default.number
 };
 
-exports.default = (0, _muiThemeable2.default)()(Element);
+Element.defaultProps = {
+    root: "div",
+    typography: "body1",
+    whitespace: ["m0", "p0"]
+};
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Element));

lib/Hr.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,58 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 
-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 _react = require("react");
 
-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 = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _classnames2 = require("classnames");
 
-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; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-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 _Element = require("./Element");
 
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var _Element2 = _interopRequireDefault(_Element);
 
-    function _class() {
-        var _ref;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-        var _temp, _this, _ret;
+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; }
 
-        _classCallCheck(this, _class);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+// Each key of the returned object will be available in the prop "classes" below.
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            border: "0px",
+            height: "1px",
+            background: "rgba( 0, 0, 0, .1 )"
         }
+    };
+};
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.style = function () {
-            return _extends({
-                border: "0px",
-                height: "1px",
-                background: "rgba( 0, 0, 0, .1 )"
-            }, (0, _styles.marg)(_this.props), _this.props.style);
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-    /**
-     * Hr renders the proper styling on a horizontal rule.
-     */
+/**
+ * Hr renders the proper styling on a horizontal rule.
+ */
+var Hr = function Hr(_ref) {
+    var classes = _ref.classes,
+        className = _ref.className;
 
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Hr", classes.wrapper);
+    return _react2.default.createElement(_Element2.default, { root: "hr", className: wrapperClasses });
+};
 
-    _createClass(_class, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('hr', { style: this.style() });
-        }
-    }]);
-
-    return _class;
-}(_react2.default.Component);
-
-_class.displayName = "Hr";
-exports.default = _class;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Hr));

lib/icons/AttachInstanceIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { fillRule: 'evenodd', d: 'M11,11.3548387 L8,11.3548387 L12.5,15.8172043 L17,11.3548387 L14,11.3548387 L14,3 L11,3 L11,11.3548387 Z M2,20.2795699 L2,16.7096774 L22,16.7096774 L22,20.2795699 L2,20.2795699 Z M6,17.6021505 L4,17.6021505 L4,19.3870968 L6,19.3870968 L6,17.6021505 Z', id: 'path-1' })

lib/icons/BootscriptIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { transform: 'translate(.3)', d: 'M7,3.66666667 L13.6666667,3.66666667 L18.6666667,8.66666667 L18.6666667,18.6666667 C18.6666667,19.5833333 17.9166667,20.3333333 17,20.3333333 L6.99166667,20.3333333 C6.075,20.3333333 5.33333333,19.5833333 5.33333333,18.6666667 L5.34166667,5.33333333 C5.34166667,4.41666667 6.08333333,3.66666667 7,3.66666667 Z M12.7225867,15.4566801 L12.3762844,15.4566801 L12.3762844,15.8029825 L12.3762844,16.5311039 L12.3762844,16.8774063 L12.7225867,16.8774063 L15.7439506,16.8774063 L16.090253,16.8774063 L16.090253,16.5311039 L16.090253,15.8029825 L16.090253,15.4566801 L15.7439506,15.4566801 L12.7225867,15.4566801 Z M8.62855849,15.3392451 L8.91745758,15.1691225 L12.0953335,13.2977823 L12.265914,13.1973334 L12.265914,12.9993746 L12.265914,12.6591309 L12.265914,12.4665384 L12.1023014,12.3649374 L8.92442543,10.3915241 L8.63282776,10.2104463 L8.44917285,10.5004277 L8.06129506,11.1128664 L7.87208709,11.4116158 L8.17472983,11.5945317 L10.1470439,12.7969143 L8.17773894,13.9601027 L7.8701615,14.1417761 L8.06129506,14.443566 L8.44917285,15.0560046 L8.62855849,15.3392451 Z M12.8333333,9.5 L17.4166667,9.5 L12.8333333,4.91666667 L12.8333333,9.5 Z', id: 'path-1' })

lib/icons/ConsoleIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement(

lib/icons/DetachInstanceIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { fillRule: 'evenodd', d: 'M14,6.8172043 L17,6.8172043 L12.5,2.35483871 L8,6.8172043 L11,6.8172043 L11,15.1400003 L14,15.1400003 L14,6.8172043 Z M2,20.2795699 L2,16.7096774 L22,16.7096774 L22,20.2795699 L2,20.2795699 Z M6,17.6021505 L4,17.6021505 L4,19.3870968 L6,19.3870968 L6,17.6021505 Z', id: 'path-1' })

lib/icons/GithubIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,4 +31,4 @@
                 width: size
-            }, (0, _styles.marg)(rest), rest.style),
-            viewBox: '0 0 38 38'
+            }, rest.style),
+            viewBox: '0 0 40 40'
         }),
@@ -37,0 +35,0 @@ _react2.default.createElement(

lib/icons/IntercomIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style),
+            },
             viewBox: '0 0 24 24'
@@ -36,0 +34,0 @@ }),

lib/icons/IPIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { fillRule: 'evenodd', d: 'M8.03396842,8.86623844 C8.08371958,9.23108028 8.1003033,9.47154422 8.1003033,10.0934337 L8.1003033,14.5378707 C8.1003033,15.0934253 8.08371958,15.4416834 8.03396842,15.765066 L9.85817762,15.765066 C9.80842646,15.4168079 9.79184274,15.110009 9.79184274,14.5378707 L9.79184274,10.0934337 C9.79184274,9.48812794 9.80842646,9.2062047 9.85817762,8.86623844 L8.03396842,8.86623844 Z M12.6691182,15.765066 L10.8863683,15.765066 C10.9361194,15.4002241 10.9527031,15.0270904 10.9527031,14.5378707 L10.9527031,10.0519744 C10.9527031,9.60421398 10.9361194,9.23108028 10.8863683,8.84136286 C11.2760857,8.85794658 11.5745926,8.86623844 12.1052717,8.86623844 L13.921189,8.86623844 C15.5629773,8.86623844 16.4667901,9.65396514 16.4667901,11.0967488 C16.4667901,12.5726999 15.521518,13.451637 13.9128972,13.451637 L12.6027833,13.451637 L12.6027833,14.5129951 C12.6027833,15.0022149 12.6276589,15.408516 12.6691182,15.765066 Z M4.52116166,7.12858215 C4.52116166,6.02885185 5.40881628,5.1373443 6.5123995,5.1373443 L17.0699238,5.1373443 C18.1696541,5.1373443 19.0611616,6.02499892 19.0611616,7.12858215 L19.0611616,17.6861064 C19.0611616,18.7858367 18.173507,19.6773443 17.0699238,19.6773443 L6.5123995,19.6773443 C5.41266921,19.6773443 4.52116166,18.7896896 4.52116166,17.6861064 L4.52116166,7.12858215 Z M12.6027833,12.0420208 L13.8382704,12.0420208 C14.4187006,12.0420208 14.7586669,11.7186383 14.7586669,11.1464999 C14.7586669,10.5743616 14.4352844,10.2758546 13.8382704,10.2758546 L12.6027833,10.2758546 L12.6027833,12.0420208 Z', id: 'path-1' })

lib/icons/LaunchIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,3 +31,3 @@
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }, rest.style)
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { className: 'cls-2', d: 'M2,22a.33.33,0,0,1-.37-.39c.42-2.25,1.29-3.86,3.73-4.43l-.11,1.21a.33.33,0,0,0,.32.35h1.2C6,21.18,4.23,21.67,2,22Z', transform: 'translate(-0.24 -0.49)' }),

lib/icons/LinkIcon.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,10 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _materialUi = require('material-ui');
+var _materialUi = require("material-ui");
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +23,4 @@
         size = _ref$size === undefined ? 24 : _ref$size,
-        rest = _objectWithoutProperties(_ref, ['size']);
+        style = _ref.style,
+        rest = _objectWithoutProperties(_ref, ["size", "style"]);
 
@@ -34,7 +33,7 @@ return _react2.default.createElement(
                 width: size
-            }, (0, _styles.marg)(rest), rest.style),
-            viewBox: '0 0 40 40'
+            }, style),
+            viewBox: "0 0 40 40"
         }),
-        _react2.default.createElement('path', { d: 'M16.9169748,14.4193613 C17.207395,14.0708571 17.4978151,13.6642689 17.7882353,13.3738487 C19.4145882,11.6894118 21.0990252,10.0049748 22.7834622,8.37862185 C24.9325714,6.34568067 27.4301849,5.7067563 30.2182185,6.69418487 C33.0062521,7.68161345 34.7487731,9.77263866 35.1553613,12.7349244 C35.4457815,15.0002017 34.7487731,17.0331429 33.1805042,18.6594958 C31.4960672,20.3439328 29.8116303,22.0864538 28.1271933,23.7128067 C25.3391597,26.4427563 20.808605,26.3846723 18.0786555,23.6547227 C17.265479,22.8415462 17.4397311,21.5056134 18.4271597,20.9247731 C19.1241681,20.5181849 19.8792605,20.6343529 20.5181849,21.2151933 C21.6798655,22.3187899 23.0738824,22.6092101 24.5840672,21.9702857 C25.0487395,21.7960336 25.4553277,21.5056134 25.8038319,21.1571092 C27.4882689,19.5307563 29.1146218,17.9044034 30.7409748,16.2199664 C32.3092437,14.6516975 32.2511597,12.3283361 30.6248067,10.7600672 C29.0565378,9.19179832 26.7331765,9.13371429 25.1649076,10.7019832 C23.8870588,11.9798319 22.6092101,13.1995966 21.3894454,14.4774454 C21.2151933,14.6516975 21.0990252,14.7097815 20.8666891,14.5936134 C19.5888403,14.3612773 18.2529076,14.2451092 16.9169748,14.4193613 Z' }),
-        _react2.default.createElement('path', { d: 'M24.6421513,27.0235966 C24.3517311,27.4301849 24.0613109,27.7786891 23.7708908,28.0691092 C22.0864538,29.8116303 20.4020168,31.4960672 18.6594958,33.1805042 C16.5103866,35.2134454 14.0127731,35.7942857 11.2247395,34.7487731 C8.43670588,33.7613445 6.75226891,31.7284034 6.34568067,28.7661176 C5.99717647,26.5008403 6.75226891,24.4678992 8.32053782,22.8415462 C10.0049748,21.1571092 11.6894118,19.4145882 13.3738487,17.7882353 C16.1618824,15.0582857 20.5762689,15.0582857 23.3062185,17.7301513 C24.0613109,18.4852437 24.119395,19.5307563 23.4804706,20.2277647 C22.7834622,20.9247731 21.7960336,20.9247731 20.9828571,20.2277647 C19.4145882,18.7756639 17.1493109,18.8337479 15.6391261,20.3439328 C14.0127731,21.9702857 12.3864202,23.5966387 10.7600672,25.2229916 C9.19179832,26.7912605 9.24988235,29.1146218 10.8181513,30.6828908 C12.4445042,32.3092437 14.7097815,32.3673277 16.2780504,30.7990588 C17.5558992,29.5212101 18.8337479,28.3014454 20.0535126,27.0235966 C20.2277647,26.8493445 20.4020168,26.7912605 20.6343529,26.9074286 C21.8541176,27.2559328 23.0738824,27.3721008 24.3517311,27.1397647 C24.4678992,27.0235966 24.5259832,27.0235966 24.6421513,27.0235966 Z' })
+        _react2.default.createElement("path", { d: "M16.9169748,14.4193613 C17.207395,14.0708571 17.4978151,13.6642689 17.7882353,13.3738487 C19.4145882,11.6894118 21.0990252,10.0049748 22.7834622,8.37862185 C24.9325714,6.34568067 27.4301849,5.7067563 30.2182185,6.69418487 C33.0062521,7.68161345 34.7487731,9.77263866 35.1553613,12.7349244 C35.4457815,15.0002017 34.7487731,17.0331429 33.1805042,18.6594958 C31.4960672,20.3439328 29.8116303,22.0864538 28.1271933,23.7128067 C25.3391597,26.4427563 20.808605,26.3846723 18.0786555,23.6547227 C17.265479,22.8415462 17.4397311,21.5056134 18.4271597,20.9247731 C19.1241681,20.5181849 19.8792605,20.6343529 20.5181849,21.2151933 C21.6798655,22.3187899 23.0738824,22.6092101 24.5840672,21.9702857 C25.0487395,21.7960336 25.4553277,21.5056134 25.8038319,21.1571092 C27.4882689,19.5307563 29.1146218,17.9044034 30.7409748,16.2199664 C32.3092437,14.6516975 32.2511597,12.3283361 30.6248067,10.7600672 C29.0565378,9.19179832 26.7331765,9.13371429 25.1649076,10.7019832 C23.8870588,11.9798319 22.6092101,13.1995966 21.3894454,14.4774454 C21.2151933,14.6516975 21.0990252,14.7097815 20.8666891,14.5936134 C19.5888403,14.3612773 18.2529076,14.2451092 16.9169748,14.4193613 Z" }),
+        _react2.default.createElement("path", { d: "M24.6421513,27.0235966 C24.3517311,27.4301849 24.0613109,27.7786891 23.7708908,28.0691092 C22.0864538,29.8116303 20.4020168,31.4960672 18.6594958,33.1805042 C16.5103866,35.2134454 14.0127731,35.7942857 11.2247395,34.7487731 C8.43670588,33.7613445 6.75226891,31.7284034 6.34568067,28.7661176 C5.99717647,26.5008403 6.75226891,24.4678992 8.32053782,22.8415462 C10.0049748,21.1571092 11.6894118,19.4145882 13.3738487,17.7882353 C16.1618824,15.0582857 20.5762689,15.0582857 23.3062185,17.7301513 C24.0613109,18.4852437 24.119395,19.5307563 23.4804706,20.2277647 C22.7834622,20.9247731 21.7960336,20.9247731 20.9828571,20.2277647 C19.4145882,18.7756639 17.1493109,18.8337479 15.6391261,20.3439328 C14.0127731,21.9702857 12.3864202,23.5966387 10.7600672,25.2229916 C9.19179832,26.7912605 9.24988235,29.1146218 10.8181513,30.6828908 C12.4445042,32.3092437 14.7097815,32.3673277 16.2780504,30.7990588 C17.5558992,29.5212101 18.8337479,28.3014454 20.0535126,27.0235966 C20.2277647,26.8493445 20.4020168,26.7912605 20.6343529,26.9074286 C21.8541176,27.2559328 23.0738824,27.3721008 24.3517311,27.1397647 C24.4678992,27.0235966 24.5259832,27.0235966 24.6421513,27.0235966 Z" })
     );
@@ -41,0 +40,0 @@ };

lib/icons/VolumeIcon.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +28,6 @@
         _extends({}, rest, {
-            style: _extends({
+            style: {
                 height: size,
                 width: size
-            }, (0, _styles.marg)(rest), rest.style)
+            }
         }),
@@ -36,0 +34,0 @@ _react2.default.createElement('path', { transform: 'translate(3, 4)', d: 'M16.6884456,4.40606062 L16.6884456,8.12043011 L16.5888256,8.46451613 C16.5888256,8.51612903 15.692245,10.3225806 8.96789092,10.3225806 C2.34315687,10.3225806 1.3967663,8.56774194 1.34695626,8.46451613 L1.34695626,4.4132812 C2.36706914,5.13649264 4.51862698,5.93548387 9.01770095,5.93548387 C13.5317532,5.93548387 15.6826326,5.13116379 16.6884456,4.40606062 Z M16.6884456,2.64946237 L16.5888256,2.99354839 C16.5888256,2.99354839 15.7918651,4.8516129 8.96789092,4.8516129 C2.34315687,4.8516129 1.3967663,3.09677419 1.34695626,2.99354839 L1.34695626,2.58064516 C1.34695626,1.39354839 4.78384836,0.412903226 9.01770095,0.412903226 C13.2515535,0.412903226 16.6884456,1.39354839 16.6884456,2.58064516 L16.6884456,2.64946237 Z M16.6884456,9.84444362 L16.6884456,13.6774194 C16.6884456,14.8645161 13.2515535,15.8451613 9.01770095,15.8451613 C4.78384836,15.8451613 1.34695626,14.8645161 1.34695626,13.6774194 L1.34695626,9.88424895 C2.36706914,10.6074604 4.51862698,11.4064516 9.01770095,11.4064516 C13.5317532,11.4064516 15.6826326,10.5842578 16.6884456,9.84444362 Z', id: 'path-1' })

lib/Identity.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,85 +9,102 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-var _P = require('./P');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _P2 = _interopRequireDefault(_P);
+var _classnames4 = require("classnames");
 
-var _Title = require('./Title');
+var _classnames5 = _interopRequireDefault(_classnames4);
 
-var _Title2 = _interopRequireDefault(_Title);
+var _Element = require("./Element");
 
+var _Element2 = _interopRequireDefault(_Element);
+
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+// Each key of the returned object will be available in the prop "classes" below.
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center"
+        },
+        text: {
+            marginBottom: 2
+        },
+        img: {
+            borderRadius: "999px",
+            overflow: "hidden"
+        },
+        img__sm: _extends({}, theme.whitespace.mr2),
+        img__lg: _extends({}, theme.whitespace.mr3)
+    };
+};
+
 /**
-* Identity is used on a card or view to provide context to the content. A resource for example, would have the resource name as the primary text and useful meta as the secondary text, like the date the resource was created or a quick summary.
-
-An Identity is located at the top left of a card or view. A small Identity is used on cards and a large Identity or small Identity can be used on views.
- */
+ * Identity is used on a card or view to provide context to the content. A resource for example, would have the resource name as the primary text and useful meta as the secondary text, like the date the resource was created or a quick summary.
+ *
+ * An Identity is located at the top left of a card or view. A small Identity is used on cards and a large Identity or small Identity can be used on views.
+ **/
 var Identity = function Identity(props) {
-    var lg = props.lg,
+    var classes = props.classes,
+        className = props.className,
+        lg = props.lg,
         image = props.image,
         primaryText = props.primaryText,
-        secondaryText = props.secondaryText;
+        secondaryText = props.secondaryText,
+        rest = _objectWithoutProperties(props, ["classes", "className", "lg", "image", "primaryText", "secondaryText"]);
 
+    // Set Image size
 
+
     var imageSize = lg ? 60 : 40;
-    var renderImage = _react2.default.cloneElement(image, { size: imageSize });
+    var renderImage = _react2.default.cloneElement(image, {
+        size: imageSize
+    });
 
-    var margSize = lg ? 3 : 2;
-    var imgMarg = (0, _styles.marg)({ mr: margSize });
+    // Define wrapper classes
+    var wrapperClasses = (0, _classnames5.default)(_defineProperty({}, className, className), "CY-Identity", classes.wrapper);
 
-    var style = {
-        wrapper: _extends({
-            position: "relative",
-            display: "flex",
-            alignItems: "center"
-        }, (0, _styles.marg)(props)),
-        img: _extends({
-            borderRadius: "999px",
-            overflow: "hidden"
-        }, imgMarg)
-    };
+    // Define Image classes
+    var imgClasses = (0, _classnames5.default)("CY-Identity-img", classes.img, _defineProperty({}, classes.img__sm, !lg), _defineProperty({}, classes.img__lg, lg));
 
     return _react2.default.createElement(
-        'div',
-        { style: style.wrapper },
+        _Element2.default,
+        _extends({}, rest, { className: wrapperClasses }),
         _react2.default.createElement(
-            'div',
-            { style: style.img },
+            "div",
+            { className: imgClasses },
             renderImage
         ),
         _react2.default.createElement(
-            'div',
-            null,
+            "div",
+            { className: "CY-Identity-textGroup" },
             _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(
-                    _Title2.default,
-                    {
-                        m: 0,
-                        title: lg,
-                        body2: !lg
-                    },
-                    primaryText
-                ),
-                _react2.default.createElement(
-                    _P2.default,
-                    {
-                        m: 0,
-                        subheading: lg,
-                        caption: !lg,
-                        lineHeight: '1.15'
-                    },
-                    secondaryText
-                )
+                _Element2.default,
+                {
+                    className: "CY-Identity-text " + classes.text,
+                    typography: lg ? "title" : "body2"
+                },
+                primaryText
+            ),
+            _react2.default.createElement(
+                _Element2.default,
+                {
+                    className: "CY-Identity-subtext " + classes.text,
+                    typography: lg ? "subheading" : "caption"
+                },
+                secondaryText
             )
@@ -119,2 +136,2 @@ )
 
-exports.default = Identity;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Identity));

lib/index.js

@@ -79,11 +79,2 @@ 'use strict';
 
-var _Div = require('./Div');
-
-Object.defineProperty(exports, 'Div', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Div).default;
-  }
-});
-
 var _Section = require('./Section');
@@ -107,11 +98,2 @@
 
-var _Title = require('./Title');
-
-Object.defineProperty(exports, 'Title', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Title).default;
-  }
-});
-
 var _SubHeader = require('./SubHeader');
@@ -153,11 +135,2 @@
 
-var _FlatButtonConfirm = require('./FlatButtonConfirm');
-
-Object.defineProperty(exports, 'FlatButtonConfirm', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_FlatButtonConfirm).default;
-  }
-});
-
 var _Identity = require('./Identity');
@@ -190,11 +163,29 @@
 
-var _FAB = require('./FAB');
+var _FloatingActionButton = require('./FloatingActionButton');
 
-Object.defineProperty(exports, 'FAB', {
+Object.defineProperty(exports, 'FloatingActionButton', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_FAB).default;
+    return _interopRequireDefault(_FloatingActionButton).default;
   }
 });
 
+var _FloatingActionButtonAction = require('./FloatingActionButtonAction');
+
+Object.defineProperty(exports, 'FloatingActionButtonAction', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_FloatingActionButtonAction).default;
+  }
+});
+
+var _FloatingActionButtonActions = require('./FloatingActionButtonActions');
+
+Object.defineProperty(exports, 'FloatingActionButtonActions', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_FloatingActionButtonActions).default;
+  }
+});
+
 var _ListCard = require('./ListCard');
@@ -263,8 +254,8 @@
 
-var _CheckableAvatar = require('./CheckableAvatar');
+var _Checkable = require('./Checkable');
 
-Object.defineProperty(exports, 'CheckableAvatar', {
+Object.defineProperty(exports, 'Checkable', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_CheckableAvatar).default;
+    return _interopRequireDefault(_Checkable).default;
   }
@@ -300,2 +291,20 @@ });
 
+var _Paper = require('./Paper');
+
+Object.defineProperty(exports, 'Paper', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Paper).default;
+  }
+});
+
+var _BarGraph = require('./BarGraph');
+
+Object.defineProperty(exports, 'BarGraph', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_BarGraph).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/InfoBlock.js

@@ -9,4 +9,2 @@ "use strict";
 
-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 = require("react");
@@ -20,2 +18,6 @@
 
+var _classnames2 = require("classnames");
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
 var _info = require("material-ui/svg-icons/action/info");
@@ -29,15 +31,27 @@
 
-var _P = require("./P");
+var _Element = require("./Element");
 
-var _P2 = _interopRequireDefault(_P);
+var _Element2 = _interopRequireDefault(_Element);
 
-var _styles = require("./styles");
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
 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 _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 _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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-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; }
+// Each key of the returned object will be available in the prop "classes" below.
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            display: "flex"
+        },
+        Icon: _extends({
+            minWidth: "30px"
+        }, theme.whitespace.mr3)
+    };
+};
 
@@ -47,53 +61,34 @@ /**
  */
-var InfoBlock = function (_React$Component) {
-    _inherits(InfoBlock, _React$Component);
+var InfoBlock = function InfoBlock(_ref) {
+    var className = _ref.className,
+        warning = _ref.warning,
+        classes = _ref.classes,
+        text = _ref.text,
+        rest = _objectWithoutProperties(_ref, ["className", "warning", "classes", "text"]);
 
-    function InfoBlock() {
-        var _ref;
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Infoblock", classes.wrapper);
 
-        var _temp, _this, _ret;
+    var icon = function icon() {
+        var iconClasses = "CY-InfoBlock-icon " + classes.Icon;
 
-        _classCallCheck(this, InfoBlock);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+        if (warning) {
+            return _react2.default.createElement(_warning2.default, { className: iconClasses });
         }
+        return _react2.default.createElement(_info2.default, { className: iconClasses });
+    };
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InfoBlock.__proto__ || Object.getPrototypeOf(InfoBlock)).call.apply(_ref, [this].concat(args))), _this), _this.icon = function () {
-            var warning = _this.props.warning;
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, { className: wrapperClasses }),
+        icon(),
+        _react2.default.createElement(
+            "div",
+            { className: "CY-InfoBlock-text" },
+            text
+        )
+    );
+};
+"";
 
-            if (warning) {
-                return _react2.default.createElement(_warning2.default, {
-                    style: (0, _styles.marg)({ mr: 3 })
-                });
-            }
-            return _react2.default.createElement(_info2.default, {
-                style: (0, _styles.marg)({ mr: 3 })
-            });
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(InfoBlock, [{
-        key: "render",
-        value: function render() {
-            return _react2.default.createElement(
-                "div",
-                {
-                    style: _extends({
-                        display: "flex"
-                    }, (0, _styles.marg)(this.props))
-                },
-                this.icon(),
-                _react2.default.createElement(
-                    _P2.default,
-                    { mb: 0 },
-                    this.props.text
-                )
-            );
-        }
-    }]);
-
-    return InfoBlock;
-}(_react2.default.Component);
-
+InfoBlock.displayName = "InfoBlock";
 InfoBlock.propTypes = {
@@ -103,3 +98,3 @@ /**
      */
-    text: _propTypes2.default.string,
+    text: _propTypes2.default.node,
     /**
@@ -110,2 +105,3 @@ * Show the warning icon over the default info icon
 };
+
 InfoBlock.defaultProps = {
@@ -115,5 +111,2 @@ warning: false
 
-
-InfoBlock.displayName = "InfoBlock";
-
-exports.default = InfoBlock;
+exports.default = (0, _reactJss2.default)(styles)(InfoBlock);

lib/ListCard.js

@@ -17,9 +17,9 @@ "use strict";
 
-var _jssThemeReactor = require("jss-theme-reactor");
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require("./styles/getStyleManager");
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _styles = require("./styles");
+var _classnames4 = _interopRequireDefault(_classnames3);
 
@@ -32,21 +32,20 @@ var _Element = require("./Element");
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)("ListCard", function (theme) {
-        return {
-            ListCard: _extends({
-                position: "relative",
-                transition: "all ease .1s",
-                background: "white"
-            }, _styles.styles.boxShadow.li),
-            isExpanded: _extends({
-                margin: "40px -20px",
-                borderLeft: "solid 5px #0971ab"
-            }, _styles.styles.boxShadow.lg)
-        };
-    });
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({
+            position: "relative",
+            transition: "all ease .1s",
+            background: "white"
+        }, theme.elevation.elevation2),
+        wrapper__isExpanded: _extends({
+            margin: "32px -16px"
+        }, theme.elevation.elevation6)
+    };
 };
+
 /**
@@ -58,21 +57,12 @@ * ListCard and it's corresponding child components are used for listing entities that require more information and actions than MUI's `ListItem`.
 var ListCard = function ListCard(props) {
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet(props));
-
-    var _props$white = props.white,
-        white = _props$white === undefined ? {} : _props$white,
+    var classes = props.classes,
+        className = props.className,
         isExpanded = props.isExpanded,
-        _props$className = props.className,
-        className = _props$className === undefined ? "" : _props$className,
-        style = props.style,
-        rest = _objectWithoutProperties(props, ["white", "isExpanded", "className", "style"]);
+        rest = _objectWithoutProperties(props, ["classes", "className", "isExpanded"]);
 
-    var computedStyle = _extends({}, (0, _styles.pad)(white), (0, _styles.marg)(white));
+    var ListCardClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-ListCard", classes.wrapper, _defineProperty({}, classes.wrapper__isExpanded, isExpanded));
 
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            className: classes.ListCard + " " + (isExpanded ? classes.isExpanded : null) + " " + className,
-            style: _extends({}, computedStyle, style)
-        }),
+        _extends({}, rest, { className: ListCardClasses }),
         props.children
@@ -90,2 +80,2 @@ );
 
-exports.default = ListCard;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ListCard));

lib/ListCardActions.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,33 +9,24 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _classnames2 = require("classnames");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _ActionGroup = require("./ActionGroup");
 
-var _Element = require('./Element');
+var _ActionGroup2 = _interopRequireDefault(_ActionGroup);
 
-var _Element2 = _interopRequireDefault(_Element);
-
 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; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
-// Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardActions', function (theme) {
-        return {
-            wrapper: {}
-        };
-    });
-};
 /**
@@ -45,14 +36,13 @@ * ListCardActions is the area on ListCard on the right where actions live.
 var ListCardActions = function ListCardActions(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var ActionGroupClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardActions");
     return _react2.default.createElement(
-        _Element2.default,
+        _ActionGroup2.default,
         _extends({}, rest, {
-            display: 'flex',
             stopPropagation: true,
-            className: classes.wrapper
+            className: ActionGroupClasses
         }),
@@ -59,0 +49,0 @@ children

lib/ListCardDetail.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,21 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+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 _react = require("react");
+
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _classnames2 = require("classnames");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _Element = require("./Element");
 
-var _Element = require('./Element');
-
 var _Element2 = _interopRequireDefault(_Element);
 
-var _Hr = require('./Hr');
+var _Hr = require("./Hr");
 
@@ -32,16 +32,6 @@ var _Hr2 = _interopRequireDefault(_Hr);
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
-// Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardDetail', function (theme) {
-        return {
-            content: {
-                padding: "0 20px 20px"
-            }
-        };
-    });
-};
-
 /**
@@ -56,14 +46,17 @@ * ListCardDetail is the area below ListCardHeader where the details on the ListCard lives.
     var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, ["children", "className"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardDetail");
 
     return _react2.default.createElement(
         _Element2.default,
-        rest,
-        _react2.default.createElement(_Hr2.default, { style: { margin: "0 0 20px" } }),
+        _extends({ className: wrapperClasses }, rest),
+        _react2.default.createElement(_Hr2.default, { className: "CY-ListCardDetail-Hr", whitespace: "mb3" }),
         _react2.default.createElement(
-            'div',
-            { className: classes.content },
+            _Element2.default,
+            {
+                className: "CY-ListCardDetail-content",
+                whitespace: "p3"
+            },
             children
@@ -70,0 +63,0 @@ )

lib/ListCardHeader.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames4 = _interopRequireDefault(_classnames3);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,2 +32,4 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -35,19 +39,22 @@
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardHeader', function (theme) {
-        return {
-            wrapper: {
-                display: "flex",
-                flexWrap: "nowrap",
-                alignContent: "stretch",
-                justifyContent: "space-between",
-                minHeight: "65px",
-                alignItems: "center"
-            },
-            clickable: {
-                cursor: "pointer"
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            display: "flex",
+            flexWrap: "nowrap",
+            alignContent: "stretch",
+            justifyContent: "space-between",
+            minHeight: "65px",
+            alignItems: "center",
+            "&:focus": {
+                outline: "transparent",
+                borderLeft: "solid 5px " + theme.palette.primary1Color
             }
-        };
-    });
+        },
+        wrapper__clickable: {
+            cursor: "pointer"
+        }
+    };
 };
+
 /**
@@ -59,17 +66,11 @@ * The ListCardHeader is the area the appears at the top of the ListCard and contains the ListCards identity and actions.
 var ListCardHeader = function ListCardHeader(_ref) {
-    var children = _ref.children,
-        onClick = _ref.onClick,
-        rest = _objectWithoutProperties(_ref, ['children', 'onClick']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-ListCardHeader", classes.wrapper, _defineProperty({}, classes.wrapper__clickable, rest.onClick));
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            onClick: onClick,
-            display: 'flex',
-            whiteSpace: { p: 2 },
-            className: classes.wrapper + ' ' + (onClick ? classes.clickable : null)
-        }),
+        _extends({}, rest, { className: wrapperClasses, whiteSpace: "p2" }),
         children
@@ -89,2 +90,2 @@ );
 
-exports.default = ListCardHeader;
+exports.default = (0, _reactJss2.default)(styles)(ListCardHeader);

lib/ListCardIdentity.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames2 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,2 +32,4 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -35,12 +39,10 @@
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardIdentity', function (theme) {
-        return {
-            wrapper: {
-                alignItems: "center",
-                minWidth: "300px"
-            }
-        };
-    });
+var styles = {
+    wrapper: {
+        display: "flex",
+        alignItems: "center",
+        minWidth: "300px"
+    }
 };
+
 /**
@@ -50,13 +52,13 @@ * ListCardIdentity is the space on the left side within ListCardHeader that contains the ListCard's identity.
 var ListCardIdentity = function ListCardIdentity(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardIdentity", classes.wrapper);
     return _react2.default.createElement(
         _Element2.default,
         _extends({}, rest, {
-            display: 'flex',
-            className: classes.wrapper
+            whitespace: "pl2",
+            className: wrapperClasses
         }),
@@ -77,2 +79,2 @@ children
 
-exports.default = ListCardIdentity;
+exports.default = (0, _reactJss2.default)(styles)(ListCardIdentity);

lib/ListCardSummary.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,22 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _classnames2 = require("classnames");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _reactJss = require("react-jss");
 
-var _styles = require('./styles/styles');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _styles2 = _interopRequireDefault(_styles);
+var _Element = require("./Element");
 
-var _Element = require('./Element');
-
 var _Element2 = _interopRequireDefault(_Element);
@@ -34,19 +32,17 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('ListCardSummary', function (theme) {
-        return {
-            wrapper: _extends({
-                width: "0%",
-                marginRight: "20px",
-                flex: "1"
-            }, _styles2.default.t.body1)
-        };
-    });
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            width: "0%",
+            flex: "1"
+        }
+    };
 };
-/**
- * ListCardSummary is the area in ListCardHeader between ListCardIdentity and ListCardActions. Used to display a short summary or overview information at a birds eye view. Works well with SummaryText for truncating / previewing large blocks of text into a single line. For to display more information make the card expandable and render the additional information in ListCardDetail.
+
+/** ListCardSummary is the area in ListCardHeader between ListCardIdentity and ListCardActions. Used to display a short summary or overview information at a birds eye view. Works well with SummaryText for truncating / previewing large blocks of text into a single line. For to display more information make the card expandable and render the additional information in ListCardDetail.
  *
@@ -56,12 +52,13 @@ * For a more "automagic" solution or to see an example of how ListCardSummary and ListCardDetail work together on expandable cards see `MediaCard`.
 var ListCardSummary = function ListCardSummary(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ListCardSummery", classes.wrapper);
     return _react2.default.createElement(
         _Element2.default,
         _extends({}, rest, {
-            className: classes.wrapper
+            whitespace: "mr3",
+            className: wrapperClasses
         }),
@@ -83,2 +80,2 @@ children
 
-exports.default = ListCardSummary;
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ListCardSummary));

lib/MDBlock.js

@@ -83,3 +83,2 @@ 'use strict';
     style: _propTypes2.default.object
-
 };
@@ -86,0 +85,0 @@ MDBlock.defaultProps = {

lib/MediaCard.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
 var _VerticalMenu = require('./VerticalMenu');
@@ -28,5 +32,5 @@
 
-var _CheckableAvatar = require('./CheckableAvatar');
+var _Checkable = require('./Checkable');
 
-var _CheckableAvatar2 = _interopRequireDefault(_CheckableAvatar);
+var _Checkable2 = _interopRequireDefault(_Checkable);
 
@@ -63,2 +67,4 @@ var _ListCard = require('./ListCard');
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -91,3 +97,3 @@
             cardIsHovered: false
-        }, _this.onCardEnter = function () {
+        }, _this.onCardEnter = function (e) {
             _this.setState({
@@ -115,3 +121,4 @@ cardIsHovered: true
                 _ActionGroup2.default,
-                { hide: isHidden },
+                { hideReadable: isHidden
+                },
                 quickLinks.map(function (link, i) {
@@ -155,2 +162,3 @@ return _react2.default.cloneElement(link, { key: i });
             var _props = this.props,
+                className = _props.className,
                 title = _props.title,
@@ -165,7 +173,9 @@ image = _props.image,
                 batchMode = _props.batchMode,
-                rest = _objectWithoutProperties(_props, ['title', 'image', 'subTitle', 'summary', 'detail', 'isExpanded', 'onBatchClick', 'checked', 'batchMode']);
+                rest = _objectWithoutProperties(_props, ['className', 'title', 'image', 'subTitle', 'summary', 'detail', 'isExpanded', 'onBatchClick', 'checked', 'batchMode']);
 
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-MediaCard");
+
             var cardIsHovered = this.state.cardIsHovered;
 
-            var showCheck = onBatchClick && (batchMode || cardIsHovered);
+            var showCheck = onBatchClick && batchMode || cardIsHovered || isExpanded;
 
@@ -175,2 +185,3 @@ return _react2.default.createElement(
                 _extends({}, rest, {
+                    className: wrapperClasses,
                     isExpanded: isExpanded
@@ -183,3 +194,5 @@ }),
                         onMouseLeave: this.onCardLeave,
-                        onClick: this.handleOnExpand
+                        onClick: this.handleOnExpand,
+                        onFocus: this.onCardEnter,
+                        onBlur: this.onCardLeave
                     },
@@ -190,7 +203,11 @@ _react2.default.createElement(
                         _react2.default.createElement(_Identity2.default, {
-                            image: _react2.default.createElement(_CheckableAvatar2.default, {
-                                image: image,
+                            image: _react2.default.createElement(_Checkable2.default, {
+                                children: image,
                                 isCheckable: showCheck,
-                                onCheck: this.onCheck,
-                                checked: checked
+                                onFocus: this.onCardEnter,
+                                onBlur: this.onCardLeave,
+                                checkboxProps: {
+                                    onCheck: this.onCheck,
+                                    checked: checked
+                                }
                             }),
@@ -245,15 +262,19 @@ primaryText: title,
     /**
-     * The space between the Identity and Actions. Only shown when card is collapsed. Will render any components or string passed.
+     * The space between the Identity and Actions.
+     * Only shown when card is collapsed. Will render any components or string passed.
      */
     summary: _propTypes2.default.node,
     /**
-     * The large space below the card header. Only shown when card is expanded. Will render any components or string passed.
+     * The large space below the card header.
+     * Only shown when card is expanded. Will render any components or string passed.
      */
     detail: _propTypes2.default.node,
     /**
-     * The exposed actions that appear to right of card on hover or when open. Expects an array of components. Best used with MUI IconButtons
+     * The exposed actions that appear to right of card on hover or when open.
+     * Expects an array of components. Best used with MUI IconButtons
      */
     quickLinks: _propTypes2.default.array,
     /**
-     * Works with quicklinks but is visible when quickLinks is not. By having the same button in both props causes said button to always show while the others only show when card is hovered or active.
+     * Works with quicklinks but is visible when quickLinks is not.
+     * By having the same button in both props causes said button to always show while the others only show when card is hovered or active.
      */
@@ -260,0 +281,0 @@ activeQuickLinks: _propTypes2.default.array,

lib/MediaCardGroup.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,22 +9,26 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _classnames2 = require("classnames");
 
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _propTypes = require("prop-types");
+
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _reactScroll = require('react-scroll');
+var _reactScroll = require("react-scroll");
 
 var _reactScroll2 = _interopRequireDefault(_reactScroll);
 
-var _reactCssStagger = require('react-css-stagger');
+var _reactCssStagger = require("react-css-stagger");
 
 var _reactCssStagger2 = _interopRequireDefault(_reactCssStagger);
 
-var _styles = require('./styles');
-
 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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -38,5 +42,5 @@
     return _react2.default.createElement(
-        'style',
+        "style",
         null,
-        '\n        .MediaCard__animation-enter {\n            opacity: 0;\n            transform: translate(0,10px);\n            transition:  opacity .2s ease, transform .2s ease !important;\n        }\n\n        .MediaCard__animation-enter-active {\n            opacity: 1;\n            transform: translate(0,0);\n        }\n    '
+        "\n        .CY-MediaCard__animation-enter {\n            opacity: 0;\n            transform: translate(0,10px);\n            transition:  opacity .2s ease, transform .2s ease !important;\n        }\n\n        .CY-MediaCard__animation-enter-active {\n            opacity: 1;\n            transform: translate(0,0);\n        }\n    "
     );
@@ -50,3 +54,3 @@ };
  * MediaCardGroup is a wrapper for MediaCards that helps to manage opening and closing, scroll animation, and stagger animation of MediaCards as children.
-*/
+ */
 
@@ -91,23 +95,27 @@ var MediaCardGroup = function (_React$Component) {
     _createClass(MediaCardGroup, [{
-        key: 'componentDidMount',
+        key: "componentDidMount",
         value: function componentDidMount() {
-            document.addEventListener('click', this.handleDocumentClick, false);
+            document.addEventListener("click", this.handleDocumentClick, false);
         }
     }, {
-        key: 'componentWillUnmount',
+        key: "componentWillUnmount",
         value: function componentWillUnmount() {
-            document.removeEventListener('click', this.handleDocumentClick, false);
+            document.removeEventListener("click", this.handleDocumentClick, false);
         }
     }, {
-        key: 'render',
+        key: "render",
         value: function render() {
             var _this2 = this;
 
-            var stagger = this.props.stagger;
+            var _props = this.props,
+                className = _props.className,
+                stagger = _props.stagger,
+                children = _props.children;
+            var expanded = this.state.expanded;
 
-
-            var children = _react2.default.Children.map(this.props.children, function (child) {
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-MediaCardGroup");
+            var renderChildren = _react2.default.Children.map(children, function (child) {
                 return _react2.default.cloneElement(child, {
                     onExpand: _this2.onExpand.bind(_this2, child),
-                    isExpanded: _this2.state.expanded === child
+                    isExpanded: expanded ? expanded.key === child.key : false
                 });
@@ -118,15 +126,9 @@ });
                 _reactCssStagger2.default,
-                {
-                    transition: 'MediaCard__animation',
-                    delay: 70
-                },
+                { transition: "CY-MediaCard__animation", delay: 70 },
                 children
-            ) : children;
+            ) : renderChildren;
 
             return _react2.default.createElement(
-                'div',
-                {
-                    style: (0, _styles.marg)(this.props),
-                    ref: 'root'
-                },
+                "div",
+                { ref: "root", className: wrapperClasses },
                 renderList,
@@ -144,8 +146,8 @@ _react2.default.createElement(AnimationStyle, null)
     /**
-    * If true the stagger animation is enabled
-    */
+     * If true the stagger animation is enabled
+     */
     stagger: _propTypes2.default.bool,
     /**
-    * If true auto scrolling when card is expaned is disabled
-    */
+     * If true auto scrolling when card is expaned is disabled
+     */
     noScroll: _propTypes2.default.bool
@@ -152,0 +154,0 @@ };

lib/MeterGauge.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,22 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 
+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 _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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _muiThemeable = require('material-ui/styles/muiThemeable');
+var _classnames2 = require("classnames");
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
+var _BarGraph = require("./BarGraph");
+
+var _BarGraph2 = _interopRequireDefault(_BarGraph);
+
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -34,8 +48,31 @@
 
-var v = _styles.variables;
-
 /**
-* A MeterGauge is used to depict a percentage of a known quantity. A common use in Troposphere is to show how much of a total resource a user HAS consumed or WILL consume. In the case that a MeterGauge is showing how much of a known quantity a user WILL consume, in a form for example, an after value can be passed in addition to the start value.
-*/
+ * A MeterGauge is used to depict a percentage of a known quantity. A common use in Troposphere is to show how much of a total resource a user HAS consumed or WILL consume. In the case that a MeterGauge is showing how much of a known quantity a user WILL consume, in a form for example, an after value can be passed in addition to the start value.
+ */
 
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            height: "70px",
+            marginTop: 0
+        },
+        data: {
+            margin: 0
+        },
+        data__compact: {
+            maxWidth: "60px"
+        },
+        dataText: _extends({}, theme.typography.caption, theme.whitespace.mb1),
+        dataText__alert: {
+            color: theme.palette.danger
+        },
+        dataText__compact: {
+            textAlign: "center"
+        },
+        alertMessage: _extends({}, theme.typography.body1, {
+            color: theme.palette.danger
+        })
+    };
+};
+
 var MeterGauge = function (_React$Component) {
@@ -62,71 +99,12 @@ _inherits(MeterGauge, _React$Component);
         }, _this.alert = function () {
-            var alertMessage = _this.props.alertMessage;
+            var _this$props2 = _this.props,
+                classes = _this$props2.classes,
+                alertMessage = _this$props2.alertMessage;
 
 
             return _this.isOver() ? _react2.default.createElement(
-                'div',
-                { style: _this.style().alertMessage },
+                "div",
+                { className: classes.alertMessage },
                 alertMessage
             ) : null;
-        }, _this.style = function () {
-            var _this$props2 = _this.props,
-                startValue = _this$props2.startValue,
-                afterValue = _this$props2.afterValue,
-                muiTheme = _this$props2.muiTheme;
-            var _muiTheme$palette = muiTheme.palette,
-                _muiTheme$palette$suc = _muiTheme$palette.success,
-                success = _muiTheme$palette$suc === undefined ? "green" : _muiTheme$palette$suc,
-                _muiTheme$palette$dan = _muiTheme$palette.danger,
-                danger = _muiTheme$palette$dan === undefined ? "red" : _muiTheme$palette$dan;
-
-
-            var startColor = _this.isOver() ? danger : success;
-
-            var dataText = _this.isOver() ? danger : "#333333";
-
-            // Start styles
-            var wrapper = _extends({}, (0, _styles.marg)(_this.props), {
-                height: "70px"
-            });
-
-            var data = _extends({}, _styles.styles.t.caption, {
-                color: dataText,
-                fontSize: "13px",
-                margin: "0px 0px 3px"
-            });
-            var bar = {
-                display: "flex",
-                background: v.c.grey.xLight
-            };
-            var barBefore = {
-                transition: "flex-basis ease .3s",
-                height: "10px",
-                float: "left",
-                flexShrink: "0",
-                maxWidth: "100%",
-                flexBasis: startValue + "%",
-                background: startColor
-            };
-            var barAfter = {
-                transition: "flex-basis ease .3s",
-                height: "10px",
-                float: "left",
-                flexBasis: afterValue + "%",
-                background: startColor,
-                opacity: ".5"
-            };
-            var alertMessage = {
-                marginTop: "5px",
-                fontSize: "12px",
-                color: danger
-
-                // Combine Styles
-            };return {
-                wrapper: wrapper,
-                data: data,
-                bar: bar,
-                barBefore: barBefore,
-                barAfter: barAfter,
-                alertMessage: alertMessage
-            };
         }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -136,34 +114,56 @@ }
     _createClass(MeterGauge, [{
-        key: 'render',
+        key: "render",
         value: function render() {
-            var style = this.style();
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
+                _props$theme$palette = _props.theme.palette,
+                success = _props$theme$palette.success,
+                danger = _props$theme$palette.danger,
+                hideLabel = _props.hideLabel,
+                startValue = _props.startValue,
+                afterValue = _props.afterValue,
+                compact = _props.compact,
+                label = _props.label,
+                data = _props.data,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "theme", "hideLabel", "startValue", "afterValue", "compact", "label", "data"]);
 
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-MeterGauge", classes.wrapper);
+            var dataClasses = (0, _classnames3.default)("CY-MeterGauge-data", classes.data, _defineProperty({}, classes.data__compact, compact));
+            var dataTextClasses = (0, _classnames3.default)("CY-MeterGauge-dataText", classes.dataText, _defineProperty({}, classes.dataText__compact, compact), _defineProperty({}, classes.dataText__alert, this.isOver()));
+
+            var startColor = this.isOver() ? danger : success;
             return _react2.default.createElement(
-                'div',
-                { style: style.wrapper },
+                _Element2.default,
+                _extends({}, rest, {
+                    root: "dl",
+                    className: wrapperClasses
+                }),
                 _react2.default.createElement(
-                    'dl',
-                    null,
+                    _Element2.default,
+                    {
+                        root: "dt",
+                        className: "CY-MeterGauge-dataTitle",
+                        hide: hideLabel,
+                        typography: "label",
+                        whitespace: "mb1"
+                    },
+                    label
+                ),
+                _react2.default.createElement(
+                    "dd",
+                    { className: dataClasses },
                     _react2.default.createElement(
-                        'dt',
-                        { style: _styles.styles.t.label },
-                        this.props.label
+                        "div",
+                        { className: dataTextClasses },
+                        data
                     ),
-                    _react2.default.createElement(
-                        'dd',
-                        { style: { margin: "0px" } },
-                        _react2.default.createElement(
-                            'div',
-                            { style: style.data },
-                            this.props.data
-                        ),
-                        _react2.default.createElement(
-                            'div',
-                            { style: style.bar },
-                            _react2.default.createElement('div', { style: style.barBefore }),
-                            _react2.default.createElement('div', { style: style.barAfter })
-                        ),
-                        this.alert()
-                    )
-                )
+                    _react2.default.createElement(_BarGraph2.default, {
+                        startValue: startValue,
+                        afterValue: afterValue,
+                        barColor: startColor,
+                        compact: compact
+                    })
+                ),
+                this.alert()
             );
@@ -206,2 +206,2 @@ }
 };
-exports.default = (0, _muiThemeable2.default)()(MeterGauge);
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(MeterGauge));

lib/P.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,75 +7,65 @@ Object.defineProperty(exports, "__esModule", {
 
+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 _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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _classnames2 = require("classnames");
 
-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; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-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 _Element = require("./Element");
 
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var _Element2 = _interopRequireDefault(_Element);
 
-    function _class() {
-        var _ref;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-        var _temp, _this, _ret;
+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; }
 
-        _classCallCheck(this, _class);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
+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; }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.style = function () {
-            var _this$props$lineHeigh = _this.props.lineHeight,
-                lineHeight = _this$props$lineHeigh === undefined ? "1.7" : _this$props$lineHeigh;
+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 textStyle = _styles.styles.t.body1;
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({
+            maxWidth: "600px",
+            lineHeight: "24px",
+            margin: 0
+        }, theme.whitespace.mb3)
+    };
+};
 
-            if (_this.props.body1) {
-                textStyle = _styles.styles.t.body1;
-            }
+var P = function (_React$Component) {
+    _inherits(P, _React$Component);
 
-            if (_this.props.body2) {
-                textStyle = _styles.styles.t.body2;
-            }
+    function P() {
+        _classCallCheck(this, P);
 
-            if (_this.props.subheading) {
-                textStyle = _styles.styles.t.subheading;
-            }
-
-            if (_this.props.caption) {
-                textStyle = _styles.styles.t.caption;
-            }
-
-            return _extends({}, textStyle, {
-                maxWidth: "600px",
-                lineHeight: lineHeight,
-                margin: "0px",
-                marginBottom: "34px"
-            }, (0, _styles.marg)(_this.props));
-        }, _temp), _possibleConstructorReturn(_this, _ret);
+        return _possibleConstructorReturn(this, (P.__proto__ || Object.getPrototypeOf(P)).apply(this, arguments));
     }
-    /**
-     * P is a typography component for rendering a paragraph with the proper styles.
-     */
 
+    _createClass(P, [{
+        key: "render",
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className;
 
-    _createClass(_class, [{
-        key: 'render',
-        value: function render() {
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-P", classes.wrapper);
             return _react2.default.createElement(
-                'p',
-                { style: _extends({}, this.style(), this.props.style)
+                _Element2.default,
+                {
+                    root: "p",
+                    whitespace: "mb3",
+                    className: wrapperClasses
                 },
@@ -85,8 +75,12 @@ this.props.children
         }
+        /**
+         * P is a typography component for rendering a paragraph with the proper styles.
+         */
+
     }]);
 
-    return _class;
+    return P;
 }(_react2.default.Component);
 
-_class.displayName = "P";
-exports.default = _class;
+P.displayName = "P";
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(P));

lib/Pill.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,104 +9,100 @@ Object.defineProperty(exports, "__esModule", {
 
-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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('./styles');
+var _reactJss = require("react-jss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _classnames2 = require("classnames");
 
-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; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-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 _Element = require("./Element");
 
-/**
- * A Pill is used to indicate meta data like number of active users or if an item is featured or recommended. It is sort of like a badge but smaller to fit under a title or in the footer of a card.
- */
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var _Element2 = _interopRequireDefault(_Element);
 
-    function _class() {
-        var _ref;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-        var _temp, _this, _ret;
+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; }
 
-        _classCallCheck(this, _class);
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({
+            display: "inline-block"
+        }, theme.whitespace.mr2),
+        innerWrapper: {
+            display: "flex",
+            alignItems: "center"
+        },
+        pillBody: {
+            display: "inline-block",
+            verticalAlign: "middle",
+            padding: "4px",
+            lineHeight: "74%",
+            fontSize: "12px",
+            borderRadius: "9999px",
+            color: "white"
+        },
+        icon: {
+            height: "24px"
         }
+    };
+};
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.Icon = function () {
-            var _this$props = _this.props,
-                icon = _this$props.icon,
-                color = _this$props.color;
+/**
+ * A Pill is used to indicate meta data like number of active users or if an item is featured or recommended. It is sort of like a badge but smaller to fit under a title or in the footer of a card.
+ */
+var Pill = function Pill(_ref) {
+    var classes = _ref.classes,
+        theme = _ref.theme,
+        className = _ref.className,
+        children = _ref.children,
+        color = _ref.color,
+        icon = _ref.icon,
+        rest = _objectWithoutProperties(_ref, ["classes", "theme", "className", "children", "color", "icon"]);
 
-            if (icon) {
-                return _react2.default.cloneElement(icon, {
-                    color: color,
-                    style: {
-                        width: "16px",
-                        height: "16px"
-                    }
-                });
-            }
-        }, _this.style = function () {
-            var color = _this.props.color;
+    var textColor = theme.palette.textColor;
 
-            return {
-                wrapper: _extends({
-                    display: "inline-block"
-                }, (0, _styles.marg)({ mr: 2 })),
-                flex: {
-                    display: "flex",
-                    alignItems: "center"
+    var iconColor = theme.palette[color] || color;
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Pill", classes.wrapper);
+    var innerWrapperClasses = (0, _classnames3.default)("CY-Pill-innerWrapper", classes.innerWrapper);
+    var pillBodyClasses = (0, _classnames3.default)("CY-Pill-pillBody", classes.pillBody);
+    var pillIconClasses = (0, _classnames3.default)("CY-Pill-icon", classes.icon);
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, { root: "span", className: wrapperClasses }),
+        _react2.default.createElement(
+            "span",
+            { className: innerWrapperClasses },
+            _react2.default.createElement(
+                _Element2.default,
+                {
+                    root: "span",
+                    background: color || textColor,
+                    className: pillBodyClasses
                 },
-                pill: {
-                    display: "inline-block",
-                    verticalAlign: "middle",
-                    padding: "3px",
-                    lineHeight: "74%",
-                    fontSize: "8px",
-                    borderRadius: "9999px",
-                    color: "white",
-                    background: color
-                }
-            };
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
+                children
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: pillIconClasses },
+                icon ? _react2.default.cloneElement(icon, {
+                    color: iconColor
+                }) : null
+            )
+        )
+    );
+};
 
-    _createClass(_class, [{
-        key: 'render',
-        value: function render() {
-            var style = this.style();
-            return _react2.default.createElement(
-                'span',
-                { style: style.wrapper },
-                _react2.default.createElement(
-                    'span',
-                    { style: style.flex },
-                    _react2.default.createElement(
-                        'span',
-                        { style: style.pill },
-                        this.props.children
-                    ),
-                    this.Icon()
-                )
-            );
-        }
-    }]);
+Pill.displayName = "Pill";
 
-    return _class;
-}(_react2.default.Component);
-
-_class.displayName = "Pill";
-_class.propTypes = {
+Pill.propTypes = {
     /**
@@ -125,5 +121,3 @@ *The background color.
 };
-_class.defaultProps = {
-    color: _styles.variables.c.grey.xDark
-};
-exports.default = _class;
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Pill));

lib/ProgressAvatar.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,20 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 
-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 _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 _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _muiThemeable = require('material-ui/styles/muiThemeable');
+var _reactJss = require("react-jss");
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _materialUi = require('material-ui');
+var _classnames4 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames5 = _interopRequireDefault(_classnames4);
 
+var _materialUi = require("material-ui");
+
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,104 +34,103 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            position: "relative"
+        },
+        progress: {
+            position: "absolute",
+            top: "0px",
+            left: "0px"
+        },
+        progress__complete: {
+            opacity: 0
+        },
+        avatar__inProgressWithImg: {
+            opacity: 0.3
+        }
+    };
+};
 
-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; }
-
 /**
  * ProgressAvatar can be used in place of MUI's Avatar as a clear way to inform the user that a process is taking place on that item as well as what percentage of that process is finished without taking up valuable real estate and leveraging Avatar being a visual anchor for the item.
  */
-var ProgressAvatar = function (_React$Component) {
-    _inherits(ProgressAvatar, _React$Component);
+var ProgressAvatar = function ProgressAvatar(_ref) {
+    var classes = _ref.classes,
+        children = _ref.children,
+        className = _ref.className,
+        progressColor = _ref.progressColor,
+        backgroundColor = _ref.backgroundColor,
+        src = _ref.src,
+        icon = _ref.icon,
+        size = _ref.size,
+        thickness = _ref.thickness,
+        percent = _ref.percent,
+        name = _ref.name,
+        theme = _ref.theme,
+        rest = _objectWithoutProperties(_ref, ["classes", "children", "className", "progressColor", "backgroundColor", "src", "icon", "size", "thickness", "percent", "name", "theme"]);
 
-    function ProgressAvatar() {
-        _classCallCheck(this, ProgressAvatar);
+    var isInProgress = percent < 100;
+    var wrapperClasses = (0, _classnames5.default)(_defineProperty({}, className, className), "CY-ProgressAvatar", classes.wrapper);
+    var avatarClasses = (0, _classnames5.default)("CY-ProgressAvatar-avatar", _defineProperty({}, classes.avatar__inProgressWithImg, src && isInProgress));
+    var progressClasses = (0, _classnames5.default)("CY-ProgressAvatar-progress", classes.progress, _defineProperty({}, classes.progress__complete, !isInProgress));
 
-        return _possibleConstructorReturn(this, (ProgressAvatar.__proto__ || Object.getPrototypeOf(ProgressAvatar)).apply(this, arguments));
-    }
+    var _theme$palette$succes = theme.palette.success,
+        success = _theme$palette$succes === undefined ? "green" : _theme$palette$succes;
 
-    _createClass(ProgressAvatar, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                children = _props.children,
-                progressColor = _props.progressColor,
-                backgroundColor = _props.backgroundColor,
-                src = _props.src,
-                icon = _props.icon,
-                size = _props.size,
-                thickness = _props.thickness,
-                percent = _props.percent,
-                name = _props.name,
-                muiTheme = _props.muiTheme,
-                rest = _objectWithoutProperties(_props, ['children', 'progressColor', 'backgroundColor', 'src', 'icon', 'size', 'thickness', 'percent', 'name', 'muiTheme']);
+    var padding = 0;
+    var avatarSize = size;
+    var value = 0;
+    var avatarColor = backgroundColor;
 
-            var _muiTheme$palette$suc = muiTheme.palette.success,
-                success = _muiTheme$palette$suc === undefined ? "green" : _muiTheme$palette$suc;
+    if (isInProgress) {
+        value = percent;
+        avatarColor = "lightgrey";
+        avatarSize = size - thickness * 2;
+        padding = thickness;
+    }
 
-            var opacity = 0;
-            var wrapperOpacity = void 0;
-            var padding = 0;
-            var avatarSize = size;
-            var value = 0;
-            var avatarColor = backgroundColor;
+    var strokeColor = progressColor || success;
 
-            if (percent < 100) {
-                value = percent;
-                opacity = 1;
-                wrapperOpacity = src ? .3 : 1;
-                avatarColor = "lightgrey";
-                avatarSize = size - thickness * 2;
-                padding = thickness;
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, {
+            className: wrapperClasses,
+            display: "inline-block",
+            style: {
+                padding: padding
             }
+        }),
+        _react2.default.createElement(
+            "div",
+            { className: progressClasses },
+            _react2.default.createElement(_materialUi.CircularProgress, {
+                className: progressClasses,
+                mode: "determinate",
+                value: value,
+                color: strokeColor,
+                size: size,
+                thickness: thickness
+            })
+        ),
+        _react2.default.createElement(
+            _materialUi.Avatar,
+            {
+                className: avatarClasses,
+                name: name,
+                src: src,
+                icon: icon,
+                backgroundColor: avatarColor,
+                size: avatarSize
+            },
+            children
+        )
+    );
+};
 
-            var strokeColor = progressColor || success;
+ProgressAvatar.displayName = "ProgressAvatar";
 
-            return _react2.default.createElement(
-                _Element2.default,
-                rest,
-                _react2.default.createElement(
-                    'div',
-                    { style: {
-                            position: "relative",
-                            padding: padding
-                        }
-                    },
-                    _react2.default.createElement(_materialUi.CircularProgress, {
-                        style: {
-                            opacity: opacity,
-                            position: "absolute",
-                            top: "0px",
-                            left: "0px"
-                        },
-                        mode: 'determinate',
-                        value: value,
-                        color: strokeColor,
-                        size: size,
-                        thickness: thickness
-                    }),
-                    _react2.default.createElement(
-                        _materialUi.Avatar,
-                        {
-                            style: { opacity: wrapperOpacity },
-                            name: name,
-                            color: 'rgba(255,255,255,.7)',
-                            src: src,
-                            icon: icon,
-                            backgroundColor: avatarColor,
-                            size: avatarSize
-                        },
-                        children
-                    )
-                )
-            );
-        }
-    }]);
-
-    return ProgressAvatar;
-}(_react2.default.Component);
-
-ProgressAvatar.displayName = "ProgressAvatar";
 ProgressAvatar.propTypes = {
@@ -155,2 +158,3 @@ /**
 };
+
 ProgressAvatar.defaultProps = {
@@ -160,2 +164,3 @@ size: 40,
 };
-exports.default = (0, _muiThemeable2.default)()(ProgressAvatar);
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ProgressAvatar));

lib/SearchBar.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,38 +7,42 @@ Object.defineProperty(exports, "__esModule", {
 
+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 _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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _muiThemeable = require('material-ui/styles/muiThemeable');
+var _classnames4 = _interopRequireDefault(_classnames3);
 
-var _muiThemeable2 = _interopRequireDefault(_muiThemeable);
+var _Element = require("./Element");
 
-var _materialUi = require('material-ui');
+var _Element2 = _interopRequireDefault(_Element);
 
-var _search = require('material-ui/svg-icons/action/search');
+var _materialUi = require("material-ui");
 
+var _search = require("material-ui/svg-icons/action/search");
+
 var _search2 = _interopRequireDefault(_search);
 
-var _close = require('material-ui/svg-icons/navigation/close');
+var _close = require("material-ui/svg-icons/navigation/close");
 
 var _close2 = _interopRequireDefault(_close);
 
-var _styles = require('./styles');
-
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -50,5 +54,34 @@
 
+var styles = function styles(theme) {
+    return {
+        card: _extends({
+            display: "flex",
+            alignItems: "center",
+            height: "40px",
+            background: "white",
+            position: "relative",
+            marginBottom: "20px",
+            transition: "box-shadow 350ms ease"
+        }, theme.elevation.elevation3, {
+            "&:hover": _extends({}, theme.elevation.elevation6)
+        }),
+        card__active: _extends({}, theme.elevation.elevation7),
+        input: {
+            flex: "1 1 100%",
+            border: "none",
+            boxShadow: "none",
+            "&:focus": {
+                outline: "none"
+            }
+        },
+        searchIcon: _extends({
+            minWidth: "24px"
+        }, theme.whitespace.ms2)
+    };
+};
+
 /**
  * The SearchBar is used for searches. It has an active state that helps to inform the user a search is affecting the list in question. An optional onClear prop allows the query to be cleared when the user presses the clear button.
  */
+
 var SearchBar = function (_React$Component) {
@@ -58,54 +91,13 @@ _inherits(SearchBar, _React$Component);
     function SearchBar() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
         _classCallCheck(this, SearchBar);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SearchBar.__proto__ || Object.getPrototypeOf(SearchBar)).call.apply(_ref, [this].concat(args))), _this), _this.styleSheet = function () {
-            var size = { pl: 2, pr: 2 };
-            return (0, _jssThemeReactor.createStyleSheet)('Search', function (theme) {
-                return {
-                    card: _extends({
-                        display: "flex",
-                        alignItems: "center",
-                        height: "40px",
-                        background: "white",
-                        position: "relative",
-                        marginBottom: "20px",
-                        transition: "box-shadow 350ms ease"
-                    }, _styles.styles.boxShadow.xsm, (0, _styles.pad)(size), (0, _styles.marg)(_this.props), {
-                        "&:hover": _extends({}, _styles.styles.boxShadow.sm)
-                    }),
-                    activeCard: _extends({}, _styles.styles.boxShadow.md),
-                    input: {
-                        flex: "1 1 100%",
-                        border: "none",
-                        boxShadow: "none",
-                        "&:focus": {
-                            outline: "none"
-                        }
-                    },
-                    searchIcon: _extends({}, (0, _styles.marg)({ mr: 2 }))
-                };
-            });
-        }, _temp), _possibleConstructorReturn(_this, _ret);
+        return _possibleConstructorReturn(this, (SearchBar.__proto__ || Object.getPrototypeOf(SearchBar)).apply(this, arguments));
     }
 
     _createClass(SearchBar, [{
-        key: 'componentWillMount',
-        value: function componentWillMount() {
-            var muiTheme = this.props.muiTheme;
-
-
-            this.classes = (0, _getStyleManager2.default)(muiTheme).render(this.styleSheet());
-        }
-    }, {
-        key: 'render',
+        key: "render",
         value: function render() {
             var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
                 value = _props.value,
@@ -115,19 +107,23 @@ placeholder = _props.placeholder,
                 onClear = _props.onClear,
-                muiTheme = _props.muiTheme;
+                theme = _props.theme,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "value", "placeholder", "onChange", "onClear", "theme"]);
 
+            var cardClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-SearchBar", classes.card, _defineProperty({}, classes.card__active, value));
+            var iconClasses = (0, _classnames4.default)("CY-SearchBar-searchIcon", classes.searchIcon);
+            var inputClasses = (0, _classnames4.default)("CY-SearchBar-input", classes.input);
 
-            var searchColor = value ? muiTheme.palette.primary1Color : null;
-            var activeCard = value ? this.classes.activeCard : null;
+            var searchColor = value ? theme.palette.primary1Color : null;
+
             var shouldShowClear = onClear && value;
 
             return _react2.default.createElement(
-                'div',
-                { className: this.classes.card + ' ' + activeCard },
+                _Element2.default,
+                _extends({}, rest, { className: cardClasses }),
                 _react2.default.createElement(_search2.default, {
-                    className: this.classes.searchIcon,
+                    className: iconClasses,
                     color: searchColor
                 }),
-                _react2.default.createElement('input', {
-                    className: this.classes.input,
-                    type: 'text',
+                _react2.default.createElement("input", {
+                    className: inputClasses,
+                    type: "text",
                     value: value,
@@ -141,3 +137,3 @@ placeholder: placeholder,
                     {
-                        className: this.classes.closeIcon,
+                        className: "CY-SearchBar-closeButton",
                         onTouchTap: onClear
@@ -176,2 +172,2 @@ },
 };
-exports.default = (0, _muiThemeable2.default)()(SearchBar);
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(SearchBar));

lib/Section.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,64 +9,45 @@ Object.defineProperty(exports, "__esModule", {
 
-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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('./styles');
+var _classnames2 = require("classnames");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _Element = require("./Element");
 
-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; }
+var _Element2 = _interopRequireDefault(_Element);
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Section = function (_React$Component) {
-    _inherits(Section, _React$Component);
+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 Section() {
-        var _ref;
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-        var _temp, _this, _ret;
+/**
+ * Section is a layout primitive.
+ */
+var Section = function Section(_ref) {
+    var children = _ref.children,
+        className = _ref.className,
+        whitespace = _ref.whitespace,
+        rest = _objectWithoutProperties(_ref, ["children", "className", "whitespace"]);
 
-        _classCallCheck(this, Section);
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-Section");
+    return _react2.default.createElement(
+        _Element2.default,
+        _extends({}, rest, {
+            root: "section",
+            className: wrapperClasses,
+            whitespace: "pv6"
+        }),
+        children
+    );
+};
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Section.__proto__ || Object.getPrototypeOf(Section)).call.apply(_ref, [this].concat(args))), _this), _this.styles = function () {
-            var displayType = _this.props.flex ? { display: "flex" } : { display: "block" };
-
-            return _extends({
-                position: "relative"
-            }, displayType, (0, _styles.marg)(_this.props), (0, _styles.pad)(_this.props), _this.props.styles);
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Section, [{
-        key: 'render',
-
-        /**
-         * Section is a layout primitive.
-         */
-
-        value: function render() {
-            return _react2.default.createElement(
-                'section',
-                { style: this.styles() },
-                this.props.children
-            );
-        }
-    }]);
-
-    return Section;
-}(_react2.default.Component);
-
 Section.propTypes = {
@@ -73,0 +54,0 @@ className: _propTypes2.default.string

lib/ShowMoreEllipsis.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,16 +9,41 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _reactJss = require("react-jss");
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _utils = require('./utils');
+var _classnames2 = require("classnames");
 
-var _styles = require('./styles');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
 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; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var styles = function styles(theme) {
+    return {
+        wrapper: _extends({}, theme.whitespace.ml1, {
+            cursor: "pointer",
+            borderRadius: "3px",
+            padding: "0 3px 12px",
+            display: "inline-block",
+            lineHeight: "0",
+            verticalAlign: "middle",
+            fontSize: "22px",
+            background: "rgba(0,0,0,.1)",
+            "&:hover": {
+                background: "rgba(0,0,0,.3)"
+            }
+        })
+    };
+};
 /**
@@ -28,36 +53,11 @@ * ShowMoreEllipsis is used to show he user that there is more content to see that has been hidden by the UI. Generally it is unnecessary to trigger any events with it as it is used on cards which expand when the user clicks anywhere inside.
 var ShowMoreEllipsis = function ShowMoreEllipsis(props) {
-    var isHovered = props.isHovered,
-        onMouseEnter = props.onMouseEnter,
-        onMouseLeave = props.onMouseLeave,
-        onTouchTap = props.onTouchTap;
+    var classes = props.classes,
+        className = props.className,
+        rest = _objectWithoutProperties(props, ["classes", "className"]);
 
-
-    function handleClick() {
-        if (onTouchTap) {
-            onTouchTap();
-        }
-    }
-
-    var styles = _extends({}, (0, _styles.marg)({ mt: 2 }), {
-        cursor: "pointer",
-        borderRadius: "3px",
-        padding: "0 3px 12px",
-        display: "inline-block",
-        lineHeight: "0",
-        verticalAlign: "middle",
-        fontSize: "22px",
-        background: "rgba(0,0,0,.1)",
-        onHover: isHovered ? {
-            background: "rgba(0,0,0,.3)"
-        } : {}
-    });
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-ShowMoreEllipsis", classes.wrapper);
     return _react2.default.createElement(
-        'span',
-        {
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
-            onClick: handleClick,
-            style: _extends({}, styles, styles.onHover)
-        },
-        '...'
+        _Element2.default,
+        _extends({ root: "span" }, rest, { className: wrapperClasses }),
+        "..."
     );
@@ -67,9 +67,3 @@ };
 ShowMoreEllipsis.displayName = "ShowMoreEllipsis";
-ShowMoreEllipsis.propTypes = {
-    /**
-     *Callback when clicked or tapped
-    */
-    onTouchTap: _propTypes2.default.func
-};
 
-exports.default = (0, _utils.hoverable)(ShowMoreEllipsis);
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(ShowMoreEllipsis));

lib/SkeletonList.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,97 +7,140 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames3 = require("classnames");
 
-var _materialUi = require('material-ui');
+var _classnames4 = _interopRequireDefault(_classnames3);
 
-var _MediaCard = require('./MediaCard');
+var _materialUi = require("material-ui");
 
-var _MediaCard2 = _interopRequireDefault(_MediaCard);
+var _ListCard = require("./ListCard");
 
+var _ListCard2 = _interopRequireDefault(_ListCard);
+
+var _ListCardHeader = require("./ListCardHeader");
+
+var _ListCardHeader2 = _interopRequireDefault(_ListCardHeader);
+
+var _ListCardIdentity = require("./ListCardIdentity");
+
+var _ListCardIdentity2 = _interopRequireDefault(_ListCardIdentity);
+
+var _ListCardSummary = require("./ListCardSummary");
+
+var _ListCardSummary2 = _interopRequireDefault(_ListCardSummary);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('Search', function (theme) {
-        return {
-            wrapper: {
-                position: "relative",
-                padding: "2px",
-                margin: "-2px",
-                maskImage: 'gradient(linear, center top, center bottom,\n                        color-stop(0.00,  rgba(0,0,0,1)),\n                        color-stop(0.80,  rgba(0,0,0,.1)),\n                        color-stop(1.00,  rgba(0,0,0,0)))'
-            }
-        };
-    });
+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 = {
+    wrapper: {
+        position: "relative",
+        padding: "2px",
+        margin: "-2px",
+        maskImage: "gradient(linear, center top, center bottom,\n                        color-stop(0.00,  rgba(0,0,0,1)),\n                        color-stop(0.80,  rgba(0,0,0,.1)),\n                        color-stop(1.00,  rgba(0,0,0,0)))"
+    },
+    progress: {
+        position: "absolute !important",
+        marginRight: "auto",
+        marginLeft: "auto",
+        right: 0,
+        left: 0,
+        top: "50px"
+    },
+    avatar: {
+        flexShrink: 0,
+        marginRight: 16
+    }
 };
 
-var SkeletonText = function SkeletonText(props) {
+var SkeletonTextStyles = function SkeletonTextStyles(theme) {
+    return {
+        wrapper: {
+            width: "100%",
+            paddingRight: "32px"
+        },
+        text: {
+            height: "8px",
+            width: "100%",
+            background: "#EFEFEF",
+            borderRadius: "800px"
+        },
+        firstLine: {
+            width: "100%",
+            marginBottom: "12px"
+        },
+        secondLine: {
+            width: "80%"
+        }
+    };
+};
+var SkeletonText = (0, _reactJss.withTheme)((0, _reactJss2.default)(SkeletonTextStyles)(function (_ref) {
+    var classes = _ref.classes,
+        className = _ref.className;
+
+    var wrapperClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-SkelletonText", classes.wrapper);
+    var firstLineClasses = (0, _classnames4.default)("CY-SkelletonText-firstLine", "CY-SkelletonText-text", classes.firstLine, classes.text);
+    var secondLineClasses = (0, _classnames4.default)("CY-SkelletonText-secondLine", "CY-SkelletonText-text", classes.secondLine, classes.text);
     return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement('div', {
-            style: {
-                height: "10px",
-                width: "80%",
-                marginBottom: "10px",
-                background: "#EFEFEF",
-                borderRadius: "800px"
-            }
-        }),
-        _react2.default.createElement('div', {
-            style: {
-                height: "10px",
-                width: "70%",
-                background: "#EFEFEF",
-                borderRadius: "800px"
-            }
-        })
+        "div",
+        { className: wrapperClasses },
+        _react2.default.createElement("div", { className: firstLineClasses }),
+        _react2.default.createElement("div", { className: secondLineClasses })
     );
-};
+}));
 
-var SkeletonList = function SkeletonList(props) {
-    /**
-     * SkeletonLists are placeholders for MediaCards while they are loading. They help to inform the user that a list will show.
-     */
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
+/**
+ * SkeletonLists are placeholders for MediaCards while they are loading. They help to inform the user that a list will show.
+ */
+var SkeletonList = function SkeletonList(_ref2) {
+    var classes = _ref2.classes,
+        className = _ref2.className,
+        cardCount = _ref2.cardCount;
 
-    var cardCount = props.cardCount;
+    var wrapperClasses = (0, _classnames4.default)(_defineProperty({}, className, className), "CY-SkelletonList", classes.wrapper);
+    var avatarClasses = (0, _classnames4.default)("CY-SkelletonCard-avatar", classes.avatar);
+    var progressClasses = (0, _classnames4.default)("CY-SkelletonCard-progress", classes.progress);
 
     var SkeletonCards = [];
     for (var i = 0; i < cardCount; i++) {
-        SkeletonCards.push(_react2.default.createElement(_MediaCard2.default, {
-            key: i,
-            image: _react2.default.createElement(_materialUi.Avatar, {
-                size: 40,
-                backgroundColor: '#EFEFEF'
-            }),
-            title: _react2.default.createElement(SkeletonText, null),
-            summary: _react2.default.createElement(SkeletonText, null)
-        }));
+        SkeletonCards.push(_react2.default.createElement(
+            _ListCard2.default,
+            { className: "CY-SkelletonCard", key: i },
+            _react2.default.createElement(
+                _ListCardHeader2.default,
+                { className: "CY-SkelletonCard-header" },
+                _react2.default.createElement(
+                    _ListCardIdentity2.default,
+                    { className: "CY-SkelletonCard-identity" },
+                    _react2.default.createElement(_materialUi.Avatar, {
+                        className: avatarClasses,
+                        backgroundColor: "#EFEFEF"
+                    }),
+                    _react2.default.createElement(SkeletonText, null)
+                ),
+                _react2.default.createElement(
+                    _ListCardSummary2.default,
+                    { className: "CY-SkelletonCard-summary" },
+                    _react2.default.createElement(SkeletonText, null)
+                )
+            )
+        ));
     }
 
     return _react2.default.createElement(
-        'div',
-        { className: classes.wrapper },
+        "div",
+        { className: wrapperClasses },
         SkeletonCards,
-        _react2.default.createElement(_materialUi.CircularProgress, {
-            size: 75,
-            style: {
-                position: "absolute",
-                marginRight: "auto",
-                marginLeft: "auto",
-                right: 0,
-                left: 0,
-                top: "50px"
-            }
-        })
+        _react2.default.createElement(_materialUi.CircularProgress, { size: 75, className: progressClasses })
     );
@@ -119,2 +162,2 @@ };
 
-exports.default = SkeletonList;
+exports.default = (0, _reactJss2.default)(styles)(SkeletonList);

lib/styles/cyverseTheme.js

@@ -7,33 +7,16 @@ "use strict";
 
-var _colors = require("material-ui/styles/colors");
+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 colors = _interopRequireWildcard(_colors);
+var _styles = require("../styles");
 
-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; } }
+var palette = _styles.styleVars.palette;
 
-var primary1Color = "#0971ab",
-    primary2Color = "#318cc8",
-    accent1Color = "#57cbea";
 
-exports.default = {
+var theme = _extends({
+    palette: palette,
     header: {
-        headerColor: primary1Color,
-        headerBorderColor: accent1Color,
+        headerColor: palette.primary1Color,
+        headerBorderColor: palette.accent1Color,
         headerLinkColor: "rgba(255, 255, 255, 0.7)"
     },
-    palette: {
-        primary1Color: primary1Color,
-        primary2Color: primary2Color,
-        primary3Color: colors.grey400,
-        accent1Color: accent1Color,
-        accent2Color: colors.grey100,
-        accent3Color: colors.grey500,
-        alternateTextColor: colors.white,
-        danger: "#ff2f0d",
-        success: "#5cb85c",
-        canvasColor: colors.white,
-        borderColor: colors.grey300,
-        pickerHeaderColor: primary2Color,
-        shadowColor: colors.fullBlack
-    },
     tabs: {
@@ -45,4 +28,5 @@ backgroundColor: "white",
     inkBar: {
-        backgroundColor: primary1Color
+        backgroundColor: palette.primary1Color
     }
-};
+}, _styles.styles);
+exports.default = theme;

lib/styles/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 
-var _variables = require('./variables');
+var _styleVars = require("./styleVars");
 
-Object.defineProperty(exports, 'variables', {
+Object.defineProperty(exports, "styleVars", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_variables).default;
+    return _interopRequireDefault(_styleVars).default;
   }
 });
 
-var _styles = require('./styles');
+var _styles = require("./styles");
 
-Object.defineProperty(exports, 'styles', {
+Object.defineProperty(exports, "styles", {
   enumerable: true,
@@ -26,20 +26,11 @@ get: function get() {
 
-var _marg = require('./marg.js');
+var _styleGenerators = require("./styleGenerators");
 
-Object.defineProperty(exports, 'marg', {
+Object.defineProperty(exports, "styleGenerators", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_marg).default;
+    return _interopRequireDefault(_styleGenerators).default;
   }
 });
 
-var _pad = require('./pad.js');
-
-Object.defineProperty(exports, 'pad', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_pad).default;
-  }
-});
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/styles/styles.js

@@ -7,46 +7,27 @@ "use strict";
 
-var _variables = require("./variables");
+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 _variables2 = _interopRequireDefault(_variables);
+var _styleVars = require("./styleVars");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styleVars2 = _interopRequireDefault(_styleVars);
 
-var styleVariables = {
-    boxShadow: {
-        xsm: {
-            boxShadow: "0 0 3px rgba(0, 0, 0, .3)"
-        },
-        sm: {
-            boxShadow: "0 1px 3px rgba(0, 0, 0, .3)"
-        },
+var _styleGenerators = require("./styleGenerators");
 
-        md: {
-            boxShadow: "0 1px 10px rgba(0, 0, 0, .5)"
-        },
+var styleGenerators = _interopRequireWildcard(_styleGenerators);
 
-        lg: {
-            boxShadow: "0 5px 15px rgba(0,0,0,.5)"
-        },
+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; } }
 
-        li: {
-            boxShadow: "0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24)"
-        }
-    },
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    t: {
+var sizeUnits = _styleVars2.default.sizeUnits,
+    palette = _styleVars2.default.palette;
+var generateMarginStyles = styleGenerators.generateMarginStyles,
+    generatePaddingStyles = styleGenerators.generatePaddingStyles,
+    generateShadowStyles = styleGenerators.generateShadowStyles;
 
-        label: {
-            display: "block",
-            fontSize: "12px",
-            fontWeight: "200",
-            color: "rgba(0, 0, 0, 0.3)",
-            margin: "0px 0px 10px"
-        },
 
-        caption: {
-            fontSize: "14px",
-            fontWeight: "400",
-            color: _variables2.default.c.grey.dark
-        },
-
+var styles = {
+    elevation: _extends({}, generateShadowStyles()),
+    whitespace: _extends({}, generateMarginStyles(sizeUnits), generatePaddingStyles(sizeUnits)),
+    typography: {
         display4: {
@@ -57,3 +38,2 @@ fontSize: "112px",
         },
-
         display3: {
@@ -64,97 +44,63 @@ fontSize: "56px",
         },
-
         display2: {
-            fontSize: "45px",
+            fontSize: "48px",
+            lineHeight: "48px",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         display1: {
             fontSize: "34px",
+            lineHeight: "40px",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         headline: {
             fontSize: "24px",
+            lineHeight: "1",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         title: {
             fontSize: "20px",
+            lineHeight: "24px",
             fontWeight: "400",
             letterSpacing: "1px"
         },
-
         subheading: {
-            color: _variables2.default.c.grey.dark,
             fontSize: "16px",
-            fontWeight: "400"
+            lineHeight: "1",
+            fontWeight: "400",
+            color: palette.secondaryTextColor
         },
-
         body2: {
             fontSize: "16px",
+            lineHeight: "1",
             fontWeight: "500"
         },
-
         body1: {
             fontSize: "14px",
+            lineHeight: "16px",
             fontWeight: "300"
         },
-
-        button1: {
+        caption: {
             fontSize: "14px",
+            lineHeight: "16px",
             fontWeight: "400",
+            color: palette.secondaryTextColor
+        },
+        label: {
+            fontSize: "12px",
             lineHeight: "1",
-            marginTop: "0px",
-            marginRight: "0px",
-            marginBottom: "0px",
-            marginLeft: "0px",
-            letterSpacing: "1px"
+            fontWeight: "200",
+            color: "rgba(0, 0, 0, 0.3)",
+            margin: "0px 0px 10px"
         }
     },
-    BgColors: {
-        greyXxDark: {
-            background: _variables2.default.c.grey.xXDark
-        },
-        greyXDark: {
-            background: _variables2.default.c.grey.xDark
-        },
-        greyDark: {
-            background: _variables2.default.c.grey.dark
-        },
-        greyDarkMid: {
-            background: _variables2.default.c.grey.darkMid
-        },
-        greyMid: {
-            background: _variables2.default.c.grey.mid
-        },
-        greyLightMid: {
-            background: _variables2.default.c.grey.lightMid
-        },
-        greyLight: {
-            background: _variables2.default.c.grey.light
-        },
-        greyXLight: {
-            background: _variables2.default.c.grey.xLight
-        },
-        greyXxlight: {
-            background: _variables2.default.c.grey.xXLight
-        }
-    },
-    u: {
-        kHide: {
+    utility: {
+        hideReadable: {
             position: "fixed",
             top: "9999px"
         },
-
-        inlineUl: {
-            padding: 0,
-            margin: 0
-        },
-
-        inlineLi: {
-            display: "inline-block",
-            listStyle: "none"
+        hide: {
+            display: "none !important"
         }
@@ -164,2 +110,2 @@ }
 
-exports.default = styleVariables;
+exports.default = styles;

lib/SubHeader.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,152 +7,128 @@ Object.defineProperty(exports, "__esModule", {
 
-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 = require("react");
 
-var _react = require('react');
-
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _IconButton = require('material-ui/IconButton');
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _classnames2 = require("classnames");
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _IconButton = require("material-ui/IconButton");
+
 var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _arrowBack = require('material-ui/svg-icons/navigation/arrow-back');
+var _arrowBack = require("material-ui/svg-icons/navigation/arrow-back");
 
 var _arrowBack2 = _interopRequireDefault(_arrowBack);
 
-var _VerticalMenu = require('./VerticalMenu');
+var _VerticalMenu = require("./VerticalMenu");
 
 var _VerticalMenu2 = _interopRequireDefault(_VerticalMenu);
 
-var _Div = require('./Div');
+var _ActionGroup = require("./ActionGroup");
 
-var _Div2 = _interopRequireDefault(_Div);
+var _ActionGroup2 = _interopRequireDefault(_ActionGroup);
 
-var _Title = require('./Title');
+var _Element = require("./Element");
 
-var _Title2 = _interopRequireDefault(_Title);
+var _Element2 = _interopRequireDefault(_Element);
 
 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 _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 _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; }
+var styles = function styles(theme) {
+    return {
+        wrapper: {
+            position: "relative",
+            display: "flex",
+            justifyContent: "space-between"
+        },
 
-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; }
+        titleGroup: {
+            display: "flex",
+            flex: "1",
+            alignItems: "center"
+        },
 
+        backButton: {
+            float: "left",
+            cursor: "pointer",
+            position: "relative",
+            marginRight: "10px"
+        }
+    };
+};
 /**
  * SubHeader is the contextual header located at the top of a sub-view. A Sub-view is a view that one would navigate to from a main-view. For example clicking on a list item might open a sub-view detail of that list item. The SubHeader has a back button to navigate back to the main-view and some top level controls or actions for the particular sub-view.
  */
-var SubHeader = function (_React$Component) {
-    _inherits(SubHeader, _React$Component);
+var SubHeader = function SubHeader(_ref) {
+    var classes = _ref.classes,
+        className = _ref.className,
+        name = _ref.name,
+        quickActions = _ref.quickActions,
+        menuItems = _ref.menuItems,
+        onBack = _ref.onBack;
 
-    function SubHeader() {
-        var _ref;
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-SubHeader", classes.wrapper);
 
-        var _temp, _this, _ret;
+    var titleGroupClasses = (0, _classnames3.default)("CY-SubHeader-titleGroup", classes.titleGroup);
 
-        _classCallCheck(this, SubHeader);
+    var renderOptionGroup = function renderOptionGroup() {
+        var renderQuickActions = function renderQuickActions(option, i) {
+            return _react2.default.createElement(
+                "div",
+                { key: option + i },
+                option
+            );
+        };
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+        if (quickActions || menuItems) {
+            return _react2.default.createElement(
+                _ActionGroup2.default,
+                { className: "CY-SubHeader-Actions" },
+                quickActions ? quickActions.map(renderQuickActions) : null,
+                menuItems ? _react2.default.createElement(_VerticalMenu2.default, { children: menuItems }) : null
+            );
         }
+    };
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SubHeader.__proto__ || Object.getPrototypeOf(SubHeader)).call.apply(_ref, [this].concat(args))), _this), _this.renderOptionGroup = function () {
-            var _this$props = _this.props,
-                quickActions = _this$props.quickActions,
-                menuItems = _this$props.menuItems;
-
-            var style = _this.style();
-
-            var renderQuickActions = function renderQuickActions(option, i) {
-                return _react2.default.createElement(
-                    _Div2.default,
-                    { key: option + i },
-                    option
-                );
-            };
-
-            if (quickActions || menuItems) {
-                return _react2.default.createElement(
-                    'div',
-                    { style: style.actionGroup },
-                    quickActions ? quickActions.map(renderQuickActions) : null,
-                    menuItems ? _react2.default.createElement(_VerticalMenu2.default, {
-                        children: menuItems
-                    }) : null
-                );
-            }
-        }, _this.style = function () {
-            return {
-                header: {
-                    position: "relative",
-                    display: "flex",
-                    justifyContent: "space-between"
+    return _react2.default.createElement(
+        "div",
+        { className: wrapperClasses },
+        _react2.default.createElement(
+            "div",
+            { className: titleGroupClasses },
+            _react2.default.createElement(
+                _IconButton2.default,
+                {
+                    className: "CY-SubHeader-backBtn",
+                    onTouchTap: onBack
                 },
-
-                titleGroup: {
-                    display: "flex",
-                    flex: "1",
-                    alignItems: "center"
-                },
-
-                backButton: {
-                    float: "left",
-                    cursor: "pointer",
-                    position: "relative",
-                    marginRight: "10px"
-                },
-
-                actionGroup: {
-                    display: "flex",
-                    alignItems: "center"
-                }
-            };
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(SubHeader, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                name = _props.name,
-                onBack = _props.onBack;
-
-            var style = this.style();
-
-            return _react2.default.createElement(
-                'div',
+                _react2.default.createElement(_arrowBack2.default, null)
+            ),
+            _react2.default.createElement(
+                _Element2.default,
                 {
-                    style: style.header
+                    className: "CY-SubHeader-title",
+                    root: "h1",
+                    typography: "title"
                 },
-                _react2.default.createElement(
-                    'div',
-                    { style: style.titleGroup },
-                    _react2.default.createElement(
-                        _IconButton2.default,
-                        { onTouchTap: onBack },
-                        _react2.default.createElement(_arrowBack2.default, null)
-                    ),
-                    _react2.default.createElement(
-                        _Title2.default,
-                        {
-                            h1: true,
-                            title: true,
-                            m: 0
-                        },
-                        name
-                    )
-                ),
-                this.renderOptionGroup()
-            );
-        }
-    }]);
+                name
+            )
+        ),
+        renderOptionGroup()
+    );
+};
 
-    return SubHeader;
-}(_react2.default.Component);
+SubHeader.displayName = "SubHeader";
 
-SubHeader.displayName = "SubHeader";
 SubHeader.propTypes = {
@@ -176,2 +152,3 @@ /**
 };
-exports.default = SubHeader;
+
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(SubHeader));

lib/SummaryText.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,18 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _jssThemeReactor = require('jss-theme-reactor');
+var _reactJss = require("react-jss");
 
-var _getStyleManager = require('./styles/getStyleManager');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _getStyleManager2 = _interopRequireDefault(_getStyleManager);
+var _classnames2 = require("classnames");
 
-var _Element = require('./Element');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _Element = require("./Element");
+
 var _Element2 = _interopRequireDefault(_Element);
@@ -30,18 +32,16 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-var styleSheet = function styleSheet() {
-    return (0, _jssThemeReactor.createStyleSheet)('SummaryText', function (theme) {
-        return {
-            wrapper: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                maxWidth: "500px"
-            }
-        };
-    });
+var styles = {
+    wrapper: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        maxWidth: "500px"
+    }
 };
+
 /**
@@ -53,17 +53,17 @@ * SummaryText is used to limit text to a single line and available width. Typically used to preview a large block of text that can be shown by clicking `ShowMoreEllipsis` or a collapsed `MediaCard`.
 var SummaryText = function SummaryText(_ref) {
-    var children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ['children']);
+    var classes = _ref.classes,
+        className = _ref.className,
+        _ref$root = _ref.root,
+        root = _ref$root === undefined ? "p" : _ref$root,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["classes", "className", "root", "children"]);
 
-    // Generate classes object and render corresponding style definitions in header.
-    var classes = (0, _getStyleManager2.default)({}).render(styleSheet());
-
+    var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-SummaryText", classes.wrapper);
     return _react2.default.createElement(
         _Element2.default,
-        _extends({}, rest, {
-            tag: 'p',
-            className: classes.wrapper
-        }),
+        _extends({}, rest, { root: root, className: wrapperClasses }),
         children
     );
 };
+
 SummaryText.displayName = "SummaryText";
@@ -75,5 +75,9 @@
      */
-    children: _propTypes2.default.string
+    children: _propTypes2.default.string,
+    /**
+     * The root element to be renderd.
+     */
+    root: _propTypes2.default.string
 };
 
-exports.default = SummaryText;
+exports.default = (0, _reactJss2.default)(styles)(SummaryText);

lib/Tooltip.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,14 +11,26 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _colors = require('material-ui/styles/colors');
+var _reactJss = require("react-jss");
 
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _classnames5 = require("classnames");
+
+var _classnames6 = _interopRequireDefault(_classnames5);
+
+var _colors = require("material-ui/styles/colors");
+
 var colors = _interopRequireWildcard(_colors);
 
+var _Element = require("./Element");
+
+var _Element2 = _interopRequireDefault(_Element);
+
 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; } }
@@ -28,2 +40,6 @@
 
+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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -35,9 +51,87 @@
 
+var tooltipDirection = function tooltipDirection(direction, classes) {
+    var top = classes.message__top,
+        right = classes.message__right,
+        bottom = classes.message__bottom,
+        left = classes.message__left;
+
+    switch (direction) {
+        case "top":
+            return top;
+        case "right":
+            return right;
+        case "bottom":
+            return bottom;
+        case "left":
+            return left;
+        default:
+            return top;
+    }
+};
+
+// Each key of the returned object will be available as a className below.
+var styles = function styles(theme) {
+    var messageOffset = "calc(100% + 8px)";
+    return {
+        wrapper: {
+            display: "inline-block"
+        },
+        innerWrapper: {
+            position: "relative",
+            display: "flex",
+            alignItems: "start"
+        },
+        message: {
+            zIndex: "9999",
+            display: "block",
+            padding: "5px",
+            background: colors.grey900,
+            borderRadius: "2px",
+            color: "white",
+            fontSize: "12px",
+            textAlign: "center",
+            whiteSpace: "nowrap",
+            position: "absolute",
+            alignSelf: "center",
+            transition: "opacity ease .2s, transform ease .2s"
+        },
+        message__long: {
+            whiteSpace: "normal",
+            minWidth: "250px"
+        },
+        message__hide: {
+            opacity: 0,
+            transform: "scale(0)"
+        },
+        message__show: {
+            opacity: 1,
+            tranform: "scale(1)"
+        },
+        message__top: {
+            transformOrigin: "0% 100%",
+            bottom: messageOffset
+        },
+        message__right: {
+            transformOrigin: "0% 50%",
+            left: messageOffset
+        },
+        message__bottom: {
+            transformOrigin: "0% -100%",
+            top: messageOffset
+        },
+        message__left: {
+            transformOrigin: "100% 50%",
+            right: messageOffset
+        }
+    };
+};
+
 /**
-* A Tooltip is used to show on demand information about an element, usually an action. Is initially hidden to keep the UI clean but can be shown by hovering over the element in question.
-*/
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+ * A Tooltip is used to show on demand information about an element, usually an action. Is initially hidden to keep the UI clean but can be shown by hovering over the element in question.
+ */
 
-    function _class() {
+var Tooltip = function (_React$Component) {
+    _inherits(Tooltip, _React$Component);
+
+    function Tooltip() {
         var _ref;
@@ -47,3 +141,3 @@
 
-        _classCallCheck(this, _class);
+        _classCallCheck(this, Tooltip);
 
@@ -54,3 +148,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
             showTooltip: false
@@ -78,79 +172,43 @@ }, _this.showTooltip = function () {
             }, 2000);
-        }, _this.directionStyle = function () {
-            var direction = _this.props.direction;
-            var offset = "calc(100% + 10px)";
-            switch (direction) {
-                case "top":
-                    return {
-                        transformOrigin: "0% 100%",
-                        bottom: offset
-                    };
-                case "right":
-                    return {
-                        transformOrigin: "0% 50%",
-                        left: offset
-                    };
-                case "bottom":
-                    return {
-                        transformOrigin: "0% 0%",
-                        top: offset
-                    };
-                case "left":
-                    return {
-                        transformOrigin: "100% 50%",
-                        right: offset
-                    };
-                default:
-                    return {
-                        transformOrigin: "0 100%",
-                        bottom: offset
-                    };
-            }
-        }, _this.style = function () {
-            var showTooltip = _this.state.showTooltip;
-
-            var x = showTooltip ? 1 : 0;
-            return {
-                content: _extends({}, _this.directionStyle(), {
-                    zIndex: "9999",
-                    display: "block",
-                    padding: "5px",
-                    background: colors.grey900,
-                    borderRadius: "2px",
-                    color: "white",
-                    fontSize: "10px",
-                    textAlign: "center",
-                    whiteSpace: "nowrap",
-                    position: "absolute",
-                    alignSelf: "center",
-                    opacity: x,
-                    transform: 'scale(' + x + ')',
-                    transition: "opacity ease .2s, transform ease .2s"
-                })
-            };
         }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
-    _createClass(_class, [{
-        key: 'render',
+    _createClass(Tooltip, [{
+        key: "render",
         value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
+                message = _props.message,
+                direction = _props.direction,
+                rest = _objectWithoutProperties(_props, ["classes", "className", "message", "direction"]);
+
+            var showTooltip = this.state.showTooltip;
+
+
+            var wrapperClasses = (0, _classnames6.default)(_defineProperty({}, className, className), "CY-Tooltip", classes.wrapper);
+
+            var innerWrapperClasses = (0, _classnames6.default)("CY-Tooltip-innerWrapper", classes.innerWrapper);
+
+            var messageClasses = (0, _classnames6.default)("CY-Tooltip-message", classes.message, _defineProperty({}, classes.message__show, showTooltip), _defineProperty({}, classes.message__hide, !showTooltip), _defineProperty({}, classes.message__long, message.length > 40), tooltipDirection(direction, classes));
+
             return _react2.default.createElement(
-                'span',
-                {
-                    style: _extends({
-                        position: "relative",
-                        display: "flex",
-                        alignItems: "start"
-                    }, this.props.style),
-                    onMouseEnter: this.onMouseEnter,
-                    onMouseLeave: this.onMouseLeave
-                },
-                this.props.children,
+                _Element2.default,
+                _extends({}, rest, { className: wrapperClasses }),
                 _react2.default.createElement(
-                    'span',
-                    { style: this.style().content },
+                    "span",
+                    {
+                        className: innerWrapperClasses,
+                        onMouseEnter: this.onMouseEnter,
+                        onMouseLeave: this.onMouseLeave
+                    },
+                    this.props.children,
                     _react2.default.createElement(
-                        'div',
-                        null,
-                        this.props.message
+                        "span",
+                        { className: messageClasses },
+                        _react2.default.createElement(
+                            "div",
+                            null,
+                            message
+                        )
                     )
@@ -162,20 +220,23 @@ )
 
-    return _class;
+    return Tooltip;
 }(_react2.default.Component);
 
-_class.propTypes = {
+Tooltip.propTypes = {
     /**
-    * Text that shows on tooltip
-    */
+     * Text that shows on tooltip
+     */
     message: _propTypes2.default.string.isRequired,
     /**
-    * The direction of the element Tooltip will open from. Expects one of: "right", "bottom", "left", "top".
-    */
-    direction: _propTypes2.default.oneOf(['right', 'left', 'top', 'bottom']),
+     * The direction of the element Tooltip will open from. Expects one of: "right", "bottom", "left", "top".
+     */
+    direction: _propTypes2.default.string,
     /**
-    * The element that shows Tooltip on hover and anchors the toopltip's direction
-    */
+     * The element that shows Tooltip on hover and anchors the toopltip's direction
+     */
     children: _propTypes2.default.node.isRequired
 };
-_class.displayName = "Tooltip";
-exports.default = _class;
+Tooltip.defaultProps = {
+    direction: "top"
+};
+Tooltip.displayName = "Tooltip";
+exports.default = (0, _reactJss.withTheme)((0, _reactJss2.default)(styles)(Tooltip));

lib/utils/ButtonGroup.js

@@ -15,10 +15,14 @@ 'use strict';
 
-var _styles = require('../styles');
+var _reactJss = require('react-jss');
 
-var _ClearFix = require('./ClearFix');
+var _reactJss2 = _interopRequireDefault(_reactJss);
 
-var _ClearFix2 = _interopRequireDefault(_ClearFix);
+var _Element = require('../Element');
 
+var _Element2 = _interopRequireDefault(_Element);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,12 +34,25 @@
 
-var _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var styles = {
+    wrapper: {
+        display: "flex",
+        flexWrap: "wrap",
+        "& > *": {
+            marginRight: "16px"
+        },
+        "& > *:last-child": {
+            marginRight: 0
+        }
+    }
+};
 
-    function _class() {
-        _classCallCheck(this, _class);
+var ButtonGroup = function (_React$Component) {
+    _inherits(ButtonGroup, _React$Component);
 
-        return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
+    function ButtonGroup() {
+        _classCallCheck(this, ButtonGroup);
+
+        return _possibleConstructorReturn(this, (ButtonGroup.__proto__ || Object.getPrototypeOf(ButtonGroup)).apply(this, arguments));
     }
 
-    _createClass(_class, [{
+    _createClass(ButtonGroup, [{
         key: 'render',
@@ -45,36 +62,9 @@ value: function render() {
                 children = _props.children,
-                pullR = _props.pullR,
-                pullL = _props.pullL;
+                classes = _props.classes,
+                rest = _objectWithoutProperties(_props, ['children', 'classes']);
 
-
-            var style = {
-                display: "flex",
-                flexWrap: "wrap"
-            };
-            if (pullR) {
-                style.float = "right";
-            }
-            if (pullL) {
-                style.float = "left";
-            }
-
-            var renderChildren = _react2.default.Children.map(children, function (child, i) {
-                if (i === children.length - 1) {
-                    return _react2.default.cloneElement(child, {
-                        style: _extends({}, (0, _styles.marg)({ mv: 1 }))
-                    });
-                } else {
-                    return _react2.default.cloneElement(child, {
-                        style: _extends({}, (0, _styles.marg)({ mr: 3, mv: 1 }))
-                    });
-                }
-            });
             return _react2.default.createElement(
-                _ClearFix2.default,
-                null,
-                _react2.default.createElement(
-                    'div',
-                    { style: style },
-                    renderChildren
-                )
+                _Element2.default,
+                _extends({}, rest, { className: classes.wrapper + ' ButtonGroup' }),
+                children
             );
@@ -84,6 +74,6 @@ }
 
-    return _class;
+    return ButtonGroup;
 }(_react2.default.Component);
 
-_class.displayName = "ButtonGroup";
-exports.default = _class;
+ButtonGroup.displayName = "ButtonGroup";
+exports.default = (0, _reactJss2.default)(styles)(ButtonGroup);

lib/utils/ClearFix.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,8 +11,6 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,20 +34,18 @@
     _createClass(ClearFix, [{
-        key: 'render',
+        key: "render",
         value: function render() {
             var beforeStyle = {
-                display: 'table'
+                display: "table"
             };
 
             var afterStyle = _extends({}, beforeStyle, {
-                clear: 'both'
+                clear: "both"
             });
 
             return _react2.default.createElement(
-                'div',
-                {
-                    style: _extends({}, this.props.style, (0, _styles.marg)(this.props))
-                },
-                _react2.default.createElement('div', { style: beforeStyle }),
+                _react2.default.Fragment,
+                null,
+                _react2.default.createElement("div", { style: beforeStyle }),
                 this.props.children,
-                _react2.default.createElement('div', { style: afterStyle })
+                _react2.default.createElement("div", { style: afterStyle })
             );
@@ -56,0 +52,0 @@ }

lib/VerticalMenu.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,14 +11,18 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _materialUi = require('material-ui');
+var _classnames2 = require("classnames");
 
-var _moreVert = require('material-ui/svg-icons/navigation/more-vert');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _materialUi = require("material-ui");
+
+var _moreVert = require("material-ui/svg-icons/navigation/more-vert");
+
 var _moreVert2 = _interopRequireDefault(_moreVert);
@@ -28,2 +32,4 @@
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -61,14 +67,20 @@
     _createClass(VerticalMenu, [{
-        key: 'render',
+        key: "render",
         value: function render() {
             var _props = this.props,
+                className = _props.className,
                 anchorOrigin = _props.anchorOrigin,
                 targetOrigin = _props.targetOrigin;
 
+            var wrapperClasses = (0, _classnames3.default)(_defineProperty({}, className, className), "CY-VerticalMenu");
 
             return _react2.default.createElement(_materialUi.IconMenu, _extends({}, this.props, {
+                className: wrapperClasses,
                 iconButtonElement: _react2.default.createElement(
                     _materialUi.IconButton,
-                    { onClick: this.onTouch },
-                    _react2.default.createElement(_moreVert2.default, null)
+                    {
+                        className: "CY-VerticalMenu-btn",
+                        onClick: this.onTouch
+                    },
+                    _react2.default.createElement(_moreVert2.default, { className: "CY-VerticalMenu-icon" })
                 ),
@@ -100,5 +112,5 @@ anchorOrigin: anchorOrigin,
 VerticalMenu.defaultProps = {
-    anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-    targetOrigin: { horizontal: 'right', vertical: 'top' }
+    anchorOrigin: { horizontal: "right", vertical: "bottom" },
+    targetOrigin: { horizontal: "right", vertical: "top" }
 };
 exports.default = VerticalMenu;

package.json

 {
   "name": "cyverse-ui",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A React UI library for the CyVerse tool set",
@@ -28,2 +28,3 @@ "repository": "cyverse/cyverse-ui",
     "clean": "rimraf lib && rimraf es",
+    "format": "prettier --config .prettierrc --write $(git ls-files src/*js)",
     "lint": "eslint -c .eslintrc --ext .jsx,.js --no-eslintrc src",
@@ -33,7 +34,5 @@ "prepublish": "npm run build"
   "dependencies": {
+    "classnames": "^2.2.5",
     "filter-react-dom-props": "0.0.2",
-    "jss": "^7.1.5",
-    "jss-preset-default": "^2.0.0",
-    "jss-theme-reactor": "^0.11.1",
-    "marked": "^0.3.7",
+    "marked": "^0.3.12",
     "mkdirp-promise": "^5.0.1",
@@ -44,2 +43,3 @@ "prop-types": "^15.5.10",
     "react-ink": "6.2.0",
+    "react-jss": "^8.2.1",
     "react-scroll": "^1.6.7"
@@ -58,5 +58,6 @@ },
     "material-ui": "~0.19.4",
+    "prettier": "1.10.2",
     "react": "^16.0.0",
+    "react-docgen": "^2.17.0",
     "react-dom": "^16.0.0",
-    "react-docgen": "^2.17.0",
     "react-tap-event-plugin": "^3.0.1",
@@ -63,0 +64,0 @@ "rimraf": "^2.6.2",

src/ActionGroup.js

@@ -1,38 +0,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
 
 import Element from "./Element";
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-const styleSheet = () => (
-    createStyleSheet('ActionGroup',
-        theme => ({
-            wrapper: {
-                display: "flex",
-                alignItems: "center",
-            }
-        }
-    ))
-);
+const styles = theme => ({
+    wrapper: {
+        display: "flex",
+        alignItems: "center",
+    },
+});
+
 /**
  * Organize groups of IconButtons on list cards or in app bars.
  */
-const ActionGroup = ({children, ...rest}) => {
+const ActionGroup = ({ classes, className, children, ...rest }) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-ActionGroup",
+        classes.wrapper
+    );
 
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({})
-    .render(styleSheet());
-
-    return(
-        <Element
-            { ...rest }
-            display="flex"
-            className={ classes.wrapper }
-        >
-            { children }
+    return (
+        <Element {...rest} className={wrapperClasses}>
+            {children}
         </Element>
-    )
+    );
 };
@@ -45,5 +38,5 @@ ActionGroup.displayName = "ActionGroup";
      */
-    children: PropTypes.node
+    children: PropTypes.node,
 };
 
-export default ActionGroup
+export default withTheme(injectSheet(styles)(ActionGroup));

src/ButtonMenu.js

@@ -1,8 +0,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Div from './Div';
-import RaisedButton from 'material-ui/RaisedButton';
-import Popover from 'material-ui/Popover';
-import Menu from 'material-ui/Menu';
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import classnames from "classnames";
+import Element from "./Element";
+import RaisedButton from "material-ui/RaisedButton";
+import Popover from "material-ui/Popover";
+import Menu from "material-ui/Menu";
 
+// Each key of the returned object will be available as a className below.
+const styles = {
+    wrapper: {
+        display: "inline-block",
+    },
+};
+
 /**
@@ -13,3 +22,3 @@ * A ButtonMenu is a menu that can be displayed by pressing a RaisedButton. In Troposphere a ButtonMenu is used to with the label "New" and opens a list of things that can be created.
  */
-export default class extends React.Component {
+class ButtonMenu extends React.Component {
     static displayName = "ButtonMenu";
@@ -56,3 +65,3 @@
 
-    handleTouchTap = (event) => {
+    handleTouchTap = event => {
         // This prevents ghost click.
@@ -81,3 +90,4 @@ event.preventDefault();
         const {
-            style,
+            classes,
+            className,
             buttonIcon,
@@ -89,38 +99,45 @@ buttonLabel,
             disabled,
-            anchorOrigin = {horizontal: 'right', vertical: 'bottom'},
-            targetOrigin = {horizontal: 'right', vertical: 'top'},
+            anchorOrigin = {
+                horizontal: "right",
+                vertical: "bottom",
+            },
+            targetOrigin = { horizontal: "right", vertical: "top" },
+            ...rest
         } = this.props;
-
+        const wrapperClasses = classnames(
+            { [className]: className },
+            "CY-ButtonMenu",
+            classes.wrapper
+        );
         return (
-            <Div
-                style={{
-                    ...style,
-                    display: "inline-block"
-                }}
-                id={ this.props.id }
-            >
+            <Element {...rest} className={wrapperClasses}>
                 <RaisedButton
-                    onTouchTap={ this.handleTouchTap }
-                    label={ buttonLabel }
-                    icon={ buttonIcon }
-                    primary={ primary }
-                    secondary={ secondary }
-                    disabled={ disabled }
+                    className="CY-ButtonMenu-btn"
+                    onTouchTap={this.handleTouchTap}
+                    label={buttonLabel}
+                    icon={buttonIcon}
+                    primary={primary}
+                    secondary={secondary}
+                    disabled={disabled}
                 />
                 <Popover
-                    open={ this.state.open }
-                    anchorEl={ this.state.anchorEl }
-                    anchorOrigin={ anchorOrigin }
-                    targetOrigin={ targetOrigin }
-                    onRequestClose={ this.handleRequestClose }
+                    className="CY-ButtonMenu-popover"
+                    open={this.state.open}
+                    anchorEl={this.state.anchorEl}
+                    anchorOrigin={anchorOrigin}
+                    targetOrigin={targetOrigin}
+                    onRequestClose={this.handleRequestClose}
                 >
                     <Menu
-                        onItemTouchTap={ this.handleItemTouchTap }
+                        className="CY-ButtonMenu-menu"
+                        onItemTouchTap={this.handleItemTouchTap}
                     >
-                        { children }
+                        {children}
                     </Menu>
                 </Popover>
-            </Div>
-        )
+            </Element>
+        );
     }
 }
+
+export default injectSheet(styles)(ButtonMenu);

src/Element.js

 import React from "react";
 import PropTypes from "prop-types";
-import filterDomProps from 'filter-react-dom-props';
-import { createStyleSheet } from "jss-theme-reactor";
-import getStyleManager from "./styles/getStyleManager";
-import muiThemeable from "material-ui/styles/muiThemeable";
-import event from "./utils/events";
-import { marg, pad, styles } from "./styles";
+import filterDomProps from "filter-react-dom-props";
+import classnames from "classnames";
+import injectSheet, { withTheme } from "react-jss";
+import * as events from "./utils/events";
 
+// Each key of the returned styles object will be available as a className below.
+const getColor = (palette, background) =>
+    palette[background] || background;
+const styles = theme => ({
+    wrapper: {
+        background: props =>
+            getColor(theme.palette, props.background),
+        color: props => getColor(theme.palette, props.color),
+    },
+    ...theme.utility,
+    ...theme.typography,
+    ...theme.whitespace,
+    ...theme.elevation,
+});
+
 /**
- * Element is the building block for creating other components. All of CyVerse-UI is built with Element.
- * It has the core functionality that is common across the CY-UI world. These features let you access global values for whitespace and typography to maintain consistency throughout your components.
+ * All of CyVerse-UI is built with "Element". It is the same basic idea as MUI's "Paper" with the core features that are common across the CY-UI world. These features let you access global utilities for whitespace and typography to maintain consistency throughout your components without leaking global variables.
  *
- * Render the html tag you want by a string to the el prop and pass any html attributes as you would with any other element.
+ * Render the html tag you want using the root prop and pass any html attributes that element accepts.
  **/
 class Element extends React.Component {
-    // Define static styles here.
-    // Each key of the returned object will be available as a className below.
-    // TODO: Move styles from inline to here and compose classNames
-    styleSheet = () =>
-        createStyleSheet("Element", theme => ({
-            wrapper: {}
-        }));
-
-    componentWillMount() {
-        // Generate classes object and render corresponding style definitions in header.
-        this.classes = getStyleManager({}).render(this.styleSheet());
-    }
-
     clickHandler = e => {
         const { stopPropagation, onClick } = this.props;
-        stopPropagation ? event.stopPropagation(e) : null;
+        stopPropagation ? events.stopPropagation(e) : null;
         onClick ? onClick(e) : null;
     };
 
+    onKeyDown = e => {
+        if (e.keyCode === 13) {
+            this.clickHandler(e);
+        }
+    };
+
     render() {
         const {
-            style,
-            tag = "div",
+            theme,
+            root = "div",
+            className,
+            classes,
+            hide = false,
+            hideReadable = false,
+            typography = "body1",
+            whitespace = [],
+            elevation = 0,
+            tabindex,
+            onClick,
             ...rest
         } = this.props;
-        const Tag = tag;
 
+        // Throw an error if not using a CY-UI compatible theme
+        const { typography: themeTypography } = theme;
+        if (!themeTypography) {
+            throw `missing "cyverse-ui" dependency\n\nThe theme field "typography" is missing. "cyverse-ui" requires that the material-ui base theme be extended with "cyverseTheme". Visit https://cyverse.github.io/cyverse-ui/ to learn more about cyverse-ui theming.`;
+        }
+
+        const Root = root;
+        const whitespaceClass = Array.isArray(whitespace)
+            ? whitespace.map(i => classes[i]).join(" ")
+            : classes[whitespace];
+        const elevationClass = [classes["elevation" + elevation]];
+
+        const wrapperClasses = classnames(
+            { [className]: className },
+            "Element",
+            { [classes.hide]: hide },
+            { [classes.hideReadable]: hideReadable },
+            { [elevationClass]: elevation > 0 },
+            classes.wrapper,
+            classes[typography],
+            whitespaceClass
+        );
+
         return (
-            <Tag
+            <Root
                 {...filterDomProps(rest)}
-                style={{ ...style, ...this.styles()}}
+                tabIndex={tabindex ? tabindex : onClick ? "0" : null}
+                className={wrapperClasses}
                 onClick={this.clickHandler}
+                onKeyDown={this.onKeyDown}
             >
                 {this.props.children}
-            </Tag>
+            </Root>
         );
     }
-
-    styles = () => {
-        const {
-            muiTheme: { palette },
-            color: colorProp,
-            whiteSpace = {},
-            typography = "body1",
-            background: backgroundProp,
-            hide,
-            display: displayProp = "block"
-        } = this.props;
-
-        const display = hide ? "none" : displayProp;
-        const typoStack = styles.t;
-
-        const background = palette[backgroundProp]
-            ? palette[backgroundProp]
-            : backgroundProp;
-
-        const color = palette[colorProp]
-            ? palette[colorProp]
-            : colorProp;
-
-        const fontStyle = typoStack[typography];
-
-        return {
-            color,
-            background,
-            display,
-            ...fontStyle,
-            ...marg(whiteSpace),
-            ...pad(whiteSpace)
-        };
-    };
 }
@@ -96,5 +100,38 @@
      */
-    children: PropTypes.node
+    children: PropTypes.node,
+    /**
+     * The html tag to render, For example, "p", "div", "span". All html atrributes like "title", "src" etc.. are passed down.
+     */
+    root: PropTypes.string,
+    /**
+     * The color of the text. You can use theme palette names like "primary1Color"
+     */
+    color: PropTypes.string,
+    /**
+     * The color of the background. You can use theme palette names like "primary1Color"
+     */
+    background: PropTypes.string,
+    /**
+     * The typography styles from the theme like "title" or "body1"
+     */
+    typography: PropTypes.string,
+    /**
+     * Whitespace can be a string or an array of strings representing a spacing property followed by a spacing unit ranging 0 - 20. The expected values are shorthand "mb1" is "margin-bottom" with a unit of 1 so "mt1" is top "ml1" is left etc..., Padding is the same with a "p" instead of an "m". Other values are: top and bottom "mv1" for vertical, right and left "ms1" for sides, and all directions "m1" see example above or in the theme documentation on whitespace for a list of values. It is good to use whitespace units (multiples of 8px) over other values for margin or padding for consistancy and best alignment. See the Material Design specs for guidence.
+     */
+    whitespace: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.array,
+    ]),
+    /**
+     * Elevation is how high the element comes off the page visually through shadow depth. Expects values between 0 and 24.
+     */
+    elevation: PropTypes.number,
 };
 
-export default muiThemeable()(Element);
+Element.defaultProps = {
+    root: "div",
+    typography: "body1",
+    whitespace: ["m0", "p0"],
+};
+
+export default withTheme(injectSheet(styles)(Element));

src/Hr.js

@@ -1,24 +0,27 @@
-import React from 'react';
-import { marg } from './styles';
+import React from "react";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import Element from "./Element";
 
-export default class extends React.Component {
-    /**
-     * Hr renders the proper styling on a horizontal rule.
-     */
-    static displayName = "Hr"
-    style = () => {
-        return {
-            border:"0px",
-            height: "1px",
-            background: "rgba( 0, 0, 0, .1 )",
-            ...marg(this.props),
-            ...this.props.style,
-        }
-    };
+// Each key of the returned object will be available in the prop "classes" below.
+const styles = theme => ({
+    wrapper: {
+        border: "0px",
+        height: "1px",
+        background: "rgba( 0, 0, 0, .1 )",
+    },
+});
 
-    render() {
-        return (
-            <hr style={ this.style() }/>
-        )
-    }
-}
+/**
+ * Hr renders the proper styling on a horizontal rule.
+ */
+const Hr = ({ classes, className }) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-Hr",
+        classes.wrapper
+    );
+    return <Element root="hr" className={wrapperClasses} />;
+};
+
+export default withTheme(injectSheet(styles)(Hr));

src/icons/AttachInstanceIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,4 +10,2 @@ const AttachInstanceIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
-                ...rest.style
             }}
@@ -15,0 +12,0 @@ >

src/icons/BootscriptIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,4 +10,2 @@ const BootscriptIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
-                ...rest.style
             }}
@@ -15,0 +12,0 @@ >

src/icons/ConsoleIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,4 +10,2 @@ const ConsoleIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
-                ...rest.style
             }}
@@ -15,0 +12,0 @@ >

src/icons/DetachInstanceIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,4 +10,2 @@ const DetachInstanceIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
-                ...rest.style
             }}
@@ -15,0 +12,0 @@ >

src/icons/GithubIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,6 +10,5 @@ const GithubIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
                 ...rest.style
             }}
-            viewBox="0 0 38 38"
+            viewBox="0 0 40 40"
         >
@@ -17,0 +15,0 @@ <g>

src/icons/IntercomIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,4 +10,2 @@ const IntercomIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
-                ...rest.style
             }}
@@ -15,0 +12,0 @@ viewBox="0 0 24 24"

src/icons/IPIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,4 +10,2 @@ const IPIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
-                ...rest.style
             }}
@@ -15,0 +12,0 @@ >

src/icons/LaunchIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,3 +10,2 @@ const LaunchIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
                 ...rest.style
@@ -14,0 +12,0 @@ }}

src/icons/LinkIcon.js

@@ -1,22 +0,21 @@
-import React from 'react';
-import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
+import React from "react";
+import { SvgIcon } from "material-ui";
 
-const LinkIcon = ({ size = 24, ...rest }) => {
+const LinkIcon = ({ size = 24, style, ...rest }) => {
     return (
-        <SvgIcon { ...rest }
+        <SvgIcon
+            {...rest}
             style={{
                 height: size,
                 width: size,
-                ...marg(rest),
-                ...rest.style
+                ...style,
             }}
             viewBox="0 0 40 40"
-	>
-            <path d="M16.9169748,14.4193613 C17.207395,14.0708571 17.4978151,13.6642689 17.7882353,13.3738487 C19.4145882,11.6894118 21.0990252,10.0049748 22.7834622,8.37862185 C24.9325714,6.34568067 27.4301849,5.7067563 30.2182185,6.69418487 C33.0062521,7.68161345 34.7487731,9.77263866 35.1553613,12.7349244 C35.4457815,15.0002017 34.7487731,17.0331429 33.1805042,18.6594958 C31.4960672,20.3439328 29.8116303,22.0864538 28.1271933,23.7128067 C25.3391597,26.4427563 20.808605,26.3846723 18.0786555,23.6547227 C17.265479,22.8415462 17.4397311,21.5056134 18.4271597,20.9247731 C19.1241681,20.5181849 19.8792605,20.6343529 20.5181849,21.2151933 C21.6798655,22.3187899 23.0738824,22.6092101 24.5840672,21.9702857 C25.0487395,21.7960336 25.4553277,21.5056134 25.8038319,21.1571092 C27.4882689,19.5307563 29.1146218,17.9044034 30.7409748,16.2199664 C32.3092437,14.6516975 32.2511597,12.3283361 30.6248067,10.7600672 C29.0565378,9.19179832 26.7331765,9.13371429 25.1649076,10.7019832 C23.8870588,11.9798319 22.6092101,13.1995966 21.3894454,14.4774454 C21.2151933,14.6516975 21.0990252,14.7097815 20.8666891,14.5936134 C19.5888403,14.3612773 18.2529076,14.2451092 16.9169748,14.4193613 Z"></path>
-            <path d="M24.6421513,27.0235966 C24.3517311,27.4301849 24.0613109,27.7786891 23.7708908,28.0691092 C22.0864538,29.8116303 20.4020168,31.4960672 18.6594958,33.1805042 C16.5103866,35.2134454 14.0127731,35.7942857 11.2247395,34.7487731 C8.43670588,33.7613445 6.75226891,31.7284034 6.34568067,28.7661176 C5.99717647,26.5008403 6.75226891,24.4678992 8.32053782,22.8415462 C10.0049748,21.1571092 11.6894118,19.4145882 13.3738487,17.7882353 C16.1618824,15.0582857 20.5762689,15.0582857 23.3062185,17.7301513 C24.0613109,18.4852437 24.119395,19.5307563 23.4804706,20.2277647 C22.7834622,20.9247731 21.7960336,20.9247731 20.9828571,20.2277647 C19.4145882,18.7756639 17.1493109,18.8337479 15.6391261,20.3439328 C14.0127731,21.9702857 12.3864202,23.5966387 10.7600672,25.2229916 C9.19179832,26.7912605 9.24988235,29.1146218 10.8181513,30.6828908 C12.4445042,32.3092437 14.7097815,32.3673277 16.2780504,30.7990588 C17.5558992,29.5212101 18.8337479,28.3014454 20.0535126,27.0235966 C20.2277647,26.8493445 20.4020168,26.7912605 20.6343529,26.9074286 C21.8541176,27.2559328 23.0738824,27.3721008 24.3517311,27.1397647 C24.4678992,27.0235966 24.5259832,27.0235966 24.6421513,27.0235966 Z" ></path>
+        >
+            <path d="M16.9169748,14.4193613 C17.207395,14.0708571 17.4978151,13.6642689 17.7882353,13.3738487 C19.4145882,11.6894118 21.0990252,10.0049748 22.7834622,8.37862185 C24.9325714,6.34568067 27.4301849,5.7067563 30.2182185,6.69418487 C33.0062521,7.68161345 34.7487731,9.77263866 35.1553613,12.7349244 C35.4457815,15.0002017 34.7487731,17.0331429 33.1805042,18.6594958 C31.4960672,20.3439328 29.8116303,22.0864538 28.1271933,23.7128067 C25.3391597,26.4427563 20.808605,26.3846723 18.0786555,23.6547227 C17.265479,22.8415462 17.4397311,21.5056134 18.4271597,20.9247731 C19.1241681,20.5181849 19.8792605,20.6343529 20.5181849,21.2151933 C21.6798655,22.3187899 23.0738824,22.6092101 24.5840672,21.9702857 C25.0487395,21.7960336 25.4553277,21.5056134 25.8038319,21.1571092 C27.4882689,19.5307563 29.1146218,17.9044034 30.7409748,16.2199664 C32.3092437,14.6516975 32.2511597,12.3283361 30.6248067,10.7600672 C29.0565378,9.19179832 26.7331765,9.13371429 25.1649076,10.7019832 C23.8870588,11.9798319 22.6092101,13.1995966 21.3894454,14.4774454 C21.2151933,14.6516975 21.0990252,14.7097815 20.8666891,14.5936134 C19.5888403,14.3612773 18.2529076,14.2451092 16.9169748,14.4193613 Z" />
+            <path d="M24.6421513,27.0235966 C24.3517311,27.4301849 24.0613109,27.7786891 23.7708908,28.0691092 C22.0864538,29.8116303 20.4020168,31.4960672 18.6594958,33.1805042 C16.5103866,35.2134454 14.0127731,35.7942857 11.2247395,34.7487731 C8.43670588,33.7613445 6.75226891,31.7284034 6.34568067,28.7661176 C5.99717647,26.5008403 6.75226891,24.4678992 8.32053782,22.8415462 C10.0049748,21.1571092 11.6894118,19.4145882 13.3738487,17.7882353 C16.1618824,15.0582857 20.5762689,15.0582857 23.3062185,17.7301513 C24.0613109,18.4852437 24.119395,19.5307563 23.4804706,20.2277647 C22.7834622,20.9247731 21.7960336,20.9247731 20.9828571,20.2277647 C19.4145882,18.7756639 17.1493109,18.8337479 15.6391261,20.3439328 C14.0127731,21.9702857 12.3864202,23.5966387 10.7600672,25.2229916 C9.19179832,26.7912605 9.24988235,29.1146218 10.8181513,30.6828908 C12.4445042,32.3092437 14.7097815,32.3673277 16.2780504,30.7990588 C17.5558992,29.5212101 18.8337479,28.3014454 20.0535126,27.0235966 C20.2277647,26.8493445 20.4020168,26.7912605 20.6343529,26.9074286 C21.8541176,27.2559328 23.0738824,27.3721008 24.3517311,27.1397647 C24.4678992,27.0235966 24.5259832,27.0235966 24.6421513,27.0235966 Z" />
         </SvgIcon>
-    )
+    );
 };
 
-export default LinkIcon
+export default LinkIcon;

src/icons/VolumeIcon.js

 import React from 'react';
 import { SvgIcon } from 'material-ui';
-import { marg } from '../styles';
 
@@ -11,4 +10,2 @@ const VolumeIcon = ({ size = 24, ...rest }) => {
                 width: size,
-                ...marg(rest),
-                ...rest.style
             }}
@@ -15,0 +12,0 @@ >

src/Identity.js

@@ -1,14 +0,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { marg } from './styles';
-import P from './P';
-import Title from './Title';
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import Element from "./Element";
 
+// Each key of the returned object will be available in the prop "classes" below.
+const styles = theme => ({
+    wrapper: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+    },
+    text: {
+        marginBottom: 2,
+    },
+    img: {
+        borderRadius: "999px",
+        overflow: "hidden",
+    },
+    img__sm: {
+        ...theme.whitespace.mr2,
+    },
+    img__lg: {
+        ...theme.whitespace.mr3,
+    },
+});
+
 /**
-* Identity is used on a card or view to provide context to the content. A resource for example, would have the resource name as the primary text and useful meta as the secondary text, like the date the resource was created or a quick summary.
-
-An Identity is located at the top left of a card or view. A small Identity is used on cards and a large Identity or small Identity can be used on views.
- */
-const Identity = (props) => {
+ * Identity is used on a card or view to provide context to the content. A resource for example, would have the resource name as the primary text and useful meta as the secondary text, like the date the resource was created or a quick summary.
+ *
+ * An Identity is located at the top left of a card or view. A small Identity is used on cards and a large Identity or small Identity can be used on views.
+ **/
+const Identity = props => {
     const {
+        classes,
+        className,
         lg,
@@ -18,51 +42,45 @@ image,
         secondaryText,
+        ...rest
     } = props;
 
+    // Set Image size
     const imageSize = lg ? 60 : 40;
-    const renderImage = React.cloneElement(
-        image, { size: imageSize });
+    const renderImage = React.cloneElement(image, {
+        size: imageSize,
+    });
 
-    const margSize = lg ? 3 : 2;
-    const imgMarg = marg({ mr: margSize });
+    // Define wrapper classes
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-Identity",
+        classes.wrapper
+    );
 
-    const style = {
-        wrapper: {
-            position: "relative",
-            display: "flex",
-            alignItems: "center",
-            ...marg(props),
-        },
-        img: {
-            borderRadius: "999px",
-            overflow: "hidden",
-            ...imgMarg,
-        },
-    };
+    // Define Image classes
+    const imgClasses = classnames(
+        "CY-Identity-img",
+        classes.img,
+        { [classes.img__sm]: !lg },
+        { [classes.img__lg]: lg }
+    );
 
     return (
-        <div style={ style.wrapper }>
-            <div style={ style.img }>
-                { renderImage }
+        <Element {...rest} className={wrapperClasses}>
+            <div className={imgClasses}>{renderImage}</div>
+            <div className="CY-Identity-textGroup">
+                <Element
+                    className={`CY-Identity-text ${classes.text}`}
+                    typography={lg ? "title" : "body2"}
+                >
+                    {primaryText}
+                </Element>
+                <Element
+                    className={`CY-Identity-subtext ${classes.text}`}
+                    typography={lg ? "subheading" : "caption"}
+                >
+                    {secondaryText}
+                </Element>
             </div>
-            <div>
-                <div>
-                    <Title
-                        m={0}
-                        title={ lg }
-                        body2={ !lg }
-                    >
-                        { primaryText }
-                    </Title>
-                    <P
-                        m={0}
-                        subheading={ lg }
-                        caption={ !lg }
-                        lineHeight="1.15"
-                    >
-                        { secondaryText }
-                    </P>
-                </div>
-            </div>
-        </div>
-    )
+        </Element>
+    );
 };
@@ -91,2 +109,2 @@
 
-export default Identity
+export default withTheme(injectSheet(styles)(Identity));

src/index.js

@@ -9,6 +9,4 @@ export { default as Pill } from './Pill';
 export { default as ProgressAvatar } from './ProgressAvatar';
-export { default as Div } from './Div';
 export { default as Section } from './Section';
 export { default as P } from './P';
-export { default as Title } from './Title';
 export { default as SubHeader } from './SubHeader';
@@ -18,7 +16,9 @@ export { default as ButtonMenu } from './ButtonMenu';
 export { default as SearchBar } from './SearchBar';
-export { default as FlatButtonConfirm } from './FlatButtonConfirm';
+//export { default as FlatButtonConfirm } from './FlatButtonConfirm';
 export { default as Identity } from './Identity';
-export { default as SkeletonList } from './SkeletonList';
+ export { default as SkeletonList } from './SkeletonList';
 export { default as Tooltip } from './Tooltip';
-export { default as FAB } from './FAB';
+export { default as FloatingActionButton } from './FloatingActionButton';
+export { default as FloatingActionButtonAction } from './FloatingActionButtonAction';
+export { default as FloatingActionButtonActions } from './FloatingActionButtonActions';
 export { default as ListCard } from './ListCard';
@@ -31,5 +31,7 @@ export { default as ListCardHeader } from './ListCardHeader';
 export { default as ListCardDetail } from './ListCardDetail';
-export { default as CheckableAvatar } from './CheckableAvatar';
+export { default as Checkable } from './Checkable';
 export { default as MDBlock } from './MDBlock';
 export { default as SummaryText } from './SummaryText';
 export { default as Element } from './Element';
+export { default as Paper} from './Paper';
+export { default as BarGraph } from './BarGraph';

src/InfoBlock.js

 import React from "react";
 import PropTypes from "prop-types";
+import classnames from "classnames";
 import InformationIcon from "material-ui/svg-icons/action/info";
 import WarningIcon from "material-ui/svg-icons/alert/warning";
-import P from "./P";
-import { marg } from "./styles";
+import Element from "./Element";
+import injectSheet from "react-jss";
 
+// Each key of the returned object will be available in the prop "classes" below.
+const styles = theme => {
+    return {
+        wrapper: {
+            display: "flex",
+        },
+        Icon: {
+            minWidth: "30px",
+            ...theme.whitespace.mr3,
+        },
+    };
+};
+
 /**
  * The InfoBlock is used everywhere information is displayed to the user that isn't part of an input or title. Usually at the top of a view to explain the purpose of said view. The icon helps isolate the information from the UI.
  */
-class InfoBlock extends React.Component {
-    static propTypes = {
-        /**
-         * The information text that will be displayed.
-         */
-        text: PropTypes.string,
-        /**
-         * Show the warning icon over the default info icon
-         */
-        warning: PropTypes.bool,
-    };
+const InfoBlock = ({
+    className,
+    warning,
+    classes,
+    text,
+    ...rest
+}) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-Infoblock",
+        classes.wrapper
+    );
 
-    static defaultProps = {
-        warning: false,
-    };
+    const icon = () => {
+        const iconClasses = `CY-InfoBlock-icon ${classes.Icon}`;
 
-    icon = () => {
-        const { warning } = this.props;
         if (warning) {
-            return (
-                <WarningIcon
-                    style={marg({ mr: 3})}
-                />
-            )
+            return <WarningIcon className={iconClasses} />;
         }
-        return (
-            <InformationIcon
-                style={marg({ mr: 3})}
-            />
-        )
+        return <InformationIcon className={iconClasses} />;
     };
 
-    render() {
-        return (
-            <div
-                style={{
-                    display: "flex",
-                    ...marg(this.props)
-                }}
-            >
-                { this.icon() }
-                <P mb={ 0 }>
-                    { this.props.text }
-                </P>
-            </div>
-        )
-    }
-}
+    return (
+        <Element {...rest} className={wrapperClasses}>
+            {icon()}
+            <div className="CY-InfoBlock-text">{text}</div>
+        </Element>
+    );
+};
+``;
 
 InfoBlock.displayName = "InfoBlock";
+InfoBlock.propTypes = {
+    /**
+     * The information text that will be displayed.
+     */
+    text: PropTypes.node,
+    /**
+     * Show the warning icon over the default info icon
+     */
+    warning: PropTypes.bool,
+};
 
-export default InfoBlock
+InfoBlock.defaultProps = {
+    warning: false,
+};
+
+export default injectSheet(styles)(InfoBlock);

src/ListCard.js

 import React from "react";
 import PropTypes from "prop-types";
-import { createStyleSheet } from "jss-theme-reactor";
-import getStyleManager from "./styles/getStyleManager";
-import { styles, pad, marg } from "./styles";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
 import Element from "./Element";
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-const styleSheet = () =>
-    createStyleSheet("ListCard", theme => {
-        return {
-            ListCard: {
-                position: "relative",
-                transition: "all ease .1s",
-                background: "white",
-                ...styles.boxShadow.li
-            },
-            isExpanded: {
-                margin: "40px -20px",
-                borderLeft: "solid 5px #0971ab",
-                ...styles.boxShadow.lg
-            }
-        };
-    });
+const styles = theme => {
+    return {
+        wrapper: {
+            position: "relative",
+            transition: "all ease .1s",
+            background: "white",
+            ...theme.elevation.elevation2,
+        },
+        wrapper__isExpanded: {
+            margin: "32px -16px",
+            ...theme.elevation.elevation6,
+        },
+    };
+};
+
 /**
@@ -32,20 +29,13 @@ * ListCard and it's corresponding child components are used for listing entities that require more information and actions than MUI's `ListItem`.
 const ListCard = props => {
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({}).render(styleSheet(props));
+    const { classes, className, isExpanded, ...rest } = props;
 
-    const { white = {}, isExpanded, className = "", style, ...rest } = props;
+    const ListCardClasses = classnames(
+        { [className]: className },
+        "CY-ListCard",
+        classes.wrapper,
+        { [classes.wrapper__isExpanded]: isExpanded }
+    );
 
-    const computedStyle = {
-        ...pad(white),
-        ...marg(white)
-    };
-
     return (
-        <Element
-            {...rest}
-            className={`${classes.ListCard} ${
-                isExpanded ? classes.isExpanded : null
-            } ${className}`}
-            style={{...computedStyle, ...style}}
-        >
+        <Element {...rest} className={ListCardClasses}>
             {props.children}
@@ -61,5 +51,5 @@ </Element>
      */
-    children: PropTypes.node
+    children: PropTypes.node,
 };
 
-export default ListCard;
+export default withTheme(injectSheet(styles)(ListCard));

src/ListCardActions.js

@@ -1,36 +0,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
-import Element from "./Element";
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import ActionGroup from "./ActionGroup";
 
-// Define static styles here.
-// Each key of the returned object will be available as a className below.
-const styleSheet = () => (
-    createStyleSheet('ListCardActions',
-        theme => ({
-            wrapper: {
-            },
-        }
-    ))
-);
 /**
  * ListCardActions is the area on ListCard on the right where actions live.
  */
-const ListCardActions = ({children, ...rest}) => {
-
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({})
-    .render(styleSheet());
-
-    return(
-        <Element
-            { ...rest }
-            display="flex"
+const ListCardActions = ({
+    classes,
+    className,
+    children,
+    ...rest
+}) => {
+    const ActionGroupClasses = classnames(
+        { [className]: className },
+        "CY-ListCardActions"
+    );
+    return (
+        <ActionGroup
+            {...rest}
             stopPropagation
-            className={ classes.wrapper }
+            className={ActionGroupClasses}
         >
             {children}
-        </Element>
-    )
+        </ActionGroup>
+    );
 };
@@ -45,5 +37,5 @@ ListCardActions.displayName = "ListCardActions";
      */
-    children: PropTypes.node
+    children: PropTypes.node,
 };
 
-export default ListCardActions
+export default ListCardActions;

src/ListCardDetail.js

@@ -1,21 +0,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
-
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
 import Element from "./Element";
 import Hr from "./Hr";
 
-// Define static styles here.
-// Each key of the returned object will be available as a className below.
-const styleSheet = () => (
-    createStyleSheet('ListCardDetail',
-        theme => ({
-            content: {
-                padding: "0 20px 20px"
-            }
-        }
-    ))
-);
-
 /**
@@ -28,16 +14,19 @@ * ListCardDetail is the area below ListCardHeader where the details on the ListCard lives.
  */
-const ListCardDetail = ({children, ...rest}) => {
+const ListCardDetail = ({ children, className, ...rest }) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-ListCardDetail"
+    );
 
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({})
-    .render(styleSheet());
-
-    return(
-        <Element { ...rest }>
-            <Hr style={{ margin: "0 0 20px"}}/>
-            <div className={ classes.content }>
-                { children }
-            </div>
+    return (
+        <Element className={wrapperClasses} {...rest}>
+            <Hr className="CY-ListCardDetail-Hr" whitespace="mb3" />
+            <Element
+                className="CY-ListCardDetail-content"
+                whitespace="p3"
+            >
+                {children}
+            </Element>
         </Element>
-    )
+    );
 };
@@ -50,5 +39,5 @@ ListCardDetail.displayName = "ListCardDetail";
      */
-    children: PropTypes.node
+    children: PropTypes.node,
 };
 
-export default ListCardDetail
+export default ListCardDetail;

src/ListCardHeader.js

@@ -1,5 +0,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import classnames from "classnames";
 import Element from "./Element";
@@ -9,19 +9,20 @@
 // Each key of the returned object will be available as a className below.
-const styleSheet = () => (
-    createStyleSheet('ListCardHeader',
-        theme => ({
-            wrapper: {
-                display: "flex",
-                flexWrap: "nowrap",
-                alignContent: "stretch",
-                justifyContent: "space-between",
-                minHeight: "65px",
-                alignItems: "center",
-            },
-            clickable: {
-                cursor: "pointer",
-            }
-        }
-    ))
-);
+const styles = theme => ({
+    wrapper: {
+        display: "flex",
+        flexWrap: "nowrap",
+        alignContent: "stretch",
+        justifyContent: "space-between",
+        minHeight: "65px",
+        alignItems: "center",
+        "&:focus": {
+            outline: "transparent",
+            borderLeft: `solid 5px ${theme.palette.primary1Color}`,
+        },
+    },
+    wrapper__clickable: {
+        cursor: "pointer",
+    },
+});
+
 /**
@@ -32,19 +33,21 @@ * The ListCardHeader is the area the appears at the top of the ListCard and contains the ListCards identity and actions.
  */
-const ListCardHeader = ({children, onClick, ...rest}) => {
-
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({})
-    .render(styleSheet());
-
-    return(
-        <Element
-            { ...rest }
-            onClick={onClick}
-            display="flex"
-            whiteSpace={{ p:2 }}
-            className={ `${classes.wrapper} ${ onClick ? classes.clickable : null}` }
-        >
-            { children }
+const ListCardHeader = ({
+    classes,
+    className,
+    children,
+    ...rest
+}) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-ListCardHeader",
+        classes.wrapper,
+        {
+            [classes.wrapper__clickable]: rest.onClick,
+        }
+    );
+    return (
+        <Element {...rest} className={wrapperClasses} whiteSpace="p2">
+            {children}
         </Element>
-    )
+    );
 };
@@ -59,5 +62,5 @@ ListCardHeader.displayName = "ListCardHeader";
      */
-    children: PropTypes.node
+    children: PropTypes.node,
 };
 
-export default ListCardHeader
+export default injectSheet(styles)(ListCardHeader);

src/ListCardIdentity.js

@@ -1,5 +0,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import classnames from "classnames";
 import Element from "./Element";
@@ -9,30 +9,33 @@
 // Each key of the returned object will be available as a className below.
-const styleSheet = () => (
-    createStyleSheet('ListCardIdentity',
-        theme => ({
-            wrapper: {
-                alignItems: "center",
-                minWidth: "300px",
-            }
-        }
-    ))
-);
+const styles = {
+    wrapper: {
+        display: "flex",
+        alignItems: "center",
+        minWidth: "300px",
+    },
+};
+
 /**
  * ListCardIdentity is the space on the left side within ListCardHeader that contains the ListCard's identity.
  */
-const ListCardIdentity = ({ children, ...rest }) => {
-
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({})
-    .render(styleSheet());
-
+const ListCardIdentity = ({
+    classes,
+    className,
+    children,
+    ...rest
+}) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-ListCardIdentity",
+        classes.wrapper
+    );
     return (
         <Element
-            { ...rest }
-            display="flex"
-            className={ classes.wrapper }
+            {...rest}
+            whitespace="pl2"
+            className={wrapperClasses}
         >
-            { children }
+            {children}
         </Element>
-    )
+    );
 };
@@ -47,5 +50,5 @@ ListCardIdentity.displayName = "ListCardIdentity";
      */
-    children: PropTypes.node
+    children: PropTypes.node,
 };
 
-export default ListCardIdentity
+export default injectSheet(styles)(ListCardIdentity);

src/ListCardSummary.js

@@ -1,42 +0,40 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
-import styles from "./styles/styles";
-import Element from "./Element"
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import injectSheet, { withTheme } from "react-jss";
+import Element from "./Element";
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-const styleSheet = () => (
-    createStyleSheet('ListCardSummary',
-        theme => ({
-            wrapper: {
-                width: "0%",
-                marginRight: "20px",
-                flex: "1",
-                ...styles.t.body1,
-            }
-        }
-    ))
-);
-/**
- * ListCardSummary is the area in ListCardHeader between ListCardIdentity and ListCardActions. Used to display a short summary or overview information at a birds eye view. Works well with SummaryText for truncating / previewing large blocks of text into a single line. For to display more information make the card expandable and render the additional information in ListCardDetail.
+const styles = theme => ({
+    wrapper: {
+        width: "0%",
+        flex: "1",
+    },
+});
+
+/** ListCardSummary is the area in ListCardHeader between ListCardIdentity and ListCardActions. Used to display a short summary or overview information at a birds eye view. Works well with SummaryText for truncating / previewing large blocks of text into a single line. For to display more information make the card expandable and render the additional information in ListCardDetail.
  *
  * For a more "automagic" solution or to see an example of how ListCardSummary and ListCardDetail work together on expandable cards see `MediaCard`.
  */
-const ListCardSummary = ({children, ...rest}) => {
-
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({})
-    .render(styleSheet());
-
-    return(
+const ListCardSummary = ({
+    classes,
+    className,
+    children,
+    ...rest
+}) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-ListCardSummery",
+        classes.wrapper
+    );
+    return (
         <Element
-            { ...rest }
-            className={ classes.wrapper }
+            {...rest}
+            whitespace="mr3"
+            className={wrapperClasses}
         >
-            { children }
+            {children}
         </Element>
-    )
-}
+    );
+};
 
@@ -51,5 +49,5 @@ ListCardSummary.displayName = "ListCardSummary";
      */
-    children: PropTypes.node
+    children: PropTypes.node,
 };
 
-export default ListCardSummary
+export default withTheme(injectSheet(styles)(ListCardSummary));

src/MDBlock.js

@@ -16,3 +16,2 @@ import React, {Component} from 'react';
         style: PropTypes.object,
-
     };
@@ -19,0 +18,0 @@

src/MediaCard.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import VerticalMenu from './VerticalMenu';
 import Identity from './Identity';
-import CheckableAvatar from './CheckableAvatar';
+import CheckableAvatar from './Checkable';
 import ListCard from './ListCard';
@@ -38,15 +39,19 @@ import ListCardHeader from './ListCardHeader';
         /**
-         * The space between the Identity and Actions. Only shown when card is collapsed. Will render any components or string passed.
+         * The space between the Identity and Actions.
+         * Only shown when card is collapsed. Will render any components or string passed.
          */
         summary: PropTypes.node,
         /**
-         * The large space below the card header. Only shown when card is expanded. Will render any components or string passed.
+         * The large space below the card header.
+         * Only shown when card is expanded. Will render any components or string passed.
          */
         detail: PropTypes.node,
         /**
-         * The exposed actions that appear to right of card on hover or when open. Expects an array of components. Best used with MUI IconButtons
+         * The exposed actions that appear to right of card on hover or when open.
+         * Expects an array of components. Best used with MUI IconButtons
          */
         quickLinks: PropTypes.array,
         /**
-         * Works with quicklinks but is visible when quickLinks is not. By having the same button in both props causes said button to always show while the others only show when card is hovered or active.
+         * Works with quicklinks but is visible when quickLinks is not.
+         * By having the same button in both props causes said button to always show while the others only show when card is hovered or active.
          */
@@ -88,3 +93,3 @@ activeQuickLinks: PropTypes.array,
 
-    onCardEnter = () => {
+    onCardEnter = e => {
         this.setState({
@@ -115,3 +120,4 @@ cardIsHovered: true,
         return quickLinks ? (
-            <ActionGroup hide={ isHidden }>
+            <ActionGroup hideReadable={ isHidden }
+            >
                 { quickLinks.map( (link, i) => React.cloneElement(link, {key: i}) ) }
@@ -127,3 +133,3 @@ </ActionGroup>
         return activeQuickLinks ? (
-            <ActionGroup hide={ isHidden }>
+            <ActionGroup  hide={ isHidden }>
                 { activeQuickLinks.map( (link, i) => React.cloneElement(link, {key: i}) ) }
@@ -148,2 +154,3 @@ </ActionGroup>
         const {
+            className,
             title,
@@ -160,7 +167,14 @@ image,
         } = this.props;
+
+        const wrapperClasses = classnames(
+            {[className]: className},
+            "CY-MediaCard"
+        );
+
         const { cardIsHovered } = this.state;
-        const showCheck = onBatchClick && ( batchMode || cardIsHovered );
+        const showCheck = onBatchClick &&  batchMode || cardIsHovered || isExpanded;
 
         return (
             <ListCard { ...rest }
+                className={wrapperClasses}
                 isExpanded={ isExpanded }
@@ -172,2 +186,4 @@ >
                     onClick = { this.handleOnExpand }
+                    onFocus={ this.onCardEnter }
+                    onBlur={ this.onCardLeave}
                 >
@@ -178,6 +194,10 @@ <ListCardIdentity>
                                 <CheckableAvatar
-                                    image={image}
+                                    children={image}
                                     isCheckable={ showCheck }
-                                    onCheck={ this.onCheck }
-                                    checked={ checked }
+                                    onFocus={ this.onCardEnter }
+                                    onBlur={ this.onCardLeave}
+                                    checkboxProps={{
+                                        onCheck: this.onCheck,
+                                        checked: checked
+                                    }}
                                 />
@@ -184,0 +204,0 @@ }

src/MediaCardGroup.js

@@ -1,11 +0,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Scroll from 'react-scroll';
-import Stagger from 'react-css-stagger';
-import { marg } from './styles';
+import React from "react";
+import classnames from "classnames";
+import PropTypes from "prop-types";
+import Scroll from "react-scroll";
+import Stagger from "react-css-stagger";
 
 const AnimationStyle = () => (
     <style>
-    {`
-        .MediaCard__animation-enter {
+        {`
+        .CY-MediaCard__animation-enter {
             opacity: 0;
@@ -16,3 +16,3 @@ transform: translate(0,10px);
 
-        .MediaCard__animation-enter-active {
+        .CY-MediaCard__animation-enter-active {
             opacity: 1;
@@ -30,3 +30,3 @@ transform: translate(0,0);
  * MediaCardGroup is a wrapper for MediaCards that helps to manage opening and closing, scroll animation, and stagger animation of MediaCards as children.
-*/
+ */
 class MediaCardGroup extends React.Component {
@@ -37,9 +37,9 @@ static displayName = "MediaCardGroup";
         /**
-        * If true the stagger animation is enabled
-        */
+         * If true the stagger animation is enabled
+         */
         stagger: PropTypes.bool,
         /**
-        * If true auto scrolling when card is expaned is disabled
-        */
-        noScroll: PropTypes.bool
+         * If true auto scrolling when card is expaned is disabled
+         */
+        noScroll: PropTypes.bool,
     };
@@ -53,63 +53,71 @@
     state = {
-        expanded: null
+        expanded: null,
     };
 
     componentDidMount() {
-        document.addEventListener('click', this.handleDocumentClick, false);
+        document.addEventListener(
+            "click",
+            this.handleDocumentClick,
+            false
+        );
     }
 
     componentWillUnmount() {
-        document.removeEventListener('click', this.handleDocumentClick, false);
+        document.removeEventListener(
+            "click",
+            this.handleDocumentClick,
+            false
+        );
     }
 
-    handleDocumentClick = (e) => {
+    handleDocumentClick = e => {
         let cards = this.refs.root;
         if (!cards.contains(e.target)) {
             this.setState({ expanded: null });
-            }
+        }
     };
 
-    onExpand = (el) => {
-        let scrollAmount = this.state.expanded ?
-          -40 : 40;
-        if ( !this.props.noScroll ) {
-            setTimeout(() => {scroll.scrollMore(scrollAmount, {
-                duration: 60,
-            })}, 1);
+    onExpand = el => {
+        let scrollAmount = this.state.expanded ? -40 : 40;
+        if (!this.props.noScroll) {
+            setTimeout(() => {
+                scroll.scrollMore(scrollAmount, {
+                    duration: 60,
+                });
+            }, 1);
         }
-        let expanded = this.state.expanded === el ?
-            null : el;
+        let expanded = this.state.expanded === el ? null : el;
         this.setState({
-            expanded
-        })
+            expanded,
+        });
     };
 
     render() {
-        const { stagger } = this.props;
-
-        const children = React.Children.map(
-            this.props.children,
-            (child) => React.cloneElement(child, {
-                    onExpand: this.onExpand.bind(this, child),
-                    isExpanded: this.state.expanded === child,
-                }
-            )
+        const { className, stagger, children } = this.props;
+        const { expanded } = this.state;
+        const wrapperClasses = classnames(
+            { [className]: className },
+            "CY-MediaCardGroup"
         );
+        const renderChildren = React.Children.map(children, child =>
+            React.cloneElement(child, {
+                onExpand: this.onExpand.bind(this, child),
+                isExpanded: expanded
+                    ? expanded.key === child.key
+                    : false,
+            })
+        );
 
         const renderList = stagger ? (
-                <Stagger
-                    transition="MediaCard__animation"
-                    delay={70}
-                >
-                    { children }
-                </Stagger>
-        ) : children;
+            <Stagger transition="CY-MediaCard__animation" delay={70}>
+                {children}
+            </Stagger>
+        ) : (
+            renderChildren
+        );
 
         return (
-            <div
-                style={ marg(this.props) }
-                ref="root"
-            >
-                { renderList }
-                <AnimationStyle/>
+            <div ref="root" className={wrapperClasses}>
+                {renderList}
+                <AnimationStyle />
             </div>
@@ -120,5 +128,2 @@ );
 
-
-
 export default MediaCardGroup;
-

src/MeterGauge.js

@@ -1,11 +0,40 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import muiThemeable from 'material-ui/styles/muiThemeable';
-import { variables, styles, marg } from './styles';
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from 'classnames';
+import classNames from "classnames";
+import injectSheet, { withTheme } from "react-jss";
+import Element from "./Element";
+import BarGraph from "./BarGraph";
 
-const v = variables;
+/**
+ * A MeterGauge is used to depict a percentage of a known quantity. A common use in Troposphere is to show how much of a total resource a user HAS consumed or WILL consume. In the case that a MeterGauge is showing how much of a known quantity a user WILL consume, in a form for example, an after value can be passed in addition to the start value.
+ */
 
-/**
-* A MeterGauge is used to depict a percentage of a known quantity. A common use in Troposphere is to show how much of a total resource a user HAS consumed or WILL consume. In the case that a MeterGauge is showing how much of a known quantity a user WILL consume, in a form for example, an after value can be passed in addition to the start value.
-*/
+const styles = theme => ({
+    wrapper: {
+        height: "70px",
+        marginTop: 0,
+    },
+    data: {
+        margin: 0,
+    },
+    data__compact: {
+        maxWidth: "60px",
+    },
+    dataText: {
+        ...theme.typography.caption,
+        ...theme.whitespace.mb1
+    },
+    dataText__alert: {
+        color: theme.palette.danger,
+    },
+    dataText__compact: {
+        textAlign: "center",
+    },
+    alertMessage: {
+        ...theme.typography.body1,
+        color: theme.palette.danger,
+    },
+});
+
 class MeterGauge extends React.Component {
@@ -46,20 +75,11 @@ static displayName = "MeterGauge";
     isOver = () => {
-        const {
-            startValue,
-            afterValue,
-        } = this.props;
-        return (
-            startValue + afterValue >= 100
-        );
+        const { startValue, afterValue } = this.props;
+        return startValue + afterValue >= 100;
     };
 
     alert = () => {
-        const {
-            alertMessage
-        } = this.props;
+        const { classes, alertMessage } = this.props;
 
         return this.isOver() ? (
-            <div style={ this.style().alertMessage } >
-                { alertMessage }
-            </div>
+            <div className={classes.alertMessage}>{alertMessage}</div>
         ) : null;
@@ -69,95 +89,64 @@ };
     render() {
-        const style = this.style();
-
-        return (
-            <div style={ style.wrapper }>
-                <dl>
-                    <dt style={ styles.t.label } >
-                        {this.props.label}
-                    </dt>
-
-                    <dd style={{margin: "0px"}}>
-                        <div style={ style.data }>
-                            {this.props.data}
-                        </div>
-                        <div style={ style.bar }>
-                            <div style={ style.barBefore }/>
-                            <div style={ style.barAfter }/>
-                        </div>
-                        { this.alert() }
-                    </dd>
-                </dl>
-            </div>
-        );
-    }
-
-    style = () => {
-        let {
+        const {
+            classes,
+            className,
+            theme: { palette: { success, danger } },
+            hideLabel,
             startValue,
             afterValue,
-            muiTheme
+            compact,
+            label,
+            data,
+            ...rest,
         } = this.props;
 
-        const {
-            success = "green",
-            danger = "red"
-        } = muiTheme.palette;
+        const wrapperClasses = classnames(
+            {[className]: className},
+            "CY-MeterGauge",
+            classes.wrapper
+        )
+        const dataClasses = classNames(
+            "CY-MeterGauge-data",
+            classes.data,
+            { [classes.data__compact]: compact, }
+        );
+        const dataTextClasses = classNames(
+            "CY-MeterGauge-dataText",
+            classes.dataText,
+            { [classes.dataText__compact]: compact },
+            { [classes.dataText__alert]: this.isOver() }
+        );
 
-        const startColor = this.isOver() ?
-            danger : success;
-
-        const dataText = this.isOver() ?
-            danger : "#333333";
-
-        // Start styles
-        const wrapper = {
-            ...marg(this.props),
-            height: "70px"
-        }
-
-        const data = {
-            ...styles.t.caption,
-            color: dataText,
-            fontSize: "13px",
-            margin: "0px 0px 3px",
-        }
-        const bar = {
-            display: "flex",
-            background: v.c.grey.xLight
-        }
-        const barBefore = {
-            transition: "flex-basis ease .3s",
-            height:"10px",
-            float: "left",
-            flexShrink: "0",
-            maxWidth: "100%",
-            flexBasis: startValue + "%",
-            background: startColor
-        }
-        const barAfter = {
-            transition: "flex-basis ease .3s",
-            height:"10px",
-            float: "left",
-            flexBasis: afterValue + "%",
-            background: startColor,
-            opacity:".5"
-        }
-        const alertMessage = {
-            marginTop: "5px",
-            fontSize: "12px",
-            color: danger,
-        }
-
-        // Combine Styles
-        return {
-            wrapper,
-            data,
-            bar,
-            barBefore,
-            barAfter,
-            alertMessage
-        }
-    };
+        const startColor = this.isOver() ? danger : success;
+        return (
+            <Element { ...rest }
+                root="dl"
+                className={wrapperClasses}
+            >
+                <Element
+                    root="dt"
+                    className="CY-MeterGauge-dataTitle"
+                    hide={hideLabel}
+                    typography="label"
+                    whitespace="mb1"
+                >
+                    { label }
+                </Element>
+                <dd className={dataClasses}>
+                    <div className={dataTextClasses}>
+                        { data }
+                    </div>
+                    <BarGraph
+                        startValue={startValue}
+                        afterValue={afterValue}
+                        barColor={startColor}
+                        compact={compact}
+                    />
+                </dd>
+                {this.alert()}
+            </Element>
+        );
+    }
 }
 
-export default muiThemeable()(MeterGauge);
+export default withTheme(injectSheet(styles)(MeterGauge));

src/P.js

@@ -1,50 +0,39 @@
-import React from 'react';
-import { styles, marg } from './styles';
+import React from "react";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import Element from "./Element";
 
-export default class extends React.Component {
+const styles = theme => ({
+    wrapper: {
+        maxWidth: "600px",
+        lineHeight: "24px",
+        margin: 0,
+        ...theme.whitespace.mb3,
+    },
+});
+
+class P extends React.Component {
     /**
      * P is a typography component for rendering a paragraph with the proper styles.
      */
-    static displayName = "P"
+    static displayName = "P";
     render() {
+        const { classes, className } = this.props;
+        const wrapperClasses = classnames(
+            { [className]: className },
+            "CY-P",
+            classes.wrapper
+        );
         return (
-            <p style={{
-                    ...this.style(),
-                    ...this.props.style,
-                }}
+            <Element
+                root="p"
+                whitespace="mb3"
+                className={wrapperClasses}
             >
-                { this.props.children }
-            </p>
-        )
+                {this.props.children}
+            </Element>
+        );
     }
+}
 
-    style = () => {
-        const { lineHeight = "1.7" } = this.props;
-        let textStyle = styles.t.body1;
-
-        if ( this.props.body1 ) {
-            textStyle = styles.t.body1;
-        }
-
-        if ( this.props.body2 ) {
-            textStyle = styles.t.body2;
-        }
-
-        if ( this.props.subheading ) {
-            textStyle = styles.t.subheading;
-        }
-
-        if ( this.props.caption ) {
-            textStyle = styles.t.caption;
-        }
-
-        return {
-            ...textStyle,
-            maxWidth: "600px",
-            lineHeight,
-            margin: "0px",
-            marginBottom: "34px",
-            ...marg(this.props),
-        }
-    };
-}
+export default withTheme(injectSheet(styles)(P));

src/Pill.js

@@ -1,82 +0,97 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { marg, variables } from './styles';
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import Element from "./Element";
 
+const styles = theme => ({
+    wrapper: {
+        display: "inline-block",
+        ...theme.whitespace.mr2,
+    },
+    innerWrapper: {
+        display: "flex",
+        alignItems: "center",
+    },
+    pillBody: {
+        display: "inline-block",
+        verticalAlign: "middle",
+        padding: "4px",
+        lineHeight: "74%",
+        fontSize: "12px",
+        borderRadius: "9999px",
+        color: "white",
+    },
+    icon: {
+        height: "24px",
+    },
+});
+
 /**
  * A Pill is used to indicate meta data like number of active users or if an item is featured or recommended. It is sort of like a badge but smaller to fit under a title or in the footer of a card.
  */
-export default class extends React.Component {
-    static displayName = "Pill";
+const Pill = ({
+    classes,
+    theme,
+    className,
+    children,
+    color,
+    icon,
+    ...rest
+}) => {
+    const { palette: { textColor } } = theme;
+    const iconColor = theme.palette[color] || color;
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-Pill",
+        classes.wrapper
+    );
+    const innerWrapperClasses = classnames(
+        "CY-Pill-innerWrapper",
+        classes.innerWrapper
+    );
+    const pillBodyClasses = classnames(
+        "CY-Pill-pillBody",
+        classes.pillBody
+    );
+    const pillIconClasses = classnames("CY-Pill-icon", classes.icon);
+    return (
+        <Element {...rest} root="span" className={wrapperClasses}>
+            <span className={innerWrapperClasses}>
+                <Element
+                    root="span"
+                    background={color || textColor}
+                    className={pillBodyClasses}
+                >
+                    {children}
+                </Element>
+                <span className={pillIconClasses}>
+                    {icon
+                        ? React.cloneElement(icon, {
+                              color: iconColor,
+                          })
+                        : null}
+                </span>
+            </span>
+        </Element>
+    );
+};
 
-    static propTypes = {
-        /**
-         *The background color.
-         */
-        color: PropTypes.string,
-        /**
-         *Displays an Icon, expects MUI or CY-UI icons.
-         */
-        icon: PropTypes.element,
-        /**
-         *The text that is displayed, can optionally pass an icon here and style if not MUI or CY-UI.
-         */
-        children: PropTypes.node,
-    };
+Pill.displayName = "Pill";
 
-    static defaultProps = {
-        color: variables.c.grey.xDark
-    };
+Pill.propTypes = {
+    /**
+     *The background color.
+     */
+    color: PropTypes.string,
+    /**
+     *Displays an Icon, expects MUI or CY-UI icons.
+     */
+    icon: PropTypes.element,
+    /**
+     *The text that is displayed, can optionally pass an icon here and style if not MUI or CY-UI.
+     */
+    children: PropTypes.node,
+};
 
-    Icon = () => {
-        const { icon, color } = this.props;
-        if (icon) {
-            return (
-                React.cloneElement(icon, {
-                    color: color,
-                    style: {
-                        width: "16px",
-                        height: "16px",
-                    }
-                })
-            )
-        }
-    };
-
-    render() {
-        const style = this.style();    
-        return (
-            <span style={ style.wrapper }>
-                <span style={ style.flex }>
-                    <span style={ style.pill }>
-                        { this.props.children }
-                    </span>
-                    { this.Icon() }
-                </span>
-            </span>
-        )
-    }
-
-    style = () => {
-        const { color } = this.props;
-        return {
-            wrapper: {
-                display: "inline-block",
-                ...marg({mr: 2})
-            },
-            flex: {
-                display: "flex",
-                alignItems: "center"
-            },
-            pill: {
-                display: "inline-block",
-                verticalAlign: "middle",
-                padding: "3px",
-                lineHeight: "74%",
-                fontSize: "8px",
-                borderRadius: "9999px",
-                color: "white",
-                background: color,
-            }
-        }
-    };
-}
+export default withTheme(injectSheet(styles)(Pill));

src/ProgressAvatar.js

@@ -1,7 +0,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import muiThemeable from 'material-ui/styles/muiThemeable';
-import { Avatar, CircularProgress } from 'material-ui';
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import { Avatar, CircularProgress } from "material-ui";
+import Element from "./Element";
 
-import Element from './Element';
+const styles = theme => ({
+    wrapper: {
+        position: "relative",
+    },
+    progress: {
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+    },
+    progress__complete: {
+        opacity: 0,
+    },
+    avatar__inProgressWithImg: {
+        opacity: 0.3,
+    },
+});
 
@@ -11,104 +28,110 @@ /**
  */
-class ProgressAvatar extends React.Component {
-    static displayName = "ProgressAvatar";
+const ProgressAvatar = ({
+    classes,
+    children,
+    className,
+    progressColor,
+    backgroundColor,
+    src,
+    icon,
+    size,
+    thickness,
+    percent,
+    name,
+    theme,
+    ...rest
+}) => {
+    const isInProgress = percent < 100;
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-ProgressAvatar",
+        classes.wrapper
+    );
+    const avatarClasses = classnames("CY-ProgressAvatar-avatar", {
+        [classes.avatar__inProgressWithImg]: src && isInProgress,
+    });
+    const progressClasses = classnames(
+        "CY-ProgressAvatar-progress",
+        classes.progress,
+        { [classes.progress__complete]: !isInProgress }
+    );
 
-    static propTypes = {
-        /**
-         * Optionally use an image source.
-         */
-        src: PropTypes.string,
-        /**
-         * Optionally use an Icon, expects MUI or CY-UI Icons.
-         */
-        icon: PropTypes.element,
-        /**
-         * The diameter of the Avatar.
-         */
-        size: PropTypes.number,
-        /**
-         * The thickness of the progress bar.
-         */
-        thickness: PropTypes.number,
-        /**
-         * The percentage of progress.
-         */
-        percent: PropTypes.number,
-    };
+    let { success = "green" } = theme.palette;
+    let padding = 0;
+    let avatarSize = size;
+    let value = 0;
+    let avatarColor = backgroundColor;
 
-    static defaultProps = {
-        size: 40,
-        thickness: 3,
-    };
+    if (isInProgress) {
+        value = percent;
+        avatarColor = "lightgrey";
+        avatarSize = size - thickness * 2;
+        padding = thickness;
+    }
 
-    render() {
-        let {
-            children,
-            progressColor,
-            backgroundColor,
-            src,
-            icon,
-            size,
-            thickness,
-            percent,
-            name,
-            muiTheme,
-            ...rest
-        } = this.props;
+    let strokeColor = progressColor || success;
 
-        let { success = "green" } = muiTheme.palette;
-        let opacity = 0;
-        let wrapperOpacity: 1;
-        let padding = 0;
-        let avatarSize = size;
-        let value = 0;
-        let avatarColor = backgroundColor;
+    return (
+        <Element
+            {...rest}
+            className={wrapperClasses}
+            display="inline-block"
+            style={{
+                padding,
+            }}
+        >
+            <div className={progressClasses}>
+                <CircularProgress
+                    className={progressClasses}
+                    mode="determinate"
+                    value={value}
+                    color={strokeColor}
+                    size={size}
+                    thickness={thickness}
+                />
+            </div>
+            <Avatar
+                className={avatarClasses}
+                name={name}
+                src={src}
+                icon={icon}
+                backgroundColor={avatarColor}
+                size={avatarSize}
+            >
+                {children}
+            </Avatar>
+        </Element>
+    );
+};
 
-        if ( percent < 100 ) {
-            value = percent;
-            opacity = 1;
-            wrapperOpacity = src ? .3 : 1;
-            avatarColor = "lightgrey"
-            avatarSize = size - (thickness * 2);
-            padding = thickness;
-        }
+ProgressAvatar.displayName = "ProgressAvatar";
 
-        let strokeColor = progressColor || success;
+ProgressAvatar.propTypes = {
+    /**
+     * Optionally use an image source.
+     */
+    src: PropTypes.string,
+    /**
+     * Optionally use an Icon, expects MUI or CY-UI Icons.
+     */
+    icon: PropTypes.element,
+    /**
+     * The diameter of the Avatar.
+     */
+    size: PropTypes.number,
+    /**
+     * The thickness of the progress bar.
+     */
+    thickness: PropTypes.number,
+    /**
+     * The percentage of progress.
+     */
+    percent: PropTypes.number,
+};
 
-        return (
-            <Element { ...rest }>
-                <div style = {{
-                        position: "relative",
-                        padding,
-                    }}
-                >
-                    <CircularProgress
-                        style = {{
-                            opacity,
-                            position: "absolute",
-                            top: "0px",
-                            left: "0px"
-                        }}
-                        mode = "determinate"
-                        value = { value }
-                        color = { strokeColor }
-                        size = { size }
-                        thickness = { thickness }
-                    />
-                    <Avatar
-                        style = {{ opacity: wrapperOpacity }}
-                        name = { name }
-                        color = "rgba(255,255,255,.7)"
-                        src = { src }
-                        icon = { icon }
-                        backgroundColor = { avatarColor }
-                        size = { avatarSize }
-                    >
-                        { children }
-                    </Avatar>
-                </div>
-            </Element>
-        );
-    }
-}
+ProgressAvatar.defaultProps = {
+    size: 40,
+    thickness: 3,
+};
 
-export default muiThemeable()(ProgressAvatar);
+export default withTheme(injectSheet(styles)(ProgressAvatar));

src/SearchBar.js

 import React from "react";
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
-import muiThemeable from "material-ui/styles/muiThemeable";
-
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import Element from "./Element";
 import { IconButton } from "material-ui";
-import SearchIcon from "material-ui/svg-icons/action/search"
-import CloseIcon from "material-ui/svg-icons/navigation/close"
-import { styles, pad, marg } from './styles';
+import SearchIcon from "material-ui/svg-icons/action/search";
+import CloseIcon from "material-ui/svg-icons/navigation/close";
 
+const styles = theme => ({
+    card: {
+        display: "flex",
+        alignItems: "center",
+        height: "40px",
+        background: "white",
+        position: "relative",
+        marginBottom: "20px",
+        transition: "box-shadow 350ms ease",
+        ...theme.elevation.elevation3,
+        "&:hover": {
+            ...theme.elevation.elevation6,
+        },
+    },
+    card__active: {
+        ...theme.elevation.elevation7,
+    },
+    input: {
+        flex: "1 1 100%",
+        border: "none",
+        boxShadow: "none",
+        "&:focus": {
+            outline: "none",
+        },
+    },
+    searchIcon: {
+        minWidth: "24px",
+        ...theme.whitespace.ms2,
+    },
+});
+
 /**
@@ -38,51 +67,9 @@ * The SearchBar is used for searches. It has an active state that helps to inform the user a search is affecting the list in question. An optional onClear prop allows the query to be cleared when the user presses the clear button.
     static defaultProps = {
-        placeholder: "Search"
+        placeholder: "Search",
     };
 
-    styleSheet = () => {
-        const size = { pl: 2, pr: 2 }
-        return createStyleSheet('Search',
-            theme => ({
-                card: {
-                    display: "flex",
-                    alignItems: "center",
-                    height: "40px",
-                    background: "white",
-                    position: "relative",
-                    marginBottom: "20px",
-                    transition: "box-shadow 350ms ease",
-                    ...styles.boxShadow.xsm,
-                    ...pad(size),
-                    ...marg(this.props),
-                    "&:hover": {
-                        ...styles.boxShadow.sm
-                    },
-                },
-                activeCard: {
-                    ...styles.boxShadow.md
-                },
-                input: {
-                    flex: "1 1 100%",
-                    border: "none",
-                    boxShadow: "none",
-                    "&:focus": {
-                        outline: "none"
-                    }
-                },
-                searchIcon: {
-                    ...marg({mr: 2})
-                }
-            }
-        ))
-    };
-
-    componentWillMount() {
-        const { muiTheme } = this.props;
-
-        this.classes = getStyleManager(muiTheme)
-            .render(this.styleSheet());
-    }
-
     render() {
         const {
+            classes,
+            className,
             value,
@@ -92,33 +79,52 @@ placeholder,
             onClear,
-            muiTheme,
+            theme,
+            ...rest
         } = this.props;
 
-        const searchColor = value ?
-            muiTheme.palette.primary1Color : null;
-        const activeCard = value ? this.classes.activeCard : null;
-        const shouldShowClear = ( onClear && value );
+        const cardClasses = classnames(
+            { [className]: className },
+            "CY-SearchBar",
+            classes.card,
+            {
+                [classes.card__active]: value,
+            }
+        );
+        const iconClasses = classnames(
+            "CY-SearchBar-searchIcon",
+            classes.searchIcon
+        );
+        const inputClasses = classnames(
+            "CY-SearchBar-input",
+            classes.input
+        );
 
+        const searchColor = value
+            ? theme.palette.primary1Color
+            : null;
+
+        const shouldShowClear = onClear && value;
+
         return (
-            <div className={ `${this.classes.card} ${activeCard}` }>
-                    <SearchIcon
-                        className={ this.classes.searchIcon }
-                        color={ searchColor }
-                    />
-                    <input
-                        className={ this.classes.input }
-                        type="text"
-                        value={ value }
-                        placeholder={ placeholder }
-                        onChange={ onChange }
-                        onFocus={ this.onFocus }
-                    />
-                    { ( shouldShowClear ) ?
-                        <IconButton
-                            className={ this.classes.closeIcon }
-                            onTouchTap={ onClear }
-                        >
-                            <CloseIcon/>
-                        </IconButton> : null
-                    }
-            </div>
+            <Element {...rest} className={cardClasses}>
+                <SearchIcon
+                    className={iconClasses}
+                    color={searchColor}
+                />
+                <input
+                    className={inputClasses}
+                    type="text"
+                    value={value}
+                    placeholder={placeholder}
+                    onChange={onChange}
+                    onFocus={this.onFocus}
+                />
+                {shouldShowClear ? (
+                    <IconButton
+                        className="CY-SearchBar-closeButton"
+                        onTouchTap={onClear}
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                ) : null}
+            </Element>
         );
@@ -128,2 +134,2 @@ }
 
-export default muiThemeable()(SearchBar);
+export default withTheme(injectSheet(styles)(SearchBar));

src/Section.js

@@ -1,33 +0,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { marg, pad } from './styles';
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import Element from "./Element";
 
-class Section extends React.Component {
-    /**
-     * Section is a layout primitive.
-     */
+/**
+ * Section is a layout primitive.
+ */
+const Section = ({ children, className, whitespace, ...rest }) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-Section"
+    );
+    return (
+        <Element
+            {...rest}
+            root="section"
+            className={wrapperClasses}
+            whitespace="pv6"
+        >
+            {children}
+        </Element>
+    );
+};
 
-    render() {
-        return (
-            <section style={this.styles()}>
-                { this.props.children }
-            </section>
-        );
-    }
-
-    styles = () => {
-        let displayType = (this.props.flex) ?
-            { display: "flex" } :
-            { display: "block" };
-
-        return {
-            position: "relative",
-            ...displayType,
-            ...marg(this.props),
-            ...pad(this.props),
-            ...this.props.styles,
-        }
-    };
-}
-
 Section.propTypes = {
@@ -34,0 +27,0 @@ className: PropTypes.string,

src/ShowMoreEllipsis.js

@@ -1,28 +0,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { hoverable } from './utils';
-import { marg } from './styles';
+import React from "react";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import Element from "./Element";
 
-/**
- * ShowMoreEllipsis is used to show he user that there is more content to see that has been hidden by the UI. Generally it is unnecessary to trigger any events with it as it is used on cards which expand when the user clicks anywhere inside.
- */
-const ShowMoreEllipsis = (props) => {
-    const { 
-        isHovered,
-        onMouseEnter,
-        onMouseLeave,
-        onTouchTap
-    } = props;
-
-    function handleClick() {
-        if (onTouchTap) {
-            onTouchTap();
-        }
-    }
-
-    const styles = {
-        ...marg({mt: 2}),
+const styles = theme => ({
+    wrapper: {
+        ...theme.whitespace.ml1,
         cursor: "pointer",
-        borderRadius: "3px", 
-        padding: "0 3px 12px", 
+        borderRadius: "3px",
+        padding: "0 3px 12px",
         display: "inline-block",
@@ -33,29 +17,26 @@ lineHeight: "0",
         background: "rgba(0,0,0,.1)",
-        onHover: isHovered ? {
-            background: "rgba(0,0,0,.3)"
-        } : {}
-    }
+        "&:hover": {
+            background: "rgba(0,0,0,.3)",
+        },
+    },
+});
+/**
+ * ShowMoreEllipsis is used to show he user that there is more content to see that has been hidden by the UI. Generally it is unnecessary to trigger any events with it as it is used on cards which expand when the user clicks anywhere inside.
+ */
+const ShowMoreEllipsis = props => {
+    const { classes, className, ...rest } = props;
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-ShowMoreEllipsis",
+        classes.wrapper
+    );
     return (
-        <span 
-            onMouseEnter={ onMouseEnter }
-            onMouseLeave={ onMouseLeave }
-            onClick={ handleClick }
-            style={{
-                ...styles,
-                ...styles.onHover,
-            }}
-        >
+        <Element root="span" {...rest} className={wrapperClasses}>
             ...
-        </span>
-    )
+        </Element>
+    );
 };
 
 ShowMoreEllipsis.displayName = "ShowMoreEllipsis";
-ShowMoreEllipsis.propTypes = {
-    /**
-     *Callback when clicked or tapped
-    */
-    onTouchTap: PropTypes.func
-};
 
-export default hoverable(ShowMoreEllipsis);
+export default withTheme(injectSheet(styles)(ShowMoreEllipsis));

src/SkeletonList.js

@@ -1,92 +0,125 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
 
-import { Avatar, CircularProgress } from 'material-ui';
-import MediaCard from './MediaCard';
+import { Avatar, CircularProgress } from "material-ui";
+import ListCard from "./ListCard";
+import ListCardHeader from "./ListCardHeader";
+import ListCardIdentity from "./ListCardIdentity";
+import ListCardSummary from "./ListCardSummary";
 
-const styleSheet = () => (
-    createStyleSheet('Search',
-        theme => ({
-            wrapper: {
-                position: "relative",
-                padding: "2px",
-                margin: "-2px",
-                maskImage: `gradient(linear, center top, center bottom,
+const styles = {
+    wrapper: {
+        position: "relative",
+        padding: "2px",
+        margin: "-2px",
+        maskImage: `gradient(linear, center top, center bottom,
                         color-stop(0.00,  rgba(0,0,0,1)),
                         color-stop(0.80,  rgba(0,0,0,.1)),
-                        color-stop(1.00,  rgba(0,0,0,0)))`
-            }
-        }
-    ))
+                        color-stop(1.00,  rgba(0,0,0,0)))`,
+    },
+    progress: {
+        position: "absolute !important",
+        marginRight: "auto",
+        marginLeft: "auto",
+        right: 0,
+        left: 0,
+        top: "50px",
+    },
+    avatar: {
+        flexShrink: 0,
+        marginRight: 16,
+    },
+};
+
+const SkeletonTextStyles = theme => ({
+    wrapper: {
+        width: "100%",
+        paddingRight: "32px",
+    },
+    text: {
+        height: "8px",
+        width: "100%",
+        background: "#EFEFEF",
+        borderRadius: "800px",
+    },
+    firstLine: {
+        width: "100%",
+        marginBottom: "12px",
+    },
+    secondLine: {
+        width: "80%",
+    },
+});
+const SkeletonText = withTheme(
+    injectSheet(SkeletonTextStyles)(({ classes, className }) => {
+        const wrapperClasses = classnames(
+            { [className]: className },
+            "CY-SkelletonText",
+            classes.wrapper
+        );
+        const firstLineClasses = classnames(
+            "CY-SkelletonText-firstLine",
+            "CY-SkelletonText-text",
+            classes.firstLine,
+            classes.text
+        );
+        const secondLineClasses = classnames(
+            "CY-SkelletonText-secondLine",
+            "CY-SkelletonText-text",
+            classes.secondLine,
+            classes.text
+        );
+        return (
+            <div className={wrapperClasses}>
+                <div className={firstLineClasses} />
+                <div className={secondLineClasses} />
+            </div>
+        );
+    })
 );
 
-const SkeletonText = props => {
-    return (
-        <div>
-            <div
-                style={{
-                    height: "10px",
-                    width: "80%",
-                    marginBottom: "10px",
-                    background: "#EFEFEF",
-                    borderRadius: "800px"
-                }}
-            />
-            <div
-                style={{
-                    height: "10px",
-                    width: "70%",
-                    background: "#EFEFEF",
-                    borderRadius: "800px"
-                }}
-            />
-        </div>
-    )
-};
+/**
+ * SkeletonLists are placeholders for MediaCards while they are loading. They help to inform the user that a list will show.
+ */
+const SkeletonList = ({ classes, className, cardCount }) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-SkelletonList",
+        classes.wrapper
+    );
+    const avatarClasses = classnames(
+        "CY-SkelletonCard-avatar",
+        classes.avatar
+    );
+    const progressClasses = classnames(
+        "CY-SkelletonCard-progress",
+        classes.progress
+    );
 
-const SkeletonList = props => {
-    /**
-     * SkeletonLists are placeholders for MediaCards while they are loading. They help to inform the user that a list will show.
-     */
-    const classes = getStyleManager({})
-	.render(styleSheet());
-
-    const { cardCount } = props;
     let SkeletonCards = [];
-    for(let i=0;i<cardCount;i++) {
+    for (let i = 0; i < cardCount; i++) {
         SkeletonCards.push(
-            <MediaCard
-		key={ i }
-                image={
-                    <Avatar
-                        size={ 40 }
-                        backgroundColor="#EFEFEF"
-                    />
-                }
-                title={
-                    <SkeletonText/>
-                }
-                summary={
-                    <SkeletonText/>
-                }
-            />
-        )
+            <ListCard className="CY-SkelletonCard" key={i}>
+                <ListCardHeader className="CY-SkelletonCard-header">
+                    <ListCardIdentity className="CY-SkelletonCard-identity">
+                        <Avatar
+                            className={avatarClasses}
+                            backgroundColor="#EFEFEF"
+                        />
+                        <SkeletonText />
+                    </ListCardIdentity>
+                    <ListCardSummary className="CY-SkelletonCard-summary">
+                        <SkeletonText />
+                    </ListCardSummary>
+                </ListCardHeader>
+            </ListCard>
+        );
     }
 
     return (
-        <div className={ classes.wrapper }>
-            { SkeletonCards }
-            <CircularProgress
-                size={ 75 }
-                style={{
-                    position: "absolute",
-                    marginRight: "auto",
-                    marginLeft: "auto",
-                    right: 0,
-                    left: 0,
-                    top: "50px"
-                }}
-            />
+        <div className={wrapperClasses}>
+            {SkeletonCards}
+            <CircularProgress size={75} className={progressClasses} />
         </div>
@@ -102,9 +135,9 @@ );
      */
-    cardCount: PropTypes.number
+    cardCount: PropTypes.number,
 };
 
 SkeletonList.defaultProps = {
-    cardCount: 5
+    cardCount: 5,
 };
 
-export default SkeletonList;
+export default injectSheet(styles)(SkeletonList);

src/styles/cyverseTheme.js

@@ -1,36 +0,23 @@
-import * as colors from 'material-ui/styles/colors';
+import { styleVars } from "../styles";
+import { styles as cyverseStyles } from "../styles";
 
-var primary1Color = "#0971ab",
-    primary2Color = "#318cc8",
-    accent1Color = "#57cbea";
+const { palette } = styleVars;
 
-export default {
+const theme = {
+    palette,
     header: {
-        headerColor: primary1Color,
-        headerBorderColor: accent1Color,
-        headerLinkColor: "rgba(255, 255, 255, 0.7)"
+        headerColor: palette.primary1Color,
+        headerBorderColor: palette.accent1Color,
+        headerLinkColor: "rgba(255, 255, 255, 0.7)",
     },
-    palette: {
-        primary1Color: primary1Color,
-        primary2Color: primary2Color,
-        primary3Color: colors.grey400,
-        accent1Color: accent1Color,
-        accent2Color: colors.grey100,
-        accent3Color: colors.grey500,
-        alternateTextColor: colors.white,
-        danger: "#ff2f0d",
-        success: "#5cb85c",
-        canvasColor: colors.white,
-        borderColor: colors.grey300,
-        pickerHeaderColor: primary2Color,
-        shadowColor: colors.fullBlack
-    },
     tabs: {
         backgroundColor: "white",
         selectedTextColor: "black",
-        textColor: "rgba(0,0,0,.4)"
+        textColor: "rgba(0,0,0,.4)",
     },
     inkBar: {
-        backgroundColor: primary1Color
-    }
+        backgroundColor: palette.primary1Color,
+    },
+    ...cyverseStyles,
 };
+export default theme;

src/styles/index.js

@@ -1,4 +0,3 @@
-export { default as variables } from './variables';
-export { default as styles } from './styles';
-export { default as marg } from './marg.js';
-export { default as pad } from './pad.js';
+export { default as styleVars } from "./styleVars";
+export { default as styles } from "./styles";
+export { default as styleGenerators } from "./styleGenerators";

src/styles/styles.js

@@ -1,42 +0,21 @@
-import v from './variables';
+import styleVars from "./styleVars";
+import * as styleGenerators from "./styleGenerators";
 
+const { sizeUnits, palette } = styleVars;
 
-let styleVariables = {
-    boxShadow: {
-        xsm: {
-            boxShadow: "0 0 3px rgba(0, 0, 0, .3)"
-        },
-        sm: {
-            boxShadow: "0 1px 3px rgba(0, 0, 0, .3)"
-        },
+const {
+    generateMarginStyles,
+    generatePaddingStyles,
+    generateShadowStyles,
+} = styleGenerators;
 
-        md: {
-            boxShadow: "0 1px 10px rgba(0, 0, 0, .5)"
-        },
-
-        lg: {
-            boxShadow: "0 5px 15px rgba(0,0,0,.5)"
-        },
-
-        li: {
-            boxShadow: "0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24)"
-        },
+const styles = {
+    elevation: {
+        ...generateShadowStyles(),
     },
-
-    t: {
-
-        label: {
-            display: "block",
-            fontSize: "12px",
-            fontWeight: "200",
-            color: "rgba(0, 0, 0, 0.3)",
-            margin: "0px 0px 10px",
-        },
-
-        caption: {
-            fontSize: "14px",
-            fontWeight: "400",
-            color: v.c.grey.dark,
-        },
-
+    whitespace: {
+        ...generateMarginStyles(sizeUnits),
+        ...generatePaddingStyles(sizeUnits),
+    },
+    typography: {
         display4: {
@@ -47,3 +26,2 @@ fontSize: "112px",
         },
-
         display3: {
@@ -54,101 +32,67 @@ fontSize: "56px",
         },
-
         display2: {
-            fontSize: "45px",
+            fontSize: "48px",
+            lineHeight: "48px",
             fontWeight: "400",
             letterSpacing: "1px",
         },
-
         display1: {
             fontSize: "34px",
+            lineHeight: "40px",
             fontWeight: "400",
             letterSpacing: "1px",
         },
-
         headline: {
             fontSize: "24px",
+            lineHeight: "1",
             fontWeight: "400",
             letterSpacing: "1px",
         },
-
         title: {
             fontSize: "20px",
+            lineHeight: "24px",
             fontWeight: "400",
             letterSpacing: "1px",
         },
-
         subheading: {
-            color: v.c.grey.dark,
             fontSize: "16px",
+            lineHeight: "1",
             fontWeight: "400",
+            color: palette.secondaryTextColor,
         },
-
         body2: {
             fontSize: "16px",
+            lineHeight: "1",
             fontWeight: "500",
         },
-
         body1: {
             fontSize: "14px",
+            lineHeight: "16px",
             fontWeight: "300",
         },
-
-        button1: {
+        caption: {
             fontSize: "14px",
+            lineHeight: "16px",
             fontWeight: "400",
+            color: palette.secondaryTextColor,
+        },
+        label: {
+            fontSize: "12px",
             lineHeight: "1",
-            marginTop: "0px",
-            marginRight: "0px",
-            marginBottom: "0px",
-            marginLeft: "0px",
-            letterSpacing: "1px",
-        }
-    },
-    BgColors: {
-        greyXxDark: {
-            background: v.c.grey.xXDark,
+            fontWeight: "200",
+            color: "rgba(0, 0, 0, 0.3)",
+            margin: "0px 0px 10px",
         },
-        greyXDark: {
-            background: v.c.grey.xDark,
-        },
-        greyDark:{
-            background: v.c.grey.dark,
-        },
-        greyDarkMid: {
-            background: v.c.grey.darkMid,
-        },
-        greyMid: {
-             background: v.c.grey.mid,
-        },
-        greyLightMid: {
-            background: v.c.grey.lightMid,
-        },
-        greyLight: {
-            background: v.c.grey.light,
-        },
-        greyXLight: {
-            background: v.c.grey.xLight,
-        },
-        greyXxlight: {
-            background: v.c.grey.xXLight,
-        },
     },
-    u: {
-        kHide: {
+    utility: {
+        hideReadable: {
             position: "fixed",
             top: "9999px",
         },
-
-        inlineUl: {
-            padding: 0,
-            margin: 0,
+        hide: {
+            display: "none !important",
         },
-
-        inlineLi: {
-            display: "inline-block",
-            listStyle: "none",
-        },
-    }
+    },
 };
 
-export default styleVariables;
+export default styles;

src/SubHeader.js

@@ -1,121 +0,115 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import IconButton from 'material-ui/IconButton';
-import ArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
-import VerticalMenu from './VerticalMenu';
-import Div from './Div';
-import Title from './Title';
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import IconButton from "material-ui/IconButton";
+import ArrowBack from "material-ui/svg-icons/navigation/arrow-back";
+import VerticalMenu from "./VerticalMenu";
+import ActionGroup from "./ActionGroup";
+import Element from "./Element";
 
+const styles = theme => ({
+    wrapper: {
+        position: "relative",
+        display: "flex",
+        justifyContent: "space-between",
+    },
 
+    titleGroup: {
+        display: "flex",
+        flex: "1",
+        alignItems: "center",
+    },
+
+    backButton: {
+        float: "left",
+        cursor: "pointer",
+        position: "relative",
+        marginRight: "10px",
+    },
+});
 /**
  * SubHeader is the contextual header located at the top of a sub-view. A Sub-view is a view that one would navigate to from a main-view. For example clicking on a list item might open a sub-view detail of that list item. The SubHeader has a back button to navigate back to the main-view and some top level controls or actions for the particular sub-view.
  */
-class SubHeader extends React.Component {
-    static displayName = "SubHeader";
+const SubHeader = ({
+    classes,
+    className,
+    name,
+    quickActions,
+    menuItems,
+    onBack,
+}) => {
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-SubHeader",
+        classes.wrapper
+    );
 
-    static propTypes = {
-        /**
-         * The name of the view.
-         */
-        name: PropTypes.string,
-        /**
-         * The exposed actions on the right, expects MUI IconButtons.
-         */
-        quickActions: PropTypes.array,
-        /**
-         * The Actions within the verical menu on the right, expects MUI MenuItems.
-         */
-        menuItems: PropTypes.array,
-        /**
-         * Callback when the back button is pressed.
-         */
-        onBack: PropTypes.func,
-    };
+    const titleGroupClasses = classnames(
+        "CY-SubHeader-titleGroup",
+        classes.titleGroup
+    );
 
-    renderOptionGroup = () => {
-        let { quickActions, menuItems } = this.props;
-        let style = this.style();
-
+    const renderOptionGroup = () => {
         let renderQuickActions = (option, i) => {
-            return (
-                <Div key={ option + i }>
-                    { option }
-                </Div>
-            )
+            return <div key={option + i}>{option}</div>;
         };
 
-        if ( quickActions || menuItems ) {
+        if (quickActions || menuItems) {
             return (
-                <div style={ style.actionGroup }>
-                    {
-                        quickActions ?
-                            quickActions.map( renderQuickActions )
-                            : null
-                    }
-                    {
-                        menuItems ?
-                            <VerticalMenu
-                                children={ menuItems }
-                            />
-                            : null
-                    }
-                </div>
-            )
+                <ActionGroup className="CY-SubHeader-Actions">
+                    {quickActions
+                        ? quickActions.map(renderQuickActions)
+                        : null}
+                    {menuItems ? (
+                        <VerticalMenu children={menuItems} />
+                    ) : null}
+                </ActionGroup>
+            );
         }
     };
 
-    render() {
-        let { name, onBack } = this.props;
-        let style = this.style();
-
-        return (
-            <div
-                style={ style.header }
-            >
-                <div style={ style.titleGroup }>
-                    <IconButton onTouchTap={ onBack } >
-                        <ArrowBack/>
-                    </IconButton>
-                    <Title
-                        h1
-                        title
-                        m={ 0 }
-                    >
-                        { name }
-                    </Title>
-                </div>
-                { this.renderOptionGroup() }
+    return (
+        <div className={wrapperClasses}>
+            <div className={titleGroupClasses}>
+                <IconButton
+                    className="CY-SubHeader-backBtn"
+                    onTouchTap={onBack}
+                >
+                    <ArrowBack />
+                </IconButton>
+                <Element
+                    className="CY-SubHeader-title"
+                    root="h1"
+                    typography="title"
+                >
+                    {name}
+                </Element>
             </div>
-        );
-    }
+            {renderOptionGroup()}
+        </div>
+    );
+};
 
-    style = () => {
-        return {
-            header: {
-                position: "relative",
-                display: "flex",
-                justifyContent: "space-between"
-            },
+SubHeader.displayName = "SubHeader";
 
-            titleGroup: {
-                display: "flex",
-                flex: "1",
-                alignItems: "center",
-            },
+SubHeader.propTypes = {
+    /**
+     * The name of the view.
+     */
+    name: PropTypes.string,
+    /**
+     * The exposed actions on the right, expects MUI IconButtons.
+     */
+    quickActions: PropTypes.array,
+    /**
+     * The Actions within the verical menu on the right, expects MUI MenuItems.
+     */
+    menuItems: PropTypes.array,
+    /**
+     * Callback when the back button is pressed.
+     */
+    onBack: PropTypes.func,
+};
 
-            backButton: {
-                float: "left",
-                cursor: "pointer",
-                position: "relative",
-                marginRight: "10px",
-            },
-
-            actionGroup: {
-                display: "flex",
-                alignItems: "center",
-            }
-        };
-    };
-}
-
-export default SubHeader;
+export default withTheme(injectSheet(styles)(SubHeader));

src/SummaryText.js

@@ -1,21 +0,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyleSheet } from 'jss-theme-reactor';
-import getStyleManager from "./styles/getStyleManager";
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import classnames from "classnames";
 import Element from "./Element";
 
-// Define static styles here.
 // Each key of the returned object will be available as a className below.
-const styleSheet = () => (
-    createStyleSheet('SummaryText',
-        theme => ({
-            wrapper: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                maxWidth: "500px"
-            }
-        }
-    ))
-);
+const styles = {
+    wrapper: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        maxWidth: "500px",
+    },
+};
+
 /**
@@ -27,19 +23,20 @@ * SummaryText is used to limit text to a single line and available width. Typically used to preview a large block of text that can be shown by clicking `ShowMoreEllipsis` or a collapsed `MediaCard`.
 const SummaryText = ({
+    classes,
+    className,
+    root = "p",
     children,
     ...rest
 }) => {
-
-    // Generate classes object and render corresponding style definitions in header.
-    const classes = getStyleManager({})
-    .render(styleSheet());
-
-    return(
-        <Element {...rest }
-            tag="p"
-            className={ classes.wrapper }
-        >
-            { children }
+    const wrapperClasses = classnames(
+        { [className]: className },
+        "CY-SummaryText",
+        classes.wrapper
+    );
+    return (
+        <Element {...rest} root={root} className={wrapperClasses}>
+            {children}
         </Element>
-    )
+    );
 };
+
 SummaryText.displayName = "SummaryText";
@@ -51,5 +48,9 @@
      */
-    children: PropTypes.string
+    children: PropTypes.string,
+    /**
+     * The root element to be renderd.
+     */
+    root: PropTypes.string,
 };
 
-export default SummaryText
+export default injectSheet(styles)(SummaryText);

src/Tooltip.js

@@ -1,24 +0,109 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as colors from 'material-ui/styles/colors';
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet, { withTheme } from "react-jss";
+import classnames from "classnames";
+import * as colors from "material-ui/styles/colors";
+import Element from "./Element";
 
+const tooltipDirection = (direction, classes) => {
+    const {
+        message__top: top,
+        message__right: right,
+        message__bottom: bottom,
+        message__left: left,
+    } = classes;
+    switch (direction) {
+        case "top":
+            return top;
+        case "right":
+            return right;
+        case "bottom":
+            return bottom;
+        case "left":
+            return left;
+        default:
+            return top;
+    }
+};
+
+// Each key of the returned object will be available as a className below.
+const styles = theme => {
+    const messageOffset = "calc(100% + 8px)";
+    return {
+        wrapper: {
+            display: "inline-block",
+        },
+        innerWrapper: {
+            position: "relative",
+            display: "flex",
+            alignItems: "start",
+        },
+        message: {
+            zIndex: "9999",
+            display: "block",
+            padding: "5px",
+            background: colors.grey900,
+            borderRadius: "2px",
+            color: "white",
+            fontSize: "12px",
+            textAlign: "center",
+            whiteSpace: "nowrap",
+            position: "absolute",
+            alignSelf: "center",
+            transition: "opacity ease .2s, transform ease .2s",
+        },
+        message__long: {
+            whiteSpace: "normal",
+            minWidth: "250px",
+        },
+        message__hide: {
+            opacity: 0,
+            transform: "scale(0)",
+        },
+        message__show: {
+            opacity: 1,
+            tranform: "scale(1)",
+        },
+        message__top: {
+            transformOrigin: "0% 100%",
+            bottom: messageOffset,
+        },
+        message__right: {
+            transformOrigin: "0% 50%",
+            left: messageOffset,
+        },
+        message__bottom: {
+            transformOrigin: "0% -100%",
+            top: messageOffset,
+        },
+        message__left: {
+            transformOrigin: "100% 50%",
+            right: messageOffset,
+        },
+    };
+};
+
 /**
-* A Tooltip is used to show on demand information about an element, usually an action. Is initially hidden to keep the UI clean but can be shown by hovering over the element in question.
-*/
-export default class extends React.Component {
+ * A Tooltip is used to show on demand information about an element, usually an action. Is initially hidden to keep the UI clean but can be shown by hovering over the element in question.
+ */
+class Tooltip extends React.Component {
     static propTypes = {
         /**
-        * Text that shows on tooltip
-        */
+         * Text that shows on tooltip
+         */
         message: PropTypes.string.isRequired,
         /**
-        * The direction of the element Tooltip will open from. Expects one of: "right", "bottom", "left", "top".
-        */
-        direction: PropTypes.oneOf(['right', 'left', 'top', 'bottom']),
+         * The direction of the element Tooltip will open from. Expects one of: "right", "bottom", "left", "top".
+         */
+        direction: PropTypes.string,
         /**
-        * The element that shows Tooltip on hover and anchors the toopltip's direction
-        */
-        children: PropTypes.node.isRequired
+         * The element that shows Tooltip on hover and anchors the toopltip's direction
+         */
+        children: PropTypes.node.isRequired,
     };
 
+    static defaultProps = {
+        direction: "top",
+    };
+
     static displayName = "Tooltip";
@@ -56,82 +141,52 @@
         this.props.onTouch();
-        setTimeout( ()=> this.hideTooltip(), 2000);
+        setTimeout(() => this.hideTooltip(), 2000);
     };
 
-    directionStyle = () => {
-        let direction = this.props.direction;
-        const offset = "calc(100% + 10px)";
-        switch(direction) {
-            case "top":
-                return {
-                    transformOrigin: "0% 100%",
-                    bottom: offset,
-                }
-            case "right":
-                return {
-                    transformOrigin: "0% 50%",
-                    left: offset,
-                }
-            case "bottom":
-                return {
-                    transformOrigin: "0% 0%",
-                    top: offset,
-                }
-            case "left":
-                return {
-                    transformOrigin: "100% 50%",
-                    right: offset,
-                }
-            default:
-                return {
-                    transformOrigin: "0 100%",
-                    bottom: offset,
-                }
-        }
-    };
-
-    style = () => {
+    render() {
+        const {
+            classes,
+            className,
+            message,
+            direction,
+            ...rest
+        } = this.props;
         const { showTooltip } = this.state;
-        const x = showTooltip ? 1 : 0;
-        return {
-            content: {
-                ...this.directionStyle(),
-                zIndex: "9999",
-                display: "block",
-                padding: "5px",
-                background: colors.grey900,
-                borderRadius: "2px",
-                color: "white",
-                fontSize: "10px",
-                textAlign: "center",
-                whiteSpace: "nowrap",
-                position: "absolute",
-                alignSelf: "center",
-                opacity: x,
-                transform: `scale(${x})`,
-                transition: "opacity ease .2s, transform ease .2s"
-            }
-        }
-    };
 
-    render() {
+        const wrapperClasses = classnames(
+            { [className]: className },
+            "CY-Tooltip",
+            classes.wrapper
+        );
+
+        const innerWrapperClasses = classnames(
+            "CY-Tooltip-innerWrapper",
+            classes.innerWrapper
+        );
+
+        const messageClasses = classnames(
+            "CY-Tooltip-message",
+            classes.message,
+            { [classes.message__show]: showTooltip },
+            { [classes.message__hide]: !showTooltip },
+            { [classes.message__long]: message.length > 40 },
+            tooltipDirection(direction, classes)
+        );
+
         return (
+            <Element {...rest} className={wrapperClasses}>
                 <span
-                    style={{
-                        position: "relative",
-                        display: "flex",
-                        alignItems: "start",
-                        ...this.props.style,
-                    }}
-                    onMouseEnter={ this.onMouseEnter }
-                    onMouseLeave={ this.onMouseLeave }
+                    className={innerWrapperClasses}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}
                 >
-                    { this.props.children }
-                    <span style={ this.style().content }>
-                        <div>
-                            { this.props.message }
-                        </div>
+                    {this.props.children}
+                    <span className={messageClasses}>
+                        <div>{message}</div>
                     </span>
                 </span>
-        )
+            </Element>
+        );
     }
 }
+
+export default withTheme(injectSheet(styles)(Tooltip));

src/utils/ButtonGroup.js

 import React from 'react';
-import { marg } from '../styles';
-import ClearFix from './ClearFix';
+import injectSheet from 'react-jss';
+import Element from '../Element';
 
-export default class extends React.Component {
+const styles = {
+    wrapper: {
+        display: "flex",
+        flexWrap: "wrap",
+        "& > *": {
+            marginRight: "16px",
+        },
+        "& > *:last-child": {
+            marginRight: 0
+        }
+    }
+}
+
+
+class ButtonGroup extends React.Component {
     static displayName = "ButtonGroup"
     render() {
-        const { children, pullR, pullL } = this.props;
-
-        let style = {
-            display: "flex",
-            flexWrap: "wrap",
-        };
-        if ( pullR ) {
-            style.float = "right";
-        }
-        if ( pullL ) {
-            style.float = "left";
-        }
-
-        let renderChildren = React.Children.map(children,
-            (child, i) => {
-                if (i === children.length - 1) {
-                    return React.cloneElement(child, {
-                        style: { ...marg({ mv: 1 }) }
-                    });
-                } else {
-                    return React.cloneElement(child, {
-                        style: { ...marg({ mr: 3, mv: 1 }) }
-                    })
-                }
-            }
-        );
+        const { children, classes, ...rest } = this.props;
         return (
-            <ClearFix>
-                <div style={ style }>
-                    { renderChildren }
-                </div>
-            </ClearFix>
+                <Element { ...rest} className={ `${classes.wrapper} ButtonGroup` }>
+                    { children }
+                </Element>
         )
     }
 }
+
+export default injectSheet(styles)(ButtonGroup)

src/utils/ClearFix.js

@@ -1,9 +0,7 @@
-import React from 'react';
-import { marg } from '../styles';
+import React from "react";
 
-
 export default class ClearFix extends React.Component {
     render() {
         const beforeStyle = {
-            display: 'table'
+            display: "table",
         };
@@ -13,18 +11,13 @@
             ...beforeStyle,
-            clear: 'both'
+            clear: "both",
         };
 
         return (
-            <div 
-                style={{
-                    ...this.props.style,
-                    ...marg(this.props),
-                }}
-            >
-                <div style={beforeStyle}/>
-                    {this.props.children}
-                <div style={afterStyle}/>
-            </div>
+            <React.Fragment>
+                <div style={beforeStyle} />
+                {this.props.children}
+                <div style={afterStyle} />
+            </React.Fragment>
         );
     }
 }

src/VerticalMenu.js

@@ -1,7 +0,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import { IconButton, IconMenu } from "material-ui";
+import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert";
 
-import { IconButton, IconMenu } from 'material-ui';
-import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
-
 /**
@@ -31,7 +31,7 @@ * A VerticalMenu is a menu that can be displayed by pressing a VerticalMenuIcon. In Troposphere a VerticalMenu is used in the top right corner of a header or MediaCard to hold a list of actions that are applied to the item or items within that context.
     static defaultProps = {
-        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-        targetOrigin: { horizontal: 'right', vertical: 'top' }
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        targetOrigin: { horizontal: "right", vertical: "top" },
     };
 
-    onTouch = (e) => {
+    onTouch = e => {
         e.stopPropagation();
@@ -42,19 +42,24 @@ e.preventDefault();
     render() {
-        const {
-            anchorOrigin,
-            targetOrigin
-        } = this.props;
+        const { className, anchorOrigin, targetOrigin } = this.props;
+        const wrapperClasses = classnames(
+            { [className]: className },
+            "CY-VerticalMenu"
+        );
 
         return (
             <IconMenu
-                { ...this.props }
+                {...this.props}
+                className={wrapperClasses}
                 iconButtonElement={
-                    <IconButton onClick={ this.onTouch }>
-                        <MoreVertIcon />
+                    <IconButton
+                        className="CY-VerticalMenu-btn"
+                        onClick={this.onTouch}
+                    >
+                        <MoreVertIcon className="CY-VerticalMenu-icon" />
                     </IconButton>
                 }
-                anchorOrigin={ anchorOrigin }
-                targetOrigin={ targetOrigin }
+                anchorOrigin={anchorOrigin}
+                targetOrigin={targetOrigin}
             />
-        )
+        );
     }
@@ -61,0 +66,0 @@ }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

561254

increased by4.06%

Dependency count

13

decreased by-7.14%

Lines of code

11974

increased by2.36%

Worsened metrics

Dev dependency count

17

increased by6.25%

Number of package files

175

decreased by-1.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclassnames@^2.2.5

• + Addedreact-jss@^8.2.1

• + Addedbrcast@3.0.2(transitive)

• + Addedclassnames@2.5.1(transitive)

• + Addedis-function@1.0.2(transitive)

• + Addedis-in-browser@1.1.3(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedjss@9.8.7(transitive)

• + Addedjss-camel-case@6.1.0(transitive)

• + Addedjss-compose@5.0.0(transitive)

• + Addedjss-default-unit@8.0.2(transitive)

• + Addedjss-expand@5.3.0(transitive)

• + Addedjss-extend@6.2.0(transitive)

• + Addedjss-global@3.0.0(transitive)

• + Addedjss-nested@6.0.1(transitive)

• + Addedjss-preset-default@4.5.0(transitive)

• + Addedjss-props-sort@6.0.0(transitive)

• + Addedjss-template@1.0.1(transitive)

• + Addedjss-vendor-prefixer@7.0.0(transitive)

• + Addedreact-jss@8.6.1(transitive)

• + Addedtheming@1.3.0(transitive)

• - Removedjss@^7.1.5

• - Removedjss-preset-default@^2.0.0

• - Removedjss-theme-reactor@^0.11.1

• - Removedis-in-browser@1.0.2(transitive)

• - Removedjss@7.1.7(transitive)

• - Removedjss-camel-case@4.0.0(transitive)

• - Removedjss-compose@3.0.1(transitive)

• - Removedjss-default-unit@6.1.2(transitive)

• - Removedjss-expand@3.0.1(transitive)

• - Removedjss-extend@4.0.1(transitive)

• - Removedjss-global@1.0.1(transitive)

• - Removedjss-nested@4.0.1(transitive)

• - Removedjss-preset-default@2.0.0(transitive)

• - Removedjss-props-sort@4.0.0(transitive)

• - Removedjss-theme-reactor@0.11.1(transitive)

• - Removedjss-vendor-prefixer@5.1.0(transitive)

• - Removedmurmurhash-js@1.0.0(transitive)

• Updatedmarked@^0.3.12