@bundle-stats/ui 4.2.1 → 4.2.3-beta.0

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;AAErC,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-200);
+  color: var(--color-yellow-900);
+}
+
+.info {
+  background: var(--color-highlight-info);
+  color: var(--color-info);
+}
+

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

@@ -1,24 +1,17 @@
 import React from 'react';
-import cx from 'classnames';
-import { InsightType, getInsightList } from '@bundle-stats/utils';
+import { getInsightList } from '@bundle-stats/utils';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Icon } from '../../ui/icon';
 import { ComponentLink } from '../component-link';
+import { InsightIcon } from '../insight-icon';
 import css from './insights.module.css';
-const InsightTypeIconMap = new Map([
-    [InsightType.ERROR, Icon.ICONS.ERROR],
-    [InsightType.WARNING, Icon.ICONS.WARNING],
-    [InsightType.INFO, Icon.ICONS.INFO],
-]);
 export const Insights = (props) => {
-    const { duplicatePackages, newPackages, customComponentLink: CustomComponentLink = ComponentLink, ...restProps } = props;
-    const insights = getInsightList({ duplicatePackages, newPackages });
-    return (React.createElement(Stack, { space: "xxsmall", ...restProps }, insights.map(({ name, insight, link }) => {
-        const glyph = InsightTypeIconMap.get(insight.type);
+    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: cx(css.entry, css[insight.type]) },
-            glyph && React.createElement(Icon, { glyph: glyph, className: css.icon }),
+        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)));
     })));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAElE,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,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAExC,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;AAQH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,iBAAiB,EACjB,WAAW,EACX,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,SAAS,KAAK,SAAS,IACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;QACxC,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnD,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAwB,CAAC;QAElD,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,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAE1C,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,GAAI;YACrD,kCAAO,IAAI,CAAQ,CACT,CACb,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"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;AAE9C,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

