@bundle-stats/ui 4.1.2 → 4.1.3

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

@@ -33,27 +33,26 @@ var JobHeader = function JobHeader(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
     className: _jobHeaderModule["default"].tag
   }, tag)), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    className: _jobHeaderModule["default"].meta,
-    space: "xxsmall"
-  }, builtAt && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _jobHeaderModule["default"].metaItem,
+    space: "xxsmall",
+    className: _jobHeaderModule["default"].meta
+  }, builtAt && /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxxsmall",
+    alignItems: "center",
+    inline: true,
+    as: "span",
     title: "".concat((0, _utils.formatDate)(builtAt), " ").concat((0, _utils.formatTime)(builtAt))
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    glyph: "clock",
-    className: _jobHeaderModule["default"].metaIcon
-  }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: _jobHeaderModule["default"].metaLabel
-  }, (0, _dateFns.formatDistanceToNow)(new Date(builtAt), {
+    glyph: "clock"
+  }), /*#__PURE__*/_react["default"].createElement("span", null, (0, _dateFns.formatDistanceToNow)(new Date(builtAt), {
     addSuffix: true
-  }))), hash && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _jobHeaderModule["default"].metaItem,
+  }))), hash && /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxxsmall",
+    alignItems: "center",
+    inline: true,
     title: "Webpack bundle hash"
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    glyph: "commit",
-    className: _jobHeaderModule["default"].metaIcon
-  }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: _jobHeaderModule["default"].metaLabel
-  }, hash)), /*#__PURE__*/_react["default"].createElement("div", {
+    glyph: "commit"
+  }), /*#__PURE__*/_react["default"].createElement("span", null, hash)), /*#__PURE__*/_react["default"].createElement("div", {
     className: _jobHeaderModule["default"].content
   }, children)));
 };

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

@@ -17,18 +17,3 @@
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
-
-.metaItem {
-  display: inline-flex;
-  align-items: center;
-}
-
-.metaIcon {
-  width: var(--space-small);
-  height: var(--space-small);
-  margin-right: var(--space-xxxsmall);
-}
-
-.metaLabel {
-  line-height: var(--space-small);
-}

package/lib/components/metrics-table-title/metrics-table-title.js

@@ -25,10 +25,13 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
+    as: "h3",
     className: _metricsTableTitleModule["default"].title
   }, /*#__PURE__*/_react["default"].createElement("span", null, title), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      glyph: "help"
+      glyph: "help",
+      className: _metricsTableTitleModule["default"].anchorIcon
     }),
     anchorClassName: _metricsTableTitleModule["default"].anchor
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {

package/lib/components/metrics-table-title/metrics-table-title.module.css

@@ -2,8 +2,8 @@
 }
 
 .title {
-  align-items: center;
   color: var(--color-text-light);
+  font-size: 1em;
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -12,6 +12,10 @@
   display: block;
 }
 
+.anchorIcon {
+  display: block;
+}
+
 .info {
   font-size: var(--size-xsmall);
   font-weight: normal;

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

@@ -75,6 +75,7 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: rootClassName
   }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     as: "h3",
     className: _summaryItemModule["default"].title
   }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {

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

@@ -4,7 +4,6 @@
   font-size: var(--size-xsmall);
   text-transform: uppercase;
   white-space: nowrap;
-  align-items: center;
 }
 
 .titleIcon {

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -19,6 +19,7 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: _totalSizeTypeTitleModule["default"].text

package/lib/components/total-size-type-title/total-size-type-title.module.css

@@ -1,6 +1,5 @@
 .root {
   color: var(--color-text-light);
-  align-items: center;
 }
 
 .text {

package/lib/layout/flex-stack/flex-stack.js

@@ -10,18 +10,26 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _flexStackModule = _interopRequireDefault(require("./flex-stack.module.css"));
-var _excluded = ["as", "className", "space", "children"];
+var _excluded = ["as", "className", "space", "inline", "children", "alignItems"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var FlexStack = function FlexStack(props) {
-  var Component = props.as,
-    className = props.className,
-    space = props.space,
-    children = props.children,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var rootClassName = (0, _classnames["default"])(className, _flexStackModule["default"].root, _flexStackModule["default"]["space--".concat(space)]);
+var FlexStack = function FlexStack(_ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$space = _ref.space,
+    space = _ref$space === void 0 ? '' : _ref$space,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$alignItems = _ref.alignItems,
+    alignItems = _ref$alignItems === void 0 ? '' : _ref$alignItems,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var rootClassName = (0, _classnames["default"])(className, _flexStackModule["default"].root, _flexStackModule["default"]["space--".concat(space)], _flexStackModule["default"]["align-items--".concat(alignItems)], inline && _flexStackModule["default"].inline);
   return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, restProps, {
     className: rootClassName
   }), _react["default"].Children.map(children, (0, _utils.getRenderChildWithClassName)(_flexStackModule["default"].item)));
@@ -31,11 +39,15 @@ FlexStack.defaultProps = {
   as: 'div',
   className: '',
   children: null,
-  space: _constants.NO_SPACE
+  space: _constants.NO_SPACE,
+  alignItems: undefined,
+  inline: false
 };
 FlexStack.propTypes = {
   as: _propTypes["default"].elementType,
   className: _propTypes["default"].string,
   children: _propTypes["default"].node,
-  space: _propTypes["default"].oneOf(_constants.SPACES)
+  space: _propTypes["default"].oneOf(_constants.SPACES),
+  alignItems: _propTypes["default"].oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'baseline']),
+  inline: _propTypes["default"].bool
 };

package/lib/layout/flex-stack/flex-stack.module.css

@@ -8,6 +8,7 @@
   margin-right: 0;
 }
 
