@atlaskit/progress-tracker 8.0.4 → 8.1.0

package/dist/cjs/{ProgressTracker/index.js → progress-tracker.js}

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,21 +21,17 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = require("styled-components");
-
-var _page = require("@atlaskit/page");
+var _react = require("react");
 
-var _ProgressTrackerLink = _interopRequireDefault(require("../ProgressTrackerLink"));
+var _core = require("@emotion/core");
 
-var _ProgressTrackerStage = _interopRequireDefault(require("../ProgressTrackerStage"));
+var _constants = require("./constants");
 
-var _styled = require("./styled");
+var _constants2 = require("./internal/constants");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _link = _interopRequireDefault(require("./internal/link"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _stage = _interopRequireDefault(require("./internal/stage"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -47,10 +41,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var TRANSITION_SPEED = 300;
-var LINEAR_TRANSITION_SPEED = 50;
-var easeOut = 'cubic-bezier(0.15,1,0.3,1)';
-var defaultLabel = 'Progress';
+var containerStyles = (0, _core.css)({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: 0,
+  gap: "var(".concat(_constants2.varSpacing, ")"),
+  listStyleType: 'none',
+  '&&': {
+    marginTop: 40
+  }
+});
 
 var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ProgressTracker, _PureComponent);
@@ -67,14 +68,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createTheme", function () {
-      return {
-        spacing: _this.props.spacing,
-        columns: _this.props.items.length * 2
-      };
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      prevStages: _this.props.items.map(function (stage, index) {
+      prevStages: _this.props.items.map(function (stage) {
         return _objectSpread(_objectSpread({}, stage), {}, {
           percentageComplete: 0
         });
@@ -102,7 +97,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this3 = this,
+          _ref;
 
       var _this$props = this.props,
           testId = _this$props.testId,
@@ -121,38 +117,43 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
       var items = this.props.items.map(function (stage, index) {
         var transitionSpeed = 0;
         var transitionDelay = 0;
-        var transitionEasing = progressChanges > 1 ? 'linear' : easeOut;
+        var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
 
         if (_this3.props.animated) {
-          transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
+          transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
 
           if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially in reverse */
+            /**
+             * load each transition sequentially in reverse
+             */
             transitionDelay = (stepsBack - 1) * transitionSpeed;
             stepsBack -= 1;
           } else if (stage.percentageComplete > _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially */
+            /**
+             * load each transition sequentially
+             */
             transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
             stepsForward -= 1;
           }
         }
 
-        return /*#__PURE__*/_react.default.createElement(_ProgressTrackerStage.default, {
-          key: stage.id,
-          item: stage,
-          render: _this3.props.render,
+        return (0, _core.jsx)(_stage.default, {
           transitionSpeed: transitionSpeed,
           transitionDelay: transitionDelay,
-          transitionEasing: transitionEasing
+          transitionEasing: transitionEasing,
+          key: stage.id,
+          item: stage,
+          render: _this3.props.render
         });
       });
-      return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-        theme: this.createTheme()
-      }, /*#__PURE__*/_react.default.createElement(_page.Grid, {
-        testId: testId
-      }, /*#__PURE__*/_react.default.createElement(_styled.ProgressTrackerContainer, {
+      return (0, _core.jsx)("ul", {
+        "data-testid": testId,
+        style: (_ref = {
+          gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+        }, (0, _defineProperty2.default)(_ref, _constants2.varSpacing, "".concat(_constants.spacing[this.props.spacing], "px")), (0, _defineProperty2.default)(_ref, "maxWidth", _constants.defaultGridSize * 10 * items.length * 2), _ref),
+        css: containerStyles,
         "aria-label": label
-      }, items)));
+      }, items);
     }
   }]);
   return ProgressTracker;
@@ -163,10 +164,11 @@ exports.default = ProgressTracker;
   items: [],
   spacing: 'cosy',
   render: {
-    link: function link(props) {
-      return /*#__PURE__*/_react.default.createElement(_ProgressTrackerLink.default, props);
+    link: function link(_ref2) {
+      var item = _ref2.item;
+      return (0, _core.jsx)(_link.default, item);
     }
   },
   animated: true,
-  label: defaultLabel
+  label: 'Progress'
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.0.4",
+	"version": "8.1.0",
 	"sideEffects": false
 }

package/dist/es2019/constants.js

@@ -1,9 +1,11 @@
-import { gridSize } from '@atlaskit/theme/constants';
-export const defaultGridSize = gridSize();
-/** Ideally these are exported by @atlaskit/page */
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+export const defaultGridSize = getGridSize();
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
 
 export const spacing = {
   comfortable: defaultGridSize * 5,
   cosy: defaultGridSize * 2,
-  compact: defaultGridSize * 0.5
+  compact: defaultGridSize / 2
 };

package/dist/es2019/index.js

@@ -1 +1 @@
-export { default as ProgressTracker } from './ProgressTracker';
+export { default as ProgressTracker } from './progress-tracker';

package/dist/es2019/internal/bar.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { B300 } from '@atlaskit/theme/colors';
+import { spacing } from '../constants';
+import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+const progressBarStyles = css({
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: B300,
+  borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
+  borderTopRightRadius: PROGRESS_BAR_HEIGHT,
+  transform: `translate(0, -${LABEL_TOP_SPACING}px)`,
+  transition: `width var(${varTransitionSpeed}) var(${varTransitionEasing})`,
+  transitionDelay: `var(${varTransitionDelay})`
+});
+/**
+ * __Progress bar__
+ *
+ * A progress bar describes the horizontal tracking bar that traverses each individual step.
+ *
+ */
+
+const ProgressBar = ({
+  percentageComplete,
+  testId
+}) => jsx("div", {
+  "data-testid": testId,
+  style: {
+    width: `calc(${percentageComplete}% + ${percentageComplete / 100} * calc(var(${varSpacing}, ${spacing.cosy}px) + ${HALF_GRID_SIZE}px))`
+  },
+  css: progressBarStyles
+});
+
+export default ProgressBar;

package/dist/es2019/internal/constants.js

@@ -0,0 +1,16 @@
+import { defaultGridSize } from '../constants';
+export const TRANSITION_SPEED = 300;
+export const LINEAR_TRANSITION_SPEED = 50;
+export const ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
+export const varSpacing = '--ds--pt--sp';
+export const varTransitionSpeed = '--ds--pt--ts';
+export const varTransitionDelay = '--ds--pt--td';
+export const varTransitionEasing = '--ds--pt--te';
+export const varMarkerColor = '--ds--pt--mc';
+export const varBackgroundColor = '--ds--pt--bg';
+export const SEMI_BOLD_FONT_WEIGHT = '600';
+export const REGULAR_FONT_WEIGHT = '400';
+export const HALF_GRID_SIZE = defaultGridSize / 2;
+export const PROGRESS_BAR_HEIGHT = defaultGridSize; // Labels sit 20px from bottom of progress bar.
+
+export const LABEL_TOP_SPACING = defaultGridSize + 20;

package/dist/es2019/internal/link.js

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N800 } from '@atlaskit/theme/colors';
+const linkStyles = css({
+  color: N800,
+  cursor: 'pointer'
+});
+/**
+ * __Progress tracker link__
+ */
+
+const Link = ({
+  href,
+  onClick,
+  label,
+  testId
+}) => jsx("a", {
+  css: linkStyles,
+  href: href,
+  onClick: onClick,
+  "data-testid": testId
+}, label);
+
+export default Link;

package/dist/es2019/internal/marker.js

@@ -0,0 +1,42 @@
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+const progressMarkerStyles = css({
+  width: PROGRESS_BAR_HEIGHT,
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: `var(${varBackgroundColor})`,
+  borderRadius: PROGRESS_BAR_HEIGHT,
+  transform: `translate(-50%, -${LABEL_TOP_SPACING}px)`,
+  transition: `opacity var(${varTransitionSpeed}) var(${varTransitionEasing}), background-color var(${varTransitionSpeed}) var(${varTransitionEasing})`,
+  transitionDelay: `var(${varTransitionDelay})`,
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1
+  },
+  '&.fade-enter': {
+    backgroundColor: `var(${varMarkerColor})`
+  },
+  '&.fade-enter.fade-enter-active': {
+    backgroundColor: `var(${varBackgroundColor})`
+  }
+});
+/**
+ * __Progress marker__
+ *
+ * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
+ */
+
+const ProgressMarker = ({
+  testId
+}) => jsx("div", {
+  "data-testid": testId,
+  css: progressMarkerStyles
+});
+
+export default ProgressMarker;

