@bundle-stats/ui 3.2.1-beta.9 → 3.3.0-alpha.0

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

@@ -1,47 +1,57 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
 import { SummaryItem } from './summary-item';
-const stories = storiesOf('Components/SummaryItem', module);
-stories.addDecorator(getWrapperDecorator({
-  maxWidth: '320px'
-}));
-stories.add('default', () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
+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
+    }
   }
-}));
-stories.add('size large', () => /*#__PURE__*/React.createElement(SummaryItem, {
-  size: "large",
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  }
-}));
-stories.add('showMetricDescription', () => /*#__PURE__*/React.createElement(SummaryItem, {
-  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
-}));
-stories.add('showDelta false', () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 0
-  },
+};
+export const ShowDeltaFalse = Template.bind();
+ShowDeltaFalse.args = {
   showDelta: false
-}));
-stories.add('loading', () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: true,
-  id: "webpack.totalSizeByTypeALL"
-}));
+};
+export const BudgetOver = Template.bind();
+BudgetOver.args = {
+  showMetricDescription: true,
+  budget: {
+    value: 120 * 1000,
+    budget: 100 * 1000,
+    overBudget: true
+  }
+};
+export const BudgetUnder = Template.bind();
+BudgetUnder.args = {
+  showMetricDescription: true,
+  budget: {
+    value: 120 * 1000,
+    budget: 120 * 1024,
+    overBudget: false
+  }
+};
+export const Loading = Template.bind();
+Loading.args = {
+  loading: true
+};

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 = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
-export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount'];
-export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
+export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/lib-esm/css/variables.css

@@ -27,20 +27,20 @@
 
   /*
    * Color scheme:
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23484a4d&mcgpalette4=%233385d6&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #e9e9ea;
-  --color-gray-100: #c8c9ca;
-  --color-gray-200: #a4a5a6;
-  --color-gray-300: #7f8082;
-  --color-gray-400: #636568;
-  --color-gray-500: #484a4d;
-  --color-gray-600: #414346;
-  --color-gray-700: #383a3d;
-  --color-gray-800: #303234;
-  --color-gray-900: #212225;
+  --color-gray-50: #eceded;
+  --color-gray-100: #d0d1d2;
+  --color-gray-200: #b1b2b4;
+  --color-gray-300: #929395;
+  --color-gray-400: #7a7c7f;
+  --color-gray-500: #636568;
+  --color-gray-600: #5b5d60;
+  --color-gray-700: #515355;
+  --color-gray-800: #47494b;
+  --color-gray-900: #35373a;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -181,6 +181,10 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --radius-small: var(--space-xxxsmall);
+  --radius-medium: var(--space-xxsmall);
+  --radius-large: var(--space-small);
+
   /** Layout */
   --max-width: 80rem;
 }

package/lib-esm/layout/box/box.js