+/** Space variation */
 .space--xxxsmall > .item {
   margin: 0 var(--space-xxxsmall) 0 0;
 }
@@ -43,3 +44,29 @@
 .space--xxxlarge > .item {
   margin: 0 var(--space-xxxlarge) 0 0;
 }
+
+/** Align items variation */
+.root {
+  align-items: stretch;
+}
+
+.align-items--flex-start {
+  align-items: flex-start;
+}
+
+.align-items--flex-end {
+  align-items: flex-end;
+}
+
+.align-items--center {
+  align-items: center;
+}
+
+.align-items--baseline {
+  align-items: baseline;
+}
+
+/** Inline variation */
+.inline {
+  display: inline-flex;
+}

package/lib/layout/flex-stack/flex-stack.stories.js

@@ -55,4 +55,12 @@ stories.add('single item', function () {
   return /*#__PURE__*/_react["default"].createElement(_.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_box.Box, {
     outline: true
   }, "Lorem ipsum"));
+});
+stories.add('with alignItems', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.FlexStack, {
+    alignItems: "center",
+    space: "medium"
+  }, /*#__PURE__*/_react["default"].createElement("h1", null, "Title"), /*#__PURE__*/_react["default"].createElement("a", {
+    href: "#test"
+  }, "Option 1"));
 });

package/lib/ui/dropdown/dropdown.js

@@ -29,6 +29,7 @@ var Dropdown = function Dropdown(props) {
     tabIndex: null
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     className: _dropdownModule["default"].label
   }, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _dropdownModule["default"].labelIcon,

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

@@ -29,10 +29,6 @@
   color: var(--color-text);
 }
 
