@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.3

package/lib/ui/table/table.module.css

@@ -1,54 +1,54 @@
 .root {
   border-width: 0;
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
+  text-align: left;
 }
 
-.cell {
+.root th,
+.root td {
   border: 1px solid var(--color-outline);
   border-width: 1px 0 0;
-  padding: var(--space-small) var(--space-small);
-  text-align: left;
-}
-
-tr:last-child .cell {
-  border-bottom-width: 1px;
+  padding: var(--space-small);
 }
 
-.root thead .cell {
-  border-width: 0 0 2px;
+.root thead th {
+  border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
+  background: var(--color-highlight);
 }
 
-.root thead .cell:empty {
+.root thead th:empty {
   display: none;
 }
 
-.root tbody .cell {
+.root tbody th {
   font-weight: normal;
 }
 
-.root tbody .cell a {
+.root tbody tr:first-child td,
+.root tbody tr:first-child th {
+  border-top: 0;
+}
+
+.root tbody td a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody .cell a:hover,
-.root tbody .cell a:focus,
-.root tbody .cell a:active
+.root tbody td a:hover,
+.root tbody td a:focus,
+.root tbody td a:active
 {
   color: var(--color-primary);
   text-decoration: underline;
 }
 
-.root tbody tr:nth-child(odd) .cell {
-  background-color: var(--color-highlight);
-}
-
-.root tbody tr:hover .cell {
+.root tbody tr:hover th,
+.root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
 }
 
@@ -62,12 +62,27 @@ tr:last-child .cell {
 
 /* outline variation */
 .outline {
+  --table-radius: var(--radius-medium);
   border: 1px solid var(--color-outline);
-  border-width: 0 1px;
+  border-radius: var(--table-radius);
+}
+
+.outline thead:first-child tr:first-child th:first-child,
+.outline tbody:first-child tr:first-child td:first-child {
+  border-top-left-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child th:last-child,
+.outline tbody:first-child tr:first-child td:last-child {
+  border-top-right-radius: var(--table-radius);
+}
+
+.outline tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell {
-  border-top-width: 1px;
+.outline tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: var(--table-radius);
 }
 
 .outline.empty {
@@ -75,7 +90,8 @@ tr:last-child .cell {
 }
 
 /* compact variation */
-.compact .cell {
+.compact td,
+.compact th {
   padding-top: var(--space-xsmall);
   padding-bottom: var(--space-xsmall);
 }

package/lib/ui/table/table.stories.js

@@ -71,7 +71,7 @@ stories.add('with custom content and attributes', function () {
     style: {
       textDecoration: 'underline'
     }
-  }, "Col C(undefiner)"))), /*#__PURE__*/_react["default"].createElement(TBody, null, /*#__PURE__*/_react["default"].createElement(Tr, null, /*#__PURE__*/_react["default"].createElement(Th, null, /*#__PURE__*/_react["default"].createElement("strong", null, "row 1")), /*#__PURE__*/_react["default"].createElement(Td, {
+  }, "Col C(underline)"))), /*#__PURE__*/_react["default"].createElement(TBody, null, /*#__PURE__*/_react["default"].createElement(Tr, null, /*#__PURE__*/_react["default"].createElement(Th, null, /*#__PURE__*/_react["default"].createElement("strong", null, "row 1")), /*#__PURE__*/_react["default"].createElement(Td, {
     style: {
       textAlign: 'right'
     }

package/lib/ui/{popover → tag}/index.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _popover = require("./popover");
+var _tag = require("./tag");
 
-Object.keys(_popover).forEach(function (key) {
+Object.keys(_tag).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _popover[key]) return;
+  if (key in exports && exports[key] === _tag[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _popover[key];
+      return _tag[key];
     }
   });
 });

package/lib/ui/tag/tag.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = exports.SIZES = exports.KINDS = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _tagModule = _interopRequireDefault(require("./tag.module.css"));
+
+var _excluded = ["className", "as", "kind", "size"];
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var KINDS = {
+  DEFAULT: 'default',
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  DANGER: 'danger'
+};
+exports.KINDS = KINDS;
+var SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+exports.SIZES = SIZES;
+
+var Tag = function Tag(props) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'span' : _props$as,
+      _props$kind = props.kind,
+      kind = _props$kind === void 0 ? KINDS.DEFAULT : _props$kind,
+      _props$size = props.size,
+      size = _props$size === void 0 ? SIZES.MEDIUM : _props$size,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var rootClassName = (0, _classnames["default"])(_tagModule["default"].root, className, _tagModule["default"][kind], _tagModule["default"][size]);
+  return /*#__PURE__*/_react["default"].createElement(Component, _extends({
+    className: rootClassName
+  }, restProps));
+};
+
+exports.Tag = Tag;
+Tag.propTypes = {
+  className: _propTypes["default"].string,
+  as: _propTypes["default"].elementType,
+  kind: _propTypes["default"].oneOf(Object.values(KINDS)),
+  size: _propTypes["default"].oneOf(Object.values(SIZES))
+};
+Tag.defaultProps = {
+  className: '',
+  as: 'span',
+  kind: KINDS.DEFAULT,
+  size: SIZES.MEDIUM
+};
+Tag.KINDS = KINDS;
+Tag.SIZES = SIZES;

package/lib/ui/tag/tag.module.css

@@ -0,0 +1,55 @@
+.root {
+  display: inline-block;
+  font-family: var(--font-family);
+  font-weight: bold;
+  background: var(--color-text-light);
+  color: var(--color-light);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/** Kind variation */
+.success {
+  background: var(--color-success);
+}
+
+.info {
+  background: var(--color-info);
+}
+
+.warning {
+  background: var(--color-warning-dark);
+}
+
+.danger {
+  background: var(--color-danger);
+}
+
+/** Size variation */
+/** default: medium */
+.root {
+  border-radius: var(--radius-medium);
+  padding: var(--space-xxxsmall);
+  min-width: var(--space-small);
+  height: var(--space-small);
+  font-size: 9px;
+  line-height: 1;
+}
+
+.small {
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2);
+  height: var(--space-xsmall);
+  min-width: var(--space-xsmall);
+  font-size: 8px;
+  line-height: 1;
+}
+
+.large {
+  border-radius: var(--radius-large);
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  min-width: var(--space-medium);
+  height: var(--space-medium);
+  font-size: 12px;
+  line-height: var(--space-small);
+}

package/lib/ui/tag/tag.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.OneLetter = exports.Default = void 0;
+
+var _ = require(".");
+
+var _default = {
+  title: 'UI/Tag',
+  component: _.Tag,
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: Object.values(_.Tag.KINDS)
+    },
+    size: {
+      control: 'select',
+      options: Object.values(_.Tag.SIZES)
+    }
+  },
+  args: {
+    children: 'tag'
+  }
+};
+exports["default"] = _default;
+
+var Default = _.Tag.bind();
+
+exports.Default = Default;
+
+var OneLetter = _.Tag.bind();
+
+exports.OneLetter = OneLetter;
+OneLetter.args = {
+  children: 'd'
+};

package/lib/ui/tooltip/tooltip.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Tooltip = require("reakit/Tooltip");
+var _tooltip = require("ariakit/tooltip");
 
 var _tooltipModule = _interopRequireDefault(require("./tooltip.module.css"));
 
@@ -34,22 +34,23 @@ var Tooltip = function Tooltip(props) {
       darkMode = props.darkMode,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var rootClassName = (0, _classnames["default"])(_tooltipModule["default"].root, className);
-  var tooltipProps = (0, _Tooltip.useTooltipState)({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+  var tooltip = (0, _tooltip.useTooltipState)({
     placement: 'top'
   });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipReference, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipAnchor, _extends({
     as: Component,
-    className: rootClassName
+    className: (0, _classnames["default"])(_tooltipModule["default"].root, className),
+    state: tooltip
   }, ref ? {
     ref: ref
-  } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, _extends({}, tooltipProps, {
+  } : {}, restProps), children), title && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
+    state: tooltip,
     className: (0, _classnames["default"])(_tooltipModule["default"].tooltip, darkMode && _tooltipModule["default"].tooltipDarkMode)
-  }), /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipArrow, _extends({}, tooltipProps, {
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipArrow, {
+    state: tooltip,
     className: _tooltipModule["default"].arrow,
     size: 12
-  })), title));
+  }), title));
 };
 
 exports.Tooltip = Tooltip;