@@ -17,9 +17,9 @@ export const Box = props => {
   } = props;
   const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(padding) ? [null, ...padding] : [padding, verticalPadding, horizontalPadding];
   const rootClassName = cx(css.root, className, resolvedPadding && css[`padding-${resolvedPadding}`], resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`], outline && css.outline);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     className: rootClassName
-  }, restProps));
+  }));
 };
 Box.defaultProps = {
   className: '',

package/lib-esm/layout/stack/stack.js

@@ -1,3 +1,5 @@
+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 PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -9,12 +11,13 @@ export const Stack = props => {
     as: Component,
     className,
     space,
-    children
+    children,
+    ...restProps
   } = props;
   const rootClassName = cx(className, css.root, css[`space--${space}`]);
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     className: rootClassName
-  }, React.Children.map(children, getRenderChildWithClassName(css.item)));
+  }), React.Children.map(children, getRenderChildWithClassName(css.item)));
 };
 Stack.defaultProps = {
   as: 'div',

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

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

package/lib-esm/ui/filters/filters.container.js

@@ -28,45 +28,6 @@ export const filtersDropdownContainer = BaseComponent => {
   class FiltersContainer extends React.Component {
     constructor(props) {
       super(props);
-
-      this.toggleFilter = (key, value) => this.setState(_ref2 => {
-        let {
-          values,
-          ...state
-        } = _ref2;
-        const newState = { ...state,
-          values: { ...values,
-            [key]: value
-          }
-        };
-        const {
-          onChange
-        } = this.props;
-
-        if (onChange) {
-          onChange(newState.values);
-        }
-
-        return newState;
-      });
-
-      this.toggleFilters = newFilters => this.setState(prevState => {
-        const newState = { ...prevState,
-          values: { ...prevState.values,
-            ...newFilters
-          }
-        };
-        const {
-          onChange
-        } = this.props;
-
-        if (onChange) {
-          onChange(newState.values);
-        }
-
-        return newState;
-      });
-
       const {
         filters
       } = this.props;
@@ -75,10 +36,10 @@ export const filtersDropdownContainer = BaseComponent => {
       };
     }
 
-    static getDerivedStateFromProps(_ref3, state) {
+    static getDerivedStateFromProps(_ref2, state) {
       let {
         filters
-      } = _ref3;
+      } = _ref2;
 
       if (_isEqual(filters, state.values)) {
         return null;
@@ -89,6 +50,43 @@ export const filtersDropdownContainer = BaseComponent => {
       };
     }
 
+    toggleFilter = (key, value) => this.setState(_ref3 => {
+      let {
+        values,
+        ...state
+      } = _ref3;
+      const newState = { ...state,
+        values: { ...values,
+          [key]: value
+        }
+      };
+      const {
+        onChange
+      } = this.props;
+
+      if (onChange) {
+        onChange(newState.values);
+      }
+
+      return newState;
+    });
+    toggleFilters = newFilters => this.setState(prevState => {
+      const newState = { ...prevState,
+        values: { ...prevState.values,
+          ...newFilters
+        }
+      };
+      const {
+        onChange
+      } = this.props;
+
+      if (onChange) {
+        onChange(newState.values);
+      }
+
+      return newState;
+    });
+
     render() {
       return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, this.props, this.state, {
         toggleFilter: this.toggleFilter,

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

@@ -5,10 +5,13 @@ 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/icon/icon.stories.js

@@ -1,21 +1,32 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
 import { Icon } from '.';
-const stories = storiesOf('UI/Icon', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Icon, {
+export default {
+  title: 'UI/Icon',
+  component: Icon
+};
+
+const Template = args => /*#__PURE__*/React.createElement(Icon, args);
+
+export const Standard = Template.bind();
+Standard.args = {
   glyph: Icon.ICONS.ARROW
-}));
-stories.add('with size', () => /*#__PURE__*/React.createElement(Icon, {
+};
+export const CustomSize = Template.bind();
+CustomSize.args = {
   glyph: Icon.ICONS.ARROW,
   size: Icon.SIZE_LARGE
-}));
-stories.add('all', () => /*#__PURE__*/React.createElement(React.Fragment, null, Object.values(Icon.ICONS).map(glyph => /*#__PURE__*/React.createElement("span", {
+};
+export const All = () => /*#__PURE__*/React.createElement(React.Fragment, null, Object.values(Icon.ICONS).map(glyph => /*#__PURE__*/React.createElement("div", {
   style: {
-    margin: '0.3rem'
+    display: 'inline-block',
+    padding: '1rem',
+    textAlign: 'center'
   }
 }, /*#__PURE__*/React.createElement(Icon, {
   glyph: glyph,
   key: glyph
-})))));
+}), /*#__PURE__*/React.createElement("code", {
+  style: {
+    display: 'block'
+  }
+}, glyph))));

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

@@ -16,7 +16,7 @@ export const Popover = _ref => {
   } = _ref;
   const popover = usePopoverState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    gutter: 24,
+    gutter: 12,
     modal: true,
     placement: 'top'
   });
@@ -45,7 +45,7 @@ export const Popover = _ref => {
   }), /*#__PURE__*/React.createElement(UIPopoverArrow, _extends({
     className: css.arrow
   }, popover, {
-    size: 24
+    size: 16
   })), typeof children === 'function' ? children({
     popoverToggle: popover.toggle
   }) : children, /*#__PURE__*/React.createElement(Icon, {

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

@@ -23,7 +23,8 @@
 }
 
 .popover {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
+  border-radius: var(--radius-small);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

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

@@ -12,6 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
+  border-radius: var(--radius-small);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.1-beta.9",
+  "version": "3.3.0-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -12,7 +12,7 @@
     "build-esm": "babel -D src -d lib-esm --ignore **/__tests__/**/* --ignore /prototypes/**",
     "build-storybook": "npx build-storybook -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
-    "generate-svg-sprite": "npx svg-sprite -s --si src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
+    "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
     "test": "npm run test:unit && npm run test:storyshots",
@@ -42,31 +42,31 @@
     "@babel/preset-env": "7.16.4",
     "@babel/preset-react": "7.16.0",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-knobs": "6.3.1",
+    "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.3.12",
-    "@storybook/addons": "6.3.12",
-    "@storybook/builder-webpack5": "6.3.12",
-    "@storybook/manager-webpack5": "6.3.12",
-    "@storybook/react": "6.3.12",
+    "@storybook/addon-storyshots": "6.4.8",
+    "@storybook/addons": "6.4.8",
+    "@storybook/builder-webpack5": "6.4.8",
+    "@storybook/manager-webpack5": "6.4.8",
+    "@storybook/react": "6.4.8",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.3.1",
+    "babel-jest": "27.4.2",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.0.6",
+    "chromatic": "6.2.0",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.19.1",
+    "core-js": "3.19.3",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.3.1",
+    "jest": "27.4.3",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.3.11",
+    "postcss": "8.4.4",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -84,11 +84,11 @@
     "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.1-beta.9",
+    "@bundle-stats/utils": "^3.3.0-alpha.0",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "43b453a608ced66881eeca23c3b6c464b7dcfd8b"
+  "gitHead": "7c7e664296ad7aed38a6972f4421d754098119eb"
 }

package/src/app/app.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { 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';
@@ -13,6 +13,7 @@ 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';
@@ -58,8 +59,12 @@ Layout.defaultProps = {
 
 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);
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_PACKAGES,
+  );
+  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_MODULES,
+  );
 
   if (jobs.length === 0) {
     return (
@@ -71,7 +76,9 @@ const AppComponent = ({ version, jobs }) => {
     );
   }
 
-  const { duplicatePackagesCount } = jobs[0].summary.webpack;
+  const { summary, insights } = useMemo(() => jobs[0], jobs);
+
+  const { duplicatePackagesCount } = summary.webpack;
   const duplicatePackagesInsights = Boolean(
     duplicatePackagesCount.current || duplicatePackagesCount.baseline,
   );
@@ -82,7 +89,8 @@ const AppComponent = ({ version, jobs }) => {
         <Summary
           size="large"
           keys={METRICS_WEBPACK_GENERAL}
-          data={jobs[0].summary}
+          data={summary}
+          budgets={insights?.webpack?.budgets}
           showSummaryItemDelta={jobs.length !== 1}
         />
       </Container>
@@ -114,7 +122,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_ASSETS}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -137,7 +146,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_MODULES}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -159,7 +169,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_PACKAGES}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -187,6 +198,11 @@ const AppComponent = ({ version, jobs }) => {
                     />
                   </Container>
                 )}
+                {insights?.webpack?.budgets && (
+                  <Container>
+                    <BudgetInsights source="webpack" budgets={insights.webpack.budgets} />
+                  </Container>
+                )}
                 <Container>
                   <Stack space="small">
                     <TotalSizeTypeTitle />

package/src/assets/icons/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/src/assets/icons/arrow-right-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>

package/src/assets/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/src/assets/icons/close.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>