-.label {
-  align-items: center;
-}
-
 .dropdown {
   position: absolute;
   left: 0;

package/lib/ui/filters/filters.js

@@ -44,6 +44,7 @@ var Filter = function Filter(props) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     as: "label",
     className: (0, _classnames["default"])(_filtersModule["default"].filterCheckbox, buttonClassName)
   }, /*#__PURE__*/_react["default"].createElement("input", _extends({
@@ -191,6 +192,7 @@ var Filters = function Filters(props) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxsmall",
+    alignItems: "flex-start",
     className: _filtersModule["default"].items
   }, Object.entries(filters).map(function (_ref10) {
     var _ref11 = _slicedToArray(_ref10, 2),

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

@@ -11,7 +11,6 @@
 
 .filterCheckbox {
   cursor: pointer;
-  align-items: center;
 }
 
 .filterInput {
@@ -124,10 +123,6 @@
   line-height: 1;
 }
 
-.items {
-  align-items: flex-start;
-}
-
 .item {
   position: relative;
   flex: 0 0 auto;

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

@@ -25,7 +25,7 @@
 }
 
 .root:focus {
-  border-color: var(--color-outline);
+  border-color: var(--color-outline-dark);
   color: inherit;
   transition: var(--transition-out);
 }

package/lib/ui/skeleton/skeleton.module.css

@@ -1,8 +1,19 @@
+@keyframes anim {
+  from {
+    opacity: 0.06
+  }
+
+  to {
+    opacity: 0.12;
+  }
+}
+
 .root {
-  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
+  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
   opacity: 0.06;
   pointer-events: none;
   min-width: 6em;
+  animation: 2s 1s infinite alternate anim;
 }
 
 /** empty char to keep the text height */

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

@@ -29,27 +29,26 @@ export const JobHeader = props => {
   }, /*#__PURE__*/React.createElement("span", null, `#${job.internalBuildNumber}`), tag && /*#__PURE__*/React.createElement(Tag, {
     className: css.tag
   }, tag)), /*#__PURE__*/React.createElement(FlexStack, {
-    className: css.meta,
-    space: "xxsmall"
-  }, builtAt && /*#__PURE__*/React.createElement("span", {
-    className: css.metaItem,
+    space: "xxsmall",
+    className: css.meta
+  }, builtAt && /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxxsmall",
+    alignItems: "center",
+    inline: true,
+    as: "span",
     title: `${formatDate(builtAt)} ${formatTime(builtAt)}`
   }, /*#__PURE__*/React.createElement(Icon, {
-    glyph: "clock",
-    className: css.metaIcon
-  }), /*#__PURE__*/React.createElement("span", {
-    className: css.metaLabel
-  }, formatDistanceToNow(new Date(builtAt), {
+    glyph: "clock"
+  }), /*#__PURE__*/React.createElement("span", null, formatDistanceToNow(new Date(builtAt), {
     addSuffix: true
-  }))), hash && /*#__PURE__*/React.createElement("span", {
-    className: css.metaItem,
+  }))), hash && /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxxsmall",
+    alignItems: "center",
+    inline: true,
     title: "Webpack bundle hash"
   }, /*#__PURE__*/React.createElement(Icon, {
-    glyph: "commit",
-    className: css.metaIcon
-  }), /*#__PURE__*/React.createElement("span", {
-    className: css.metaLabel
-  }, hash)), /*#__PURE__*/React.createElement("div", {
+    glyph: "commit"
+  }), /*#__PURE__*/React.createElement("span", null, hash)), /*#__PURE__*/React.createElement("div", {
     className: css.content
   }, children)));
 };

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

@@ -17,18 +17,3 @@
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
-
-.metaItem {
-  display: inline-flex;
-  align-items: center;
-}
-
-.metaIcon {
-  width: var(--space-small);
-  height: var(--space-small);
-  margin-right: var(--space-xxxsmall);
-}
-
-.metaLabel {
-  line-height: var(--space-small);
-}

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

@@ -20,10 +20,13 @@ export const MetricsTableTitle = props => {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
+    as: "h3",
     className: css.title
   }, /*#__PURE__*/React.createElement("span", null, title), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
     label: /*#__PURE__*/React.createElement(Icon, {
-      glyph: "help"
+      glyph: "help",
+      className: css.anchorIcon
     }),
     anchorClassName: css.anchor
   }, /*#__PURE__*/React.createElement(Stack, {

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

@@ -2,8 +2,8 @@
 }
 
 .title {
-  align-items: center;
   color: var(--color-text-light);
+  font-size: 1em;
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -12,6 +12,10 @@
   display: block;
 }
 
+.anchorIcon {
+  display: block;
+}
+
 .info {
   font-size: var(--size-xsmall);
   font-weight: normal;

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

@@ -67,6 +67,7 @@ export const SummaryItem = _ref2 => {
     className: rootClassName
   }, props), /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     as: "h3",
     className: css.title
   }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {

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

@@ -4,7 +4,6 @@
   font-size: var(--size-xsmall);
   text-transform: uppercase;
   white-space: nowrap;
-  align-items: center;
 }
 
 .titleIcon {

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -14,6 +14,7 @@ export const TotalSizeTypeTitle = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement("span", {
     className: css.text

package/lib-esm/components/total-size-type-title/total-size-type-title.module.css

@@ -1,6 +1,5 @@
 .root {
   color: var(--color-text-light);
-  align-items: center;
 }
 
 .text {

package/lib-esm/layout/flex-stack/flex-stack.js

@@ -5,15 +5,17 @@ import cx from 'classnames';
 import { NO_SPACE, SPACES } from '../../constants';
 import { getRenderChildWithClassName } from '../../utils';
 import css from './flex-stack.module.css';
-export const FlexStack = props => {
-  const {
-    as: Component,
-    className,
-    space,
-    children,
+export const FlexStack = _ref => {
+  let {
+    as: Component = 'div',
+    className = '',
+    space = '',
+    inline = false,
+    children = null,
+    alignItems = '',
     ...restProps
-  } = props;
-  const rootClassName = cx(className, css.root, css[`space--${space}`]);
+  } = _ref;
+  const rootClassName = cx(className, css.root, css[`space--${space}`], css[`align-items--${alignItems}`], inline && css.inline);
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     className: rootClassName
   }), React.Children.map(children, getRenderChildWithClassName(css.item)));
@@ -22,11 +24,15 @@ FlexStack.defaultProps = {
   as: 'div',
   className: '',
   children: null,
-  space: NO_SPACE
+  space: NO_SPACE,
+  alignItems: undefined,
+  inline: false
 };
 FlexStack.propTypes = {
   as: PropTypes.elementType,
   className: PropTypes.string,
   children: PropTypes.node,
-  space: PropTypes.oneOf(SPACES)
+  space: PropTypes.oneOf(SPACES),
+  alignItems: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'baseline']),
+  inline: PropTypes.bool
 };

package/lib-esm/layout/flex-stack/flex-stack.module.css

@@ -8,6 +8,7 @@
   margin-right: 0;
 }
 
