@bundle-stats/ui 3.3.0-alpha.0 → 3.3.0

package/lib-esm/components/bundle-packages/bundle-packages.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, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { PACKAGE_FILTERS, PACKAGES_SEPARATOR, PACKAGE_ID_SEPARATOR, getBundleModulesBySearch, getBundlePackagesByNameComponentLink } from '@bundle-stats/utils';
@@ -10,8 +10,9 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
@@ -32,36 +33,36 @@ const PackagePopoverContent = _ref => {
   const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "xxsmall",
-    className: css.packagePopover
+    space: "xsmall",
+    className: css.packageHoverCard
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("h3", {
-    className: css.packagePopoverTitle
+    className: css.packageHoverCardTitle
   }, normalizedName, packageId && /*#__PURE__*/React.createElement("span", {
-    className: css.packagePopoverTitleIndex
+    className: css.packageHoverCardTitleIndex
   }, `${PACKAGE_ID_SEPARATOR}${packageId}`)), /*#__PURE__*/React.createElement("p", {
-    className: css.packagePopoverPath
+    className: css.packageHoverCardPath
   }, /*#__PURE__*/React.createElement(FileName, {
-    className: css.packagePopoverPathValue,
+    className: css.packageHoverCardPathValue,
     name: normalizedPackagePath
   }))), /*#__PURE__*/React.createElement("ul", {
-    className: css.packagePopoverList
+    className: css.packageHoverCardList
   }, /*#__PURE__*/React.createElement("li", {
-    className: css.packagePopoverItem
+    className: css.packageHoverCardItem
   }, /*#__PURE__*/React.createElement("a", {
     href: `https://www.npmjs.com/package/${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/React.createElement("li", {
-    className: css.packagePopoverItem
+    className: css.packageHoverCardItem
   }, /*#__PURE__*/React.createElement("a", {
     href: `https://bundlephobia.com/result?p=${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "bundlephobia.com"))), /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall",
-    className: css.packagePopover.actions
+    className: css.packageHoverCardActions
   }, duplicate && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CustomComponentLink, getBundlePackagesByNameComponentLink(normalizedName), "View all duplicate instances")), /*#__PURE__*/React.createElement(CustomComponentLink, getBundleModulesBySearch(normalizedPackagePath), "Search modules by package path")));
 };
 
@@ -76,39 +77,83 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-const PackageRowHeader = _ref2 => {
+const PackageName = _ref2 => {
   let {
-    item,
+    packageName,
+    path,
+    showDuplicateFlag,
+    row,
     CustomComponentLink
   } = _ref2;
-  const packageNames = item.label.split(PACKAGES_SEPARATOR);
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+  const label = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, showDuplicateFlag && row.duplicate && /*#__PURE__*/React.createElement(Tag, {
+    className: css.packageNameTagDuplicate,
+    title: "Duplicate package",
+    kind: Tag.KINDS.DANGER,
+    size: Tag.SIZES.SMALL
+  }), /*#__PURE__*/React.createElement("span", {
+    className: css.packageNameLabel
+  }, packageName)), [packageName, showDuplicateFlag, row]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: css.packageName,
+      onMouseEnter: handleOnMouseEnter
+    }, label);
+  }
+
+  return /*#__PURE__*/React.createElement(HoverCard, {
+    className: css.packageName,
+    label: /*#__PURE__*/React.createElement("span", {
+      className: css.packageName
+    }, label)
+  }, /*#__PURE__*/React.createElement(PackagePopoverContent, {
+    name: packageName,
+    path: path,
+    fullName: row.label,
+    duplicate: row.duplicate,
+    CustomComponentLink: CustomComponentLink
+  }));
+};
+
+PackageName.propTypes = {
+  packageName: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  showDuplicateFlag: PropTypes.bool.isRequired,
+  row: PropTypes.shape({
+    label: PropTypes.string,
+    duplicate: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.shape({
+      path: PropTypes.string
+    })).isRequired
+  }).isRequired,
+  CustomComponentLink: PropTypes.elementType.isRequired
+};
+
+const RowHeader = _ref3 => {
+  let {
+    row,
+    CustomComponentLink
+  } = _ref3;
+  const packageNames = row.label.split(PACKAGES_SEPARATOR);
   const {
     path
-  } = item.runs[0] || {};
+  } = row.runs[0] || {};
   return /*#__PURE__*/React.createElement("span", {
     className: css.packageNames
-  }, packageNames.map((packageName, index) => {
-    // Render duplicate flag only for the last entry
-    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
-      className: css.duplicate,
-      title: "Duplicate package"
-    }, "D");
-    return /*#__PURE__*/React.createElement(Popover, {
-      className: css.packageName,
-      icon: duplicateFlag,
-      label: packageName
-    }, /*#__PURE__*/React.createElement(PackagePopoverContent, {
-      name: packageName,
-      path: path,
-      fullName: item.label,
-      duplicate: item.duplicate,
-      CustomComponentLink: CustomComponentLink
-    }));
-  }));
+  }, packageNames.map((packageName, index) => /*#__PURE__*/React.createElement(PackageName, {
+    packageName: packageName,
+    path: path // Render duplicate flag only for the last entry
+    ,
+    showDuplicateFlag: index === packageNames.length - 1,
+    row: row,
+    CustomComponentLink: CustomComponentLink
+  })));
 };
 
