@bundle-stats/ui 4.2.2 → 4.2.3-beta.1

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

@@ -0,0 +1,107 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntryInfo = exports.EntryInfoMetaLink = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const portal_1 = require("ariakit/portal");
+const utils_1 = require("@bundle-stats/utils");
+const box_1 = require("../../layout/box");
+const flex_stack_1 = require("../../layout/flex-stack");
+const stack_1 = require("../../layout/stack");
+const file_name_1 = require("../../ui/file-name");
+const button_1 = require("../../ui/button");
+const icon_1 = require("../../ui/icon");
+const table_1 = require("../../ui/table");
+const run_info_1 = require("../run-info");
+const I18N = __importStar(require("./entry-info.i18n"));
+const entry_info_module_css_1 = __importDefault(require("./entry-info.module.css"));
+const ui_1 = require("../../ui");
+const EntryInfoMetaLink = (props) => {
+    const { as: BaseComponent = 'a', className = '', ...restProps } = props;
+    return react_1.default.createElement(BaseComponent, { className: (0, classnames_1.default)(entry_info_module_css_1.default.metaLink, className), ...restProps });
+};
+exports.EntryInfoMetaLink = EntryInfoMetaLink;
+const EntryInfoMeta = ({ className = '', label, tooltip, children, }) => (react_1.default.createElement("div", { className: (0, classnames_1.default)(entry_info_module_css_1.default.meta, className) },
+    react_1.default.createElement("span", { className: entry_info_module_css_1.default.metaLabel },
+        label,
+        tooltip && (react_1.default.createElement(ui_1.Tooltip, { title: tooltip, className: entry_info_module_css_1.default.metaLabelTooltip },
+            react_1.default.createElement(icon_1.Icon, { glyph: "help" })))),
+    react_1.default.createElement("div", { className: entry_info_module_css_1.default.metaContent }, children)));
+function defaultRenderRunInfo(item) {
+    const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
+    const metricRunInfo = (0, utils_1.getMetricRunInfo)(utils_1.METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE, item.runs?.[0]?.value || 0, baselineRun?.value || 0);
+    return (react_1.default.createElement(run_info_1.RunInfo, { current: metricRunInfo.displayValue, delta: metricRunInfo.displayDeltaPercentage, deltaPercentage: metricRunInfo.displayDelta, deltaType: metricRunInfo.deltaType, baseline: baselineRun?.displayValue || '0B', size: "large" }));
+}
+const EntryInfo = (props) => {
+    const { className = '', itemTitle = null, item, labels, runNameSelector = 'name', runNameLabel = I18N.PATH, runSizeLabel = I18N.SIZE, tags = null, onClose, renderRunInfo = defaultRenderRunInfo, RunName = react_1.default.Fragment, children, } = props;
+    return (react_1.default.createElement(portal_1.Portal, { className: (0, classnames_1.default)(entry_info_module_css_1.default.root, className) },
+        react_1.default.createElement(box_1.Box, { padding: "medium", as: "header", className: entry_info_module_css_1.default.header },
+            react_1.default.createElement(stack_1.Stack, { space: "small" },
+                react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "h3", className: entry_info_module_css_1.default.label },
+                    react_1.default.createElement(file_name_1.FileName, { as: "code", name: itemTitle || item.label, className: entry_info_module_css_1.default.fileName }),
+                    react_1.default.createElement(ui_1.CopyToClipboard, { text: item.label, size: "small" })),
+                react_1.default.createElement("div", null, renderRunInfo(item))),
+            react_1.default.createElement(button_1.Button, { radius: "circle", type: "button", onClick: onClose, "aria-label": I18N.CLOSE_TITLE, className: entry_info_module_css_1.default.headerClose },
+                react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.CLOSE, size: "large" }))),
+        react_1.default.createElement(box_1.Box, { padding: "medium", as: "main", className: entry_info_module_css_1.default.contentWrapper },
+            react_1.default.createElement(stack_1.Stack, { space: "small", className: entry_info_module_css_1.default.content },
+                tags && react_1.default.createElement("div", null, tags),
+                children,
+                react_1.default.createElement(table_1.Table, { outline: true, compact: true, className: entry_info_module_css_1.default.runs },
+                    react_1.default.createElement(table_1.Table.THead, null,
+                        react_1.default.createElement(table_1.Table.Tr, null,
+                            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(entry_info_module_css_1.default.runsCell, entry_info_module_css_1.default.runsColJob) }, "\u00A0"),
+                            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(entry_info_module_css_1.default.runsCell, entry_info_module_css_1.default.runsColName) }, runNameLabel),
+                            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(entry_info_module_css_1.default.runsCell, entry_info_module_css_1.default.runsColSize) }, runSizeLabel))),
+                    react_1.default.createElement(table_1.Table.TBody, null, item.runs.map((run, index) => {
+                        const key = `info-${run?.name || index}-${index}`;
+                        const rowRun = run;
+                        return (react_1.default.createElement(table_1.Table.Tr, { key: key },
+                            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(entry_info_module_css_1.default.runsCell, entry_info_module_css_1.default.runsColJob) }, labels[index]),
+                            react_1.default.createElement(table_1.Table.Td, { className: (0, classnames_1.default)(entry_info_module_css_1.default.runsCell, entry_info_module_css_1.default.runsColName) }, rowRun?.[runNameSelector] ? (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", className: entry_info_module_css_1.default.label },
+                                react_1.default.createElement(RunName, { run: rowRun, nameSelector: runNameSelector },
+                                    react_1.default.createElement(file_name_1.FileName, { as: "code", name: rowRun[runNameSelector], className: className })),
+                                react_1.default.createElement(ui_1.CopyToClipboard, { text: item.label, size: "small" }))) : ('-')),
+                            react_1.default.createElement(table_1.Table.Td, { className: (0, classnames_1.default)(entry_info_module_css_1.default.runsCell, entry_info_module_css_1.default.runsColSize) },
+                                react_1.default.createElement("span", { className: entry_info_module_css_1.default.size }, typeof run?.value !== 'undefined' ? run.value : '-'))));
+                    })))))));
+};
+exports.EntryInfo = EntryInfo;
+exports.EntryInfo.Meta = EntryInfoMeta;
+//# sourceMappingURL=entry-info.js.map