+/** Space variation */
 .space--xxxsmall > .item {
   margin: 0 var(--space-xxxsmall) 0 0;
 }
@@ -43,3 +44,29 @@
 .space--xxxlarge > .item {
   margin: 0 var(--space-xxxlarge) 0 0;
 }
+
+/** Align items variation */
+.root {
+  align-items: stretch;
+}
+
+.align-items--flex-start {
+  align-items: flex-start;
+}
+
+.align-items--flex-end {
+  align-items: flex-end;
+}
+
+.align-items--center {
+  align-items: center;
+}
+
+.align-items--baseline {
+  align-items: baseline;
+}
+
+/** Inline variation */
+.inline {
+  display: inline-flex;
+}

package/lib-esm/layout/flex-stack/flex-stack.stories.js

@@ -42,4 +42,10 @@ stories.add('with nested stack', () => /*#__PURE__*/React.createElement(FlexStac
 }, "Lorem ipsum 3.2"))));
 stories.add('single item', () => /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
   outline: true
-}, "Lorem ipsum")));
+}, "Lorem ipsum")));
+stories.add('with alignItems', () => /*#__PURE__*/React.createElement(FlexStack, {
+  alignItems: "center",
+  space: "medium"
+}, /*#__PURE__*/React.createElement("h1", null, "Title"), /*#__PURE__*/React.createElement("a", {
+  href: "#test"
+}, "Option 1")));

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

@@ -24,6 +24,7 @@ export const Dropdown = props => {
     tabIndex: null
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     className: css.label
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,

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

@@ -29,10 +29,6 @@
   color: var(--color-text);
 }
 