package/dist/es2019/internal/stage.js

@@ -0,0 +1,130 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/core';
+import { CSSTransition } from 'react-transition-group';
+import { fontSize } from '@atlaskit/theme/constants';
+import ProgressBar from './bar';
+import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+import ProgressMarker from './marker';
+import { getFontWeight, getMarkerColor, getTextColor } from './utils';
+const containerStyles = css({
+  width: '100%',
+  position: 'relative'
+});
+const listItemStyles = css({
+  margin: 0,
+  overflowWrap: 'break-word'
+});
+const titleStyles = css({
+  marginTop: LABEL_TOP_SPACING,
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  fontSize: fontSize(),
+  lineHeight: '16px',
+  textAlign: 'center',
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1,
+    transition: `opacity var(${varTransitionSpeed}) cubic-bezier(0.2, 0, 0, 1)`
+  }
+});
+export default class ProgressTrackerStage extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "onEntered", () => {
+      this.setState({
+        transitioning: false,
+        oldMarkerColor: getMarkerColor(this.props.item.status),
+        oldPercentageComplete: this.props.item.percentageComplete
+      });
+    });
+
+    this.state = {
+      transitioning: false,
+      oldMarkerColor: getMarkerColor(this.props.item.status),
+      oldPercentageComplete: 0
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.setState({ ...this.state,
+      transitioning: true
+    });
+  }
+
+  UNSAFE_componentWillReceiveProps() {
+    this.setState({ ...this.state,
+      transitioning: true
+    });
+  }
+
+  shouldShowLink() {
+    return this.props.item.status === 'visited' && !this.props.item.noLink;
+  }
+
+  render() {
+    const {
+      item,
+      render,
+      transitionDelay,
+      transitionSpeed,
+      transitionEasing,
+      testId
+    } = this.props;
+    const ariaCurrent = item.status === 'current' ? 'step' : 'false';
+    return jsx("li", {
+      "data-testid": testId,
+      style: {
+        [varTransitionSpeed]: `${transitionSpeed}ms`,
+        [varTransitionDelay]: `${transitionDelay}ms`,
+        [varTransitionEasing]: transitionEasing,
+        [varMarkerColor]: this.state.oldMarkerColor,
+        [varBackgroundColor]: getMarkerColor(item.status)
+      },
+      css: listItemStyles,
+      "aria-current": ariaCurrent
+    }, jsx("div", {
+      css: containerStyles
+    }, jsx(CSSTransition, {
+      appear: true,
+      in: this.state.transitioning,
+      onEntered: this.onEntered,
+      timeout: transitionDelay + transitionSpeed,
+      classNames: "fade"
+    }, jsx(ProgressMarker, {
+      testId: testId && `${testId}-marker`
+    })), jsx(CSSTransition, {
+      appear: true,
+      in: this.state.transitioning,
+      onEntered: this.onEntered,
+      timeout: transitionDelay + transitionSpeed,
+      classNames: "fade"
+    }, jsx(ProgressBar, {
+      testId: testId && `${testId}-bar`,
+      percentageComplete: item.percentageComplete
+    })), jsx(CSSTransition, {
+      appear: true,
+      in: this.state.transitioning,
+      onEntered: this.onEntered,
+      timeout: transitionDelay + transitionSpeed,
+      classNames: "fade"
+    }, jsx("div", {
+      css: titleStyles,
+      "data-testid": testId && `${testId}-title`,
+      style: {
+        color: getTextColor(item.status),
+        fontWeight: getFontWeight(item.status)
+      }
+    }, this.shouldShowLink() ? render.link({
+      item
+    }) : item.label))));
+  }
+
+}

