@bundle-stats/ui 4.4.0-beta.0 → 4.4.0-beta.3

package/lib-esm/components/entry-info/entry-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-info.js","sourceRoot":"","sources":["../../../src/components/entry-info/entry-info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAiB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEpF,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAM1C,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,GACuC,EAAE,EAAE,CAAC,CACpD,2BAAG,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACnC,8BAAM,SAAS,EAAE,GAAG,CAAC,SAAS,IAAG,KAAK,CAAQ;IAC9C,8BAAM,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACjD,CACL,CAAC;AAmBF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAmD,EAAE,EAAE;;IAC/E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,IAAI,EAChB,IAAI,EACJ,MAAM,EACN,eAAe,GAAG,MAAM,EACxB,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAGpF,MAAM,aAAa,GAAG,gBAAgB,CACpC,YAAY,CAAC,qBAAqB,EAClC,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAG,CAAC,CAAC,0CAAE,KAAK,EACrB,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,KAAI,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACxC,oBAAC,GAAG,IAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAC,QAAQ,EAAC,SAAS,EAAE,GAAG,CAAC,MAAM;YACpD,oBAAC,KAAK,IAAC,KAAK,EAAC,OAAO;gBACjB,IAAI,IAAI,iCAAM,IAAI,CAAO;gBAE1B,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;oBACrB,4BAAI,SAAS,EAAE,GAAG,CAAC,KAAK;wBACtB,oBAAC,QAAQ,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,QAAQ,GAAI,CAC3E;oBAEL,oBAAC,OAAO,IACN,OAAO,EAAE,aAAa,CAAC,YAAY,EACnC,KAAK,EAAE,aAAa,CAAC,sBAAsB,EAC3C,SAAS,EAAE,aAAa,CAAC,SAAS,EAClC,QAAQ,EAAE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,KAAI,IAAI,EAC3C,IAAI,EAAC,OAAO,GACZ,CACI,CACF;YACR,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW;gBAChE,oBAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAC1B,CACL;QACN,oBAAC,GAAG,IAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,GAAG,CAAC,cAAc;YAC1D,oBAAC,KAAK,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,CAAC,OAAO;gBACxC,QAAQ;gBAET,oBAAC,KAAK,IAAC,OAAO,QAAC,SAAS,EAAE,GAAG,CAAC,IAAI;oBAChC,oBAAC,KAAK,CAAC,KAAK;wBACV,oBAAC,KAAK,CAAC,EAAE;4BACP,oBAAC,KAAK,CAAC,EAAE,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,UAAU,CAAC,aAAmB;4BACxE,oBAAC,KAAK,CAAC,EAAE,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,WAAW,CAAC,IAAG,YAAY,CAAY;4BACjF,oBAAC,KAAK,CAAC,EAAE,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,WAAW,CAAC,WAAiB,CAC9D,CACC;oBACd,oBAAC,KAAK,CAAC,KAAK,QACT,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;wBAC5B,MAAM,GAAG,GAAG,QAAQ,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,KAAI,KAAK,IAAI,KAAK,EAAE,CAAC;wBAElD,OAAO,CACL,oBAAC,KAAK,CAAC,EAAE,IAAC,GAAG,EAAE,GAAG;4BAChB,oBAAC,KAAK,CAAC,EAAE,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,UAAU,CAAC,IAAG,MAAM,CAAC,KAAK,CAAC,CAAY;4BACjF,oBAAC,KAAK,CAAC,EAAE,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,WAAW,CAAC;gCACpD,oBAAC,QAAQ,IACP,SAAS,EAAE,GAAG,CAAC,QAAQ,EACvB,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,CAAC,GAAW,aAAX,GAAG,uBAAH,GAAG,CAAW,eAAe,CAAC,KAAI,GAAG,GAC5C,CACO;4BACX,oBAAC,KAAK,CAAC,EAAE,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,WAAW,CAAC;gCACpD,8BAAM,SAAS,EAAE,GAAG,CAAC,IAAI,IACtB,OAAO,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,CAAA,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAC/C,CACE,CACF,CACZ,CAAC;oBACJ,CAAC,CAAC,CACU,CACR,CACF,CACJ,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG,aAAa,CAAC"}

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

