@bundle-stats/ui 4.1.5-alpha.0 → 4.1.5

package/lib/components/summary/summary.stories.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _utils = require("@bundle-stats/utils");
-var _webpackStatsBaseline = _interopRequireDefault(require("../../../__mocks__/webpack-stats.baseline.json"));
-var _webpackStatsCurrent = _interopRequireDefault(require("../../../__mocks__/webpack-stats.current.json"));
-var _constants = require("../../constants");
-var _stories = require("../../stories");
-var _ = require(".");
-var _excluded = ["keyProps"];
-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 MULTIPLE_JOBS = (0, _utils.createJobs)([{
-  webpack: _webpackStatsCurrent["default"]
-}, {
-  webpack: _webpackStatsBaseline["default"]
-}]);
-var SINGLE_JOB = (0, _utils.createJobs)([{
-  webpack: _webpackStatsCurrent["default"]
-}]);
-var stories = (0, _react2.storiesOf)('Components/Summary', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
-    data: MULTIPLE_JOBS[0].summary
-  });
-});
-stories.add('custom keys', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
-    keys: _constants.METRICS_WEBPACK_ASSETS,
-    data: MULTIPLE_JOBS[0].summary
-  });
-});
-stories.add('loading', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
-    loading: true
-  });
-});
-stories.add('single run', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
-    data: SINGLE_JOB[0].summary,
-    showSummaryItemDelta: false
-  });
-});
-stories.add('with link', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
-    data: MULTIPLE_JOBS[0].summary,
-    summaryItemLink: function summaryItemLink(_ref) {
-      var keyProps = _ref.keyProps,
-        props = _objectWithoutProperties(_ref, _excluded);
-      return /*#__PURE__*/_react["default"].createElement("button", _extends({
-        type: "button"
-      }, props, {
-        onClick: function onClick() {
-          return alert(JSON.stringify(keyProps));
-        }
-      }));
-    }
-  });
-});

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

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _summaryItem = require("./summary-item");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = {
-  title: 'Components/SummaryItem',
-  component: _summaryItem.SummaryItem
-};
-exports["default"] = _default;
-var Standard = function Standard() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    }
-  });
-};
-exports.Standard = Standard;
-var SizeLarge = function SizeLarge() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    size: "large",
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    }
-  });
-};
-exports.SizeLarge = SizeLarge;
-var ShowMetricDescription = function ShowMetricDescription() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    },
-    showMetricDescription: true
-  });
-};
-exports.ShowMetricDescription = ShowMetricDescription;
-var ShowDeltaFalse = function ShowDeltaFalse() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 0
-    },
-    showDelta: false
-  });
-};
-exports.ShowDeltaFalse = ShowDeltaFalse;
-var Loading = function Loading() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    loading: true,
-    id: "webpack.totalSizeByTypeALL"
-  });
-};
-exports.Loading = Loading;

package/lib/layout/box/box.stories.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _stories = require("../../stories");
-var _ = require(".");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var stories = (0, _react2.storiesOf)('Layout/Box', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Box, {
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with padding', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Box, {
-    padding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with horizontal padding', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Box, {
-    horizontalPadding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with vertical padding', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Box, {
-    verticalPadding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with horizontal & vertical padding', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Box, {
-    padding: ['xxsmall', 'medium'],
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with outline', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Box, {
-    padding: "large",
-    outline: true
-  }, "Lorem ipsum");
-});

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

@@ -1,66 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _stories = require("../../stories");
-var _box = require("../box");
-var _ = require(".");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var stories = (0, _react2.storiesOf)('Layout/FlexStack', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"), null, "Lorem ipsum 3");
-});
-stories.add('with custom wrapper', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.FlexStack, {
-    as: "main",
-    className: "wrapper"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"));
-});
-stories.add('with large space', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.FlexStack, {
-    space: "large"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 3"));
-});
-stories.add('with nested stack', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.FlexStack, {
-    space: "large"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/_react["default"].createElement(_.FlexStack, {
-    space: "small"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 3.1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 3.2")));
-});
-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/layout/footer/footer.stories.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _stories = require("../../stories");
-var _ = require(".");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var stories = (0, _react2.storiesOf)('Layout/Footer', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Footer, null);
-});
-stories.add('with custom content', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Footer, null, "Version 1.0", /*#__PURE__*/_react["default"].createElement("span", {
-    style: {
-      margin: '1em'
-    }
-  }, "Contact"));
-});