package/lib/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":"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"}

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

@@ -0,0 +1,136 @@
+.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-xlarge) + var(--space-xxxsmall) + var(--space-xsmall));
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.headerClose {
+  position: absolute;
+  right: calc(var(--space-small) - var(--space-xxxsmall));
+  top: calc(var(--space-small) - var(--space-xxxsmall));
+  color: var(--color-text-ultra-light);
+}
+
+.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);
+  line-height: var(--line-height);
+}
+
+.label {
+  font-size: var(--size-medium);
+}
+
+.runs {
+  font-size: var(--size-small);
+}
+
+.runs .runsColJob {
+  white-space: nowrap;
+}
+
+.runs .runsColName {
+  width: 100%;
+}
+
+.runs .runsColSize {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.size {
+  font-family: var(--font-family-fixed);
+}
+
+/**
+ * Meta element
+ */
+.meta {}
+
+.metaLabel {
+  margin-right: var(--space-xxxsmall);
+  min-width: 8em;
+  flex: 0 1 6em;
+  color: var(--color-text-light);
+}
+
+.metaLabelTooltip {
+  margin-left: var(--space-xxxsmall);
+  color: var(--color-text-ultra-light);
+}
+
+.metaContent {
+  padding: 1px 0;
+  flex: 0 1 auto;
+}
+
+.metaLink {
+  padding: 1px var(--space-xxxsmall);
+  display: inline-block;
+  line-height: var(--line-height-heading);
+  border-radius: var(--radius-small);
+  background: var(--color-highlight);
+  transition: var(--transition-out);
+
+  text-decoration: none;
+  text-transform: none;
+  font-weight: normal;
+  max-width: 16em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.metaLink {
+  margin-right: var(--space-xxxsmall);
+}
+
+.metaLink:hover,
+.metaLink:active,
+.metaLink:focus {
+  background: var(--color-outline);
+  color: var(--color-primary-dark);
+}
+
+@media (min-width: 640px) {
+  .meta {
+    display: flex;
+    align-items: flex-start;
+  }
+}

package/lib/components/{summary-item → entry-info}/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./summary-item"), exports);
+__exportStar(require("./entry-info"), exports);
 //# sourceMappingURL=index.js.map

package/lib/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,+CAA6B"}

package/lib/components/index.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TotalSizeTypeTitle = exports.Summary = exports.SummaryItem = exports.ModuleInfo = exports.MetricsTableTitle = exports.MetricsTableSearch = exports.MetricsTableOptions = exports.MetricsTable = exports.Metric = exports.LighthouseTable = exports.JobsHeader = exports.JobHeader = exports.JobName = exports.Insights = exports.InsightIcon = exports.Delta = exports.ComponentLink = exports.BundleModules = exports.BundlePackages = exports.BundleAssetsTotalsChartBars = exports.BundleAssetsTotalsTable = exports.BundleAssets = exports.BrowsertimeTable = void 0;
+exports.Summary = exports.RunInfo = exports.ModuleInfo = exports.MetricsTableTitle = exports.MetricsTableOptions = exports.MetricsTable = exports.MetricRunInfo = exports.Metric = exports.LighthouseTable = exports.JobsHeader = exports.JobName = exports.Insights = exports.InsightIcon = exports.Delta = exports.ComponentLink = exports.BundleModules = exports.BundlePackages = exports.BundleAssetsTotals = exports.BundleAssets = exports.BrowsertimeTable = void 0;
 var browsertime_table_1 = require("./browsertime-table");
 Object.defineProperty(exports, "BrowsertimeTable", { enumerable: true, get: function () { return browsertime_table_1.BrowsertimeTable; } });
 var bundle_assets_1 = require("./bundle-assets");
 Object.defineProperty(exports, "BundleAssets", { enumerable: true, get: function () { return bundle_assets_1.BundleAssets; } });
-var bundle_assets_totals_table_1 = require("./bundle-assets-totals-table");
-Object.defineProperty(exports, "BundleAssetsTotalsTable", { enumerable: true, get: function () { return bundle_assets_totals_table_1.BundleAssetsTotalsTable; } });
-var bundle_assets_totals_chart_bars_1 = require("./bundle-assets-totals-chart-bars");
-Object.defineProperty(exports, "BundleAssetsTotalsChartBars", { enumerable: true, get: function () { return bundle_assets_totals_chart_bars_1.BundleAssetsTotalsChartBars; } });
+var bundle_assets_totals_1 = require("./bundle-assets-totals");
+Object.defineProperty(exports, "BundleAssetsTotals", { enumerable: true, get: function () { return bundle_assets_totals_1.BundleAssetsTotals; } });
 var bundle_packages_1 = require("./bundle-packages");
 Object.defineProperty(exports, "BundlePackages", { enumerable: true, get: function () { return bundle_packages_1.BundlePackages; } });
 var bundle_modules_1 = require("./bundle-modules");
@@ -23,28 +21,24 @@ var insights_1 = require("./insights");
 Object.defineProperty(exports, "Insights", { enumerable: true, get: function () { return insights_1.Insights; } });
 var job_name_1 = require("./job-name");
 Object.defineProperty(exports, "JobName", { enumerable: true, get: function () { return job_name_1.JobName; } });
-var job_header_1 = require("./job-header");
-Object.defineProperty(exports, "JobHeader", { enumerable: true, get: function () { return job_header_1.JobHeader; } });
 var jobs_header_1 = require("./jobs-header");
 Object.defineProperty(exports, "JobsHeader", { enumerable: true, get: function () { return jobs_header_1.JobsHeader; } });
 var lighthouse_table_1 = require("./lighthouse-table");
 Object.defineProperty(exports, "LighthouseTable", { enumerable: true, get: function () { return lighthouse_table_1.LighthouseTable; } });
 var metric_1 = require("./metric");
 Object.defineProperty(exports, "Metric", { enumerable: true, get: function () { return metric_1.Metric; } });
+var metric_run_info_1 = require("./metric-run-info");
+Object.defineProperty(exports, "MetricRunInfo", { enumerable: true, get: function () { return metric_run_info_1.MetricRunInfo; } });
 var metrics_table_1 = require("./metrics-table");
 Object.defineProperty(exports, "MetricsTable", { enumerable: true, get: function () { return metrics_table_1.MetricsTable; } });
 var metrics_table_options_1 = require("./metrics-table-options");
 Object.defineProperty(exports, "MetricsTableOptions", { enumerable: true, get: function () { return metrics_table_options_1.MetricsTableOptions; } });
-var metrics_table_search_1 = require("./metrics-table-search");
-Object.defineProperty(exports, "MetricsTableSearch", { enumerable: true, get: function () { return metrics_table_search_1.MetricsTableSearch; } });
 var metrics_table_title_1 = require("./metrics-table-title");
 Object.defineProperty(exports, "MetricsTableTitle", { enumerable: true, get: function () { return metrics_table_title_1.MetricsTableTitle; } });
 var module_info_1 = require("./module-info");
 Object.defineProperty(exports, "ModuleInfo", { enumerable: true, get: function () { return module_info_1.ModuleInfo; } });
-var summary_item_1 = require("./summary-item");
-Object.defineProperty(exports, "SummaryItem", { enumerable: true, get: function () { return summary_item_1.SummaryItem; } });
+var run_info_1 = require("./run-info");
+Object.defineProperty(exports, "RunInfo", { enumerable: true, get: function () { return run_info_1.RunInfo; } });
 var summary_1 = require("./summary");
 Object.defineProperty(exports, "Summary", { enumerable: true, get: function () { return summary_1.Summary; } });
-var total_size_type_title_1 = require("./total-size-type-title");
-Object.defineProperty(exports, "TotalSizeTypeTitle", { enumerable: true, get: function () { return total_size_type_title_1.TotalSizeTypeTitle; } });
 //# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.js"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AACzB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,2EAAuE;AAA9D,qIAAA,uBAAuB,OAAA;AAChC,qFAAgF;AAAvE,8IAAA,2BAA2B,OAAA;AACpC,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAC3B,6DAA0D;AAAjD,wHAAA,iBAAiB,OAAA;AAC1B,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,iEAA6D;AAApD,2HAAA,kBAAkB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.js"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AACzB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAC3B,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,qDAAsE;AAA7D,gHAAA,aAAa,OAAA;AACtB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,6DAA0D;AAAjD,wHAAA,iBAAiB,OAAA;AAC1B,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,uCAAmD;AAA1C,mGAAA,OAAO,OAAA;AAChB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"insight-icon.js","sourceRoot":"","sources":["../../../src/components/insight-icon/insight-icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAAkD;AAElD,wCAAqC;AAErC,wFAA4C;AAE5C,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC;IACjC,CAAC,mBAAW,CAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACrC,CAAC,mBAAW,CAAC,OAAO,EAAE,WAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IACzC,CAAC,mBAAW,CAAC,IAAI,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,CAAC;CACpC,CAAC,CAAC;AAMI,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,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,OAAO,CAAC;IAC5F,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,iCAAG,CAAC,IAAI,EAAE,iCAAG,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAW,CAAC;IAE7D,OAAO,8BAAC,WAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAC1D,CAAC,CAAC;AAPW,QAAA,WAAW,eAOtB"}
+{"version":3,"file":"insight-icon.js","sourceRoot":"","sources":["../../../src/components/insight-icon/insight-icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAAkD;AAElD,wCAAgD;AAChD,wFAA4C;AAE5C,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC;IACjC,CAAC,mBAAW,CAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACrC,CAAC,mBAAW,CAAC,OAAO,EAAE,WAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IACzC,CAAC,mBAAW,CAAC,IAAI,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,CAAC;CACpC,CAAC,CAAC;AAMI,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,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,OAAO,CAAC;IAC5F,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,iCAAG,CAAC,IAAI,EAAE,iCAAG,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAc,CAAC;IAEhE,OAAO,8BAAC,WAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAC1D,CAAC,CAAC;AAPW,QAAA,WAAW,eAOtB"}

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

@@ -13,7 +13,7 @@
 
 .warning {
   padding-top: 1px;
-  background: var(--color-yellow-200);
+  background: var(--color-yellow-100);
   color: var(--color-yellow-900);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAsE;AAEtE,wDAAoD;AACpD,8CAA2C;AAC3C,sDAAkD;AAClD,kDAA8C;AAE9C,gFAAwC;AAOjC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,QAAQ,EACR,mBAAmB,EAAE,mBAAmB,GAAG,8BAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC,QAAQ,CAAC,CAAC;IAE7C,OAAO,CACL,8BAAC,aAAK,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,8BAAC,sBAAS,IACR,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAE,mBAAmB,KACnB,IAAI,EACR,SAAS,EAAE,6BAAG,CAAC,KAAK;YAEpB,8BAAC,0BAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,6BAAG,CAAC,IAAI,GAAI;YACxD,4CAAO,IAAI,CAAQ,CACT,CACb,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,QAAQ,YA6BnB"}
+{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAsE;AAEtE,wDAAoD;AACpD,8CAA2C;AAC3C,sDAAkD;AAClD,kDAA8C;AAC9C,gFAAwC;AAOjC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,QAAQ,EACR,mBAAmB,EAAE,mBAAmB,GAAG,8BAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC,QAAQ,CAAC,CAAC;IAE7C,OAAO,CACL,8BAAC,aAAK,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,8BAAC,sBAAS,IACR,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAE,mBAAmB,KACnB,IAAI,EACR,SAAS,EAAE,6BAAG,CAAC,KAAK;YAEpB,8BAAC,0BAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,6BAAG,CAAC,IAAI,GAAI;YACxD,4CAAO,IAAI,CAAQ,CACT,CACb,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,QAAQ,YA6BnB"}

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

@@ -4,6 +4,7 @@
 
 .entry {
   color: inherit;
+  line-height: var(--line-height-heading);
   text-decoration: none;
 }
 

package/lib/components/job-name/job-name.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const tooltip_1 = require("../../ui/tooltip");
 const job_name_module_css_1 = __importDefault(require("./job-name.module.css"));
-const JobName = ({ as: Component, title, internalBuildNumber, children, ...restProps }) => (react_1.default.createElement(tooltip_1.Tooltip, { className: job_name_module_css_1.default.root, as: Component, title: title, ...restProps }, children || `Job #${internalBuildNumber}`));
+const JobName = ({ as: Component = 'span', title, internalBuildNumber, children, ...restProps }) => (react_1.default.createElement(tooltip_1.Tooltip, { className: job_name_module_css_1.default.root, as: Component, title: title, ...restProps }, children || `Job #${internalBuildNumber}`));
 exports.JobName = JobName;
 exports.JobName.defaultProps = {
     as: 'span',

package/lib/components/job-name/job-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"job-name.js","sourceRoot":"","sources":["../../../src/components/job-name/job-name.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AAEnC,8CAA2C;AAC3C,gFAAwC;AAEjC,MAAM,OAAO,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAChG,8BAAC,iBAAO,IAAC,SAAS,EAAE,6BAAG,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,IACrE,QAAQ,IAAI,QAAQ,mBAAmB,EAAE,CAClC,CACX,CAAC;AAJW,QAAA,OAAO,WAIlB;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,EAAE;IACT,mBAAmB,EAAE,IAAI;IACzB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,eAAO,CAAC,SAAS,GAAG;IAElB,EAAE,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,IAAI,CAAC,CAAC;IAG3D,KAAK,EAAE,oBAAS,CAAC,MAAM;IAGvB,mBAAmB,EAAE,oBAAS,CAAC,MAAM;IAGrC,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"job-name.js","sourceRoot":"","sources":["../../../src/components/job-name/job-name.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AAEnC,8CAA2C;AAC3C,gFAAwC;AAEjC,MAAM,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,EAAE,CAAC,CACJ,8BAAC,iBAAO,IAAC,SAAS,EAAE,6BAAG,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,IACrE,QAAQ,IAAI,QAAQ,mBAAmB,EAAE,CAClC,CACX,CAAC;AAVW,QAAA,OAAO,WAUlB;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,EAAE;IACT,mBAAmB,EAAE,IAAI;IACzB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,eAAO,CAAC,SAAS,GAAG;IAElB,EAAE,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,IAAI,CAAC,CAAC;IAG3D,KAAK,EAAE,oBAAS,CAAC,MAAM;IAGvB,mBAAmB,EAAE,oBAAS,CAAC,MAAM;IAGrC,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC"}

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

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

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

@@ -3,28 +3,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JobsHeader = void 0;
+exports.JobsHeader = exports.Item = void 0;
 const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@bundle-stats/utils");
 const i18n_1 = __importDefault(require("../../i18n"));
 const flex_stack_1 = require("../../layout/flex-stack");
-const job_header_1 = require("../job-header");
+const icon_1 = require("../../ui/icon");
+const tag_1 = require("../../ui/tag");
 const jobs_header_module_css_1 = __importDefault(require("./jobs-header.module.css"));
+const Item = (props) => {
+    const { className, tag, job } = props;
+    const { builtAt, hash } = job.meta?.webpack || {};
+    const rootClassName = (0, classnames_1.default)(jobs_header_module_css_1.default.item, className);
+    return (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xsmall", alignItems: "center", className: rootClassName },
+        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxsmall", as: "h1", className: jobs_header_module_css_1.default.itemTitle },
+            react_1.default.createElement("span", null, `#${job.internalBuildNumber}`),
+            tag && react_1.default.createElement(tag_1.Tag, { className: jobs_header_module_css_1.default.itemTag }, tag)),
+        builtAt && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: jobs_header_module_css_1.default.itemMeta },
+            react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.CLOCK, className: jobs_header_module_css_1.default.itemMetaIcon }),
+            react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, (0, utils_1.formatDateTime)({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+        hash && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: "Webpack bundle hash", className: jobs_header_module_css_1.default.itemMeta },
+            react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.COMMIT, className: jobs_header_module_css_1.default.itemMetaIcon }),
+            react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, hash.slice(0, 7))))));
+};
+exports.Item = Item;
 const JobsHeader = (props) => {
     const { className, jobs } = props;
     const rootClassName = (0, classnames_1.default)(jobs_header_module_css_1.default.root, className);
-    return (react_1.default.createElement(flex_stack_1.FlexStack, { className: rootClassName, space: "none" }, jobs?.map((job, index) => (react_1.default.createElement(job_header_1.JobHeader, { key: job.internalBuildNumber || index, className: jobs_header_module_css_1.default.item, job: job, tag: index === 0 ? i18n_1.default.CURRENT : i18n_1.default.BASELINE })))));
+    return (react_1.default.createElement("header", { className: rootClassName }, jobs?.map((job, index) => (react_1.default.createElement(exports.Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? i18n_1.default.CURRENT : i18n_1.default.BASELINE })))));
 };
 exports.JobsHeader = JobsHeader;
