@bundle-stats/ui 4.2.2 → 4.2.3

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/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/components/summary/summary.js

@@ -18,7 +18,7 @@ const summary_module_css_1 = __importDefault(require("./summary.module.css"));
 const Summary = ({ className, size, keys, data, loading, showSummaryItemDelta, summaryItemLink: SummaryItemCustomLink, }) => (react_1.default.createElement(box_1.Box, { className: (0, classnames_1.default)(summary_module_css_1.default.root, className) },
     react_1.default.createElement(flex_stack_1.FlexStack, { space: "small", className: summary_module_css_1.default.items }, Array.from(utils_1.METRIC_COMPONENT_LINKS)
         .filter(([metricId]) => keys.includes(metricId))
-        .map(([metricId, metricOptions]) => (react_1.default.createElement(box_1.Box, { key: metricId, outline: true, padding: "small", as: SummaryItemCustomLink, ...metricOptions.link, className: summary_module_css_1.default.item },
+        .map(([metricId, metricOptions]) => (react_1.default.createElement(box_1.Box, { key: metricId, outline: true, outlineHover: true, padding: "small", as: SummaryItemCustomLink, ...metricOptions.link, className: summary_module_css_1.default.item },
         react_1.default.createElement(summary_item_1.SummaryItem, { size: size, id: metricId, data: (0, get_1.default)(data, metricId), loading: loading, showMetricDescription: true, showDelta: showSummaryItemDelta && metricOptions.showDelta !== false })))))));
 exports.Summary = Summary;
 exports.Summary.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAA0D;AAC1D,0CAAuC;AACvC,wDAAoD;AACpD,sDAAkD;AAClD,kDAA8C;AAC9C,8EAAuC;AAEhC,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,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,8BAAC,sBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,4BAAG,CAAC,KAAK,IAC1C,KAAK,CAAC,IAAI,CAAC,8BAAsB,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,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,CAAC,IAAI,EACtB,SAAS,EAAE,4BAAG,CAAC,IAAI;QAEnB,8BAAC,0BAAW,IACV,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,IAAA,aAAG,EAAC,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;AAlCW,QAAA,OAAO,WAkClB;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,mCAAuB;IAC7B,oBAAoB,EAAE,IAAI;IAC1B,eAAe,EAAE,8BAAa;CAC/B,CAAC;AAEF,eAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,oBAAS,CAAC,MAAM;IACtB,IAAI,EAAE,oBAAS,CAAC,OAAO,CAAC,oBAAS,CAAC,MAAM,CAAC;IACzC,IAAI,EAAE,oBAAS,CAAC,KAAK,CAAC;QACpB,CAAC,oBAAS,CAAC,MAAM,CAAC,EAAE,oBAAS,CAAC,KAAK,CAAC;YAClC,QAAQ,EAAE,oBAAS,CAAC,MAAM;YAC1B,OAAO,EAAE,oBAAS,CAAC,MAAM;SAC1B,CAAC;KACH,CAAC;IACF,OAAO,EAAE,oBAAS,CAAC,IAAI;IACvB,oBAAoB,EAAE,oBAAS,CAAC,IAAI;IACpC,eAAe,EAAE,oBAAS,CAAC,WAAW;CACvC,CAAC"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAA0D;AAC1D,0CAAuC;AACvC,wDAAoD;AACpD,sDAAkD;AAClD,kDAA8C;AAC9C,8EAAuC;AAEhC,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,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,8BAAC,sBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,4BAAG,CAAC,KAAK,IAC1C,KAAK,CAAC,IAAI,CAAC,8BAAsB,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,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,CAAC,IAAI,EACtB,SAAS,EAAE,4BAAG,CAAC,IAAI;QAEnB,8BAAC,0BAAW,IACV,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,IAAA,aAAG,EAAC,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;AAnCW,QAAA,OAAO,WAmClB;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,mCAAuB;IAC7B,oBAAoB,EAAE,IAAI;IAC1B,eAAe,EAAE,8BAAa;CAC/B,CAAC;AAEF,eAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,oBAAS,CAAC,MAAM;IACtB,IAAI,EAAE,oBAAS,CAAC,OAAO,CAAC,oBAAS,CAAC,MAAM,CAAC;IACzC,IAAI,EAAE,oBAAS,CAAC,KAAK,CAAC;QACpB,CAAC,oBAAS,CAAC,MAAM,CAAC,EAAE,oBAAS,CAAC,KAAK,CAAC;YAClC,QAAQ,EAAE,oBAAS,CAAC,MAAM;YAC1B,OAAO,EAAE,oBAAS,CAAC,MAAM;SAC1B,CAAC;KACH,CAAC;IACF,OAAO,EAAE,oBAAS,CAAC,IAAI;IACvB,oBAAoB,EAAE,oBAAS,CAAC,IAAI;IACpC,eAAe,EAAE,oBAAS,CAAC,WAAW;CACvC,CAAC"}

package/lib/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/css/variables.css

@@ -31,17 +31,18 @@
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
    * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #F7F7F7;
-  --color-gray-50 : #eaebec;
-  --color-gray-100: #cbcdd0;
-  --color-gray-200: #a8acb0;
-  --color-gray-300: #858a90;
-  --color-gray-400: #6a7179;
-  --color-gray-500: #505861;
-  --color-gray-600: #495059;
-  --color-gray-700: #40474f;
-  --color-gray-800: #373d45;
-  --color-gray-900: #272d33;
+  --color-gray-25: #f7f7f9;
+  --color-gray-50: #ececee;
+  --color-gray-100: #ced0d4;
+  --color-gray-200: #aeb1b7;
+  --color-gray-300: #8e929a;
+  --color-gray-400: #757a85;
+  --color-gray-500: #5d636f;
+  --color-gray-600: #555b67;
+  --color-gray-700: #4b515c;
+  --color-gray-800: #414752;
+  --color-gray-900: #303540;
+
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -190,6 +191,8 @@
   --radius-medium: 5px;
   --radius-large: 9px;
 
+  --outline-hover: 0 0 0 3px var(--color-highlight);
+
   /** Layout */
   --max-width: 80rem;
 }

package/lib/layout/box/box.js

@@ -5,36 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const box_module_css_1 = __importDefault(require("./box.module.css"));
 const Box = (props) => {
-    const { className, as: Component, padding, horizontalPadding, verticalPadding, outline, ...restProps } = props;
+    const { className = '', as: Component = 'div', padding = constants_1.NO_SPACE, horizontalPadding = '', verticalPadding = '', outline = false, outlineHover = false, ...restProps } = props;
     const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(padding)
         ? [null, ...padding]
         : [padding, verticalPadding, horizontalPadding];
-    const rootClassName = (0, classnames_1.default)(box_module_css_1.default.root, className, resolvedPadding && box_module_css_1.default[`padding-${resolvedPadding}`], resolvedVerticalPadding && box_module_css_1.default[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && box_module_css_1.default[`horizontal-padding-${resolvedHorizontalPadding}`], outline && box_module_css_1.default.outline);
+    const rootClassName = (0, classnames_1.default)(box_module_css_1.default.root, className, resolvedPadding && box_module_css_1.default[`padding-${resolvedPadding}`], resolvedVerticalPadding && box_module_css_1.default[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && box_module_css_1.default[`horizontal-padding-${resolvedHorizontalPadding}`], outline && box_module_css_1.default.outline, outlineHover && box_module_css_1.default.outlineHover);
     return react_1.default.createElement(Component, { ...restProps, className: rootClassName });
 };
 exports.Box = Box;
-exports.Box.defaultProps = {
-    className: '',
-    as: 'div',
-    padding: constants_1.NO_SPACE,
-    horizontalPadding: '',
-    verticalPadding: '',
-    outline: false,
-};
-exports.Box.propTypes = {
-    className: prop_types_1.default.string,
-    as: prop_types_1.default.elementType,
-    padding: prop_types_1.default.oneOfType([
-        prop_types_1.default.oneOf(constants_1.SPACES),
-        prop_types_1.default.arrayOf(prop_types_1.default.oneOf(constants_1.SPACES)),
-    ]),
-    horizontalPadding: prop_types_1.default.oneOf(constants_1.SPACES),
-    verticalPadding: prop_types_1.default.oneOf(constants_1.SPACES),
-    outline: prop_types_1.default.bool,
-};
 //# sourceMappingURL=box.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../src/layout/box/box.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,+CAAmD;AACnD,sEAAmC;AAE5B,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,IAAA,oBAAE,EACtB,wBAAG,CAAC,IAAI,EACR,SAAS,EACT,eAAe,IAAI,wBAAG,CAAC,WAAW,eAAe,EAAE,CAAC,EACpD,uBAAuB,IAAI,wBAAG,CAAC,oBAAoB,uBAAuB,EAAE,CAAC,EAC7E,yBAAyB,IAAI,wBAAG,CAAC,sBAAsB,yBAAyB,EAAE,CAAC,EACnF,OAAO,IAAI,wBAAG,CAAC,OAAO,CACvB,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AA3BW,QAAA,GAAG,OA2Bd;AAEF,WAAG,CAAC,YAAY,GAAG;IACjB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,KAAK;IACT,OAAO,EAAE,oBAAQ;IACjB,iBAAiB,EAAE,EAAE;IACrB,eAAe,EAAE,EAAE;IACnB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,WAAG,CAAC,SAAS,GAAG;IAEd,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,EAAE,EAAE,oBAAS,CAAC,WAAW;IAGzB,OAAO,EAAE,oBAAS,CAAC,SAAS,CAAC;QAC3B,oBAAS,CAAC,KAAK,CAAC,kBAAM,CAAC;QACvB,oBAAS,CAAC,OAAO,CAAC,oBAAS,CAAC,KAAK,CAAC,kBAAM,CAAC,CAAC;KAC3C,CAAC;IAGF,iBAAiB,EAAE,oBAAS,CAAC,KAAK,CAAC,kBAAM,CAAC;IAG1C,eAAe,EAAE,oBAAS,CAAC,KAAK,CAAC,kBAAM,CAAC;IAGxC,OAAO,EAAE,oBAAS,CAAC,IAAI;CACxB,CAAC"}
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../src/layout/box/box.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,+CAAmD;AAEnD,sEAAmC;AAW5B,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,GAAG,oBAAQ,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,IAAA,oBAAE,EACtB,wBAAG,CAAC,IAAI,EACR,SAAS,EACT,eAAe,IAAI,wBAAG,CAAC,WAAW,eAAe,EAAE,CAAC,EACpD,uBAAuB,IAAI,wBAAG,CAAC,oBAAoB,uBAAuB,EAAE,CAAC,EAC7E,yBAAyB,IAAI,wBAAG,CAAC,sBAAsB,yBAAyB,EAAE,CAAC,EACnF,OAAO,IAAI,wBAAG,CAAC,OAAO,EACtB,YAAY,IAAI,wBAAG,CAAC,YAAY,CACjC,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AA7BW,QAAA,GAAG,OA6Bd"}

package/lib/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/layout/box/index.js

@@ -1,6 +1,18 @@
 "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 __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 });
-exports.Box = void 0;
-var box_1 = require("./box");
-Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return box_1.Box; } });
+__exportStar(require("./box"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.js"],"names":[],"mappings":";;;AAAA,6BAA4B;AAAnB,0FAAA,GAAG,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wCAAsB"}

package/lib/ui/container/container.js

@@ -5,18 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
 const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
 const container_module_css_1 = __importDefault(require("./container.module.css"));
-const Container = ({ className, as: Component, ...restProps }) => (react_1.default.createElement(Component, { className: (0, classnames_1.default)(container_module_css_1.default.root, className) },
+const Container = ({ as: Component = 'div', className = '', ...restProps }) => (react_1.default.createElement(Component, { className: (0, classnames_1.default)(container_module_css_1.default.root, className) },
     react_1.default.createElement("div", { className: container_module_css_1.default.inner, ...restProps })));
 exports.Container = Container;
-exports.Container.defaultProps = {
-    className: '',
-    as: 'div',
-};
-exports.Container.propTypes = {
-    className: prop_types_1.default.string,
-    as: prop_types_1.default.elementType,
-};
 //# sourceMappingURL=container.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,kFAAyC;AAElC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CACvE,8BAAC,SAAS,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,8BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,uCAAK,SAAS,EAAE,8BAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC;AAJW,QAAA,SAAS,aAIpB;AAEF,iBAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,iBAAS,CAAC,SAAS,GAAG;IAEpB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,EAAE,EAAE,oBAAS,CAAC,WAAW;CAC1B,CAAC"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAG5B,kFAAyC;AAMlC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,8BAAC,SAAS,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,8BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,uCAAK,SAAS,EAAE,8BAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC;AARW,QAAA,SAAS,aAQpB"}

package/lib/ui/container/index.js

@@ -1,6 +1,18 @@
 "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 __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 });
-exports.Container = void 0;
-var container_1 = require("./container");
-Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return container_1.Container; } });
+__exportStar(require("./container"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/container/index.js"],"names":[],"mappings":";;;AAAA,yCAAwC;AAA/B,sGAAA,SAAS,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/container/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B"}

package/lib/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/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/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/lib-esm/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-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

@@ -31,17 +31,18 @@
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
    * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #F7F7F7;
-  --color-gray-50 : #eaebec;
-  --color-gray-100: #cbcdd0;
-  --color-gray-200: #a8acb0;
-  --color-gray-300: #858a90;
-  --color-gray-400: #6a7179;
-  --color-gray-500: #505861;
-  --color-gray-600: #495059;
-  --color-gray-700: #40474f;
-  --color-gray-800: #373d45;
-  --color-gray-900: #272d33;
+  --color-gray-25: #f7f7f9;
+  --color-gray-50: #ececee;
+  --color-gray-100: #ced0d4;
+  --color-gray-200: #aeb1b7;
+  --color-gray-300: #8e929a;
+  --color-gray-400: #757a85;
+  --color-gray-500: #5d636f;
+  --color-gray-600: #555b67;
+  --color-gray-700: #4b515c;
+  --color-gray-800: #414752;
+  --color-gray-900: #303540;
+
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -190,6 +191,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.2",
+  "version": "4.2.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -80,11 +80,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.2.2",
+    "@bundle-stats/utils": "^4.2.3",
     "ariakit": "2.0.0-next.43",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.0"
   },
-  "gitHead": "ee8246cd2e7b42961dd44f261e92b7433dbb8090"
+  "gitHead": "169eb699e82fdc6e165c0c76eda3b898d31152e6"
 }

package/src/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/src/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/src/components/summary/summary.jsx

@@ -28,6 +28,7 @@ export const Summary = ({
           <Box
             key={metricId}
             outline
+            outlineHover
             padding="small"
             as={SummaryItemCustomLink}
             {...metricOptions.link}

package/src/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/src/css/variables.css

@@ -31,17 +31,18 @@
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
    * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #F7F7F7;
-  --color-gray-50 : #eaebec;
-  --color-gray-100: #cbcdd0;
-  --color-gray-200: #a8acb0;
-  --color-gray-300: #858a90;
-  --color-gray-400: #6a7179;
-  --color-gray-500: #505861;
-  --color-gray-600: #495059;
-  --color-gray-700: #40474f;
-  --color-gray-800: #373d45;
-  --color-gray-900: #272d33;
+  --color-gray-25: #f7f7f9;
+  --color-gray-50: #ececee;
+  --color-gray-100: #ced0d4;
+  --color-gray-200: #aeb1b7;
+  --color-gray-300: #8e929a;
+  --color-gray-400: #757a85;
+  --color-gray-500: #5d636f;
+  --color-gray-600: #555b67;
+  --color-gray-700: #4b515c;
+  --color-gray-800: #414752;
+  --color-gray-900: #303540;
+
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -190,6 +191,8 @@
   --radius-medium: 5px;
   --radius-large: 9px;
 
+  --outline-hover: 0 0 0 3px var(--color-highlight);
+
   /** Layout */
   --max-width: 80rem;
 }

package/src/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/src/layout/box/box.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Box } from '.';
+
+export default {
+  title: 'Layout/Box',
+  component: Box,
+  decorators: [getWrapperDecorator()],
+};
+
+const Template = (props: any) => <Box style={{ border: '1px dotted magenta' }} {...props}>Lorem ipsum</Box>;
+
+export const Default = Template.bind({});
+
+export const WithPadding = Template.bind({});
+WithPadding.args = {
+  padding: 'medium',
+};
+
+export const WithHorizontalPadding = Template.bind({});
+WithHorizontalPadding.args = {
+  horizontalPadding: 'medium',
+};
+
+export const WithVerticalPadding = Template.bind({});
+WithVerticalPadding.args = {
+  verticalPadding: 'medium',
+};
+
+export const WithHorizontalAndVerticalPadding = Template.bind({});
+WithHorizontalAndVerticalPadding.args = {
+  padding: ['xxsmall', 'medium'],
+};
+
+export const WithOutline = Template.bind({});
+WithOutline.args = {
+  outline: true,
+};
+
+export const WithOutlineHover = Template.bind({});
+WithOutlineHover.args = {
+  outlineHover: true,
+};

package/src/layout/box/box.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../constants';
+// @ts-ignore
+import css from './box.module.css';
+
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+  padding?: typeof SPACES | Array<typeof SPACES>;
+  horizontalPadding?: string;
+  verticalPadding?: string;
+  outline?: boolean;
+  outlineHover?: boolean;
+}
+
+export const Box = (props: BoxProps) => {
+  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,
+    outlineHover && css.outlineHover,
+  );
+
+  return <Component {...restProps} className={rootClassName} />;
+};

