@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

package/lib/ui/icon/icon.js

@@ -15,8 +15,6 @@ var _iconModule = _interopRequireDefault(require("./icon.module.css"));
 
 var _excluded = ["className", "glyph", "as", "size"];
 
-var _ICON_MAP;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -25,191 +23,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var ArrowIcon = function ArrowIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0V0z"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-  }));
-};
-
-ArrowIcon.defaultProps = {
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var BranchIcon = function BranchIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M512 192c-70.625 0-128 57.344-128 128 0 47.219 25.875 88.062 64 110.281V448s0 128-128 128c-53.062 0-94.656 11.375-128 28.812V302.281c38.156-22.219 64-63.062 64-110.281 0-70.656-57.344-128-128-128S0 121.344 0 192c0 47.219 25.844 88.062 64 110.281V721.75C25.844 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-33.5-13.188-63.75-34.25-86.625C240.375 722.5 270.656 704 320 704c254 0 256-256 256-256v-17.719c38.125-22.219 64-63.062 64-110.281 0-70.656-57.375-128-128-128zm-384-64c35.406 0 64 28.594 64 64s-28.594 64-64 64-64-28.594-64-64 28.594-64 64-64zm0 768c-35.406 0-64-28.625-64-64 0-35.312 28.594-64 64-64s64 28.688 64 64c0 35.375-28.594 64-64 64zm384-512c-35.375 0-64-28.594-64-64s28.625-64 64-64 64 28.594 64 64-28.625 64-64 64z"
-  }));
-};
-
-BranchIcon.defaultProps = {
-  viewBox: "0 0 640 1024",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var CancelIcon = function CancelIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }));
-};
-
-CancelIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  viewBox: "0 0 24 24",
-  width: "24",
-  fill: "currentColor"
-};
-
-var ClockIcon = function ClockIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    d: "M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"
-  }));
-};
-
-ClockIcon.defaultProps = {
-  viewBox: "0 0 14 16",
-  fill: "currentColor"
-};
-
-var CloseIcon = function CloseIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-  }));
-};
-
-CloseIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  fill: "currentColor"
-};
-
-var CommitIcon = function CommitIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M694.875 448C666.375 337.781 567.125 256 448 256c-119.094 0-218.375 81.781-246.906 192H0v128h201.094C229.625 686.25 328.906 768 448 768c119.125 0 218.375-81.75 246.875-192H896V448H694.875zM448 640c-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 70.625 0 128 57.344 128 128 0 70.625-57.375 128-128 128z"
-  }));
-};
-
-CommitIcon.defaultProps = {
-  viewBox: "0 0 896 1024",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var FilterIcon = function FilterIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }));
-};
-
-FilterIcon.defaultProps = {
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var HelpIcon = function HelpIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-  }));
-};
-
-HelpIcon.defaultProps = {
-  viewBox: "0 0 24 24",
-  fill: "currentColor"
-};
-
-var MenuIcon = function MenuIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-  }));
-};
-
-MenuIcon.defaultProps = {
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var PackageIcon = function PackageIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M480 64L0 192v576l480 128 480-128V192L480 64zM63.875 720.934L63.5 288l384.498 102.533.001 432.833L63.875 720.934zM63.5 224l160.254-42.734L640 292.265v.135l-160 42.667L63.5 224zm832.625 496.934L512.001 823.366l.001-432.833L640 356.4v156l128-34.135V322.267L896.5 288l-.375 432.934zM768 258.267v-.125L351.734 147.138 480 112.934 896.5 224 768 258.267z"
-  }));
-};
-
-PackageIcon.defaultProps = {
-  viewBox: "0 0 1024 1024",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var PullRequestIcon = function PullRequestIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M128 64C57.344 64 0 121.344 0 192c0 47.219 25.906 88.062 64 110.281V721.75C25.906 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-47.25-25.844-88.062-64-110.25V302.281c38.156-22.219 64-63.062 64-110.281 0-70.656-57.344-128-128-128zm0 832c-35.312 0-64-28.625-64-64 0-35.312 28.688-64 64-64 35.406 0 64 28.688 64 64 0 35.375-28.594 64-64 64zm0-640c-35.312 0-64-28.594-64-64s28.688-64 64-64c35.406 0 64 28.594 64 64s-28.594 64-64 64zm576 465.75V320c0-192.5-192-192-192-192h-64V0L256 192l192 192V256h64c56.438 0 64 64 64 64v401.75c-38.125 22.188-64 62.938-64 110.25 0 70.625 57.375 128 128 128s128-57.375 128-128c0-47.25-25.875-88.062-64-110.25zM640 896c-35.312 0-64-28.625-64-64 0-35.312 28.688-64 64-64 35.375 0 64 28.688 64 64 0 35.375-28.625 64-64 64z"
-  }));
-};
-
-PullRequestIcon.defaultProps = {
-  viewBox: "0 0 768 1024",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var SortIcon = function SortIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }));
-};
-
-SortIcon.defaultProps = {
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
-
-var WarningIcon = function WarningIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
-  }));
-};
-
-WarningIcon.defaultProps = {
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor"
-};
 var ICONS = {
   ARROW: 'arrow',
-  BRANCH: 'branch',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
@@ -217,12 +32,9 @@ var ICONS = {
   FILTER: 'filter',
   HELP: 'help',
   MENU: 'menu',
-  PACKAGE: 'package',
-  PR: 'pr',
   SORT: 'sort',
   WARNING: 'warning'
 };
-var ICON_MAP = (_ICON_MAP = {}, _defineProperty(_ICON_MAP, ICONS.ARROW, ArrowIcon), _defineProperty(_ICON_MAP, ICONS.BRANCH, BranchIcon), _defineProperty(_ICON_MAP, ICONS.CANCEL, CancelIcon), _defineProperty(_ICON_MAP, ICONS.CLOCK, ClockIcon), _defineProperty(_ICON_MAP, ICONS.CLOSE, CloseIcon), _defineProperty(_ICON_MAP, ICONS.COMMIT, CommitIcon), _defineProperty(_ICON_MAP, ICONS.FILTER, FilterIcon), _defineProperty(_ICON_MAP, ICONS.HELP, HelpIcon), _defineProperty(_ICON_MAP, ICONS.MENU, MenuIcon), _defineProperty(_ICON_MAP, ICONS.PACKAGE, PackageIcon), _defineProperty(_ICON_MAP, ICONS.PR, PullRequestIcon), _defineProperty(_ICON_MAP, ICONS.SORT, SortIcon), _defineProperty(_ICON_MAP, ICONS.WARNING, WarningIcon), _ICON_MAP);
 
 var Icon = function Icon(_ref) {
   var className = _ref.className,
@@ -231,12 +43,13 @@ var Icon = function Icon(_ref) {
       size = _ref.size,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var Svg = typeof glyph === 'string' ? ICON_MAP[glyph] : glyph;
   return /*#__PURE__*/_react["default"].createElement(Component, _extends({
     className: (0, _classnames["default"])(_iconModule["default"].root, className, _iconModule["default"][size])
-  }, restProps), /*#__PURE__*/_react["default"].createElement(Svg, {
+  }, restProps), /*#__PURE__*/_react["default"].createElement("svg", {
     className: _iconModule["default"].icon
-  }));
+  }, /*#__PURE__*/_react["default"].createElement("use", {
+    xlinkHref: "#".concat(glyph)
+  })));
 };
 
 exports.Icon = Icon;