package/lib/ui/tooltip/tooltip.module.css

@@ -12,10 +12,11 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-medium);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);
 }

package/lib-esm/app/app.js

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
@@ -60,19 +60,133 @@ Layout.defaultProps = {
   jobs: null,
   version: null
 };
+const JobsContext = /*#__PURE__*/React.createContext({
+  jobs: []
+});
 
-const AppComponent = _ref2 => {
-  var _insights$webpack;
-
+const JobsProvider = _ref2 => {
   let {
-    version,
-    jobs
+    jobs,
+    ...restProps
   } = _ref2;
+  const value = useMemo(() => ({
+    jobs
+  }), [jobs]);
+  return /*#__PURE__*/React.createElement(JobsContext.Provider, _extends({
+    value: value
+  }, restProps));
+};
+
+JobsProvider.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+const OverviewContent = () => {
+  var _jobs$0$insights, _jobs$0$insights$webp;
+
+  const {
+    jobs
+  } = useContext(JobsContext);
+  const {
+    duplicatePackagesCount
+  } = jobs[0].summary.webpack;
+  const duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "small"
+  }, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+    duplicatePackagesCount: duplicatePackagesCount,
+    showDelta: jobs.length > 1
+  }), /*#__PURE__*/React.createElement(BudgetInsights, {
+    source: "webpack",
+    budgets: (_jobs$0$insights = jobs[0].insights) == null ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) == null ? void 0 : _jobs$0$insights$webp.budgets
+  }))), /*#__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(BundleAssetsTotalsTable, {
+    jobs: jobs,
+    outline: true
+  }))));
+};
+
+const AssetsContent = () => {
+  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
+
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
-  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
+  const {
+    jobs
+  } = useContext(JobsContext);
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, /*#__PURE__*/React.createElement(Summary, {
+    keys: METRICS_WEBPACK_ASSETS,
+    data: jobs == null ? void 0 : (_jobs$ = jobs[0]) == null ? void 0 : _jobs$.summary,
+    budgets: (_jobs$0$insights2 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights2$web = _jobs$0$insights2.webpack) == null ? void 0 : _jobs$0$insights2$web.budgets,
+    showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/React.createElement(Box, {
+    outline: true
+  }, /*#__PURE__*/React.createElement(BundleAssets, _extends({
+    jobs: jobs,
+    setState: bundleStatsSetState
+  }, bundleStatsState)))));
+};
+
+const ModulesContent = () => {
+  var _jobs$2, _jobs$0$insights3, _jobs$0$insights3$web;
+
   const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
+  const {
+    jobs
+  } = useContext(JobsContext);
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, /*#__PURE__*/React.createElement(Summary, {
+    keys: METRICS_WEBPACK_MODULES,
+    data: jobs == null ? void 0 : (_jobs$2 = jobs[0]) == null ? void 0 : _jobs$2.summary,
+    budgets: (_jobs$0$insights3 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights3$web = _jobs$0$insights3.webpack) == null ? void 0 : _jobs$0$insights3$web.budgets,
+    showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/React.createElement(Box, {
+    outline: true
+  }, /*#__PURE__*/React.createElement(BundleModules, _extends({
+    jobs: jobs,
+    setState: bundleModulesSetState
+  }, bundleModulesState)))));
+};
+
+const PackagesContent = () => {
+  var _jobs$3, _jobs$0$insights4, _jobs$0$insights4$web;
+
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
+  const {
+    jobs
+  } = useContext(JobsContext);
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, /*#__PURE__*/React.createElement(Summary, {
+    keys: METRICS_WEBPACK_PACKAGES,
+    data: jobs == null ? void 0 : (_jobs$3 = jobs[0]) == null ? void 0 : _jobs$3.summary,
+    budgets: (_jobs$0$insights4 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights4$web = _jobs$0$insights4.webpack) == null ? void 0 : _jobs$0$insights4$web.budgets,
+    showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/React.createElement(Box, {
+    outline: true
+  }, /*#__PURE__*/React.createElement(BundlePackages, _extends({
+    jobs: jobs
+  }, bundlePackagesState, {
+    setState: bundlePackagesSetState
+  })))));
+};
+
+const AppComponent = _ref3 => {
+  var _jobs$0$insights5, _jobs$0$insights5$web;
+
+  let {
+    version,
+    jobs
+  } = _ref3;
 
-  if (jobs.length === 0) {
+  if ((jobs == null ? void 0 : jobs.length) === 0) {
     return /*#__PURE__*/React.createElement(Layout, {
       version: version
     }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
@@ -80,15 +194,9 @@ const AppComponent = _ref2 => {
     }, I18N.NO_DATA)));
   }
 
