@bundle-stats/ui 3.4.0-alpha.5 → 4.0.0-alpha.7

package/lib/ui/panels/panels.js

@@ -18,7 +18,7 @@ var _excluded = ["className"],
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

package/lib/ui/skeleton/skeleton.js

@@ -17,7 +17,7 @@ var _excluded = ["className"];
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
 

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

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 

package/lib/ui/tag/tag.js

@@ -17,7 +17,7 @@ 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
 

package/lib/ui/tooltip/tooltip.js

@@ -19,7 +19,7 @@ var _excluded = ["className", "title", "children", "as", "containerRef", "darkMo
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
 

package/lib-esm/app/app.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -8,7 +8,6 @@ import { METRICS_WEBPACK_ASSETS, METRICS_WEBPACK_GENERAL, METRICS_WEBPACK_MODULE
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
-import { BudgetInsights } from '../components/budget-insights';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -84,8 +83,6 @@ JobsProvider.propTypes = {
 };
 
 const OverviewContent = () => {
-  var _jobs$0$insights, _jobs$0$insights$webp;
-
   const {
     jobs
   } = useContext(JobsContext);
@@ -95,15 +92,10 @@ const OverviewContent = () => {
   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, {
+  }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__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, {
+  })), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
     space: "small"
   }, /*#__PURE__*/React.createElement(TotalSizeTypeTitle, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
     jobs: jobs
@@ -114,7 +106,7 @@ const OverviewContent = () => {
 };
 
 const AssetsContent = () => {
-  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
+  var _jobs$;
 
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
   const {
@@ -125,7 +117,6 @@ const AssetsContent = () => {
   }, /*#__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
@@ -136,7 +127,7 @@ const AssetsContent = () => {
 };
 
 const ModulesContent = () => {
-  var _jobs$2, _jobs$0$insights3, _jobs$0$insights3$web;
+  var _jobs$2;
 
   const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
   const {
@@ -147,7 +138,6 @@ const ModulesContent = () => {
   }, /*#__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
@@ -158,7 +148,7 @@ const ModulesContent = () => {
 };
 
 const PackagesContent = () => {
-  var _jobs$3, _jobs$0$insights4, _jobs$0$insights4$web;
+  var _jobs$3;
 
   const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
   const {
@@ -169,7 +159,6 @@ const PackagesContent = () => {
   }, /*#__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
@@ -181,8 +170,6 @@ const PackagesContent = () => {
 };
 
 const AppComponent = _ref3 => {
-  var _jobs$0$insights5, _jobs$0$insights5$web;
-
   let {
     version,
     jobs
@@ -207,7 +194,6 @@ const AppComponent = _ref3 => {
     size: "large",
     keys: METRICS_WEBPACK_GENERAL,
     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

package/lib-esm/app/app.stories.js

@@ -28,28 +28,7 @@ const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE], {
   webpack: {
     budgets: [{
       metric: 'totalSizeByTypeALL',
-      value: 2 * 1024 * 1024
-    }, {
-      metric: 'totalInitialSizeJS',
-      value: 512 * 1024
-    }, {
-      metric: 'totalInitialSizeCSS',
-      value: 50 * 1024
-    }, {
-      metric: 'chunkCount',
-      value: 50
-    }, {
-      metric: 'moduleCount',
-      value: 2000
-    }, {
-      metric: 'duplicatePackagesCount',
-      value: 5
-    }, {
-      metric: 'sizes.totalSizeByTypeJS',
-      value: 2 * 1024 * 1024
-    }, {
-      metric: 'sizes.totalSizeByTypeCSS',
-      value: 20 * 1024
+      value: 1024 * 1024
     }]
   }
 });

package/lib-esm/assets/icons.svg

@@ -1,8 +1,4 @@
 <svg width="16" height="16">
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="10"/>
-<path d="M12 8v4M12 16h.01"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
@@ -14,10 +10,6 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M15 9l-6 6M9 9l6 6"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
-<path d="M22 4L12 14.01l-3-3"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>

package/lib-esm/components/asset-info/asset-info.js

@@ -1,7 +1,7 @@
 import _map from "lodash/map";
 import _find from "lodash/find";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -1,7 +1,7 @@
 import _map from "lodash/map";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-assets/bundle-assets.utils.js

@@ -1,4 +1,5 @@
 import _get from "lodash/get";
+import "core-js/modules/es.array.includes.js";
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
 export const addRowAssetFlags = row => {

package/lib-esm/components/bundle-assets/index.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useMemo } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js

@@ -3,7 +3,7 @@ import _max from "lodash/max";
 import _map from "lodash/map";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -1,52 +1,35 @@
-import _get from "lodash/get";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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, { useCallback, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-import { BudgetInfo } from '../budget-info';
-import css from './bundle-assets-totals-table.module.css';
 export const BundleAssetsTotalsTable = _ref => {
-  var _jobs$0$insights, _jobs$0$insights$webp;
-
   let {
     className,
     jobs,
     customComponentLink: CustomComponentLink,
     ...restProps
   } = _ref;
-  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const 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;
-  const renderRowHeader = useCallback(item => {
+  const items = webpack.compareBySection.sizes(jobs);
+
+  const renderRowHeader = item => {
     const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
     const {
       section,
       title,
       params
     } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-    const [_, ...metricSlugs] = item.key.split('.');
-    const metricKey = metricSlugs.join('.');
-
-    const budget = _get(budgets, metricKey);
-
     return /*#__PURE__*/React.createElement(CustomComponentLink, {
       section: section,
       title: title,
       params: params
-    }, /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xxsmall",
-      className: css.itemTitleText
-    }, /*#__PURE__*/React.createElement("span", null, item.label), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-      metricId: item.key,
-      budgetInsight: budget
-    })));
-  }, [CustomComponentLink]);
+    }, item.label);
+  };
+
   return /*#__PURE__*/React.createElement(MetricsTable, _extends({
     className: className,
     runs: jobs,

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css

@@ -1,3 +1,3 @@
-.itemTitleText {
-  align-items: center;
+.title {
+  color: var(--color-text-light);
 }

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js

@@ -31,22 +31,4 @@ EmptyBaseline.args = {
   jobs: createJobs([{
     webpack: currentStats
   }, null])
-};
-export const WithBudgets = Template.bind();
-WithBudgets.args = {
-  jobs: createJobs([{
-    webpack: currentStats
-  }, {
-    webpack: baselineStats
-  }], {
-    webpack: {
-      budgets: [{
-        metric: 'sizes.totalSizeByTypeJS',
-        value: 2 * 1024 * 1024
-      }, {
-        metric: 'sizes.totalSizeByTypeCSS',
-        value: 20 * 1024
-      }]
-    }
-  })
 };

package/lib-esm/components/bundle-modules/bundle-modules.js

@@ -2,7 +2,7 @@ import _map from "lodash/map";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-modules/index.js

@@ -1,7 +1,7 @@
 import _map from "lodash/map";
 import _uniqBy from "lodash/uniqBy";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useMemo } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-packages/bundle-packages.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-packages/bundle-packages.utils.js

@@ -1,6 +1,7 @@
 import _uniq from "lodash/uniq";
 import _flatten from "lodash/flatten";
 import _get from "lodash/get";
+import "core-js/modules/es.array.includes.js";
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants'; // Get a list of duplicate packages across jobs
 

package/lib-esm/components/bundle-packages/index.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useMemo } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/component-link.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/index.js

@@ -4,7 +4,6 @@ export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
 export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
-export { BudgetInsights } from './budget-insights';
 export { ComponentLink } from './component-link';
 export { DuplicatePackagesWarning } from './duplicate-packages-warning';
 export { Delta } from './delta';

package/lib-esm/components/job-meta/job-meta.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/job-name/job-name.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/metrics-table/metrics-table.js

@@ -2,7 +2,7 @@ import _sum from "lodash/sum";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useMemo } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/metrics-table-options/metrics-table-options.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/module-info/module-info.js

@@ -2,7 +2,7 @@ import _noop from "lodash/noop";
 import _find from "lodash/find";
 import _isEmpty from "lodash/isEmpty";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/summary/summary.js

@@ -1,28 +1,24 @@
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
-import { Icon } from '../../ui/icon';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
-
-const getSourceMetricId = fullMetricId => fullMetricId.split('.').slice(1).join('.');
-
 export const Summary = _ref => {
   let {
     className,
     size,
     keys,
     data,
-    budgets,
     loading,
     showSummaryItemDelta,
     summaryItemLink: SummaryItemCustomLink
@@ -34,32 +30,26 @@ export const Summary = _ref => {
     className: css.items
   }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
     let [metricId] = _ref2;
-    return keys.includes(getSourceMetricId(metricId));
+    return keys.includes(metricId);
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(SummaryItem, _extends({
       key: metricId,
-      className: css.item
-    }, /*#__PURE__*/React.createElement(SummaryItem, {
+      className: css.item,
+      as: SummaryItemCustomLink
+    }, metricOptions.link, {
       size: size,
       id: metricId,
       data: _get(data, metricId),
-      budget: _get(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    }), !loading && /*#__PURE__*/React.createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
-      className: css.readMore
-    }), /*#__PURE__*/React.createElement(Icon, {
-      className: css.readMoreIcon,
-      glyph: Icon.ICONS.ARROW_RIGHT_CIRLCE
-    })));
+    }));
   })));
 };
 Summary.defaultProps = {
   className: '',
   data: null,
-  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -70,10 +60,12 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  budgets: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
+  data: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      baseline: PropTypes.number,
+      current: PropTypes.number
+    })
+  }),
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType

package/lib-esm/components/summary/summary.module.css

@@ -6,49 +6,5 @@
 .item {
   padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
-  position: relative;
-  z-index: 1;
-}
-
-.item::before {
-  content: '';
-  display: block;
-  width: 1px;
-  position: absolute;
-  left: -1px;
-  top: var(--space-small);
-  bottom: var(--space-small);
-  background: var(--color-outline);
-}
-
-.readMore {
-  display: block;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  padding: var(--space-small);
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.readMore:hover,
-.readMore:focus {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.readMoreIcon {
-  display: block;
-}
-
-/** hover state */
-.readMore {
-  opacity: 0;
-}
-
-.item:hover .readMore,
-.item:active .readMore,
-.item:focus .readMore {
-  opacity: 1;
-  transition: var(--transition-in);
+  text-decoration: none;
 }