package/lib/ui/logo/logo.constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KINDS = exports.KIND_DEFAULT = exports.KIND_WEBPACK = exports.KIND_GITHUB = exports.KIND_LOGOTYPE = exports.KIND_LOGO = void 0;
+exports.KIND_WEBPACK = exports.KIND_LOGOTYPE = exports.KIND_LOGO = exports.KIND_GITHUB = exports.KIND_DEFAULT = exports.KINDS = void 0;
 var KIND_LOGO = 'logo';
 exports.KIND_LOGO = KIND_LOGO;
 var KIND_LOGOTYPE = 'logotype';

package/lib/ui/popover/popover.js

@@ -63,7 +63,9 @@ var Popover = function Popover(_ref) {
     tabIndex: 0
   }), /*#__PURE__*/_react["default"].createElement(_Popover.PopoverArrow, _extends({
     className: _popoverModule["default"].arrow
-  }, popover)), typeof children === 'function' ? children({
+  }, popover, {
+    size: 24
+  })), typeof children === 'function' ? children({
     popoverToggle: popover.toggle
   }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     glyph: "close",

package/lib/ui/popover/popover.module.css

@@ -23,7 +23,7 @@
 }
 
 .popover {
-  padding: var(--space-xsmall) var(--space-medium) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
@@ -53,13 +53,13 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-light);
+  color: var(--color-text-ultra-light);
   transition: var(--transition-out);
 }
 
 .closeBtn:hover,
 .closeBtn:active,
 .closeBtn:focus {
-  color: var(--color-text);
+  color: var(--color-text-light);
   transition: var(--transition-in);
 }

