@hig/side-nav - npm Package Compare versions

Comparing version 0.1.0-alpha.242cb53a to 0.1.0-alpha.26ea0b86

build/index.es.js

 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Icon, { names, sizes } from '@hig/icon';
+import { ThemeContext } from '@hig/themes';
+import IconButton, { types } from '@hig/icon-button';
 import SkeletonItem from '@hig/skeleton-item';
-import { ThemeContext } from '@hig/themes';
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
+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 classnames = createCommonjsModule(function (module) {
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-/*!
-  Copyright (c) 2016 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-/* global define */
+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 () {
+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 hasOwn = {}.hasOwnProperty;
+/** @todo Consider replacing with an IconButton */
 
-	function classNames() {
-		var classes = [];
+var CollapseButton = function (_Component) {
+  _inherits(CollapseButton, _Component);
 
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
+  function CollapseButton() {
+    _classCallCheck(this, CollapseButton);
 
-			var argType = typeof arg === 'undefined' ? 'undefined' : _typeof(arg);
+    return _possibleConstructorReturn(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
+  }
 
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				classes.push(classNames.apply(null, arg));
-			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
+  _createClass(CollapseButton, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          minimized = _props.minimized,
+          onClick = _props.onClick;
 
-		return classes.join(' ');
-	}
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__module__collapse-button", {
+          "hig__side-nav__module__collapse-button--collapsed": minimized
+        });
+      };
 
-	if ('object' !== 'undefined' && module.exports) {
-		module.exports = classNames;
-	} else if (typeof undefined === 'function' && _typeof(undefined.amd) === 'object' && undefined.amd) {
-		// register as 'classnames', consistent with npm package name
-		undefined('classnames', [], function () {
-			return classNames;
-		});
-	} else {
-		window.classNames = classNames;
-	}
-})();
-});
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return (
+            /** @todo replace with a semantic HTML tag */
+            React.createElement(
+              "div",
+              {
+                className: classes(themeClass),
+                onClick: onClick,
+                role: "button",
+                tabIndex: 0
+              },
+              React.createElement(Icon, { name: names.CARET, size: sizes.PX_24 })
+            )
+          );
+        }
+      );
+    }
+  }]);
 