@@ -0,0 +1,92 @@
+.root {
+  position: fixed;
+  right: 0;
+  top: var(--entry-info-top);
+  bottom: 0;
+  width: 100vw;
+  max-width: var(--entry-info-width);
+  z-index: calc(var(--layer-high) - 1);
+  background: #fff;
+  box-shadow: var(--shadow-layer-high);
+}
+
+/** layout - full height content */
+.root {
+  display: flex;
+  flex-flow: column;
+}
+
+.header {
+  flex: 0 0 auto;
+}
+
+.contentWrapper {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+/** header */
+.header {
+  /** space for close icon */
+  padding-right: calc(var(--space-medium) + var(--space-xxxsmall) + var(--space-xsmall));
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.headerClose {
+  appearance: none;
+  background: none;
+  border: 0;
+  display: block;
+  padding: var(--space-xxxsmall);
+  position: absolute;
+  right: calc(var(--space-small) - var(--space-xxxsmall));
+  top: calc(var(--space-small) - var(--space-xxxsmall));
+  color: var(--color-text-ultra-light);
+  cursor: pointer;
+}
+
+.headerClose:hover,
+.headerClose:active,
+.headerClose:focus {
+  color: var(--color-text-light);
+}
+
+/** comon components */
+.fileName {
+  max-width: 100%;
+  padding: 0 2px;
+  background: var(--color-highlight-warning);
+}
+
+.label {
+  font-size: var(--size-medium);
+}
+
+.runs {
+  font-size: var(--size-small);
+}
+
+.runs .runsCell {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+}
+
+.runs .runsColJob {
+  white-space: nowrap;
+}
+
+.runs .runsColName {
+  width: 100%;
+}
+
+.runs .runsColSize {
+  text-align: right;
+}
+
+.size {
+  font-family: var(--font-family-fixed);
+}
+
+.metaLabel {
+  margin-right: .6em;
+  color: var(--color-text-light);
+}

package/lib-esm/components/entry-info/index.js

@@ -0,0 +1,2 @@
+export * from './entry-info';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/entry-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/entry-info/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib-esm/components/index.js

@@ -5,19 +5,20 @@ export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
-export { DuplicatePackagesInsight } from './duplicate-packages-insight';
 export { Delta } from './delta';
+export { InsightIcon } from './insight-icon';
+export { Insights } from './insights';
 export { JobName } from './job-name';
-export { JobHeader } from './job-header';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricRunInfo } from './metric-run-info';
 export { MetricsTable } from './metrics-table';
 export { MetricsTableOptions } from './metrics-table-options';
 export { MetricsTableSearch } from './metrics-table-search';
 export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
-export { SummaryItem } from './summary-item';
+export { RunInfo } from './run-info';
 export { Summary } from './summary';
 export { TotalSizeTypeTitle } from './total-size-type-title';
 //# sourceMappingURL=index.js.map

package/lib-esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib-esm/components/insight-icon/index.js

@@ -0,0 +1,2 @@
+export * from './insight-icon';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/insight-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/insight-icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib-esm/components/insight-icon/insight-icon.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cx from 'classnames';
+import { InsightType } from '@bundle-stats/utils';
+import { Icon } from '../../ui/icon';
+import css from './insight-icon.module.css';
+const InsightTypeIconMap = new Map([
+    [InsightType.ERROR, Icon.ICONS.ERROR],
+    [InsightType.WARNING, Icon.ICONS.WARNING],
+    [InsightType.INFO, Icon.ICONS.INFO],
+]);
+export const InsightIcon = (props) => {
+    const { className, type } = props;
+    const resolvedType = Object.values(InsightType).includes(type) ? type : InsightType.WARNING;
+    const rootClassName = cx(css.root, css[resolvedType], className);
+    const glyph = InsightTypeIconMap.get(resolvedType);
+    return React.createElement(Icon, { glyph: glyph, className: rootClassName });
+};
+//# sourceMappingURL=insight-icon.js.map

package/lib-esm/components/insight-icon/insight-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insight-icon.js","sourceRoot":"","sources":["../../../src/components/insight-icon/insight-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAE5C,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC;IACjC,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACrC,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IACzC,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;CACpC,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;IAC5F,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAW,CAAC;IAE7D,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAC1D,CAAC,CAAC"}

package/lib-esm/components/insight-icon/insight-icon.module.css

@@ -0,0 +1,24 @@
+.root {
+  width: calc(var(--space-small) + 6px);
+  height: calc(var(--space-small) + 6px);
+  padding: 3px;
+  border-radius: 50%;
+  background: var(--color-highlight);
+}
+
+.error {
+  background: var(--color-red-50);
+  color: var(--color-danger);
+}
+
+.warning {
+  padding-top: 1px;
+  background: var(--color-yellow-100);
+  color: var(--color-yellow-900);
+}
+
+.info {
+  background: var(--color-highlight-info);
+  color: var(--color-info);
+}
+

package/lib-esm/components/insights/index.js

@@ -0,0 +1,2 @@
+export * from './insights';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/insights/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/insights/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { getInsightList } from '@bundle-stats/utils';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { ComponentLink } from '../component-link';
+import { InsightIcon } from '../insight-icon';
+import css from './insights.module.css';
+export const Insights = (props) => {
+    const { insights, customComponentLink: CustomComponentLink = ComponentLink, ...restProps } = props;
+    const insightList = getInsightList(insights);
+    return (React.createElement(Stack, { space: "xxsmall", ...restProps }, insightList.map(({ name, insight, link }) => {
+        const { text } = insight.data;
+        return (React.createElement(FlexStack, { key: name, space: "xxsmall", alignItems: "center", as: CustomComponentLink, ...link, className: css.entry },
+            React.createElement(InsightIcon, { type: insight.type, className: css.icon }),
+            React.createElement("span", null, text)));
+    })));
+};
+//# sourceMappingURL=insights.js.map

package/lib-esm/components/insights/insights.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAOxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,QAAQ,EACR,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE7C,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,SAAS,KAAK,SAAS,IACjC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;QAC3C,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAwB,CAAC;QAClD,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAE,mBAAmB,KACnB,IAAI,EACR,SAAS,EAAE,GAAG,CAAC,KAAK;YAEpB,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,GAAI;YACxD,kCAAO,IAAI,CAAQ,CACT,CACb,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,14 @@
+.icon {
+  flex: 0 0 auto;
+}
+
+.entry {
+  color: inherit;
+  text-decoration: none;
+}
+
+.entry:hover,
+.entry:active,
+.entry:focus {
+  text-decoration: underline;
+}

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

@@ -13,17 +13,18 @@ export const JobHeader = (props) => {
     const { builtAt, hash } = get(job, `meta.${Source.webpack}`, {});
     const rootClassName = cx(css.root, className);
     return (React.createElement(Stack, { className: rootClassName, space: "xxsmall" },
-        React.createElement("h1", { className: css.title },
-            React.createElement("span", null, `#${job.internalBuildNumber}`),
-            tag && React.createElement(Tag, { className: css.tag }, tag)),
-        React.createElement(FlexStack, { space: "xxsmall", className: css.meta },
-            builtAt && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt },
-                React.createElement(Icon, { glyph: "clock" }),
-                React.createElement("span", null, formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
-            hash && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, title: "Webpack bundle hash" },
-                React.createElement(Icon, { glyph: "commit" }),
-                React.createElement("span", null, hash))),
-            React.createElement("div", { className: css.content }, children))));
+        React.createElement(FlexStack, { space: "xsmall", alignItems: "center" },
+            React.createElement(FlexStack, { space: "xxxsmall", as: "h1", className: css.title },
+                React.createElement("span", null, `#${job.internalBuildNumber}`),
+                tag && React.createElement(Tag, { className: css.tag }, tag)),
+            builtAt && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: css.meta },
+                React.createElement(Icon, { glyph: "clock", className: css.metaIcon }),
+                React.createElement("span", { className: css.metaText }, formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+            hash && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, title: "Webpack bundle hash", className: css.meta },
+                React.createElement(Icon, { glyph: "commit", className: css.metaIcon }),
+                React.createElement("span", { className: css.metaText }, hash.slice(0, 7))))),
+        children && (React.createElement(FlexStack, { space: "xxsmall", className: css.meta },
+            React.createElement("div", { className: css.content }, children)))));
 };
 JobHeader.propTypes = {
     className: PropTypes.string,

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

@@ -1 +1 @@
-{"version":3,"file":"job-header.js","sourceRoot":"","sources":["../../../src/components/job-header/job-header.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,QAAQ,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,SAAS;QAC9C,4BAAI,SAAS,EAAE,GAAG,CAAC,KAAK;YACtB,kCAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;YAC3C,GAAG,IAAI,oBAAC,GAAG,IAAC,SAAS,EAAE,GAAG,CAAC,GAAG,IAAG,GAAG,CAAO,CACzC;QACL,oBAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,GAAG,CAAC,IAAI;YAC3C,OAAO,IAAI,CACV,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,EAAE,EAAC,MAAM,EAAC,KAAK,EAAE,OAAO;gBAC7E,oBAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG;gBACtB,kCACG,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;YAEA,IAAI,IAAI,CACP,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,KAAK,EAAC,qBAAqB;gBAChF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,GAAG;gBACvB,kCAAO,IAAI,CAAQ,CACT,CACb;YAED,6BAAK,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAO,CACnC,CACN,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IACpB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,GAAG,EAAE,SAAS,CAAC,MAAM;IACrB,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;QACnB,mBAAmB,EAAE,SAAS,CAAC,MAAM;QACrC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;YACpB,OAAO,EAAE,SAAS,CAAC,MAAM;SAC1B,CAAC;QACF,OAAO,EAAE,SAAS,CAAC,MAAM;KAC1B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,IAAI;IACT,QAAQ,EAAE,IAAI;CACf,CAAC"}
+{"version":3,"file":"job-header.js","sourceRoot":"","sources":["../../../src/components/job-header/job-header.jsx"],"names":[],"mappings":"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"}

package/lib-esm/components/jobs-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/jobs-header/index.js"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/jobs-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

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

@@ -1,23 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { formatDateTime } from '@bundle-stats/utils';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
-import { JobHeader } from '../job-header';
+import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
 import css from './jobs-header.module.css';
+export const Item = (props) => {
+    var _a;
+    const { className, tag, job } = props;
+    const { builtAt, hash } = ((_a = job.meta) === null || _a === void 0 ? void 0 : _a.webpack) || {};
+    const rootClassName = cx(css.item, className);
+    return (React.createElement(FlexStack, { space: "xsmall", alignItems: "center", className: rootClassName },
+        React.createElement(FlexStack, { space: "xxxsmall", as: "h1", className: css.itemTitle },
+            React.createElement("span", null, `#${job.internalBuildNumber}`),
+            tag && React.createElement(Tag, { className: css.itemTag }, tag)),
+        builtAt && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: css.itemMeta },
+            React.createElement(Icon, { glyph: "clock", className: css.itemMetaIcon }),
+            React.createElement("span", { className: css.itemMetaText }, formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+        hash && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: "Webpack bundle hash", className: css.itemMeta },
+            React.createElement(Icon, { glyph: "commit", className: css.itemMetaIcon }),
+            React.createElement("span", { className: css.itemMetaText }, hash.slice(0, 7))))));
+};
 export const JobsHeader = (props) => {
     const { className, jobs } = props;
     const rootClassName = cx(css.root, className);
-    return (React.createElement(FlexStack, { className: rootClassName, space: "none" }, jobs === null || jobs === void 0 ? void 0 : jobs.map((job, index) => (React.createElement(JobHeader, { key: job.internalBuildNumber || index, className: css.item, job: job, tag: index === 0 ? I18N.CURRENT : I18N.BASELINE })))));
-};
-JobsHeader.propTypes = {
-    className: PropTypes.string,
-    jobs: PropTypes.arrayOf(PropTypes.shape({
-        internalBuildNumber: PropTypes.number,
-    })),
-};
-JobsHeader.defaultProps = {
-    className: '',
-    jobs: null,
+    return (React.createElement("header", { className: rootClassName }, jobs === null || jobs === void 0 ? void 0 : jobs.map((job, index) => (React.createElement(Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? I18N.CURRENT : I18N.BASELINE })))));
 };
 //# sourceMappingURL=jobs-header.js.map