package/lib/ui/sort-dropdown/sort-dropdown.js

@@ -38,12 +38,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var SortDropdown = function SortDropdown(props) {
   var className = props.className,
       label = props.label,
-      items = props.items,
-      sortBy = props.sortBy,
+      fields = props.fields,
+      field = props.field,
       direction = props.direction,
       onChange = props.onChange;
   var rootClassName = (0, _classnames["default"])(_sortDropdownModule["default"].root, className);
-  var customLabel = items[sortBy] ? "Ordered by ".concat(items[sortBy].label) : label;
+  var customLabel = fields[field] ? "Ordered by ".concat(fields[field].label) : label;
   return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, {
     className: rootClassName,
     label: customLabel,
@@ -55,10 +55,10 @@ var SortDropdown = function SortDropdown(props) {
         menuItemClassName = _ref.menuItemClassName,
         menuItemActiveClassName = _ref.menuItemActiveClassName;
 
-    var getButtonOnClick = function getButtonOnClick(newSortBy, newDirection) {
+    var getButtonOnClick = function getButtonOnClick(newField, newDirection) {
       return function () {
         onChange({
-          sortBy: newSortBy,
+          field: newField,
           direction: newDirection
         });
         menu.toggle();
@@ -67,25 +67,24 @@ var SortDropdown = function SortDropdown(props) {
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: _sortDropdownModule["default"].items
-    }, Object.entries(items).map(function (_ref2) {
+    }, Object.entries(fields).map(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
           key = _ref3[0],
           item = _ref3[1];
 
       var buttonProps = direction === 'asc' ? {
-        className: (0, _classnames["default"])(_sortDropdownModule["default"].itemButton, _sortDropdownModule["default"].itemAsc),
+        className: _sortDropdownModule["default"].itemAsc,
         onClick: getButtonOnClick(key, 'desc'),
         title: "Order data by ".concat(item.label, " descending")
       } : {
-        className: _sortDropdownModule["default"].itemButton,
         onClick: getButtonOnClick(key, 'asc'),
         title: "Order data by ".concat(item.label, " ascending")
       };
-      var isActive = sortBy === key;
+      var isActive = field === key;
       return /*#__PURE__*/_react["default"].createElement(MenuItem, _extends({
         key: key
       }, menu, buttonProps, {
-        className: (0, _classnames["default"])(menuItemClassName, _sortDropdownModule["default"].item, isActive && menuItemActiveClassName, isActive && _sortDropdownModule["default"].active)
+        className: (0, _classnames["default"])(buttonProps.className, menuItemClassName, _sortDropdownModule["default"].item, isActive && menuItemActiveClassName, isActive && _sortDropdownModule["default"].active)
       }), /*#__PURE__*/_react["default"].createElement("span", {
         className: _sortDropdownModule["default"].itemLabel
       }, item.label), /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
@@ -101,14 +100,14 @@ SortDropdown.defaultProps = {
   className: '',
   label: 'Order by',
   onChange: function onChange() {},
-  sortBy: '',
+  field: '',
   direction: 'asc'
 };
 SortDropdown.propTypes = {
   className: _propTypes["default"].string,
   label: _propTypes["default"].string,
-  items: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].string)).isRequired,
+  fields: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].string)).isRequired,
   onChange: _propTypes["default"].func,
-  sortBy: _propTypes["default"].string,
+  field: _propTypes["default"].string,
   direction: _propTypes["default"].string
 };

package/lib/ui/sort-dropdown/sort-dropdown.stories.js

@@ -19,7 +19,7 @@ stories.add('default', function () {
     onChange: function onChange(state) {
       console.log(state); // eslint-disable-line no-console
     },
-    items: {
+    fields: {
       filename: {
         label: 'Filename'
       },
@@ -27,6 +27,6 @@ stories.add('default', function () {
         label: 'Size'
       }
     },
-    sortBy: "size"
+    field: "size"
   });
 });

package/lib/ui/tooltip/tooltip.js

@@ -47,7 +47,8 @@ var Tooltip = function Tooltip(props) {
   } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, _extends({}, tooltipProps, {
     className: (0, _classnames["default"])(_tooltipModule["default"].tooltip, darkMode && _tooltipModule["default"].tooltipDarkMode)
   }), /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipArrow, _extends({}, tooltipProps, {
-    className: _tooltipModule["default"].arrow
+    className: _tooltipModule["default"].arrow,
+    size: 12
   })), title));
 };
 

