@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.8

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

@@ -8,6 +8,8 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;
@@ -21,50 +23,46 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.flag {
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
-  font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
+.assetNameTag {
   vertical-align: middle;
 }
 
-.flag + .flag {
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.flagEntry {
-  composes: flag;
+.assetNameTagEntry {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagInitial {
-  composes: flag;
+.assetNameTagEntry::before {
+  content: 'e';
+}
+
+.assetNameTagInitial {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagChunk {
-  composes: flag;
-  background: var(--color-info);
-  color: var(--color-background);
+.assetNameTagInitial::before {
+  content: 'i';
+}
+
+.assetNameTagChunk::before {
+  content: 'c';
+}
+
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
 }
 
 /* Tooltip not predictive */

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

@@ -1,4 +1,7 @@
 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, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
@@ -15,7 +18,8 @@ export const BundleAssetsTotalsTable = _ref => {
   let {
     className,
     jobs,
-    customComponentLink: CustomComponentLink
+    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;
@@ -43,13 +47,13 @@ export const BundleAssetsTotalsTable = _ref => {
       budgetInsight: budget
     })));
   }, [CustomComponentLink]);
-  return /*#__PURE__*/React.createElement(MetricsTable, {
+  return /*#__PURE__*/React.createElement(MetricsTable, _extends({
     className: className,
     runs: jobs,
     items: items,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true
-  });
+  }, restProps));
 };
 BundleAssetsTotalsTable.defaultProps = {
   className: '',

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

@@ -15,8 +15,9 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 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 { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -35,35 +36,41 @@ const RowHeader = _ref => {
 
   const chunkIds = _map(chunks, 'id');
 
-  const [showPopopver, setPopover] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setPopover(true), [showPopopver]);
-  const content = /*#__PURE__*/React.createElement(FileName, {
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+  const content = useMemo(() => /*#__PURE__*/React.createElement("span", {
+    className: css.name
+  }, row.duplicated && /*#__PURE__*/React.createElement(Tag, {
+    className: css.nameTagDuplicated,
+    size: "small",
+    kind: Tag.KINDS.DANGER
+  }), /*#__PURE__*/React.createElement(FileName, {
+    className: css.nameText,
     name: row.label
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/React.createElement(Popover, {
-    ariaLabel: "View module info",
+  })), [row]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
+
+  return /*#__PURE__*/React.createElement(HoverCard, {
     label: content
-  }, _ref2 => {
-    let {
-      popoverToggle
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(ModuleInfo, {
-      className: css.namePopover,
-      item: row,
-      chunks: chunks,
-      chunkIds: chunkIds,
-      labels: labels,
-      customComponentLink: CustomComponentLink,
-      onClick: popoverToggle
-    });
+  }, /*#__PURE__*/React.createElement(ModuleInfo, {
+    className: css.namePopover,
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink
   }));
 };
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
-    label: PropTypes.string
+    label: PropTypes.string,
+    duplicated: PropTypes.bool
   }).isRequired,
   chunks: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
@@ -75,22 +82,7 @@ RowHeader.propTypes = {
 RowHeader.defaultProps = {
   chunks: []
 };
-
-const getRenderRowHeader = _ref3 => {
-  let {
-    labels,
-    chunks,
-    CustomComponentLink
-  } = _ref3;
-  return row => /*#__PURE__*/React.createElement(RowHeader, {
-    row: row,
-    chunks: chunks,
-    labels: labels,
-    CustomComponentLink: CustomComponentLink
-  });
-};
-
-export const BundleModules = _ref4 => {
+export const BundleModules = _ref2 => {
   let {
     className,
     jobs,
@@ -108,14 +100,14 @@ export const BundleModules = _ref4 => {
     updateSearch,
     hasActiveFilters,
     customComponentLink: CustomComponentLink
-  } = _ref4;
+  } = _ref2;
   const rootClassName = cx(css.root, className);
-  const labels = useMemo(() => _map(jobs, 'label'), [jobs]);
-  const renderRowHeader = useMemo(() => getRenderRowHeader({
-    labels,
-    chunks,
-    CustomComponentLink
-  }), [labels, chunks]);
+  const renderRowHeader = useCallback(row => /*#__PURE__*/React.createElement(RowHeader, {
+    row: row,
+    chunks: chunks,
+    labels: _map(jobs, 'label'),
+    CustomComponentLink: CustomComponentLink
+  }), [jobs, chunks, CustomComponentLink]);
   const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
     resources: "modules",
     filtered: totalRowCount !== 0,
@@ -128,6 +120,11 @@ export const BundleModules = _ref4 => {
       defaultValue: filters.changed,
       disabled: jobs.length <= 1
     },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicated',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+      disabled: jobs.length <= 1
+    },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',
       [MODULE_FILTERS.FIRST_PARTY]: {
@@ -143,11 +140,11 @@ export const BundleModules = _ref4 => {
     ...(!_isEmpty(chunks) && {
       [MODULE_CHUNK]: {
         label: 'Chunk',
-        ...chunks.reduce((chunkFilters, _ref5) => {
+        ...chunks.reduce((chunkFilters, _ref3) => {
           let {
             id,
             name
-          } = _ref5;
+          } = _ref3;
           return { ...chunkFilters,
             [id]: {
               label: name,
@@ -172,10 +169,10 @@ export const BundleModules = _ref4 => {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: _ref6 => {
+    renderActions: _ref4 => {
       let {
         actionClassName
-      } = _ref6;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
@@ -188,7 +185,9 @@ export const BundleModules = _ref4 => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     search: search,
     updateSearch: updateSearch,

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

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -7,12 +7,15 @@ import { MODULE_CHUNK, MODULE_FILTERS, MODULE_FILE_TYPE, MODULE_SOURCE_TYPE, get
 import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
 export const addRowSourceFlag = row => {
   const {
-    key
-  } = row;
-  const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
-  return { ...row,
-    thirdParty
-  };
+    key,
+    runs
+  } = row; // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES)); // eslint-disable-next-line no-param-reassign
+
+  row.duplicated = Boolean(runs.find(run => (run == null ? void 0 : run.duplicated) === true));
+  return row;
 };
 export const getCustomSort = sortBy => item => {
   if (sortBy === SORT_BY_NAME) {
@@ -33,6 +36,11 @@ export const getRowFilter = filters => row => {
   // Skip not changed rows
   if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
     return false;
+  } // Skip not duplicated rows
+
+
+  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+    return false;
   } // Skip not matching source type
 
 

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

@@ -5,7 +5,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters } from '@bundle-stats/utils';
+import { MODULE_FILTERS, getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
@@ -45,13 +45,15 @@ export const BundleModules = props => {
       changed: (jobs == null ? void 0 : jobs.length) > 1,
       ...getModuleSourceTypeFilters(true),
       ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true)
+      ...getModuleFileTypeFilters(true),
+      [MODULE_FILTERS.DUPLICATED]: false
     },
     allEntriesFilters: {
       changed: false,
       ...getModuleSourceTypeFilters(true),
       ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true)
+      ...getModuleFileTypeFilters(true),
+      [MODULE_FILTERS.DUPLICATED]: false
     }
   }), [jobs]);
   const searchParams = useSearchParams({

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,