package/lib-esm/components/jobs-header/jobs-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,EAAE;IAClC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,IAC9C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,SAAS,EAAE,GAAG,CAAC,IAAI,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,SAAS,GAAG;IAErB,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,IAAI,EAAE,SAAS,CAAC,OAAO,CACrB,SAAS,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,SAAS,CAAC,MAAM;KACtC,CAAC,CACH;CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;CACX,CAAC"}
+{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.tsx"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,63 @@
 .root {
-  align-items: stretch;
-  flex-wrap: wrap;
   padding: var(--space-small) 0;
+  width: 100%;
+  display: flex;
 }
 
 .item {
-  flex: 0 0 auto;
-  padding: 0 var(--space-medium);
+  position: relative;
+  flex: 1 0 10%;
+  max-width: 50%;
+  overflow: hidden;
+  padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
+.item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-xxsmall);
+  background: linear-gradient(90deg, transparent, var(--color-background));
+}
+
+.item + .item {
+  margin-left: var(--space-small);
+}
+
 .item:first-child {
   border-left: 0;
   padding-left: 0;
 }
+
+.itemTitle {
+  font-size: var(--size-xlarge);
+  line-height: 1;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+.itemTag {
+  margin-left: var(--space-xxsmall);
+  vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
+}
+
+.itemMeta {
+  font-size: var(--size-small);
+  color: var(--color-text-light);
+}
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/lib-esm/components/metric/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric/index.js"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -1,47 +1,13 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import cx from 'classnames';
 import css from './metric.module.css';
-const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-export const Metric = ({ className, value, formatter, inline, children, enhanced }) => {
-    const { displayValue, displayUnit } = useMemo(() => {
-        const formattedValue = formatter === null || formatter === void 0 ? void 0 : formatter(value);
-        if (!formattedValue) {
-            return { displayValue: value };
-        }
-        if (!enhanced) {
-            return { displayValue: formattedValue };
-        }
-        const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
-        if (!matches) {
-            return { displayValue: value };
-        }
-        return {
-            displayUnit: matches[2],
-            displayValue: matches[1],
-        };
-    }, [formatter, value]);
+export const Metric = (props) => {
+    const { className = '', value = '0', unit = '', inline = false, children = null, ...restProps } = props;
     const rootClassName = cx(className, css.root, inline && css.inline);
-    return (React.createElement("div", { className: rootClassName },
+    return (React.createElement("div", { className: rootClassName, ...restProps },
         React.createElement("div", { className: css.display },
-            React.createElement("span", { className: css.displayValue }, displayValue),
-            displayUnit && React.createElement("span", { className: css.displayUnit }, displayUnit)),
-        React.createElement("div", { className: css.delta }, children)));
-};
-Metric.defaultProps = {
-    className: '',
-    enhanced: false,
-    inline: false,
-    value: 0,
-    children: [],
-    formatter: (val) => val,
-};
-Metric.propTypes = {
-    className: PropTypes.string,
-    enhanced: PropTypes.bool,
-    inline: PropTypes.bool,
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    formatter: PropTypes.func,
-    children: PropTypes.node,
+            React.createElement("span", { className: css.displayValue }, value),
+            unit && React.createElement("span", { className: css.displayUnit }, unit)),
+        children && React.createElement("div", { className: css.content }, children)));
 };
 //# sourceMappingURL=metric.js.map

package/lib-esm/components/metric/metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../src/components/metric/metric.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAGtC,MAAM,0BAA0B,GAAG,uBAAuB,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACjD,MAAM,cAAc,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,CAAC,CAAC;QAE1C,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;SACzC;QAED,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAEjE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;SAChC;QAED,OAAO;YACL,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;YACvB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;SACzB,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,aAAa,GAAG,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,IAAI,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAEpE,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa;QAC3B,6BAAK,SAAS,EAAE,GAAG,CAAC,OAAO;YACzB,8BAAM,SAAS,EAAE,GAAG,CAAC,YAAY,IAAG,YAAY,CAAQ;YACvD,WAAW,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,WAAW,CAAQ,CAClE;QACN,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,IAAG,QAAQ,CAAO,CACvC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG;CACxB,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IACjB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,MAAM,EAAE,SAAS,CAAC,IAAI;IACtB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChE,SAAS,EAAE,SAAS,CAAC,IAAI;IACzB,QAAQ,EAAE,SAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../src/components/metric/metric.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAiBtC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAgD,EAAE,EAAE;IACzE,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,IAAI,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAEpE,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QAC1C,6BAAK,SAAS,EAAE,GAAG,CAAC,OAAO;YACzB,8BAAM,SAAS,EAAE,GAAG,CAAC,YAAY,IAAG,KAAK,CAAQ;YAChD,IAAI,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,IAAI,CAAQ,CACpD;QACL,QAAQ,IAAI,6BAAK,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAO,CACtD,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,12 +1,12 @@
 .root {
-  letter-spacing: 0.05em;
+  font-family: var(--font-family-fixed);
 }
 
 .displayUnit {
   font-size: var(--size-small);
 }
 
-.delta {
+.content {
   font-size: var(--size-small);
 }
 
@@ -14,7 +14,7 @@
   display: inline-block;
 }
 
-.inline .delta {
+.inline .content {
   display: inline-block;
   margin: 0 0 0 var(--space-xxxsmall);
 }

package/lib-esm/components/metric-run-info/index.js

@@ -0,0 +1,2 @@
+export * from './metric-run-info';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/metric-run-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/lib-esm/components/metric-run-info/metric-run-info.js

@@ -0,0 +1,34 @@
+import React, { useCallback, useMemo } from 'react';
+import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { Stack } from '../../layout/stack';
+import { RunInfo } from '../run-info';
+import css from './metric-run-info.module.css';
+const MetricHoverCard = ({ description, url }) => {
+    const onClick = useCallback(() => {
+        if (url) {
+            window.open(url);
+        }
+    }, [url]);
+    return (React.createElement(Stack, { space: "xxxsmall" },
+        React.createElement("p", null, description),
+        url && (React.createElement("p", null,
+            React.createElement("button", { type: "button", onClick: onClick, className: css.readMoreLink }, "Read more")))));
+};
+export const MetricRunInfo = (props) => {
+    const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, ...restProps } = props;
+    const metric = getGlobalMetricType(metricId);
+    const metricRunInfo = getMetricRunInfo(metric, current, baseline || 0);
+    const titleHoverCard = useMemo(() => {
+        if (showMetricDescription) {
+            return React.createElement(MetricHoverCard, { description: metric.description, url: metric.url });
+        }
+        return null;
+    }, [showMetricDescription, metric]);
+    return (React.createElement(RunInfo, { title: metric.label, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
+            baseline: metric.formatter(baseline),
+        }), ...(showDelta && showBaseline && {
+            delta: metricRunInfo.displayDeltaPercentage,
+            deltaType: metricRunInfo.deltaType,
+        }), ...restProps }));
+};
+//# sourceMappingURL=metric-run-info.js.map