package/lib-esm/app/app.js

@@ -1,9 +1,5 @@
-var _excluded = ["jobs", "version"];
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
@@ -27,32 +23,30 @@ import I18N from '../i18n';
 import { Header } from './header';
 import css from './app.module.css';
 
-var ScrollToTop = function ScrollToTop() {
-  var _useLocation = useLocation(),
-      pathname = _useLocation.pathname;
-
-  useEffect(function () {
+const ScrollToTop = () => {
+  const {
+    pathname
+  } = useLocation();
+  useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);
   return null;
 };
 
-var Layout = function Layout(_ref) {
-  var jobs = _ref.jobs,
-      version = _ref.version,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: css.root
-  }, /*#__PURE__*/React.createElement(Header, {
-    className: css.header,
-    jobs: jobs
-  }), /*#__PURE__*/React.createElement("main", _extends({
-    className: css.main
-  }, props)), /*#__PURE__*/React.createElement(Footer, {
-    version: version
-  }));
-};
+const Layout = ({
+  jobs,
+  version,
+  ...props
+}) => /*#__PURE__*/React.createElement("div", {
+  className: css.root
+}, /*#__PURE__*/React.createElement(Header, {
+  className: css.header,
+  jobs: jobs
+}), /*#__PURE__*/React.createElement("main", _extends({
+  className: css.main
+}, props)), /*#__PURE__*/React.createElement(Footer, {
+  version: version
+}));
 
 Layout.propTypes = {
   jobs: PropTypes.arrayOf(PropTypes.object),
@@ -63,21 +57,13 @@ Layout.defaultProps = {
   version: null
 };
 
-var AppComponent = function AppComponent(_ref2) {
-  var version = _ref2.version,
-      jobs = _ref2.jobs;
-
-  var _useComponentQuerySta = useComponentQueryState(COMPONENT.BUNDLE_ASSETS),
-      bundleStatsState = _useComponentQuerySta[0],
-      bundleStatsSetState = _useComponentQuerySta[1];
-
-  var _useComponentQuerySta2 = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES),
-      bundlePackagesState = _useComponentQuerySta2[0],
-      bundlePackagesSetState = _useComponentQuerySta2[1];
-
-  var _useComponentQuerySta3 = useComponentQueryState(COMPONENT.BUNDLE_MODULES),
-      bundleModulesState = _useComponentQuerySta3[0],
-      bundleModulesSetState = _useComponentQuerySta3[1];
+const AppComponent = ({
+  version,
+  jobs
+}) => {
+  const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
+  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
 
   if (jobs.length === 0) {
     return /*#__PURE__*/React.createElement(Layout, {
@@ -87,8 +73,10 @@ var AppComponent = function AppComponent(_ref2) {
     }, I18N.NO_DATA)));
   }
 
-  var duplicatePackagesCount = jobs[0].summary.webpack.duplicatePackagesCount;
-  var duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
+  const {
+    duplicatePackagesCount
+  } = jobs[0].summary.webpack;
+  const duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
   return /*#__PURE__*/React.createElement(Layout, {
     jobs: jobs,
     version: version
@@ -124,78 +112,73 @@ var AppComponent = function AppComponent(_ref2) {
   }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.ASSETS,
-    render: function render(_ref3) {
-      var location = _ref3.location;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_ASSETS,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/React.createElement(Box, {
-        outline: true
-      }, /*#__PURE__*/React.createElement(BundleAssets, _extends({
-        jobs: jobs,
-        setState: bundleStatsSetState
-      }, bundleStatsState, {
-        key: location.pathname + "_" + location.search
-      })))));
-    }
+    render: ({
+      location
+    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+      space: "medium"
+    }, /*#__PURE__*/React.createElement(Summary, {
+      keys: METRICS_WEBPACK_ASSETS,
+      data: jobs[0].summary,
+      showSummaryItemDelta: jobs.length !== 1
+    }), /*#__PURE__*/React.createElement(Box, {
+      outline: true
+    }, /*#__PURE__*/React.createElement(BundleAssets, _extends({
+      jobs: jobs,
+      setState: bundleStatsSetState
+    }, bundleStatsState, {
+      key: `${location.pathname}_${location.search}`
+    })))))
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.MODULES,
-    render: function render() {
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_MODULES,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/React.createElement(Box, {
-        outline: true
-      }, /*#__PURE__*/React.createElement(BundleModules, _extends({
-        jobs: jobs,
-        setState: bundleModulesSetState
-      }, bundleModulesState)))));
-    }
+    render: () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+      space: "medium"
+    }, /*#__PURE__*/React.createElement(Summary, {
+      keys: METRICS_WEBPACK_MODULES,
+      data: jobs[0].summary,
+      showSummaryItemDelta: jobs.length !== 1
+    }), /*#__PURE__*/React.createElement(Box, {
+      outline: true
+    }, /*#__PURE__*/React.createElement(BundleModules, _extends({
+      jobs: jobs,
+      setState: bundleModulesSetState
+    }, bundleModulesState)))))
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.PACKAGES,
-    render: function render(_ref4) {
-      var location = _ref4.location;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_PACKAGES,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/React.createElement(Box, {
-        outline: true
-      }, /*#__PURE__*/React.createElement(BundlePackages, _extends({
-        jobs: jobs
-      }, bundlePackagesState, {
-        setState: bundlePackagesSetState,
-        key: location.pathname + "_" + location.search
-      })))));
-    }
+    render: ({
+      location
+    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+      space: "medium"
+    }, /*#__PURE__*/React.createElement(Summary, {
+      keys: METRICS_WEBPACK_PACKAGES,
+      data: jobs[0].summary,
+      showSummaryItemDelta: jobs.length !== 1
+    }), /*#__PURE__*/React.createElement(Box, {
+      outline: true
+    }, /*#__PURE__*/React.createElement(BundlePackages, _extends({
+      jobs: jobs
+    }, bundlePackagesState, {
+      setState: bundlePackagesSetState,
+      key: `${location.pathname}_${location.search}`
+    })))))
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.OVERVIEW,
-    render: function render() {
-      return /*#__PURE__*/React.createElement(Stack, {
-        space: "large"
-      }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-        duplicatePackagesCount: duplicatePackagesCount
-      })), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "small"
-      }, /*#__PURE__*/React.createElement(TotalSizeTypeTitle, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-        jobs: jobs
-      }), /*#__PURE__*/React.createElement(Box, {
-        outline: true
-      }, /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-        jobs: jobs
-      })))));
-    }
+    render: () => /*#__PURE__*/React.createElement(Stack, {
+      space: "large"
+    }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+      duplicatePackagesCount: duplicatePackagesCount,
+      showDelta: jobs.length > 1
+    })), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+      space: "small"
+    }, /*#__PURE__*/React.createElement(TotalSizeTypeTitle, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
+      jobs: jobs
+    }), /*#__PURE__*/React.createElement(Box, {
+      outline: true
+    }, /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+      jobs: jobs
+    })))))
   }))));
 };
 
@@ -213,6 +196,4 @@ AppComponent.propTypes = {
   })),
   version: PropTypes.string
 };
-export var App = function App(props) {
-  return /*#__PURE__*/React.createElement(HashRouter, null, /*#__PURE__*/React.createElement(ScrollToTop, null), /*#__PURE__*/React.createElement(QueryStateProvider, null, /*#__PURE__*/React.createElement(AppComponent, props)));
-};
+export const App = props => /*#__PURE__*/React.createElement(HashRouter, null, /*#__PURE__*/React.createElement(ScrollToTop, null), /*#__PURE__*/React.createElement(QueryStateProvider, null, /*#__PURE__*/React.createElement(AppComponent, props)));