@@ -1,26 +1,5 @@
 .icon {
   flex: 0 0 auto;
-  width: calc(var(--space-small) + 6px);
-  height: calc(var(--space-small) + 6px);
-  padding: 3px;
-  border-radius: 50%;
-  background: var(--color-highlight);
-}
-
-.error .icon {
-  background: var(--color-red-50);
-  color: var(--color-danger);
-}
-
-.warning .icon {
-  padding-top: 1px;
-  background: var(--color-yellow-200);
-  color: var(--color-yellow-900);
-}
-
-.info .icon {
-  background: var(--color-highlight-info);
-  color: var(--color-info);
 }
 
 .entry {

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 {

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

@@ -12,7 +12,7 @@ import css from './summary.module.css';
 export const Summary = ({ className, size, keys, data, loading, showSummaryItemDelta, summaryItemLink: SummaryItemCustomLink, }) => (React.createElement(Box, { className: cx(css.root, className) },
     React.createElement(FlexStack, { space: "small", className: css.items }, Array.from(METRIC_COMPONENT_LINKS)
         .filter(([metricId]) => keys.includes(metricId))
-        .map(([metricId, metricOptions]) => (React.createElement(Box, { key: metricId, outline: true, padding: "small", as: SummaryItemCustomLink, ...metricOptions.link, className: css.item },
+        .map(([metricId, metricOptions]) => (React.createElement(Box, { key: metricId, outline: true, outlineHover: true, padding: "small", as: SummaryItemCustomLink, ...metricOptions.link, className: css.item },
         React.createElement(SummaryItem, { size: size, id: metricId, data: get(data, metricId), loading: loading, showMetricDescription: true, showDelta: showSummaryItemDelta && metricOptions.showDelta !== false })))))));
 Summary.defaultProps = {
     className: '',

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

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.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,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,oBAAoB,EACpB,eAAe,EAAE,qBAAqB,GACvC,EAAE,EAAE,CAAC,CACJ,oBAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,CAAC,KAAK,IAC1C,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC;SAChC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SAC/C,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAClC,oBAAC,GAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,CAAC,IAAI,EACtB,SAAS,EAAE,GAAG,CAAC,IAAI;QAEnB,oBAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,EACzB,OAAO,EAAE,OAAO,EAChB,qBAAqB,QACrB,SAAS,EAAE,oBAAoB,IAAI,aAAa,CAAC,SAAS,KAAK,KAAK,GACpE,CACE,CACP,CAAC,CACM,CACR,CACP,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,uBAAuB;IAC7B,oBAAoB,EAAE,IAAI;IAC1B,eAAe,EAAE,aAAa;CAC/B,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;QACpB,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;YAClC,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,OAAO,EAAE,SAAS,CAAC,MAAM;SAC1B,CAAC;KACH,CAAC;IACF,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB,oBAAoB,EAAE,SAAS,CAAC,IAAI;IACpC,eAAe,EAAE,SAAS,CAAC,WAAW;CACvC,CAAC"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.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,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,oBAAoB,EACpB,eAAe,EAAE,qBAAqB,GACvC,EAAE,EAAE,CAAC,CACJ,oBAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,CAAC,KAAK,IAC1C,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC;SAChC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SAC/C,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAClC,oBAAC,GAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,CAAC,IAAI,EACtB,SAAS,EAAE,GAAG,CAAC,IAAI;QAEnB,oBAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,EACzB,OAAO,EAAE,OAAO,EAChB,qBAAqB,QACrB,SAAS,EAAE,oBAAoB,IAAI,aAAa,CAAC,SAAS,KAAK,KAAK,GACpE,CACE,CACP,CAAC,CACM,CACR,CACP,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,uBAAuB;IAC7B,oBAAoB,EAAE,IAAI;IAC1B,eAAe,EAAE,aAAa;CAC/B,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;QACpB,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;YAClC,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,OAAO,EAAE,SAAS,CAAC,MAAM;SAC1B,CAAC;KACH,CAAC;IACF,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB,oBAAoB,EAAE,SAAS,CAAC,IAAI;IACpC,eAAe,EAAE,SAAS,CAAC,WAAW;CACvC,CAAC"}

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

@@ -1,6 +1,5 @@
 .root {
   width: 100%;
-  overflow: auto;
 }
 
 .item {
@@ -8,10 +7,3 @@
   min-width: 16em;
   text-decoration: none;
 }
-
-.item:hover,
-.item:active,
-.item:focus {
-  border-color: var(--color-outline-dark);
-  outline: none;
-}

package/lib-esm/css/variables.css

@@ -190,6 +190,8 @@
   --radius-medium: 5px;
   --radius-large: 9px;
 
+  --outline-hover: 0 0 0 3px var(--color-highlight);
+
   /** Layout */
   --max-width: 80rem;
 }

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

@@ -1,33 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { NO_SPACE, SPACES } from '../../constants';
+import { NO_SPACE } from '../../constants';
 import css from './box.module.css';
 export const Box = (props) => {
-    const { className, as: Component, padding, horizontalPadding, verticalPadding, outline, ...restProps } = props;
+    const { className = '', as: Component = 'div', padding = NO_SPACE, horizontalPadding = '', verticalPadding = '', outline = false, outlineHover = false, ...restProps } = props;
     const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(padding)
         ? [null, ...padding]
         : [padding, verticalPadding, horizontalPadding];
-    const rootClassName = cx(css.root, className, resolvedPadding && css[`padding-${resolvedPadding}`], resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`], outline && css.outline);
+    const rootClassName = cx(css.root, className, resolvedPadding && css[`padding-${resolvedPadding}`], resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`], outline && css.outline, outlineHover && css.outlineHover);
     return React.createElement(Component, { ...restProps, className: rootClassName });
 };
-Box.defaultProps = {
-    className: '',
-    as: 'div',
-    padding: NO_SPACE,
-    horizontalPadding: '',
-    verticalPadding: '',
-    outline: false,
-};
-Box.propTypes = {
-    className: PropTypes.string,
-    as: PropTypes.elementType,
-    padding: PropTypes.oneOfType([
-        PropTypes.oneOf(SPACES),
-        PropTypes.arrayOf(PropTypes.oneOf(SPACES)),
-    ]),
-    horizontalPadding: PropTypes.oneOf(SPACES),
-    verticalPadding: PropTypes.oneOf(SPACES),
-    outline: PropTypes.bool,
-};
 //# sourceMappingURL=box.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../src/layout/box/box.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAEnC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3B,MAAM,EACJ,SAAS,EACT,EAAE,EAAE,SAAS,EACb,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,OAAO,EACP,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,uBAAuB,EAAE,yBAAyB,CAAC,GAAG,KAAK,CAAC,OAAO,CACzF,OAAO,CACR;QACC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC;QACpB,CAAC,CAAC,CAAC,OAAO,EAAE,eAAe,EAAE,iBAAiB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,SAAS,EACT,eAAe,IAAI,GAAG,CAAC,WAAW,eAAe,EAAE,CAAC,EACpD,uBAAuB,IAAI,GAAG,CAAC,oBAAoB,uBAAuB,EAAE,CAAC,EAC7E,yBAAyB,IAAI,GAAG,CAAC,sBAAsB,yBAAyB,EAAE,CAAC,EACnF,OAAO,IAAI,GAAG,CAAC,OAAO,CACvB,CAAC;IAEF,OAAO,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AAEF,GAAG,CAAC,YAAY,GAAG;IACjB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,KAAK;IACT,OAAO,EAAE,QAAQ;IACjB,iBAAiB,EAAE,EAAE;IACrB,eAAe,EAAE,EAAE;IACnB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,GAAG,CAAC,SAAS,GAAG;IAEd,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,EAAE,EAAE,SAAS,CAAC,WAAW;IAGzB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC;QAC3B,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;QACvB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC3C,CAAC;IAGF,iBAAiB,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;IAG1C,eAAe,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;IAGxC,OAAO,EAAE,SAAS,CAAC,IAAI;CACxB,CAAC"}
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../src/layout/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAU,MAAM,iBAAiB,CAAC;AAEnD,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAWnC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,GAAG,QAAQ,EAClB,iBAAiB,GAAG,EAAE,EACtB,eAAe,GAAG,EAAE,EACpB,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,uBAAuB,EAAE,yBAAyB,CAAC,GAAG,KAAK,CAAC,OAAO,CACzF,OAAO,CACR;QACC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC;QACpB,CAAC,CAAC,CAAC,OAAO,EAAE,eAAe,EAAE,iBAAiB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,SAAS,EACT,eAAe,IAAI,GAAG,CAAC,WAAW,eAAe,EAAE,CAAC,EACpD,uBAAuB,IAAI,GAAG,CAAC,oBAAoB,uBAAuB,EAAE,CAAC,EAC7E,yBAAyB,IAAI,GAAG,CAAC,sBAAsB,yBAAyB,EAAE,CAAC,EACnF,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,YAAY,IAAI,GAAG,CAAC,YAAY,CACjC,CAAC;IAEF,OAAO,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC"}

package/lib-esm/layout/box/box.module.css

@@ -15,6 +15,17 @@
   border-radius: 0 0 var(--radius-medium) var(--radius-medium);
 }
 
+.outlineHover {
+  transition: var(--transition-out);
+}
+
+.outlineHover:focus,
+.outlineHover:active,
+.outlineHover:hover {
+  box-shadow: var(--outline-hover);
+  transition: var(--transition-in);
+}
+
 .padding-xxxsmall {
   padding: var(--space-xxxsmall);
 }

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

@@ -1,2 +1,2 @@
-export { Box } from './box';
+export * from './box';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}

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

@@ -1,15 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './container.module.css';
-export const Container = ({ className, as: Component, ...restProps }) => (React.createElement(Component, { className: cx(css.root, className) },
+export const Container = ({ as: Component = 'div', className = '', ...restProps }) => (React.createElement(Component, { className: cx(css.root, className) },
     React.createElement("div", { className: css.inner, ...restProps })));
-Container.defaultProps = {
-    className: '',
-    as: 'div',
-};
-Container.propTypes = {
-    className: PropTypes.string,
-    as: PropTypes.elementType,
-};
 //# sourceMappingURL=container.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CACvE,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IAEpB,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,EAAE,EAAE,SAAS,CAAC,WAAW;CAC1B,CAAC"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAMzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC"}

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

@@ -1,2 +1,2 @@
-export { Container } from './container';
+export * from './container';
 //# sourceMappingURL=index.js.map

package/lib-esm/ui/container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/container/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

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

@@ -25,8 +25,7 @@
 .button:focus,
 .button:active {
   outline: none;
-  box-shadow: var(--shadow-layer);
-  border-color: var(--color-outline-dark);
+  box-shadow: var(--outline-hover);
   color: var(--color-text);
 }
 

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

@@ -83,11 +83,7 @@
 .filterStandalone:active .filterCheckbox,
 .filterStandalone:focus .filterCheckbox {
   z-index: var(--layout-xlow); /* show collapsed border */
-  box-shadow: var(--shadow-layer);
-}
-
-.filterStandalone:hover .filterCheckbox {
-  border-color: var(--color-outline-dark);
+  box-shadow: var(--outline-hover);
   color: var(--color-text);
 }
 

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

@@ -1,6 +1,6 @@
 .root {
-  border: 1px solid var(--color-outline);;
-  border-radius: 0;
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
   transition: var(--transition-in);
@@ -25,8 +25,7 @@
 }
 
 .root:focus {
-  border-color: var(--color-outline-dark);
-  box-shadow: var(--shadow-layer);
+  box-shadow: var(--outline-hover);
   color: inherit;
   transition: var(--transition-out);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.2.1",
+  "version": "4.2.3-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -58,9 +58,9 @@
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.4.2",
+    "jest": "29.4.3",
     "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.4.2",
+    "jest-environment-jsdom": "29.4.3",
     "lodash": "4.17.21",
     "postcss": "8.4.21",
     "prop-types": "15.8.1",
@@ -80,11 +80,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.2.1",
+    "@bundle-stats/utils": "^4.2.3-beta.0",
     "ariakit": "2.0.0-next.43",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.0"
   },
-  "gitHead": "3b459555254b118e145c127dfde8d003792148b3"
+  "gitHead": "a4664a4c6318b73774aae3666f5ae6c778025ea1"
 }

package/src/app/app.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
 
@@ -70,24 +71,34 @@ JobsProvider.propTypes = {
 const OverviewContent = () => {
   const { jobs } = useContext(JobsContext);
 
-  const duplicatePackagesInsight = jobs[0].insights?.webpack?.duplicatePackagesV3;
-  const newPackagesInsight = jobs[0].insights?.webpack?.newPackages;
+  const insightsByName = useMemo(() => {
+    const webpackInsights = jobs?.[0]?.insights?.webpack;
+
+    if (!webpackInsights) {
+      return null
+    }
+
+    const res = {
+      ...(webpackInsights.duplicatePackagesV3 && { duplicatePackages: webpackInsights.duplicatePackagesV3 }),
+      ...(webpackInsights.newPackages && { newPackages: webpackInsights.newPackages }),
+    };
+
+    if (isEmpty(res)) {
+      return null;
+    }
+
+    return res;
+  }, [jobs]);
 
-  console.info(duplicatePackagesInsight, newPackagesInsight);
 
   return (
     <Stack space="medium">
-      {(duplicatePackagesInsight || newPackagesInsight) && (
+      {insightsByName && (
         <Container>
           <Stack space="xsmall">
             <MetricsTableTitle title="Insights" />
             <Box padding="small" outline>
-              <Insights
-                duplicatePackages={duplicatePackagesInsight}
-                newPackages={newPackagesInsight}
-                summary={jobs[0].summary?.webpack}
-                showDelta={jobs.length > 1}
-              />
+              <Insights insights={insightsByName} />
             </Box>
           </Stack>
         </Container>

package/src/components/index.js

@@ -6,6 +6,7 @@ export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
 export { Delta } from './delta';
+export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
 export { JobHeader } from './job-header';

package/src/components/insight-icon/index.ts

@@ -0,0 +1 @@
+export * from './insight-icon';

package/src/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-200);
+  color: var(--color-yellow-900);
+}
+
+.info {
+  background: var(--color-highlight-info);
+  color: var(--color-info);
+}
+

package/src/components/insight-icon/insight-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import cx from 'classnames';
+import { InsightType } from '@bundle-stats/utils';
+
+import { Icon } from '../../ui/icon';
+// @ts-ignore
+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],
+]);
+
+interface InsightIconProps extends React.HTMLAttributes<'span'> {
+  type: InsightType;
+}
+
+export const InsightIcon = (props: InsightIconProps) => {
+  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) as string;
+
+  return <Icon glyph={glyph} className={rootClassName} />;
+};
+

package/src/components/insights/insights.module.css

@@ -1,26 +1,5 @@
 .icon {
   flex: 0 0 auto;
-  width: calc(var(--space-small) + 6px);
-  height: calc(var(--space-small) + 6px);
-  padding: 3px;
-  border-radius: 50%;
-  background: var(--color-highlight);
-}
-
-.error .icon {
-  background: var(--color-red-50);
-  color: var(--color-danger);
-}
-
-.warning .icon {
-  padding-top: 1px;
-  background: var(--color-yellow-200);
-  color: var(--color-yellow-900);
-}
-
-.info .icon {
-  background: var(--color-highlight-info);
-  color: var(--color-info);
 }
 
 .entry {

package/src/components/insights/insights.stories.tsx

@@ -14,18 +14,20 @@ const Template = (props: any) => <Insights {...props} />;
 export const Default = Template.bind({});
 
 Default.args = {
-  duplicatePackages: {
-    type: 'error',
-    data: {
-      packages: { 'package-a': ['package-a', 'package-a~1'] },
-      text: 'Bundle introduced 1 and removed 2 duplicate packages',
+  insights: {
+    duplicatePackages: {
+      type: 'error',
+      data: {
+        packages: { 'package-a': ['package-a', 'package-a~1'] },
+        text: 'Bundle introduced 1 and removed 2 duplicate packages',
+      },
     },
-  },
-  newPackages: {
-    type: 'warning',
-    data: {
-      text: 'Bundle introduced 2 new packages: package-c, package-d',
-      packages: ['package-c', 'package-d'],
+    newPackages: {
+      type: 'warning',
+      data: {
+        text: 'Bundle introduced 2 new packages: package-c, package-d',
+        packages: ['package-c', 'package-d'],
+      },
     },
   },
 };
@@ -33,18 +35,20 @@ Default.args = {
 export const Info = Template.bind({});
 
 Info.args = {
-  duplicatePackages: {
-    type: 'info',
-    data: {
-      packages: { 'package-a': ['package-a', 'package-a~1'] },
-      text: 'Bundle removed 1 duplicate packages',
+  insights: {
+    duplicatePackages: {
+      type: 'info',
+      data: {
+        packages: { 'package-a': ['package-a', 'package-a~1'] },
+        text: 'Bundle removed 1 duplicate packages',
+      },
     },
-  },
-  newPackages: {
-    type: 'warning',
-    data: {
-      text: 'Bundle introduced 2 new packages: package-c, package-d',
-      packages: ['package-c', 'package-d'],
+    newPackages: {
+      type: 'warning',
+      data: {
+        text: 'Bundle introduced 2 new packages: package-c, package-d',
+        packages: ['package-c', 'package-d'],
+      },
     },
   },
 };