package/dist/es2019/internal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/internal/utils.js

@@ -0,0 +1,48 @@
+import { B300, N300, N70, N800 } from '@atlaskit/theme/colors';
+import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
+export const getMarkerColor = status => {
+  switch (status) {
+    case 'unvisited':
+      return N70;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return B300;
+
+    default:
+      return;
+  }
+};
+export const getTextColor = status => {
+  switch (status) {
+    case 'unvisited':
+      return N300;
+
+    case 'current':
+      return B300;
+
+    case 'visited':
+      return N800;
+
+    case 'disabled':
+      return N70;
+
+    default:
+      return;
+  }
+};
+export const getFontWeight = status => {
+  switch (status) {
+    case 'unvisited':
+      return REGULAR_FONT_WEIGHT;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return SEMI_BOLD_FONT_WEIGHT;
+
+    default:
+      return undefined;
+  }
+};

package/dist/es2019/{ProgressTracker/index.js → progress-tracker.js}

@@ -1,25 +1,31 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { Grid } from '@atlaskit/page';
-import ProgressTrackerLink from '../ProgressTrackerLink';
-import ProgressTrackerStage from '../ProgressTrackerStage';
-import { ProgressTrackerContainer } from './styled';
-const TRANSITION_SPEED = 300;
-const LINEAR_TRANSITION_SPEED = 50;
-const easeOut = 'cubic-bezier(0.15,1,0.3,1)';
-const defaultLabel = 'Progress';
+
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/core';
+import { defaultGridSize, spacing } from './constants';
+import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
+import Link from './internal/link';
+import Stage from './internal/stage';
+const containerStyles = css({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: 0,
+  gap: `var(${varSpacing})`,
+  listStyleType: 'none',
+  '&&': {
+    marginTop: 40
+  }
+});
 export default class ProgressTracker extends PureComponent {
   constructor(...args) {
     super(...args);
 
-    _defineProperty(this, "createTheme", () => ({
-      spacing: this.props.spacing,
-      columns: this.props.items.length * 2
-    }));
-
     _defineProperty(this, "state", {
-      prevStages: this.props.items.map((stage, index) => ({ ...stage,
+      prevStages: this.props.items.map(stage => ({ ...stage,
         percentageComplete: 0
       }))
     });
@@ -48,38 +54,45 @@ export default class ProgressTracker extends PureComponent {
     const items = this.props.items.map((stage, index) => {
       let transitionSpeed = 0;
       let transitionDelay = 0;
-      const transitionEasing = progressChanges > 1 ? 'linear' : easeOut;
+      const transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
 
       if (this.props.animated) {
         transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
 
         if (stage.percentageComplete < this.state.prevStages[index].percentageComplete) {
-          /** load each transition sequentially in reverse */
+          /**
+           * load each transition sequentially in reverse
+           */
           transitionDelay = (stepsBack - 1) * transitionSpeed;
           stepsBack -= 1;
         } else if (stage.percentageComplete > this.state.prevStages[index].percentageComplete) {
-          /** load each transition sequentially */
+          /**
+           * load each transition sequentially
+           */
           transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
           stepsForward -= 1;
         }
       }
 
-      return /*#__PURE__*/React.createElement(ProgressTrackerStage, {
-        key: stage.id,
-        item: stage,
-        render: this.props.render,
+      return jsx(Stage, {
         transitionSpeed: transitionSpeed,
         transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
+        transitionEasing: transitionEasing,
+        key: stage.id,
+        item: stage,
+        render: this.props.render
       });
     });
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: this.createTheme()
-    }, /*#__PURE__*/React.createElement(Grid, {
-      testId: testId
-    }, /*#__PURE__*/React.createElement(ProgressTrackerContainer, {
+    return jsx("ul", {
+      "data-testid": testId,
+      style: {
+        gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+        [varSpacing]: `${spacing[this.props.spacing]}px`,
+        maxWidth: defaultGridSize * 10 * items.length * 2
+      },
+      css: containerStyles,
       "aria-label": label
-    }, items)));
+    }, items);
   }
 
 }
@@ -88,8 +101,10 @@ _defineProperty(ProgressTracker, "defaultProps", {
   items: [],
   spacing: 'cosy',
   render: {
-    link: props => /*#__PURE__*/React.createElement(ProgressTrackerLink, props)
+    link: ({
+      item
+    }) => jsx(Link, item)
   },
   animated: true,
-  label: defaultLabel
+  label: 'Progress'
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.0.4",
+	"version": "8.1.0",
 	"sideEffects": false
 }

package/dist/esm/constants.js

@@ -1,9 +1,11 @@
-import { gridSize } from '@atlaskit/theme/constants';
-export var defaultGridSize = gridSize();
-/** Ideally these are exported by @atlaskit/page */
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+export var defaultGridSize = getGridSize();
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
 
 export var spacing = {
   comfortable: defaultGridSize * 5,
   cosy: defaultGridSize * 2,
-  compact: defaultGridSize * 0.5
+  compact: defaultGridSize / 2
 };

package/dist/esm/index.js

@@ -1 +1 @@
-export { default as ProgressTracker } from './ProgressTracker';
+export { default as ProgressTracker } from './progress-tracker';