package/lib-esm/components/metric-run-info/metric-run-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,aAAa,CAAC;AACpD,OAAO,GAAG,MAAM,8BAA8B,CAAC;AAO/C,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAmB,EAAE,EAAE;IAEhE,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;QACrB,+BAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAuD,EAAE,EAAE;IACvF,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,IAAI,EAChB,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,IAAI,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;IAEvE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,qBAAqB,EAAE;YACzB,OAAO,oBAAC,eAAe,IAAC,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAAC;SAC9E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,cAAc,EAAE,cAAc,EAC9B,OAAO,QACP,OAAO,EAAE,aAAa,CAAC,YAAY,EACnC,YAAY,EAAE,YAAY,KACtB,CAAC,YAAY,IAAI;YACnB,QAAQ,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;SACrC,CAAC,KACE,CAAC,SAAS,IAAI,YAAY,IAAI;YAChC,KAAK,EAAE,aAAa,CAAC,sBAAsB;YAC3C,SAAS,EAAE,aAAa,CAAC,SAAS;SACnC,CAAC,KACE,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,18 @@
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+

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

@@ -4,7 +4,7 @@ import I18N from '../../i18n';
 import { Dropdown } from '../../ui/dropdown';
 export const MetricsTableOptions = (props) => {
     const { className, handleViewAll, handleResetFilters, ...restProps } = props;
-    return (React.createElement(Dropdown, { className: className, glyph: "menu", ...restProps },
+    return (React.createElement(Dropdown, { className: className, glyph: "more-vertical", ...restProps },
         handleResetFilters && (React.createElement(Dropdown.Item, { onClick: handleResetFilters }, I18N.RESET_FILTERS)),
         handleViewAll && (React.createElement(Dropdown.Item, { onClick: handleViewAll }, I18N.VIEW_ALL))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"metrics-table-options.js","sourceRoot":"","sources":["../../../src/components/metrics-table-options/metrics-table-options.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAG,aAAa,EAAE,kBAAkB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,KAAK,SAAS;QACvD,kBAAkB,IAAI,CACrB,oBAAC,QAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,kBAAkB,IACvC,IAAI,CAAC,aAAa,CACL,CACjB;QACA,aAAa,IAAI,CAChB,oBAAC,QAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,aAAa,IAClC,IAAI,CAAC,QAAQ,CACA,CACjB,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,SAAS,GAAG;IAC9B,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,aAAa,EAAE,SAAS,CAAC,IAAI;IAC7B,kBAAkB,EAAE,SAAS,CAAC,IAAI;CACnC,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG;IACjC,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,IAAI;IACnB,kBAAkB,EAAE,IAAI;CACzB,CAAC"}
+{"version":3,"file":"metrics-table-options.js","sourceRoot":"","sources":["../../../src/components/metrics-table-options/metrics-table-options.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAG,aAAa,EAAE,kBAAkB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,eAAe,KAAK,SAAS;QAChE,kBAAkB,IAAI,CACrB,oBAAC,QAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,kBAAkB,IACvC,IAAI,CAAC,aAAa,CACL,CACjB;QACA,aAAa,IAAI,CAChB,oBAAC,QAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,aAAa,IAClC,IAAI,CAAC,QAAQ,CACA,CACjB,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,SAAS,GAAG;IAC9B,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,aAAa,EAAE,SAAS,CAAC,IAAI;IAC7B,kBAAkB,EAAE,SAAS,CAAC,IAAI;CACnC,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG;IACjC,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,IAAI;IACnB,kBAAkB,EAAE,IAAI;CACzB,CAAC"}

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

@@ -5,13 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small);
   height: var(--space-large);
-  border-color: var(--color-outline);
-}
-
-.input:focus {
-  border-color: var(--color-outline-dark);
 }
 
 .cancelButton {