-exports.JobsHeader.propTypes = {
-    className: prop_types_1.default.string,
-    jobs: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        internalBuildNumber: prop_types_1.default.number,
-    })),
-};
-exports.JobsHeader.defaultProps = {
-    className: '',
-    jobs: null,
-};
 //# sourceMappingURL=jobs-header.js.map

package/lib/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,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,sDAA8B;AAC9B,wDAAoD;AACpD,8CAA0C;AAC1C,sFAA2C;AAEpC,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,EAAE;IAClC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,sBAAS,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,IAC9C,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,8BAAC,sBAAS,IACR,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,SAAS,EAAE,gCAAG,CAAC,IAAI,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,cAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,UAAU,cAgBrB;AAEF,kBAAU,CAAC,SAAS,GAAG;IAErB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,IAAI,EAAE,oBAAS,CAAC,OAAO,CACrB,oBAAS,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,oBAAS,CAAC,MAAM;KACtC,CAAC,CACH;CACF,CAAC;AAEF,kBAAU,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":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAAqD;AAErD,sDAA8B;AAC9B,wDAAoD;AACpD,wCAAqC;AACrC,sCAAmC;AACnC,sFAA2C;AAepC,MAAM,IAAI,GAAG,CAAC,KAA8C,EAAE,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAEtC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,sBAAS,IAAC,KAAK,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,aAAa;QACpE,8BAAC,sBAAS,IAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,gCAAG,CAAC,SAAS;YACzD,4CAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;YAC3C,GAAG,IAAI,8BAAC,SAAG,IAAC,SAAS,EAAE,gCAAG,CAAC,OAAO,IAAG,GAAG,CAAO,CACtC;QAEX,OAAO,IAAI,CACV,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,gCAAG,CAAC,QAAQ;YAEvB,8BAAC,WAAI,IAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;YAC9D,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAC9B,IAAA,sBAAc,EAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;QAEA,IAAI,IAAI,CACP,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,gCAAG,CAAC,QAAQ;YAEvB,8BAAC,WAAI,IAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;YAC/D,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ,CAClD,CACb,CACS,CACb,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,IAAI,QA4Cf;AAMK,MAAM,UAAU,GAAG,CAAC,KAAuD,EAAE,EAAE;IACpF,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,0CAAQ,SAAS,EAAE,aAAa,IAC7B,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,8BAAC,YAAI,IACH,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,cAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,UAAU,cAerB"}

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