-  const {
-    summary,
-    insights
-  } = useMemo(() => jobs[0], jobs);
-  const {
-    duplicatePackagesCount
-  } = summary.webpack;
-  const duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
-  return /*#__PURE__*/React.createElement(Layout, {
+  return /*#__PURE__*/React.createElement(JobsProvider, {
+    jobs: jobs
+  }, /*#__PURE__*/React.createElement(Layout, {
     jobs: jobs,
     version: version
   }, /*#__PURE__*/React.createElement(Container, {
@@ -96,8 +204,8 @@ const AppComponent = _ref2 => {
   }, /*#__PURE__*/React.createElement(Summary, {
     size: "large",
     keys: METRICS_WEBPACK_GENERAL,
-    data: summary,
-    budgets: insights == null ? void 0 : (_insights$webpack = insights.webpack) == null ? void 0 : _insights$webpack.budgets,
+    data: jobs[0].summary,
+    budgets: (_jobs$0$insights5 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights5$web = _jobs$0$insights5.webpack) == null ? void 0 : _jobs$0$insights5$web.budgets,
     showSummaryItemDelta: jobs.length !== 1
   })), /*#__PURE__*/React.createElement(Container, {
     className: css.tabsContainer
@@ -124,98 +232,20 @@ const AppComponent = _ref2 => {
   }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.ASSETS,
-    render: _ref3 => {
-      var _insights$webpack2;
-
-      let {
-        location
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_ASSETS,
-        data: summary,
-        budgets: insights == null ? void 0 : (_insights$webpack2 = insights.webpack) == null ? void 0 : _insights$webpack2.budgets,
-        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}`
-      })))));
-    }
+    component: AssetsContent
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.MODULES,
-    render: () => {
-      var _insights$webpack3;
-
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_MODULES,
-        data: summary,
-        budgets: insights == null ? void 0 : (_insights$webpack3 = insights.webpack) == null ? void 0 : _insights$webpack3.budgets,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/React.createElement(Box, {
-        outline: true
-      }, /*#__PURE__*/React.createElement(BundleModules, _extends({
-        jobs: jobs,
-        setState: bundleModulesSetState
-      }, bundleModulesState)))));
-    }
+    component: ModulesContent
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.PACKAGES,
-    render: _ref4 => {
-      var _insights$webpack4;
-
-      let {
-        location
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_PACKAGES,
-        data: summary,
-        budgets: insights == null ? void 0 : (_insights$webpack4 = insights.webpack) == null ? void 0 : _insights$webpack4.budgets,
-        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}`
-      })))));
-    }
+    component: PackagesContent
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.OVERVIEW,
-    render: () => {
-      var _insights$webpack5;
-
-      return /*#__PURE__*/React.createElement(Stack, {
-        space: "large"
-      }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-        duplicatePackagesCount: duplicatePackagesCount,
-        showDelta: jobs.length > 1
-      })), (insights == null ? void 0 : (_insights$webpack5 = insights.webpack) == null ? void 0 : _insights$webpack5.budgets) && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(BudgetInsights, {
-        source: "webpack",
-        budgets: insights.webpack.budgets
-      })), /*#__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
-      })))));
-    }
-  }))));
+    component: OverviewContent
+  })))));
 };
 
 AppComponent.defaultProps = {