package/lib/layout/header/header.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Header = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _headerModule = _interopRequireDefault(require("./header.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Header = function Header(_ref) {
-  var className = _ref.className,
-    renderLeft = _ref.renderLeft,
-    renderRight = _ref.renderRight,
-    render = _ref.render;
-  return /*#__PURE__*/_react["default"].createElement("header", {
-    className: (0, _classnames["default"])(_headerModule["default"].root, className)
-  }, renderLeft({
-    className: _headerModule["default"].left
-  }), render({
-    className: _headerModule["default"].center
-  }), renderRight({
-    className: _headerModule["default"].right
-  }));
-};
-exports.Header = Header;
-Header.defaultProps = {
-  className: '',
-  renderLeft: function renderLeft(props) {
-    return /*#__PURE__*/_react["default"].createElement("div", props);
-  },
-  render: function render(props) {
-    return /*#__PURE__*/_react["default"].createElement("div", props);
-  },
-  renderRight: function renderRight(props) {
-    return /*#__PURE__*/_react["default"].createElement("div", props);
-  }
-};
-Header.propTypes = {
-  /* Adopted child class name */
-  className: _propTypes["default"].string,
-  /* Render left area */
-  renderLeft: _propTypes["default"].func,
-  /* Render center area */
-  render: _propTypes["default"].func,
-  /* Render right area */
-  renderRight: _propTypes["default"].func
-};

package/lib/layout/header/header.module.css

@@ -1,49 +0,0 @@
-.root {
-  padding: var(--space-small);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  background: var(--color-dark);
-  color: var(--color-light);
-}
-
-/* Layout */
-.left {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-}
-
-.center {
-  flex: 1 1 100%;
-  text-align: center;
-  order: 3;
-}
-
-.right {
-  flex: 1 1 auto;
-  order: 2;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-@media (min-width: 768px) {
-  .root {
-    flex-wrap: nowrap;
-  }
-
-  .left {
-    flex: 1 1 25%;
-  }
-
-  .center {
-    flex: 1 1 50%;
-    order: 2;
-  }
-
-  .right {
-    flex: 1 1 25%;
-    order: 3;
-  }
-}

package/lib/layout/header/header.stories.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _stories = require("../../stories");
-var _logo = require("../../ui/logo");
-var _tabs = require("../../ui/tabs");
-var _ = require(".");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var stories = (0, _react2.storiesOf)('Layout/Header', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Header, {
-    renderLeft: function renderLeft(_ref) {
-      var className = _ref.className;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className
-      }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, null));
-    },
-    render: function render(_ref2) {
-      var className = _ref2.className;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className
-      }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs, null, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Totals"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Assets"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Modules")));
-    },
-    renderRight: function renderRight(_ref3) {
-      var className = _ref3.className;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className
-      }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, {
-        kind: "github"
-      }));
-    }
-  });
-});
-stories.add('menu on the right', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Header, {
-    renderLeft: function renderLeft(_ref4) {
-      var className = _ref4.className;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className
-      }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, null));
-    },
-    renderRight: function renderRight(_ref5) {
-      var className = _ref5.className;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
-        style: {
-          flexBasis: '100%'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs, null, /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Totals"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Assets"), /*#__PURE__*/_react["default"].createElement(_tabs.Tabs.Item, null, "Modules")));
-    }
-  });
-});

package/lib/layout/header/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Header", {
-  enumerable: true,
-  get: function get() {
-    return _header.Header;
-  }
-});
-var _header = require("./header");

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