@@ -1,16 +1,60 @@
 .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: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 {
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+}
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+  color: var(--color-text-ultra-light);
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/lib/components/lighthouse-table/lighthouse-table.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/lighthouse-table/lighthouse-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"lighthouse-table.js","sourceRoot":"","sources":["../../../src/components/lighthouse-table/lighthouse-table.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,mFAAqE;AAErE,oDAAgD;AAEzC,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EACJ,SAAS,EACT,IAAI,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,CACL,8BAAC,4BAAY,IACX,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,eAAe,mBAe1B;AAEF,uBAAe,CAAC,YAAY,GAAG;IAC7B,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,uBAAe,CAAC,SAAS,GAAG;IAC1B,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,oBAAS,CAAC,KAAK;CACtB,CAAC"}
+{"version":3,"file":"lighthouse-table.js","sourceRoot":"","sources":["../../../src/components/lighthouse-table/lighthouse-table.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,mFAAqE;AAErE,oDAAgD;AAEzC,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EACJ,SAAS,EACT,IAAI,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,CACL,8BAAC,4BAAY,IACX,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,eAAe,mBAe1B;AAEF,uBAAe,CAAC,YAAY,GAAG;IAC7B,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,uBAAe,CAAC,SAAS,GAAG;IAC1B,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,oBAAS,CAAC,KAAK;CACtB,CAAC"}

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

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