+  return CollapseButton;
+}(Component);
+
+CollapseButton.propTypes = {
+  /** Presents the icon in a minimized state: caret pointing right */
+  minimized: PropTypes.bool,
+  /** Called when element is clicked */
+  onClick: PropTypes.func
+};
+CollapseButton.defaultProps = {
+  onClick: function onClick() {},
+  minimized: false
+};
+CollapseButton.__docgenInfo = {
+  "description": "@todo Consider replacing with an IconButton",
+  "displayName": "CollapseButton",
+  "props": {
+    "minimized": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Presents the icon in a minimized state: caret pointing right",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when element is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$1 = 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; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(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$1(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 Group = function (_Component) {
+  _inherits$1(Group, _Component);
+
+  function Group() {
+    _classCallCheck$1(this, Group);
+
+    return _possibleConstructorReturn$1(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
+  }
+
+  _createClass$1(Group, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__group");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "section",
+            { className: classes(themeClass) },
+            _this2.props.children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Group;
+}(Component);
+
+Group.propTypes = {
+  /** One or more SideNav Modules */
+  children: PropTypes.node
+};
+Group.__docgenInfo = {
+  "description": "",
+  "displayName": "Group",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "One or more SideNav Modules"
+    }
+  }
+};
+
+var _createClass$2 = 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; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(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$2(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 ExternalLinkIcon = function (_Component) {
+  _inherits$2(ExternalLinkIcon, _Component);
+
+  function ExternalLinkIcon() {
+    _classCallCheck$2(this, ExternalLinkIcon);
+
+    return _possibleConstructorReturn$2(this, (ExternalLinkIcon.__proto__ || Object.getPrototypeOf(ExternalLinkIcon)).apply(this, arguments));
+  }
+
+  _createClass$2(ExternalLinkIcon, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(Icon, { name: names.EXTERNAL_LINK, size: this.props.size });
+    }
+  }]);
+
+  return ExternalLinkIcon;
+}(Component);
+
+ExternalLinkIcon.propTypes = {
+  /** Size of the icon */
+  size: PropTypes.oneOf(Object.values(sizes))
+};
+ExternalLinkIcon.defaultProps = {
+  size: sizes.PX_24
+};
+ExternalLinkIcon.__docgenInfo = {
+  "description": "",
+  "displayName": "ExternalLinkIcon",
+  "props": {
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "Object.values(iconSizes)"
+      },
+      "required": false,
+      "description": "Size of the icon",
+      "defaultValue": {
+        "value": "iconSizes.PX_24",
+        "computed": true
+      }
+    }
+  }
+};
+
+var _createClass$3 = 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; }; }();
+
+function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$3(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$3(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; }
+
+/** @todo Consider extending TextLink */
+
+var Link = function (_Component) {
+  _inherits$3(Link, _Component);
+
+  function Link() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$3(this, Link);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$3(this, (_ref = Link.__proto__ || Object.getPrototypeOf(Link)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, { size: sizes.PX_16 });
+    }, _temp), _possibleConstructorReturn$3(_this, _ret);
+  }
+
+  _createClass$3(Link, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          title = _props.title,
+          link = _props.link,
+          onClick = _props.onClick,
+          onMouseOver = _props.onMouseOver,
+          target = _props.target;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__link");
+      };
+
+      var Wrapper = link ? "a" : "div";
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React.createElement(
+            Wrapper,
+            {
+              className: classes(themeClass),
+              href: link,
+              target: target,
+              onClick: onClick,
+              onMouseOver: onMouseOver
+            },
+            title,
+            _this2._renderExternalLinkIcon()
+          );
+        }
+      );
+    }
+  }]);
+
+  return Link;
+}(Component);
+
+Link.propTypes = {
+  /** URL to navigate to when clicking this link */
+  link: PropTypes.string,
+  /** Called when link is clicked  */
+  onClick: PropTypes.func,
+  /** Called when hovering over the link */
+  onMouseOver: PropTypes.func,
+  /** Corresponds to the anchor tag's target */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
+  /** Link text */
+  title: PropTypes.string
+};
+Link.defaultProps = {
+  onClick: function onClick() {},
+  onMouseOver: function onMouseOver() {}
+};
+Link.__docgenInfo = {
+  "description": "@todo Consider extending TextLink",
+  "displayName": "Link",
+  "props": {
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this link"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when link is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the link",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Corresponds to the anchor tag's target"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Link text"
+    }
+  }
+};
+
+var _createClass$4 = 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; }; }();
+
+function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$4(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$4(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 Module = function (_Component) {
+  _inherits$4(Module, _Component);
+
+  function Module() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$4(this, Module);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$4(this, (_ref = Module.__proto__ || Object.getPrototypeOf(Module)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, null);
+    }, _temp), _possibleConstructorReturn$4(_this, _ret);
+  }
+
+  _createClass$4(Module, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          icon = _props.icon,
+          link = _props.link,
+          title = _props.title,
+          target = _props.target,
+          active = _props.active,
+          activeChildren = _props.activeChildren,
+          onClickTitle = _props.onClickTitle,
+          onMouseOver = _props.onMouseOver;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__module");
+      };
+
+      var linkClasses = function linkClasses(themeClass) {
+        return cx(themeClass, "hig__side-nav__module__link", {
+          "hig__side-nav__module__link--active": active,
+          "hig__side-nav__module__link--active-children": activeChildren
+        });
+      };
+
+      var submodulesClasses = cx("hig__side-nav__module__submodules", {
+        "hig__side-nav__module__submodules--no-icon": !icon
+      });
+
+      var Wrapper = link ? "a" : "div";
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React.createElement(
+            "div",
+            { className: classes(themeClass), onMouseOver: onMouseOver },
+            React.createElement(
+              "div",
+              { className: "hig__side-nav__module__row" },
+              React.createElement(
+                Wrapper,
+                {
+                  className: linkClasses(themeClass),
+                  href: link,
+                  onClick: onClickTitle,
+                  target: target
+                },
+                React.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__icon" },
+                  icon
+                ),
+                React.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__title" },
+                  title
+                ),
+                React.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__external-link-icon" },
+                  _this2._renderExternalLinkIcon()
+                )
+              ),
+              _this2.props.children && React.createElement(CollapseButton, {
+                minimized: _this2.props.minimized,
+                onClick: _this2.props.onClickCollapseButton
+              })
+            ),
+            !_this2.props.minimized && React.createElement(
+              "div",
+              { className: submodulesClasses },
+              children
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return Module;
+}(Component);
+
+Module.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** Zero or more SideNav submodules */
+  children: PropTypes.node,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node,
+  /** URL to navigate to when clicking this module */
+  link: PropTypes.string,
+  /** Indicates whether to display nested submodules */
+  minimized: PropTypes.bool,
+  /** Called when clicking on the collapse button */
+  onClickCollapseButton: PropTypes.func,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the title */
+  onMouseOver: PropTypes.func,
+  /** A label for rendering this Module */
+  title: PropTypes.string.isRequired,
+  /** Anchor target. Applicable only if link is provided */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
+};
+Module.defaultProps = {
+  minimized: false,
+  onClickCollapseButton: function onClickCollapseButton() {},
+  onClickTitle: function onClickTitle() {},
+  onMouseOver: function onMouseOver() {},
+  target: "_self"
+};
+Module.__docgenInfo = {
+  "description": "",
+  "displayName": "Module",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Zero or more SideNav submodules"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "An instance of @hig/icon"
+    },
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this module"
+    },
+    "minimized": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates whether to display nested submodules",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "onClickCollapseButton": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the collapse button",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": "A label for rendering this Module"
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Anchor target. Applicable only if link is provided",
+      "defaultValue": {
+        "value": "\"_self\"",
+        "computed": false
+      }
+    }
+  }
+};
+
 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 _createClass$5 = 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; }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 _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 _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-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 _possibleConstructorReturn$5(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 skeletonItemStyles = [{
+function _inherits$5(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 Module$1 = function (_Component) {
+  _inherits$5(Module$$1, _Component);
+
+  function Module$$1(props) {
+    _classCallCheck$5(this, Module$$1);
+
+    var _this = _possibleConstructorReturn$5(this, (Module$$1.__proto__ || Object.getPrototypeOf(Module$$1)).call(this, props));
+
+    _this.handleModuleMinimizeToggle = function (e) {
+      return _this.setState({ minimized: !_this.state.minimized }, function () {
+        return _this.props.onClickCollapseButton && _this.props.onClickCollapseButton(e);
+      });
+    };
+
+    _this.renderPresenter = function (presenterBag) {
+      var presenterProps = _extends({}, _this.props, presenterBag);
+
+      var children = presenterProps.children,
+          otherProps = _objectWithoutProperties(presenterProps, ["children"]);
+
+      return React.createElement(
+        Module,
+        otherProps,
+        children
+      );
+    };
+
+    _this.state = {
+      minimized: props.minimized
+    };
+    return _this;
+  }
+
+  _createClass$5(Module$$1, [{
+    key: "createPresenterBag",
+
+
+    /**
+     * @returns {PresenterBag}
+     */
+    value: function createPresenterBag() {
+      var minimized = this.state.minimized;
+
+
+      return {
+        minimized: minimized,
+        onClickCollapseButton: this.handleModuleMinimizeToggle,
+        onClickTitle: this.handleModuleMinimizeToggle
+      };
+    }
+
+    /**
+     * @param {PresenterBag}
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var presenterBag = this.createPresenterBag();
+      var renderPresenter = this.renderPresenter;
+
+
+      return renderPresenter(presenterBag);
+    }
+  }]);
+
+  return Module$$1;
+}(Component);
+
+Module$1.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** Zero or more SideNav submodules */
+  children: PropTypes.node,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node,
+  /** URL to navigate to when clicking this module */
+  link: PropTypes.string,
+  /** Indicates whether to display nested submodules */
+  minimized: PropTypes.bool,
+  /** Called when clicking on the collapse button */
+  onClickCollapseButton: PropTypes.func,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the title */
+  onMouseOver: PropTypes.func,
+  /** A label for rendering this Module */
+  title: PropTypes.string.isRequired,
+  /** Anchor target. Applicable only if link is provided */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
+};
+Module$1.defaultProps = {
+  minimized: false
+};
+Module$1.__docgenInfo = {
+  "description": "",
+  "displayName": "Module",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Zero or more SideNav submodules"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "An instance of @hig/icon"
+    },
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this module"
+    },
+    "minimized": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates whether to display nested submodules",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "onClickCollapseButton": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the collapse button"
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title"
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the title"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": "A label for rendering this Module"
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Anchor target. Applicable only if link is provided"
+    }
+  }
+};
+
+var _createClass$6 = 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; }; }();
+
+function _classCallCheck$6(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$6(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$6(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 ModuleCompact = function (_Component) {
+  _inherits$6(ModuleCompact, _Component);
+
+  function ModuleCompact() {
+    _classCallCheck$6(this, ModuleCompact);
+
+    return _possibleConstructorReturn$6(this, (ModuleCompact.__proto__ || Object.getPrototypeOf(ModuleCompact)).apply(this, arguments));
+  }
+
+  _createClass$6(ModuleCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          active = _props.active,
+          activeChildren = _props.activeChildren,
+          icon = _props.icon,
+          onClickTitle = _props.onClickTitle,
+          onMouseOver = _props.onMouseOver;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__module");
+      };
+
+      var linkClasses = function linkClasses(themeClass) {
+        return cx(themeClass, "hig__side-nav__module__link", {
+          "hig__side-nav__module__link--active": active,
+          "hig__side-nav__module__link--active-children": activeChildren
+        });
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            { className: classes(themeClass), onMouseOver: onMouseOver },
+            React.createElement(
+              "div",
+              { className: "hig__side-nav__module__row" },
+              React.createElement(
+                "div",
+                {
+                  className: linkClasses(themeClass),
+                  onClick: onClickTitle,
+                  role: "button",
+                  tabIndex: 0
+                },
+                React.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__icon" },
+                  icon
+                )
+              )
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return ModuleCompact;
+}(Component);
+
+ModuleCompact.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node.isRequired,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the icon */
+  onMouseOver: PropTypes.func
+};
+ModuleCompact.defaultProps = {
+  onClickTitle: function onClickTitle() {},
+  onMouseOver: function onMouseOver() {}
+};
+ModuleCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "ModuleCompact",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": true,
+      "description": "An instance of @hig/icon"
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the icon",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$7 = 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; }; }();
+
+function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$7(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$7(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 Submodule = function (_Component) {
+  _inherits$7(Submodule, _Component);
+
+  function Submodule() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$7(this, Submodule);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, { size: sizes.PX_16 });
+    }, _temp), _possibleConstructorReturn$7(_this, _ret);
+  }
+
+  _createClass$7(Submodule, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          active = _props.active,
+          title = _props.title,
+          link = _props.link,
+          onClick = _props.onClick,
+          onMouseOver = _props.onMouseOver,
+          target = _props.target;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__submodule", {
+          "hig__side-nav__submodule--active": active
+        });
+      };
+
+      var Wrapper = link ? "a" : "div";
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React.createElement(
+            Wrapper,
+            {
+              className: classes(themeClass),
+              href: link,
+              target: target,
+              onClick: onClick,
+              onMouseOver: onMouseOver
+            },
+            title,
+            _this2._renderExternalLinkIcon()
+          );
+        }
+      );
+    }
+  }]);
+
+  return Submodule;
+}(Component);
+
+Submodule.propTypes = {
+  /** Indicates this submodule is currently active */
+  active: PropTypes.bool,
+  /** URL to navigate to when clicking this submodule */
+  link: PropTypes.string,
+  /** Called when clicking on the submodule */
+  onClick: PropTypes.func,
+  /** Called when hovering over the submodule */
+  onMouseOver: PropTypes.func,
+  /** Anchor target. Applicable only if link is provided */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
+  /** Text to render */
+  title: PropTypes.string
+};
+Submodule.__docgenInfo = {
+  "description": "",
+  "displayName": "Submodule",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this submodule is currently active"
+    },
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this submodule"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the submodule"
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the submodule"
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Anchor target. Applicable only if link is provided"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text to render"
+    }
+  }
+};
+
+var _createClass$8 = 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; }; }();
+
+function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$8(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$8(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 SideNav = function (_Component) {
+  _inherits$8(SideNav, _Component);
+
+  function SideNav() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$8(this, SideNav);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$8(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
+      var _this$props = _this.props,
+          headerLabel = _this$props.headerLabel,
+          headerLink = _this$props.headerLink,
+          superHeaderLabel = _this$props.superHeaderLabel,
+          superHeaderLink = _this$props.superHeaderLink;
+
+
+      if (!(superHeaderLabel || headerLabel)) {
+        return null;
+      }
+
+      var SuperHeaderWrapper = superHeaderLink ? "a" : "div";
+      var HeaderWrapper = headerLink ? "a" : "div";
+
+      return React.createElement(
+        "div",
+        { className: "hig__side-nav__headers" },
+        superHeaderLabel && React.createElement(
+          "h3",
+          { className: "hig__side-nav__super-header" },
+          React.createElement(
+            SuperHeaderWrapper,
+            {
+              className: "hig__side-nav__super-header-link",
+              href: superHeaderLink
+            },
+            superHeaderLabel
+          )
+        ),
+        headerLabel && React.createElement(
+          "h4",
+          { className: "hig__side-nav__header" },
+          React.createElement(
+            HeaderWrapper,
+            {
+              className: "hig__side-nav__header-link",
+              href: headerLink
+            },
+            headerLabel
+          )
+        )
+      );
+    }, _temp), _possibleConstructorReturn$8(_this, _ret);
+  }
+
+  _createClass$8(SideNav, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          copyright = _props.copyright,
+          groups = _props.groups,
+          links = _props.links,
+          onMinimize = _props.onMinimize,
+          showMinimizeButton = _props.showMinimizeButton;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React.createElement(
+            "nav",
+            { className: classes(themeClass) },
+            React.createElement(
+              "div",
+              { className: "hig__side-nav__overflow" },
+              _this2._renderHeaders(),
+              groups && React.createElement(
+                "div",
+                { className: "hig__side-nav__groups" },
+                groups
+              ),
+              children && React.createElement(
+                "div",
+                { className: "hig__side-nav__slot" },
+                children
+              ),
+              links && React.createElement(
+                "div",
+                { className: "hig__side-nav__links" },
+                links
+              ),
+              copyright && React.createElement(
+                "div",
+                { className: "hig__side-nav__copyright" },
+                copyright
+              )
+            ),
+            showMinimizeButton && React.createElement(
+              "div",
+              { className: "hig__side-nav__minimize" },
+              React.createElement(IconButton, {
+                type: types.TRANSPARENT,
+                name: names.BACK,
+                title: "Minimize",
+                "aria-label": "Minimize",
+                onClick: onMinimize
+              })
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return SideNav;
+}(Component);
+
+SideNav.propTypes = {
+  /** Additional content to include below navigation items */
+  children: PropTypes.node,
+  /** Copyright text to include  */
+  copyright: PropTypes.string,
+  /** 0 or more SideNav Groups */
+  groups: PropTypes.node,
+  /** Subtitle at the top of the SideNav */
+  headerLabel: PropTypes.string,
+  /** An href for the SideNav Subtitle */
+  headerLink: PropTypes.string,
+  /** 0 or more SideNav Links */
+  links: PropTypes.node,
+  /** Called when minimize button is clicked */
+  onMinimize: PropTypes.func,
+  /** Renders a button to minimize the SideNav */
+  showMinimizeButton: PropTypes.bool,
+  /** Title at the top of the SideNav */
+  superHeaderLabel: PropTypes.string,
+  /** An href for the SideNav Title */
+  superHeaderLink: PropTypes.string
+};
+SideNav.defaultProps = {
+  onMinimize: function onMinimize() {},
+  showMinimizeButton: false
+};
+SideNav.__docgenInfo = {
+  "description": "",
+  "displayName": "SideNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Additional content to include below navigation items"
+    },
+    "copyright": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Copyright text to include"
+    },
+    "groups": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Groups"
+    },
+    "headerLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Subtitle at the top of the SideNav"
+    },
+    "headerLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Subtitle"
+    },
+    "links": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Links"
+    },
+    "onMinimize": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when minimize button is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "showMinimizeButton": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Renders a button to minimize the SideNav",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "superHeaderLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title at the top of the SideNav"
+    },
+    "superHeaderLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Title"
+    }
+  }
+};
+
+var _extends$1 = 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$9 = 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; }; }();
+
+function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$9(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$9(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 skeletonItemStyles = Object.freeze([{
   maxWidth: "180px",
@@ -97,14 +1419,14 @@ marginBottom: "48px"
   maxWidth: "124px"
-}];
+}]);
 
 var SideNavSkeleton = function (_Component) {
-  _inherits(SideNavSkeleton, _Component);
+  _inherits$9(SideNavSkeleton, _Component);
 
   function SideNavSkeleton() {
-    _classCallCheck(this, SideNavSkeleton);
+    _classCallCheck$9(this, SideNavSkeleton);
 
-    return _possibleConstructorReturn(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
+    return _possibleConstructorReturn$9(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
   }
 
-  _createClass(SideNavSkeleton, [{
+  _createClass$9(SideNavSkeleton, [{
     key: "render",
@@ -119,5 +1441,8 @@ value: function render() {
             "div",
-            { className: classnames("hig__side-nav-skeleton", themeClass) },
+            { className: cx("hig__side-nav-skeleton", themeClass) },
             skeletonItemStyles.map(function (style, index) {
-              return React.createElement(SkeletonItem, _extends({ key: index }, style));
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                React.createElement(SkeletonItem, _extends$1({ key: index }, style))
+              );
             })
@@ -137,2 +1462,286 @@ );
 
-export { SideNavSkeleton };
+var _createClass$10 = 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; }; }();
+
+function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$10(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$10(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 Docked = function (_Component) {
+  _inherits$10(Docked, _Component);
+
+  function Docked() {
+    _classCallCheck$10(this, Docked);
+
+    return _possibleConstructorReturn$10(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
+  }
+
+  _createClass$10(Docked, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav-container--docked");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Docked;
+}(Component);
+
+Docked.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
+};
+Docked.defaultProps = {
+  onMouseLeave: function onMouseLeave() {},
+  onMouseEnter: function onMouseEnter() {}
+};
+Docked.__docgenInfo = {
+  "description": "",
+  "displayName": "Docked",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$11 = 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; }; }();
+
+function _classCallCheck$11(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$11(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$11(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 BelowTopNav = function (_Component) {
+  _inherits$11(BelowTopNav, _Component);
+
+  function BelowTopNav() {
+    _classCallCheck$11(this, BelowTopNav);
+
+    return _possibleConstructorReturn$11(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
+  }
+
+  _createClass$11(BelowTopNav, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav-container--below-top-nav");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return BelowTopNav;
+}(Component);
+
+BelowTopNav.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
+};
+BelowTopNav.__docgenInfo = {
+  "description": "",
+  "displayName": "BelowTopNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container"
+    }
+  }
+};
+
+var _createClass$12 = 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; }; }();
+
+function _classCallCheck$12(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$12(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$12(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 BelowTopNavCompact = function (_Component) {
+  _inherits$12(BelowTopNavCompact, _Component);
+
+  function BelowTopNavCompact() {
+    _classCallCheck$12(this, BelowTopNavCompact);
+
+    return _possibleConstructorReturn$12(this, (BelowTopNavCompact.__proto__ || Object.getPrototypeOf(BelowTopNavCompact)).apply(this, arguments));
+  }
+
+  _createClass$12(BelowTopNavCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav-container--below-top-nav-compact");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return BelowTopNavCompact;
+}(Component);
+
+BelowTopNavCompact.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
+};
+BelowTopNavCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "BelowTopNavCompact",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container"
+    }
+  }
+};
+
+SideNav.CollapseButton = CollapseButton;
+SideNav.Group = Group;
+SideNav.Link = Link;
+SideNav.Module = Module$1;
+SideNav.ModuleCompact = ModuleCompact;
+SideNav.Submodule = Submodule;
+
+export default SideNav;
+export { SideNavSkeleton, Docked, BelowTopNav, BelowTopNavCompact };

build/index.js

@@ -9,72 +9,1396 @@ 'use strict';
 var React__default = _interopDefault(React);
+var PropTypes = _interopDefault(require('prop-types'));
+var cx = _interopDefault(require('classnames'));
+var Icon = require('@hig/icon');
+var Icon__default = _interopDefault(Icon);
+var themes = require('@hig/themes');
+var IconButton = require('@hig/icon-button');
+var IconButton__default = _interopDefault(IconButton);
 var SkeletonItem = _interopDefault(require('@hig/skeleton-item'));
-var themes = require('@hig/themes');
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
+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 classnames = createCommonjsModule(function (module) {
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-/*!
-  Copyright (c) 2016 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-/* global define */
+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 () {
+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 hasOwn = {}.hasOwnProperty;
+/** @todo Consider replacing with an IconButton */
 
-	function classNames() {
-		var classes = [];
+var CollapseButton = function (_Component) {
+  _inherits(CollapseButton, _Component);
 
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
+  function CollapseButton() {
+    _classCallCheck(this, CollapseButton);
 
-			var argType = typeof arg === 'undefined' ? 'undefined' : _typeof(arg);
+    return _possibleConstructorReturn(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
+  }
 
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				classes.push(classNames.apply(null, arg));
-			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
+  _createClass(CollapseButton, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          minimized = _props.minimized,
+          onClick = _props.onClick;
 
-		return classes.join(' ');
-	}
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__module__collapse-button", {
+          "hig__side-nav__module__collapse-button--collapsed": minimized
+        });
+      };
 
-	if ('object' !== 'undefined' && module.exports) {
-		module.exports = classNames;
-	} else if (typeof undefined === 'function' && _typeof(undefined.amd) === 'object' && undefined.amd) {
-		// register as 'classnames', consistent with npm package name
-		undefined('classnames', [], function () {
-			return classNames;
-		});
-	} else {
-		window.classNames = classNames;
-	}
-})();
-});
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return (
+            /** @todo replace with a semantic HTML tag */
+            React__default.createElement(
+              "div",
+              {
+                className: classes(themeClass),
+                onClick: onClick,
+                role: "button",
+                tabIndex: 0
+              },
+              React__default.createElement(Icon__default, { name: Icon.names.CARET, size: Icon.sizes.PX_24 })
+            )
+          );
+        }
+      );
+    }
+  }]);
 
+  return CollapseButton;
+}(React.Component);
+
+CollapseButton.propTypes = {
+  /** Presents the icon in a minimized state: caret pointing right */
+  minimized: PropTypes.bool,
+  /** Called when element is clicked */
+  onClick: PropTypes.func
+};
+CollapseButton.defaultProps = {
+  onClick: function onClick() {},
+  minimized: false
+};
+CollapseButton.__docgenInfo = {
+  "description": "@todo Consider replacing with an IconButton",
+  "displayName": "CollapseButton",
+  "props": {
+    "minimized": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Presents the icon in a minimized state: caret pointing right",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when element is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$1 = 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; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(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$1(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 Group = function (_Component) {
+  _inherits$1(Group, _Component);
+
+  function Group() {
+    _classCallCheck$1(this, Group);
+
+    return _possibleConstructorReturn$1(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
+  }
+
+  _createClass$1(Group, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__group");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "section",
+            { className: classes(themeClass) },
+            _this2.props.children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Group;
+}(React.Component);
+
+Group.propTypes = {
+  /** One or more SideNav Modules */
+  children: PropTypes.node
+};
+Group.__docgenInfo = {
+  "description": "",
+  "displayName": "Group",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "One or more SideNav Modules"
+    }
+  }
+};
+
+var _createClass$2 = 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; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(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$2(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 ExternalLinkIcon = function (_Component) {
+  _inherits$2(ExternalLinkIcon, _Component);
+
+  function ExternalLinkIcon() {
+    _classCallCheck$2(this, ExternalLinkIcon);
+
+    return _possibleConstructorReturn$2(this, (ExternalLinkIcon.__proto__ || Object.getPrototypeOf(ExternalLinkIcon)).apply(this, arguments));
+  }
+
+  _createClass$2(ExternalLinkIcon, [{
+    key: "render",
+    value: function render() {
+      return React__default.createElement(Icon__default, { name: Icon.names.EXTERNAL_LINK, size: this.props.size });
+    }
+  }]);
+
+  return ExternalLinkIcon;
+}(React.Component);
+
+ExternalLinkIcon.propTypes = {
+  /** Size of the icon */
+  size: PropTypes.oneOf(Object.values(Icon.sizes))
+};
+ExternalLinkIcon.defaultProps = {
+  size: Icon.sizes.PX_24
+};
+ExternalLinkIcon.__docgenInfo = {
+  "description": "",
+  "displayName": "ExternalLinkIcon",
+  "props": {
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "Object.values(iconSizes)"
+      },
+      "required": false,
+      "description": "Size of the icon",
+      "defaultValue": {
+        "value": "iconSizes.PX_24",
+        "computed": true
+      }
+    }
+  }
+};
+
+var _createClass$3 = 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; }; }();
+
+function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$3(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$3(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; }
+
+/** @todo Consider extending TextLink */
+
+var Link = function (_Component) {
+  _inherits$3(Link, _Component);
+
+  function Link() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$3(this, Link);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$3(this, (_ref = Link.__proto__ || Object.getPrototypeOf(Link)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, { size: Icon.sizes.PX_16 });
+    }, _temp), _possibleConstructorReturn$3(_this, _ret);
+  }
+
+  _createClass$3(Link, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          title = _props.title,
+          link = _props.link,
+          onClick = _props.onClick,
+          onMouseOver = _props.onMouseOver,
+          target = _props.target;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__link");
+      };
+
+      var Wrapper = link ? "a" : "div";
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React__default.createElement(
+            Wrapper,
+            {
+              className: classes(themeClass),
+              href: link,
+              target: target,
+              onClick: onClick,
+              onMouseOver: onMouseOver
+            },
+            title,
+            _this2._renderExternalLinkIcon()
+          );
+        }
+      );
+    }
+  }]);
+
+  return Link;
+}(React.Component);
+
+Link.propTypes = {
+  /** URL to navigate to when clicking this link */
+  link: PropTypes.string,
+  /** Called when link is clicked  */
+  onClick: PropTypes.func,
+  /** Called when hovering over the link */
+  onMouseOver: PropTypes.func,
+  /** Corresponds to the anchor tag's target */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
+  /** Link text */
+  title: PropTypes.string
+};
+Link.defaultProps = {
+  onClick: function onClick() {},
+  onMouseOver: function onMouseOver() {}
+};
+Link.__docgenInfo = {
+  "description": "@todo Consider extending TextLink",
+  "displayName": "Link",
+  "props": {
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this link"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when link is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the link",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Corresponds to the anchor tag's target"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Link text"
+    }
+  }
+};
+
+var _createClass$4 = 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; }; }();
+
+function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$4(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$4(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 Module = function (_Component) {
+  _inherits$4(Module, _Component);
+
+  function Module() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$4(this, Module);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$4(this, (_ref = Module.__proto__ || Object.getPrototypeOf(Module)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, null);
+    }, _temp), _possibleConstructorReturn$4(_this, _ret);
+  }
+
+  _createClass$4(Module, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          icon = _props.icon,
+          link = _props.link,
+          title = _props.title,
+          target = _props.target,
+          active = _props.active,
+          activeChildren = _props.activeChildren,
+          onClickTitle = _props.onClickTitle,
+          onMouseOver = _props.onMouseOver;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__module");
+      };
+
+      var linkClasses = function linkClasses(themeClass) {
+        return cx(themeClass, "hig__side-nav__module__link", {
+          "hig__side-nav__module__link--active": active,
+          "hig__side-nav__module__link--active-children": activeChildren
+        });
+      };
+
+      var submodulesClasses = cx("hig__side-nav__module__submodules", {
+        "hig__side-nav__module__submodules--no-icon": !icon
+      });
+
+      var Wrapper = link ? "a" : "div";
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React__default.createElement(
+            "div",
+            { className: classes(themeClass), onMouseOver: onMouseOver },
+            React__default.createElement(
+              "div",
+              { className: "hig__side-nav__module__row" },
+              React__default.createElement(
+                Wrapper,
+                {
+                  className: linkClasses(themeClass),
+                  href: link,
+                  onClick: onClickTitle,
+                  target: target
+                },
+                React__default.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__icon" },
+                  icon
+                ),
+                React__default.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__title" },
+                  title
+                ),
+                React__default.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__external-link-icon" },
+                  _this2._renderExternalLinkIcon()
+                )
+              ),
+              _this2.props.children && React__default.createElement(CollapseButton, {
+                minimized: _this2.props.minimized,
+                onClick: _this2.props.onClickCollapseButton
+              })
+            ),
+            !_this2.props.minimized && React__default.createElement(
+              "div",
+              { className: submodulesClasses },
+              children
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return Module;
+}(React.Component);
+
+Module.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** Zero or more SideNav submodules */
+  children: PropTypes.node,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node,
+  /** URL to navigate to when clicking this module */
+  link: PropTypes.string,
+  /** Indicates whether to display nested submodules */
+  minimized: PropTypes.bool,
+  /** Called when clicking on the collapse button */
+  onClickCollapseButton: PropTypes.func,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the title */
+  onMouseOver: PropTypes.func,
+  /** A label for rendering this Module */
+  title: PropTypes.string.isRequired,
+  /** Anchor target. Applicable only if link is provided */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
+};
+Module.defaultProps = {
+  minimized: false,
+  onClickCollapseButton: function onClickCollapseButton() {},
+  onClickTitle: function onClickTitle() {},
+  onMouseOver: function onMouseOver() {},
+  target: "_self"
+};
+Module.__docgenInfo = {
+  "description": "",
+  "displayName": "Module",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Zero or more SideNav submodules"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "An instance of @hig/icon"
+    },
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this module"
+    },
+    "minimized": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates whether to display nested submodules",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "onClickCollapseButton": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the collapse button",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": "A label for rendering this Module"
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Anchor target. Applicable only if link is provided",
+      "defaultValue": {
+        "value": "\"_self\"",
+        "computed": false
+      }
+    }
+  }
+};
+
 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 _createClass$5 = 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; }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 _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 _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-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 _possibleConstructorReturn$5(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 skeletonItemStyles = [{
+function _inherits$5(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 Module$1 = function (_Component) {
+  _inherits$5(Module$$1, _Component);
+
+  function Module$$1(props) {
+    _classCallCheck$5(this, Module$$1);
+
+    var _this = _possibleConstructorReturn$5(this, (Module$$1.__proto__ || Object.getPrototypeOf(Module$$1)).call(this, props));
+
+    _this.handleModuleMinimizeToggle = function (e) {
+      return _this.setState({ minimized: !_this.state.minimized }, function () {
+        return _this.props.onClickCollapseButton && _this.props.onClickCollapseButton(e);
+      });
+    };
+
+    _this.renderPresenter = function (presenterBag) {
+      var presenterProps = _extends({}, _this.props, presenterBag);
+
+      var children = presenterProps.children,
+          otherProps = _objectWithoutProperties(presenterProps, ["children"]);
+
+      return React__default.createElement(
+        Module,
+        otherProps,
+        children
+      );
+    };
+
+    _this.state = {
+      minimized: props.minimized
+    };
+    return _this;
+  }
+
+  _createClass$5(Module$$1, [{
+    key: "createPresenterBag",
+
+
+    /**
+     * @returns {PresenterBag}
+     */
+    value: function createPresenterBag() {
+      var minimized = this.state.minimized;
+
+
+      return {
+        minimized: minimized,
+        onClickCollapseButton: this.handleModuleMinimizeToggle,
+        onClickTitle: this.handleModuleMinimizeToggle
+      };
+    }
+
+    /**
+     * @param {PresenterBag}
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var presenterBag = this.createPresenterBag();
+      var renderPresenter = this.renderPresenter;
+
+
+      return renderPresenter(presenterBag);
+    }
+  }]);
+
+  return Module$$1;
+}(React.Component);
+
+Module$1.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** Zero or more SideNav submodules */
+  children: PropTypes.node,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node,
+  /** URL to navigate to when clicking this module */
+  link: PropTypes.string,
+  /** Indicates whether to display nested submodules */
+  minimized: PropTypes.bool,
+  /** Called when clicking on the collapse button */
+  onClickCollapseButton: PropTypes.func,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the title */
+  onMouseOver: PropTypes.func,
+  /** A label for rendering this Module */
+  title: PropTypes.string.isRequired,
+  /** Anchor target. Applicable only if link is provided */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
+};
+Module$1.defaultProps = {
+  minimized: false
+};
+Module$1.__docgenInfo = {
+  "description": "",
+  "displayName": "Module",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Zero or more SideNav submodules"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "An instance of @hig/icon"
+    },
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this module"
+    },
+    "minimized": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates whether to display nested submodules",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "onClickCollapseButton": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the collapse button"
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title"
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the title"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": "A label for rendering this Module"
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Anchor target. Applicable only if link is provided"
+    }
+  }
+};
+
+var _createClass$6 = 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; }; }();
+
+function _classCallCheck$6(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$6(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$6(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 ModuleCompact = function (_Component) {
+  _inherits$6(ModuleCompact, _Component);
+
+  function ModuleCompact() {
+    _classCallCheck$6(this, ModuleCompact);
+
+    return _possibleConstructorReturn$6(this, (ModuleCompact.__proto__ || Object.getPrototypeOf(ModuleCompact)).apply(this, arguments));
+  }
+
+  _createClass$6(ModuleCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          active = _props.active,
+          activeChildren = _props.activeChildren,
+          icon = _props.icon,
+          onClickTitle = _props.onClickTitle,
+          onMouseOver = _props.onMouseOver;
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__module");
+      };
+
+      var linkClasses = function linkClasses(themeClass) {
+        return cx(themeClass, "hig__side-nav__module__link", {
+          "hig__side-nav__module__link--active": active,
+          "hig__side-nav__module__link--active-children": activeChildren
+        });
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            { className: classes(themeClass), onMouseOver: onMouseOver },
+            React__default.createElement(
+              "div",
+              { className: "hig__side-nav__module__row" },
+              React__default.createElement(
+                "div",
+                {
+                  className: linkClasses(themeClass),
+                  onClick: onClickTitle,
+                  role: "button",
+                  tabIndex: 0
+                },
+                React__default.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__icon" },
+                  icon
+                )
+              )
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return ModuleCompact;
+}(React.Component);
+
+ModuleCompact.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node.isRequired,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the icon */
+  onMouseOver: PropTypes.func
+};
+ModuleCompact.defaultProps = {
+  onClickTitle: function onClickTitle() {},
+  onMouseOver: function onMouseOver() {}
+};
+ModuleCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "ModuleCompact",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": true,
+      "description": "An instance of @hig/icon"
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the icon",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$7 = 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; }; }();
+
+function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$7(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$7(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 Submodule = function (_Component) {
+  _inherits$7(Submodule, _Component);
+
+  function Submodule() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$7(this, Submodule);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, { size: Icon.sizes.PX_16 });
+    }, _temp), _possibleConstructorReturn$7(_this, _ret);
+  }
+
+  _createClass$7(Submodule, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          active = _props.active,
+          title = _props.title,
+          link = _props.link,
+          onClick = _props.onClick,
+          onMouseOver = _props.onMouseOver,
+          target = _props.target;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav__submodule", {
+          "hig__side-nav__submodule--active": active
+        });
+      };
+
+      var Wrapper = link ? "a" : "div";
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React__default.createElement(
+            Wrapper,
+            {
+              className: classes(themeClass),
+              href: link,
+              target: target,
+              onClick: onClick,
+              onMouseOver: onMouseOver
+            },
+            title,
+            _this2._renderExternalLinkIcon()
+          );
+        }
+      );
+    }
+  }]);
+
+  return Submodule;
+}(React.Component);
+
+Submodule.propTypes = {
+  /** Indicates this submodule is currently active */
+  active: PropTypes.bool,
+  /** URL to navigate to when clicking this submodule */
+  link: PropTypes.string,
+  /** Called when clicking on the submodule */
+  onClick: PropTypes.func,
+  /** Called when hovering over the submodule */
+  onMouseOver: PropTypes.func,
+  /** Anchor target. Applicable only if link is provided */
+  target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
+  /** Text to render */
+  title: PropTypes.string
+};
+Submodule.__docgenInfo = {
+  "description": "",
+  "displayName": "Submodule",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this submodule is currently active"
+    },
+    "link": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "URL to navigate to when clicking this submodule"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the submodule"
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the submodule"
+    },
+    "target": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"_self\"",
+          "computed": false
+        }, {
+          "value": "\"_blank\"",
+          "computed": false
+        }, {
+          "value": "\"_parent\"",
+          "computed": false
+        }, {
+          "value": "\"_top\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Anchor target. Applicable only if link is provided"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text to render"
+    }
+  }
+};
+
+var _createClass$8 = 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; }; }();
+
+function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$8(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$8(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 SideNav = function (_Component) {
+  _inherits$8(SideNav, _Component);
+
+  function SideNav() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$8(this, SideNav);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$8(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
+      var _this$props = _this.props,
+          headerLabel = _this$props.headerLabel,
+          headerLink = _this$props.headerLink,
+          superHeaderLabel = _this$props.superHeaderLabel,
+          superHeaderLink = _this$props.superHeaderLink;
+
+
+      if (!(superHeaderLabel || headerLabel)) {
+        return null;
+      }
+
+      var SuperHeaderWrapper = superHeaderLink ? "a" : "div";
+      var HeaderWrapper = headerLink ? "a" : "div";
+
+      return React__default.createElement(
+        "div",
+        { className: "hig__side-nav__headers" },
+        superHeaderLabel && React__default.createElement(
+          "h3",
+          { className: "hig__side-nav__super-header" },
+          React__default.createElement(
+            SuperHeaderWrapper,
+            {
+              className: "hig__side-nav__super-header-link",
+              href: superHeaderLink
+            },
+            superHeaderLabel
+          )
+        ),
+        headerLabel && React__default.createElement(
+          "h4",
+          { className: "hig__side-nav__header" },
+          React__default.createElement(
+            HeaderWrapper,
+            {
+              className: "hig__side-nav__header-link",
+              href: headerLink
+            },
+            headerLabel
+          )
+        )
+      );
+    }, _temp), _possibleConstructorReturn$8(_this, _ret);
+  }
+
+  _createClass$8(SideNav, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          copyright = _props.copyright,
+          groups = _props.groups,
+          links = _props.links,
+          onMinimize = _props.onMinimize,
+          showMinimizeButton = _props.showMinimizeButton;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React__default.createElement(
+            "nav",
+            { className: classes(themeClass) },
+            React__default.createElement(
+              "div",
+              { className: "hig__side-nav__overflow" },
+              _this2._renderHeaders(),
+              groups && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__groups" },
+                groups
+              ),
+              children && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__slot" },
+                children
+              ),
+              links && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__links" },
+                links
+              ),
+              copyright && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__copyright" },
+                copyright
+              )
+            ),
+            showMinimizeButton && React__default.createElement(
+              "div",
+              { className: "hig__side-nav__minimize" },
+              React__default.createElement(IconButton__default, {
+                type: IconButton.types.TRANSPARENT,
+                name: Icon.names.BACK,
+                title: "Minimize",
+                "aria-label": "Minimize",
+                onClick: onMinimize
+              })
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return SideNav;
+}(React.Component);
+
+SideNav.propTypes = {
+  /** Additional content to include below navigation items */
+  children: PropTypes.node,
+  /** Copyright text to include  */
+  copyright: PropTypes.string,
+  /** 0 or more SideNav Groups */
+  groups: PropTypes.node,
+  /** Subtitle at the top of the SideNav */
+  headerLabel: PropTypes.string,
+  /** An href for the SideNav Subtitle */
+  headerLink: PropTypes.string,
+  /** 0 or more SideNav Links */
+  links: PropTypes.node,
+  /** Called when minimize button is clicked */
+  onMinimize: PropTypes.func,
+  /** Renders a button to minimize the SideNav */
+  showMinimizeButton: PropTypes.bool,
+  /** Title at the top of the SideNav */
+  superHeaderLabel: PropTypes.string,
+  /** An href for the SideNav Title */
+  superHeaderLink: PropTypes.string
+};
+SideNav.defaultProps = {
+  onMinimize: function onMinimize() {},
+  showMinimizeButton: false
+};
+SideNav.__docgenInfo = {
+  "description": "",
+  "displayName": "SideNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Additional content to include below navigation items"
+    },
+    "copyright": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Copyright text to include"
+    },
+    "groups": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Groups"
+    },
+    "headerLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Subtitle at the top of the SideNav"
+    },
+    "headerLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Subtitle"
+    },
+    "links": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Links"
+    },
+    "onMinimize": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when minimize button is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "showMinimizeButton": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Renders a button to minimize the SideNav",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "superHeaderLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title at the top of the SideNav"
+    },
+    "superHeaderLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Title"
+    }
+  }
+};
+
+var _extends$1 = 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$9 = 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; }; }();
+
+function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$9(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$9(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 skeletonItemStyles = Object.freeze([{
   maxWidth: "180px",
@@ -105,14 +1429,14 @@ marginBottom: "48px"
   maxWidth: "124px"
-}];
+}]);
 
 var SideNavSkeleton = function (_Component) {
-  _inherits(SideNavSkeleton, _Component);
+  _inherits$9(SideNavSkeleton, _Component);
 
   function SideNavSkeleton() {
-    _classCallCheck(this, SideNavSkeleton);
+    _classCallCheck$9(this, SideNavSkeleton);
 
-    return _possibleConstructorReturn(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
+    return _possibleConstructorReturn$9(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
   }
 
-  _createClass(SideNavSkeleton, [{
+  _createClass$9(SideNavSkeleton, [{
     key: "render",
@@ -127,5 +1451,8 @@ value: function render() {
             "div",
-            { className: classnames("hig__side-nav-skeleton", themeClass) },
+            { className: cx("hig__side-nav-skeleton", themeClass) },
             skeletonItemStyles.map(function (style, index) {
-              return React__default.createElement(SkeletonItem, _extends({ key: index }, style));
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                React__default.createElement(SkeletonItem, _extends$1({ key: index }, style))
+              );
             })
@@ -145,2 +1472,289 @@ );
 
+var _createClass$10 = 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; }; }();
+
+function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$10(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$10(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 Docked = function (_Component) {
+  _inherits$10(Docked, _Component);
+
+  function Docked() {
+    _classCallCheck$10(this, Docked);
+
+    return _possibleConstructorReturn$10(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
+  }
+
+  _createClass$10(Docked, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav-container--docked");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Docked;
+}(React.Component);
+
+Docked.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
+};
+Docked.defaultProps = {
+  onMouseLeave: function onMouseLeave() {},
+  onMouseEnter: function onMouseEnter() {}
+};
+Docked.__docgenInfo = {
+  "description": "",
+  "displayName": "Docked",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$11 = 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; }; }();
+
+function _classCallCheck$11(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$11(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$11(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 BelowTopNav = function (_Component) {
+  _inherits$11(BelowTopNav, _Component);
+
+  function BelowTopNav() {
+    _classCallCheck$11(this, BelowTopNav);
+
+    return _possibleConstructorReturn$11(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
+  }
+
+  _createClass$11(BelowTopNav, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav-container--below-top-nav");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return BelowTopNav;
+}(React.Component);
+
+BelowTopNav.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
+};
+BelowTopNav.__docgenInfo = {
+  "description": "",
+  "displayName": "BelowTopNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container"
+    }
+  }
+};
+
+var _createClass$12 = 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; }; }();
+
+function _classCallCheck$12(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$12(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$12(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 BelowTopNavCompact = function (_Component) {
+  _inherits$12(BelowTopNavCompact, _Component);
+
+  function BelowTopNavCompact() {
+    _classCallCheck$12(this, BelowTopNavCompact);
+
+    return _possibleConstructorReturn$12(this, (BelowTopNavCompact.__proto__ || Object.getPrototypeOf(BelowTopNavCompact)).apply(this, arguments));
+  }
+
+  _createClass$12(BelowTopNavCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseEnter = _props.onMouseEnter;
+
+
+      var classes = function classes(themeClass) {
+        return cx(themeClass, "hig__side-nav-container--below-top-nav-compact");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            {
+              className: classes(themeClass),
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return BelowTopNavCompact;
+}(React.Component);
+
+BelowTopNavCompact.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node,
+  /** Called when beginning to hover over the container */
+  onMouseEnter: PropTypes.func,
+  /** Called when no longer hovering over the container */
+  onMouseLeave: PropTypes.func
+};
+BelowTopNavCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "BelowTopNavCompact",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when beginning to hover over the container"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when no longer hovering over the container"
+    }
+  }
+};
+
+SideNav.CollapseButton = CollapseButton;
+SideNav.Group = Group;
+SideNav.Link = Link;
+SideNav.Module = Module$1;
+SideNav.ModuleCompact = ModuleCompact;
+SideNav.Submodule = Submodule;
+
+exports.default = SideNav;
 exports.SideNavSkeleton = SideNavSkeleton;
+exports.Docked = Docked;
+exports.BelowTopNav = BelowTopNav;
+exports.BelowTopNavCompact = BelowTopNavCompact;

package.json

 {
   "name": "@hig/side-nav",
-  "version": "0.1.0-alpha.242cb53a",
+  "version": "0.1.0-alpha.26ea0b86",
   "description": "HIG SideNav components",
@@ -18,11 +18,12 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/icon": "0.1.0-alpha.242cb53a",
-    "@hig/icon-button": "0.1.0-alpha.242cb53a",
-    "@hig/skeleton-item": "0.1.0-alpha.242cb53a",
-    "@hig/themes": "0.1.0-alpha.242cb53a"
+    "@hig/icon": "0.1.0-alpha.26ea0b86",
+    "@hig/icon-button": "0.1.0-alpha.26ea0b86",
+    "@hig/skeleton-item": "0.1.0-alpha.26ea0b86",
+    "@hig/themes": "0.1.0-alpha.26ea0b86",
+    "classnames": "^2.2.5"
   },
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.242cb53a",
-    "@hig/scripts": "0.2.0-alpha.242cb53a",
-    "@hig/styles": "0.1.0-alpha.242cb53a"
+    "@hig/babel-preset": "0.2.0-alpha.26ea0b86",
+    "@hig/scripts": "0.2.0-alpha.26ea0b86",
+    "@hig/styles": "0.1.0-alpha.26ea0b86"
   },
@@ -34,4 +35,8 @@ "peerDependencies": {
   "scripts": {
-    "build": "hig-scripts-build"
+    "build": "hig-scripts-build",
+    "lint": "eslint src --ext .js,.jsx"
+  },
+  "eslintConfig": {
+    "extends": "@hig"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213061

increased by1786.33%

Lines of code

4819

increased by1891.32%

Worsened metrics

Dependency count

7

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclassnames@^2.2.5

• + Added@hig/icon@0.1.0-alpha.26ea0b86(transitive)

• + Added@hig/icon-button@0.1.0-alpha.26ea0b86(transitive)

• + Added@hig/icons@0.1.0-alpha.26ea0b86(transitive)

• + Added@hig/skeleton-item@0.1.0-alpha.26ea0b86(transitive)

• + Added@hig/themes@0.1.0-alpha.26ea0b86(transitive)

• + Addedclassnames@2.5.1(transitive)

• - Removed@hig/icon@0.1.0-alpha.242cb53a(transitive)

• - Removed@hig/icon-button@0.1.0-alpha.242cb53a(transitive)

• - Removed@hig/icons@0.1.0-alpha.242cb53a(transitive)

• - Removed@hig/skeleton-item@0.1.0-alpha.242cb53a(transitive)

• - Removed@hig/themes@0.1.0-alpha.242cb53a(transitive)

• Updated@hig/icon@0.1.0-alpha.26ea0b86

• Updated@hig/icon-button@0.1.0-alpha.26ea0b86

• Updated@hig/skeleton-item@0.1.0-alpha.26ea0b86

• Updated@hig/themes@0.1.0-alpha.26ea0b86