package/src/layout/box/index.ts

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

package/src/ui/container/container.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Container } from '.';
+
+export default {
+  title: 'UI/Container',
+  component: Container,
+};
+
+export const Default = () => (
+  <Container style={{ background: 'white' }}>
+    <div
+      style={{
+        background: 'white',
+        padding: '24px',
+      }}
+    >
+      Content
+    </div>
+  </Container>
+);
+
+Default.decorators = [
+  (Story: React.FunctionComponent) => (
+    <div style={{ background: 'hotpink' }}>
+      <Story />
+    </div>
+  ),
+];

package/src/ui/container/container.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import cx from 'classnames';
+
+// @ts-ignore
+import css from './container.module.css';
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
+
+export const Container = ({
+  as: Component = 'div',
+  className = '',
+  ...restProps
+}: ContainerProps) => (
+  <Component className={cx(css.root, className)}>
+    <div className={css.inner} {...restProps} />
+  </Component>
+);

package/src/ui/container/index.ts

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

package/src/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/src/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/src/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/types/layout/box/box.d.ts

@@ -1,26 +1,12 @@
-export function Box(props: any): JSX.Element;
-export namespace Box {
-    namespace defaultProps {
-        export const className: string;
-        export const as: string;
-        export { NO_SPACE as padding };
-        export const horizontalPadding: string;
-        export const verticalPadding: string;
-        export const outline: boolean;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-        export const padding: PropTypes.Requireable<NonNullable<string | (string | null | undefined)[] | null | undefined>>;
-        const horizontalPadding_1: PropTypes.Requireable<string>;
-        export { horizontalPadding_1 as horizontalPadding };
-        const verticalPadding_1: PropTypes.Requireable<string>;
-        export { verticalPadding_1 as verticalPadding };
-        const outline_1: PropTypes.Requireable<boolean>;
-        export { outline_1 as outline };
-    }
+import React from 'react';
+import { SPACES } from '../../constants';
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
+    padding?: typeof SPACES | Array<typeof SPACES>;
+    horizontalPadding?: string;
+    verticalPadding?: string;
+    outline?: boolean;
+    outlineHover?: boolean;
 }