-PackageRowHeader.propTypes = {
-  item: PropTypes.shape({
+RowHeader.propTypes = {
+  row: PropTypes.shape({
     label: PropTypes.string,
     duplicate: PropTypes.bool,
     runs: PropTypes.arrayOf(PropTypes.shape({
@@ -141,18 +186,18 @@ export const BundlePackages = props => {
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-  const renderRowHeader = useCallback(item => /*#__PURE__*/React.createElement(PackageRowHeader, {
-    item: item,
+  const renderRowHeader = useCallback(row => /*#__PURE__*/React.createElement(RowHeader, {
+    row: row,
     CustomComponentLink: CustomComponentLink
   }), [CustomComponentLink]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: _ref3 => {
+    renderActions: _ref4 => {
       let {
         actionClassName
-      } = _ref3;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
@@ -165,7 +210,9 @@ export const BundlePackages = props => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib-esm/components/bundle-packages/bundle-packages.module.css

@@ -12,23 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.duplicate {
-  margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
-  font-weight: bold;
-  line-height: var(--space-small);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-
-  background: var(--color-danger);
-  color: var(--color-light);
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -43,22 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
+.packageNameLabel {
+  vertical-align: middle;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
 }
 
-.packagePopoverTitleIndex {
+
+.packageHoverCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageHoverCardPathValue {
+  width: 100%;
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageHoverCardList {
   padding: 0;
   list-style: inside;
 }

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

@@ -28,6 +28,7 @@
 }
 
 .inverted {
+  border-radius: var(--radius-small);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }

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

@@ -7,6 +7,7 @@ import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
 import css from './job-header.module.css';
 export const JobHeader = props => {
   const {
@@ -27,7 +28,7 @@ export const JobHeader = props => {
     space: "xxsmall"
   }, /*#__PURE__*/React.createElement("h1", {
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, `#${job.internalBuildNumber}`), tag && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", null, `#${job.internalBuildNumber}`), tag && /*#__PURE__*/React.createElement(Tag, {
     className: css.tag
   }, tag)), /*#__PURE__*/React.createElement(FlexStack, {
     className: css.meta,

package/lib-esm/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/lib-esm/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}

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

@@ -1,6 +1,9 @@
 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); }
+
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -85,47 +88,60 @@ const getHeaderRows = (runs, items, showHeaderSum, title) => [{
   cells: runs.map(getHeaderTotalCells(items)).flat()
 }] : [])];
 
-const generateRowCells = (item, index, items) => {
-  const isBaseline = index === items.length - 1; // eslint-disable-next-line react/destructuring-assignment
-
-  if (!item || typeof item.value === 'undefined') {
-    return ['-', ...(!isBaseline ? [''] : [])];
-  }
+const MetricsTableRow = _ref => {
+  let {
+    item,
+    renderRowHeader
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Table.Tr, {
+    className: cx(!item.changed && styles.unchanged)
+  }, /*#__PURE__*/React.createElement(Table.Th, {
+    className: styles.metricName
+  }, renderRowHeader(item)), item.runs.map((run, index) => {
+    const isBaseline = index === item.runs.length - 1;
+    const valueClassName = cx(styles.value, !isBaseline && styles.current); // Empty cells if no value
 
-  const {
-    displayValue,
-    deltaPercentage,
-    displayDeltaPercentage,
-    deltaType
-  } = item;
-  const cells = [/*#__PURE__*/React.createElement(Metric, {
-    value: displayValue
-  })];
+    if (!run || typeof run.value === 'undefined') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table.Td, {
+        className: valueClassName
+      }, "-"), !isBaseline && /*#__PURE__*/React.createElement(Table.Td, {
+        className: styles.delta
+      }));
+    }
 
-  if (!isBaseline) {
-    cells.push(typeof deltaPercentage === 'number' && /*#__PURE__*/React.createElement(Delta, {
+    const {
+      displayValue,
+      deltaPercentage,
+      displayDeltaPercentage,
+      deltaType
+    } = run;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table.Td, {
+      className: valueClassName
+    }, /*#__PURE__*/React.createElement(Metric, {
+      value: displayValue
+    })), !isBaseline && typeof deltaPercentage === 'number' && /*#__PURE__*/React.createElement(Table.Td, {
+      className: styles.delta
+    }, /*#__PURE__*/React.createElement(Delta, {
       displayValue: displayDeltaPercentage,
       deltaType: deltaType
-    }));
-  }
-
-  return cells;
+    })));
+  }));
 };
 
-const getRows = (runs, items, renderRowHeader) => items.map((item, index) => {
-  const {
-    changed
-  } = item;
-  return {
-    key: (item == null ? void 0 : item.key) || index,
-    className: changed ? '' : styles.unchanged,
-    cells: [// Metric name
-    renderRowHeader(item), // Metric item values
-    ...item.runs.map(generateRowCells).flat()]
-  };
-});
-
-export const MetricsTable = _ref => {
+MetricsTableRow.propTypes = {
+  item: PropTypes.shape({
+    changed: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.number,
+      displayValue: PropTypes.string,
+      deltaPercentage: PropTypes.number,
+      displayDeltaPercentage: PropTypes.string,
+      deltaType: PropTypes.string
+    }))
+  }).isRequired,
+  renderRowHeader: PropTypes.func.isRequired
+};
+export const MetricsTable = _ref2 => {
   let {
     className,
     renderRowHeader,
@@ -134,8 +150,9 @@ export const MetricsTable = _ref => {
     emptyMessage,
     showHeaderSum,
     headerRows,
-    title
-  } = _ref;
+    title,
+    ...restProps
+  } = _ref2;
   const {
     headers,
     columnClassNames
@@ -147,12 +164,11 @@ export const MetricsTable = _ref => {
       columnClassNames: headerColumns[0].cells.map(headerColumn => headerColumn.className)
     };
   }, [headerRows, runs, items, showHeaderSum, title]);
-  const rows = useMemo(() => getRows(runs, items, renderRowHeader), [runs, items, renderRowHeader]);
   const rootClassName = cx(styles.root, className, runs.length > 1 && styles.multipleRuns, showHeaderSum && styles.showHeaderSum);
-  return /*#__PURE__*/React.createElement(Table, {
+  return /*#__PURE__*/React.createElement(Table, _extends({
     className: rootClassName,
     compact: true
-  }, /*#__PURE__*/React.createElement(Table.THead, null, headers.map(headerRow => {
+  }, restProps), /*#__PURE__*/React.createElement(Table.THead, null, headers.map(headerRow => {
     const {
       cells,
       className: rowClassName
@@ -162,19 +178,11 @@ export const MetricsTable = _ref => {
     return /*#__PURE__*/React.createElement(Table.Tr, {
       className: rowClassName
     }, cells.map(header => /*#__PURE__*/React.createElement(Table.Th, header)));
-  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(_ref2 => {
-    let {
-      key,
-      className: rowClassName,
-      cells
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Table.Tr, {
-      key: key,
-      className: rowClassName
-    }, cells.map((cell, index) => /*#__PURE__*/React.createElement(Table.Td, {
-      className: columnClassNames[index]
-    }, cell)));
-  }) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
+  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(items) ? items.map(item => /*#__PURE__*/React.createElement(MetricsTableRow, {
+    key: item.key,
+    item: item,
+    renderRowHeader: renderRowHeader
+  })) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
     className: styles.empty,
     colSpan: (columnClassNames == null ? void 0 : columnClassNames.length) || 1
   }, emptyMessage))));

package/lib-esm/components/metrics-table/metrics-table.module.css

@@ -1,11 +1,11 @@
-.jobName a {
+.root a {
   color: inherit;
   text-decoration: none;
 }
 
-.jobName a:hover,
-.jobName a:active,
-.jobName a:focus {
+.root a:hover,
+.root a:active,
+.root a:focus {
   color: var(--color-primary);
   text-decoration: underline;
 }
@@ -15,21 +15,31 @@
   width: 100%;
 }
 
-.value {
+.root .value {
   padding-left: var(--space-large);
   text-align: right;
+  vertical-align: baseline;
 }
 
-.delta {
+.root .delta {
   padding-left: 0;
   text-align: left;
   font-size: var(--size-xsmall);
+  vertical-align: baseline;
 }
 
-.value.current {
+.root tbody .delta {
+  line-height: 1.6rem; /* baseline alignment with the value */
+}
+
+.root .value.current {
   padding-right: var(--space-xxsmall);
 }
 
+.jobName {
+  white-space: nowrap;
+}
+
 /* columns overrides for showHeaderSum */
 .showHeaderSum .headerRowColumns .value,
 .showHeaderSum .headerRowColumns .delta {
@@ -45,6 +55,7 @@
 }
 
 /** rows */
+.multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);
 }

package/lib-esm/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -21,12 +22,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
+  padding: var(--space-xxxsmall);
+  width: var(--space-medium);
+  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

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

@@ -4,7 +4,8 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
 export const MetricsTableTitle = props => {
   const {
@@ -15,22 +16,22 @@ export const MetricsTableTitle = props => {
     popoverHref
   } = props;
   const rootClassName = cx(css.root, className);
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: rootClassName
-  }, /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("span", null, title), info && /*#__PURE__*/React.createElement("span", {
     className: css.info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/React.createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
     href: popoverHref,
     target: "_blank",
     rel: "noreferrer"
-  }, I18N.READ_MORE))))));
+  }, I18N.READ_MORE)))));
 };
 MetricsTableTitle.propTypes = {
   className: PropTypes.string,

package/lib-esm/components/metrics-table-title/metrics-table-title.module.css

@@ -1,5 +1,7 @@
 .root {
+  align-items: center;
   font-weight: bold;
+  line-height: var(--space-small);
   text-transform: uppercase;
   color: var(--color-text-light);
 }

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

@@ -22,7 +22,7 @@ export const ModuleInfo = props => {
     onClick
   } = props;
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "small",
+    space: "xsmall",
     className: className
   }, item.runs.map((run, index) => {
     const TitleComponent = index !== 0 ? 'h4' : 'h3';
@@ -32,7 +32,7 @@ export const ModuleInfo = props => {
       key: key
     }, /*#__PURE__*/React.createElement(TitleComponent, null, labels[index]), index === 0 && !_isEmpty(run == null ? void 0 : run.chunkIds) && /*#__PURE__*/React.createElement("div", {
       className: css.chunks
-    }, /*#__PURE__*/React.createElement("strong", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: css.chunksTitle
     }, "Chunks:"), run.chunkIds.map(chunkId => {
       const chunk = _find(chunks, {

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

@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }