@bundle-stats/ui 3.4.0-beta.0 → 4.0.0-alpha.10

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

@@ -1,10 +1,4 @@
-.root {
-  position: relative;
-  padding-right: var(--space-xlarge);
-}
-
 .title {
-  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);

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

@@ -2,70 +2,44 @@ import React from 'react';
 import { SummaryItem } from './summary-item';
 export default {
   title: 'Components/SummaryItem',
-  component: SummaryItem,
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: '320px'
-    }
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    loading: false,
-    id: 'webpack.totalSizeByTypeALL',
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    }
-  }
-};
-
-const Template = args => /*#__PURE__*/React.createElement(SummaryItem, args);
-
-export const Standard = Template.bind();
-export const SizeLarge = Template.bind();
-SizeLarge.args = {
-  size: 'large'
-};
-export const ShowMetricDescription = Template.bind();
-ShowMetricDescription.args = {
-  showMetricDescription: true
-};
-export const ShowDeltaFalse = Template.bind();
-ShowDeltaFalse.args = {
-  showDelta: false
+  component: SummaryItem
 };
-export const BudgetError = Template.bind();
-BudgetError.args = {
-  showMetricDescription: true,
-  budget: {
-    type: 'ERROR',
-    message: {
-      text: 'Metric is over the budget',
-      md: 'Metric is over the budget'
-    },
-    data: {
-      currentValue: 120 * 1000,
-      budgetValue: 100 * 1000,
-      failed: true
-    }
+export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
   }
-};
-export const BudgetSuccess = Template.bind();
-BudgetSuccess.args = {
-  showMetricDescription: true,
-  budget: {
-    type: 'SUCCESS',
-    message: {
-      text: 'Metric is under the budget',
-      md: 'Metric is under the budget'
-    },
-    data: {
-      currentValue: 120 * 1000,
-      budgetValue: 120 * 1024,
-      failed: false
-    }
+});
+export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  size: "large",
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
   }
-};
-export const Loading = Template.bind();
-Loading.args = {
-  loading: true
-};
+});
+export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
+  },
+  showMetricDescription: true
+});
+export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 0
+  },
+  showDelta: false
+});
+export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: true,
+  id: "webpack.totalSizeByTypeALL"
+});

package/lib-esm/constants.js

@@ -25,7 +25,7 @@ export const SECTION_URLS = {
 export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
   [`webpack.sizes.totalSizeByType${fileType}`]: fileType
 }), {});
-export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
-export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
-export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
+export const METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
+export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
+export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount', 'webpack.duplicateModulesCount', 'webpack.duplicateCode'];
+export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];

package/lib-esm/layout/box/box.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/layout/flex-stack/flex-stack.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/layout/footer/footer.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/layout/separator.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/layout/stack/stack.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/query-state.js

@@ -1,7 +1,7 @@
 import _merge from "lodash/merge";
 import _isEqual from "lodash/isEqual";
 
-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 } from 'react';
 import { Route, useHistory, useLocation } from 'react-router-dom';

package/lib-esm/ui/alert/alert.js

@@ -1,5 +1,3 @@
-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 from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -9,14 +7,13 @@ export const Alert = props => {
   const {
     className,
     kind,
-    children,
-    ...restProps
+    children
   } = props;
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     padding: ['xsmall', 'small'],
     outline: true,
     className: cx(css.root, className, css[kind])
-  }, restProps), children);
+  }, children);
 };
 Alert.propTypes = {
   className: PropTypes.string,

package/lib-esm/ui/container/container.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/ui/filters/filters.container.js

@@ -1,6 +1,6 @@
 import _isEqual from "lodash/isEqual";
 
-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/ui/filters/filters.js

@@ -1,6 +1,7 @@
 import _get from "lodash/get";
+import "core-js/modules/es.array.includes.js";
 
-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/ui/hover-card/hover-card.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 } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/ui/hover-card/hover-card.stories.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 { HoverCard } from '.';

package/lib-esm/ui/icon/icon.js