-import { NO_SPACE } from "../../constants";
-import PropTypes from "prop-types";
+export declare const Box: (props: BoxProps) => JSX.Element;
+export {};

package/types/layout/box/index.d.ts

@@ -1 +1 @@
-export { Box } from "./box";
+export * from './box';

package/types/ui/container/container.d.ts

@@ -1,18 +1,6 @@
-export function Container({ className, as: Component, ...restProps }: {
-    [x: string]: any;
-    className: any;
-    as: any;
-}): JSX.Element;
-export namespace Container {
-    namespace defaultProps {
-        const className: string;
-        const as: string;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-    }
+import React from 'react';
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
 }
-import PropTypes from "prop-types";
+export declare const Container: ({ as: Component, className, ...restProps }: ContainerProps) => JSX.Element;
+export {};

package/types/ui/container/index.d.ts

@@ -1 +1 @@
-export { Container } from "./container";
+export * from './container';

package/src/layout/box/box.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { NO_SPACE, SPACES } from '../../constants';
-import css from './box.module.css';
-
-export const Box = (props) => {
-  const {
-    className,
-    as: Component,
-    padding,
-    horizontalPadding,
-    verticalPadding,
-    outline,
-    ...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,
-  );
-
-  return <Component {...restProps} className={rootClassName} />;
-};
-
-Box.defaultProps = {
-  className: '',
-  as: 'div',
-  padding: NO_SPACE,
-  horizontalPadding: '',
-  verticalPadding: '',
-  outline: false,
-};
-
-Box.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Rendered component */
-  as: PropTypes.elementType,
-
-  /** Padding space size */
-  padding: PropTypes.oneOfType([
-    PropTypes.oneOf(SPACES),
-    PropTypes.arrayOf(PropTypes.oneOf(SPACES)),
-  ]),
-
-  /** Horizonatl padding space size */
-  horizontalPadding: PropTypes.oneOf(SPACES),
-
-  /** Vertical padding space size */
-  verticalPadding: PropTypes.oneOf(SPACES),
-
-  /** Outline flag */
-  outline: PropTypes.bool,
-};

package/src/layout/box/index.js

@@ -1 +0,0 @@
-export { Box } from './box';

package/src/ui/container/container.jsx

@@ -1,24 +0,0 @@
-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 }) => (
-  <Component className={cx(css.root, className)}>
-    <div className={css.inner} {...restProps} />
-  </Component>
-);
-
-Container.defaultProps = {
-  className: '',
-  as: 'div',
-};
-
-Container.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Custom component */
-  as: PropTypes.elementType,
-};

package/src/ui/container/index.js

@@ -1 +0,0 @@
-export { Container } from './container';