-.label {
-  align-items: center;
-}
-
 .dropdown {
   position: absolute;
   left: 0;

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

@@ -22,6 +22,7 @@ const Filter = props => {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
+    alignItems: "center",
     as: "label",
     className: cx(css.filterCheckbox, buttonClassName)
   }, /*#__PURE__*/React.createElement("input", _extends({
@@ -179,6 +180,7 @@ export const Filters = props => {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxsmall",
+    alignItems: "flex-start",
     className: css.items
   }, Object.entries(filters).map(_ref6 => {
     let [name, data] = _ref6;

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

@@ -11,7 +11,6 @@
 
 .filterCheckbox {
   cursor: pointer;
-  align-items: center;
 }
 
 .filterInput {
@@ -124,10 +123,6 @@
   line-height: 1;
 }
 
-.items {
-  align-items: flex-start;
-}
-
 .item {
   position: relative;
   flex: 0 0 auto;

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

@@ -25,7 +25,7 @@
 }
 
 .root:focus {
-  border-color: var(--color-outline);
+  border-color: var(--color-outline-dark);
   color: inherit;
   transition: var(--transition-out);
 }

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

@@ -1,8 +1,19 @@
+@keyframes anim {
+  from {
+    opacity: 0.06
+  }
+
+  to {
+    opacity: 0.12;
+  }
+}
+
 .root {
-  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
+  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
   opacity: 0.06;
   pointer-events: none;
   min-width: 6em;
+  animation: 2s 1s infinite alternate anim;
 }
 
 /** empty char to keep the text height */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,9 +37,9 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.19.3",
-    "@babel/core": "7.19.6",
+    "@babel/core": "7.20.2",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.19.4",
+    "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-essentials": "6.5.13",
@@ -51,23 +51,23 @@
     "@storybook/manager-webpack5": "6.5.13",
     "@storybook/react": "6.5.13",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "29.2.2",
+    "babel-jest": "29.3.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.11.2",
+    "chromatic": "6.11.4",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
-    "core-js": "3.26.0",
+    "core-js": "3.26.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
+    "enzyme-adapter-react-16": "1.15.7",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.18",
+    "postcss": "8.4.19",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.1.2",
+    "@bundle-stats/utils": "^4.1.3",
     "ariakit": "^2.0.0-next.41",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^2.0.0"
   },
-  "gitHead": "825535a41f62095c329d70818c8b778450d57f45"
+  "gitHead": "88f6b66c9af17b8761ec3143bf49e696fdf3949b"
 }

package/src/components/job-header/job-header.jsx

@@ -23,21 +23,21 @@ export const JobHeader = (props) => {
         <span>{`#${job.internalBuildNumber}`}</span>
         {tag && <Tag className={css.tag}>{tag}</Tag>}
       </h1>
-      <FlexStack className={css.meta} space="xxsmall">
+      <FlexStack space="xxsmall" className={css.meta}>
         {builtAt && (
-          <span className={css.metaItem} title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}>
-            <Icon glyph="clock" className={css.metaIcon} />
-            <span className={css.metaLabel}>
+          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}>
+            <Icon glyph="clock" />
+            <span>
               {formatDistanceToNow(new Date(builtAt), { addSuffix: true })}
             </span>
-          </span>
+          </FlexStack>
         )}
 
         {hash && (
-          <span className={css.metaItem} title="Webpack bundle hash">
-            <Icon glyph="commit" className={css.metaIcon} />
-            <span className={css.metaLabel}>{hash}</span>
-          </span>
+          <FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash">
+            <Icon glyph="commit" />
+            <span>{hash}</span>
+          </FlexStack>
         )}
 
         <div className={css.content}>{children}</div>

package/src/components/job-header/job-header.module.css

@@ -17,18 +17,3 @@
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
-
-.metaItem {
-  display: inline-flex;
-  align-items: center;
-}
-
-.metaIcon {
-  width: var(--space-small);
-  height: var(--space-small);
-  margin-right: var(--space-xxxsmall);
-}
-
-.metaLabel {
-  line-height: var(--space-small);
-}

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -15,10 +15,11 @@ export const MetricsTableTitle = (props) => {
 
   return (
     <Stack className={rootClassName}>
-      <FlexStack space="xxxsmall" className={css.title}>
+      <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>{title}</span>
+
         {(popoverInfo || popoverHref) && (
-          <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
+          <HoverCard label={<Icon glyph="help" className={css.anchorIcon} />} anchorClassName={css.anchor}>
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (

package/src/components/metrics-table-title/metrics-table-title.module.css

@@ -2,8 +2,8 @@
 }
 
 .title {
-  align-items: center;
   color: var(--color-text-light);
+  font-size: 1em;
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -12,6 +12,10 @@
   display: block;
 }
 
+.anchorIcon {
+  display: block;
+}
+
 .info {
   font-size: var(--size-xsmall);
   font-weight: normal;

package/src/components/summary-item/summary-item.jsx

@@ -65,7 +65,7 @@ export const SummaryItem = ({
 
   return (
     <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
-      <FlexStack space="xxxsmall" as="h3" className={css.title}>
+      <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>
           {metric.label}
         </span>

package/src/components/summary-item/summary-item.module.css

@@ -4,7 +4,6 @@
   font-size: var(--size-xsmall);
   text-transform: uppercase;
   white-space: nowrap;
-  align-items: center;
 }
 
 .titleIcon {

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -11,7 +11,7 @@ import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 
 export const TotalSizeTypeTitle = ({ className }) => (
-  <FlexStack space="xxxsmall" className={cx(css.root, className)}>
+  <FlexStack space="xxxsmall" alignItems="center" className={cx(css.root, className)}>
     <span className={css.text}>{I18N.ASSET_TOTALS}</span>
     <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
       <Stack space="xxxsmall">

package/src/components/total-size-type-title/total-size-type-title.module.css

@@ -1,6 +1,5 @@
 .root {
   color: var(--color-text-light);
-  align-items: center;
 }
 
 .text {

package/src/layout/flex-stack/flex-stack.jsx

@@ -6,9 +6,22 @@ import { NO_SPACE, SPACES } from '../../constants';
 import { getRenderChildWithClassName } from '../../utils';
 import css from './flex-stack.module.css';
 
-export const FlexStack = (props) => {
-  const { as: Component, className, space, children, ...restProps } = props;
-  const rootClassName = cx(className, css.root, css[`space--${space}`]);
+export const FlexStack = ({
+  as: Component = 'div',
+  className = '',
+  space = '',
+  inline = false,
+  children = null,
+  alignItems = '',
+  ...restProps
+}) => {
+  const rootClassName = cx(
+    className,
+    css.root,
+    css[`space--${space}`],
+    css[`align-items--${alignItems}`],
+    inline && css.inline,
+  );
 
   return (
     <Component {...restProps} className={rootClassName}>
@@ -22,6 +35,8 @@ FlexStack.defaultProps = {
   className: '',
   children: null,
   space: NO_SPACE,
+  alignItems: undefined,
+  inline: false,
 };
 
 FlexStack.propTypes = {
@@ -29,4 +44,6 @@ FlexStack.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   space: PropTypes.oneOf(SPACES),
+  alignItems: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'baseline']),
+  inline: PropTypes.bool,
 };

package/src/layout/flex-stack/flex-stack.module.css

@@ -8,6 +8,7 @@
   margin-right: 0;
 }
 
+/** Space variation */
 .space--xxxsmall > .item {
   margin: 0 var(--space-xxxsmall) 0 0;
 }
@@ -43,3 +44,29 @@
 .space--xxxlarge > .item {
   margin: 0 var(--space-xxxlarge) 0 0;
 }
+
+/** Align items variation */
+.root {
+  align-items: stretch;
+}
+
+.align-items--flex-start {
+  align-items: flex-start;
+}
+
+.align-items--flex-end {
+  align-items: flex-end;
+}
+
+.align-items--center {
+  align-items: center;
+}
+
+.align-items--baseline {
+  align-items: baseline;
+}
+
+/** Inline variation */
+.inline {
+  display: inline-flex;
+}

package/src/ui/dropdown/dropdown.jsx

@@ -15,7 +15,7 @@ export const Dropdown = (props) => {
   return (
     <div className={rootClassName}>
       <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
-        <FlexStack space="xxxsmall" className={css.label}>
+        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label && <span className={css.labelText}>{label}</span>}
         </FlexStack>

package/src/ui/dropdown/dropdown.module.css

@@ -29,10 +29,6 @@
   color: var(--color-text);
 }
 
-.label {
-  align-items: center;
-}
-
 .dropdown {
   position: absolute;
   left: 0;

package/src/ui/filters/filters.jsx

@@ -24,7 +24,7 @@ const Filter = (props) => {
   return (
     <Component className={rootClassName}>
       {/* eslint-disable */}
-      <FlexStack space="xxxsmall" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
+      <FlexStack space="xxxsmall" alignItems="center" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
         {/* eslint-enabled */}
         <input className={css.filterInput} type="checkbox" id={id} name={name} {...inputProps} />
         <span className={css.filterLabel} title={label}>
@@ -187,7 +187,7 @@ export const Filters = (props) => {
 
   return (
     <form className={rootClassName}>
-      <FlexStack space="xxsmall" className={css.items}>
+      <FlexStack space="xxsmall" alignItems="flex-start" className={css.items}>
         {Object.entries(filters).map(([name, data]) => {
           if (typeof data?.defaultValue !== 'undefined') {
             return (

package/src/ui/filters/filters.module.css

@@ -11,7 +11,6 @@
 
 .filterCheckbox {
   cursor: pointer;
-  align-items: center;
 }
 
 .filterInput {
@@ -124,10 +123,6 @@
   line-height: 1;
 }
 
-.items {
-  align-items: flex-start;
-}
-
 .item {
   position: relative;
   flex: 0 0 auto;

package/src/ui/input/input.module.css

@@ -25,7 +25,7 @@
 }
 
 .root:focus {
-  border-color: var(--color-outline);
+  border-color: var(--color-outline-dark);
   color: inherit;
   transition: var(--transition-out);
 }

package/src/ui/skeleton/skeleton.module.css

@@ -1,8 +1,19 @@
+@keyframes anim {
+  from {
+    opacity: 0.06
+  }
+
+  to {
+    opacity: 0.12;
+  }
+}
+
 .root {
-  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
+  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
   opacity: 0.06;
   pointer-events: none;
   min-width: 6em;
+  animation: 2s 1s infinite alternate anim;
 }
 
 /** empty char to keep the text height */