@@ -1,58 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _stories = require("../../stories");
-var _box = require("../box");
-var _ = require(".");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var stories = (0, _react2.storiesOf)('Layout/Stack', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Stack, null, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"), null, "Lorem ipsum 3");
-});
-stories.add('with custom wrapper', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Stack, {
-    as: "main",
-    className: "wrapper"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"));
-});
-stories.add('with large space', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Stack, {
-    space: "large"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 3"));
-});
-stories.add('with nested stack', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Stack, {
-    space: "large"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/_react["default"].createElement(_.Stack, {
-    space: "small"
-  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 3.1"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum 3.2")));
-});
-stories.add('single item', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Stack, null, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    outline: true
-  }, "Lorem ipsum"));
-});

package/lib/layout/sub-header/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _subHeader = require("./sub-header");
-Object.keys(_subHeader).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _subHeader[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _subHeader[key];
-    }
-  });
-});

package/lib/layout/sub-header/sub-header.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SubHeader = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _container = require("../../ui/container");
-var _box = require("../box");
-var _subHeaderModule = _interopRequireDefault(require("./sub-header.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var SIZE_SMALL = 'small';
-var SIZE_DEFAULT = 'default';
-var SIZES = [SIZE_SMALL, SIZE_DEFAULT];
-var SubHeader = function SubHeader(props) {
-  var className = props.className,
-    size = props.size,
-    subtitle = props.subtitle,
-    title = props.title,
-    icon = props.icon,
-    children = props.children,
-    rightSide = props.rightSide;
-  var rootClassName = (0, _classnames["default"])(_subHeaderModule["default"].root, _subHeaderModule["default"][size], className);
-  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
-    padding: "small",
-    className: rootClassName
-  }, /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _subHeaderModule["default"].inner
-  }, icon && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _subHeaderModule["default"].icon
-  }, icon), /*#__PURE__*/_react["default"].createElement("div", {
-    className: _subHeaderModule["default"].details
-  }, subtitle && /*#__PURE__*/_react["default"].createElement("p", {
-    className: _subHeaderModule["default"].subtitle
-  }, subtitle), /*#__PURE__*/_react["default"].createElement("h1", {
-    className: _subHeaderModule["default"].title
-  }, title), children), rightSide && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _subHeaderModule["default"].rightSide
-  }, rightSide))));
-};
-exports.SubHeader = SubHeader;
-SubHeader.defaultProps = {
-  className: '',
-  size: SIZE_DEFAULT,
-  subtitle: '',
-  icon: null,
-  children: null,
-  rightSide: null
-};
-SubHeader.propTypes = {
-  className: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf(SIZES),
-  title: _propTypes["default"].string.isRequired,
-  subtitle: _propTypes["default"].string,
-  icon: _propTypes["default"].element,
-  children: _propTypes["default"].element,
-  rightSide: _propTypes["default"].element
-};

package/lib/layout/sub-header/sub-header.module.css

@@ -1,70 +0,0 @@
-.root {
-  border-bottom: 1px solid var(--color-outline);
-  background: var(--color-highlight);
-}
-
-.inner {
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  flex: 0 0 auto;
-  margin-right: var(--space-xsmall);
-}
-
-.details {
-  flex: 1 1 100%;
-  position: relative;
-}
-
-.title {
-  margin: 0;
-  font-weight: bold;
-  font-size: 2.027em;
-  line-height: 1.1;
-}
-
-.subtitle {
-  margin: 0;
-  color: var(--color-gray-light);
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.rightSide {
-  flex: 0 0 auto;
-}
-
-/** Small size modifier */
-.small .icon {
-  margin-right: var(--space-xxsmall);
-}
-
-.small .title {
-  font-size: var(--size-xlarge);
-  line-height: var(--line-height);
-}
-
-.small .rightSize {
-  margin-left: var(--space-xxsmall);
-}
-
-/** Breakpoint changes */
-.inner {
-  flex-wrap: wrap;
-}
-
-.rightSide {
-  margin: var(--space-xsmall) 0 0;
-}
-
-@media (min-width: 768px) {
-  .inner {
-    flex-wrap: nowrap;
-  }
-
-  .rightSide {
-    margin: 0 0 0 var(--space-xsmall);
-  }
-}