@@ -1,17 +1,15 @@
-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';
 import cx from 'classnames';
 import css from './icon.module.css';
 const ICONS = {
-  ALERT_CIRCLE: 'alert-circle',
   ARROW: 'arrow',
   ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
-  CHECK_CIRCLE: 'check-circle',
   COMMIT: 'commit',
   FILTER: 'filter',
   HELP: 'help',

package/lib-esm/ui/input/input.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 cx from 'classnames';

package/lib-esm/ui/loader/loader.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/ui/logo/logo.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/ui/panels/panels.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/ui/skeleton/skeleton.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/ui/sort-dropdown/sort-dropdown.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/ui/tag/tag.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/ui/tooltip/tooltip.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.4.0-beta.0",
+  "version": "4.0.0-alpha.10",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,28 +36,28 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.9",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
+    "@babel/cli": "7.17.10",
+    "@babel/core": "7.18.5",
+    "@babel/plugin-proposal-class-properties": "7.17.12",
+    "@babel/preset-env": "7.18.2",
+    "@babel/preset-react": "7.17.12",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.4.20",
+    "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.20",
-    "@storybook/addons": "6.4.20",
-    "@storybook/builder-webpack5": "6.4.20",
-    "@storybook/manager-webpack5": "6.4.20",
-    "@storybook/react": "6.4.20",
+    "@storybook/addon-storyshots": "6.5.9",
+    "@storybook/addons": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/react": "6.5.9",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.5.1",
+    "babel-jest": "28.1.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.5.3",
+    "chromatic": "6.6.3",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.21.1",
+    "core-js": "3.23.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -67,11 +67,11 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.12",
+    "postcss": "8.4.14",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "5.3.1",
     "react-test-renderer": "16.14.0",
     "rimraf": "3.0.2"
   },
@@ -80,17 +80,17 @@
     "core-js": "^3.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0",
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.4.0-beta.0",
-    "ariakit": "2.0.0-alpha.21",
+    "@bundle-stats/utils": "^4.0.0-alpha.10",
+    "ariakit": "2.0.0-next.30",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^1.2.3"
   },
-  "gitHead": "45774cba629c670df5528d72a67d3cfaddd8fed7"
+  "gitHead": "2c53bcf5bcdd840a987063767d12101a359e11ac"
 }

package/src/app/app.jsx

@@ -13,7 +13,6 @@ import {
 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';
@@ -78,13 +77,10 @@ const OverviewContent = () => {
     <Stack space="medium">
       {duplicatePackagesInsights && (
         <Container>
-          <Stack space="small">
-            <DuplicatePackagesWarning
-              duplicatePackagesCount={duplicatePackagesCount}
-              showDelta={jobs.length > 1}
-            />
-            <BudgetInsights source="webpack" budgets={jobs[0].insights?.webpack?.budgets} />
-          </Stack>
+          <DuplicatePackagesWarning
+            duplicatePackagesCount={duplicatePackagesCount}
+            showDelta={jobs.length > 1}
+          />
         </Container>
       )}
       <Container>
@@ -108,7 +104,6 @@ const AssetsContent = () => {
         <Summary
           keys={METRICS_WEBPACK_ASSETS}
           data={jobs?.[0]?.summary}
-          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -131,7 +126,6 @@ const ModulesContent = () => {
         <Summary
           keys={METRICS_WEBPACK_MODULES}
           data={jobs?.[0]?.summary}
-          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -154,7 +148,6 @@ const PackagesContent = () => {
         <Summary
           keys={METRICS_WEBPACK_PACKAGES}
           data={jobs?.[0]?.summary}
-          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -184,10 +177,10 @@ const AppComponent = ({ version, jobs }) => {
             size="large"
             keys={METRICS_WEBPACK_GENERAL}
             data={jobs[0].summary}
-            budgets={jobs[0].insights?.webpack?.budgets}
             showSummaryItemDelta={jobs.length !== 1}
           />
         </Container>
+
         <Container className={css.tabsContainer}>
           <Tabs className={css.tabs}>
             <NavLink exact to={URLS.OVERVIEW} activeClassName={css.tabActive}>

package/src/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/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx

@@ -1,15 +1,11 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
 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 = ({
   className,
@@ -17,28 +13,18 @@ export const BundleAssetsTotalsTable = ({
   customComponentLink: CustomComponentLink,
   ...restProps
 }) => {
-  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const budgets = jobs[0].insights?.webpack?.budgets?.data;
-
-  const renderRowHeader = useCallback(
-    (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 (
-        <CustomComponentLink section={section} title={title} params={params}>
-          <FlexStack space="xxxsmall" className={css.itemTitleText}>
-            <span>{item.label}</span>
-            {budget && <BudgetInfo budgetInsight={budget} />}
-          </FlexStack>
-        </CustomComponentLink>
-      );
-    },
-    [CustomComponentLink],
-  );
+  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);
+
+    return (
+      <CustomComponentLink section={section} title={title} params={params}>
+        {item.label}
+      </CustomComponentLink>
+    );
+  };
 
   return (
     <MetricsTable

package/src/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/src/components/bundle-modules/bundle-modules.jsx

@@ -133,7 +133,6 @@ export const BundleModules = ({
     [MODULE_FILTERS.DUPLICATED]: {
       label: 'Duplicate',
       defaultValue: filters[MODULE_FILTERS.DUPLICATED],
-      disabled: jobs.length <= 1,
     },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',

package/src/components/bundle-packages/bundle-packages.jsx

@@ -28,8 +28,8 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
 const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const normalizedPackagePath =
-    path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
+  const normalizedPackagePath = `${path || fallbackPackagePath}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
 
   return (

package/src/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';