@atlaskit/progress-tracker 8.4.4 → 8.4.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/progress-tracker
 
+## 8.4.5
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
 ## 8.4.4
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.spacing = void 0;
-
 /**
  * Ideally these are exported by @atlaskit/page
  */
 var spacing = {
-  comfortable: "var(--ds-scale-500, 40px)",
-  cosy: "var(--ds-scale-200, 16px)",
-  compact: "var(--ds-scale-050, 4px)"
+  comfortable: "var(--ds-space-500, 40px)",
+  cosy: "var(--ds-space-200, 16px)",
+  compact: "var(--ds-space-050, 4px)"
 };
 exports.spacing = spacing;

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "ProgressTracker", {
     return _progressTracker.default;
   }
 });
-
 var _progressTracker = _interopRequireDefault(require("./progress-tracker"));

package/dist/cjs/internal/bar.js

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("../constants");
-
 var _constants2 = require("./constants");
-
 /** @jsx jsx */
+
 var progressBarStyles = (0, _react.css)({
   height: _constants2.PROGRESS_BAR_HEIGHT,
   position: 'absolute',
@@ -25,17 +21,18 @@ var progressBarStyles = (0, _react.css)({
   transition: "width var(".concat(_constants2.varTransitionSpeed, ") var(").concat(_constants2.varTransitionEasing, ")"),
   transitionDelay: "var(".concat(_constants2.varTransitionDelay, ")")
 });
+
 /**
  * __Progress bar__
  *
  * A progress bar describes the horizontal tracking bar that traverses each individual step.
  *
  */
-
 var ProgressBar = function ProgressBar(_ref) {
   var percentageComplete = _ref.percentageComplete,
-      testId = _ref.testId;
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    testId = _ref.testId;
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     (0, _react.jsx)("div", {
       "data-testid": testId,
       style: {
@@ -45,6 +42,5 @@ var ProgressBar = function ProgressBar(_ref) {
     })
   );
 };
-
 var _default = ProgressBar;
 exports.default = _default;

package/dist/cjs/internal/constants.js

@@ -26,10 +26,11 @@ var SEMI_BOLD_FONT_WEIGHT = 'semibold';
 exports.SEMI_BOLD_FONT_WEIGHT = SEMI_BOLD_FONT_WEIGHT;
 var REGULAR_FONT_WEIGHT = 'regular';
 exports.REGULAR_FONT_WEIGHT = REGULAR_FONT_WEIGHT;
-var HALF_GRID_SIZE = "var(--ds-scale-050, 4px)";
+var HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
 exports.HALF_GRID_SIZE = HALF_GRID_SIZE;
-var PROGRESS_BAR_HEIGHT = "var(--ds-scale-100, 8px)"; // Labels sit 16px from bottom of progress bar i.e. 8 + 16
+var PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 
+// Labels sit 16px from bottom of progress bar i.e. 8 + 16
 exports.PROGRESS_BAR_HEIGHT = PROGRESS_BAR_HEIGHT;
-var LABEL_TOP_SPACING = "var(--ds-scale-300, 24px)";
+var LABEL_TOP_SPACING = "var(--ds-space-300, 24px)";
 exports.LABEL_TOP_SPACING = LABEL_TOP_SPACING;

package/dist/cjs/internal/link.js

@@ -4,26 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 /** @jsx jsx */
+
 var linkStyles = (0, _react.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
   cursor: 'pointer'
 });
+
 /**
  * __Progress tracker link__
  */
-
 var Link = function Link(_ref) {
   var href = _ref.href,
-      onClick = _ref.onClick,
-      label = _ref.label,
-      testId = _ref.testId;
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    onClick = _ref.onClick,
+    label = _ref.label,
+    testId = _ref.testId;
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     (0, _react.jsx)("a", {
       css: linkStyles,
       href: href,
@@ -32,6 +31,5 @@ var Link = function Link(_ref) {
     }, label)
   );
 };
-
 var _default = Link;
 exports.default = _default;

package/dist/cjs/internal/marker.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _constants = require("./constants");
-
 /* eslint-disable @repo/internal/styles/no-nested-styles */
-
 /** @jsx jsx */
+
 var progressMarkerStyles = (0, _react.css)({
   width: _constants.PROGRESS_BAR_HEIGHT,
   height: _constants.PROGRESS_BAR_HEIGHT,
@@ -35,15 +32,16 @@ var progressMarkerStyles = (0, _react.css)({
     backgroundColor: "var(".concat(_constants.varBackgroundColor, ")")
   }
 });
+
 /**
  * __Progress marker__
  *
  * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
  */
-
 var ProgressMarker = function ProgressMarker(_ref) {
   var testId = _ref.testId;
-  return (// too many props that would go in UNSAFE_style + css transition prop having issues
+  return (
+    // too many props that would go in UNSAFE_style + css transition prop having issues
     // eslint-disable-next-line @repo/internal/react/use-primitives
     (0, _react.jsx)("div", {
       "data-testid": testId,
@@ -51,6 +49,5 @@ var ProgressMarker = function ProgressMarker(_ref) {
     })
   );
 };
-
 var _default = ProgressMarker;
 exports.default = _default;

package/dist/cjs/internal/stage.js

@@ -1,54 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _reactTransitionGroup = require("react-transition-group");
-
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
-
 var _bar = _interopRequireDefault(require("./bar"));
-
 var _constants = require("./constants");
-
 var _marker = _interopRequireDefault(require("./marker"));
-
 var _utils = require("./utils");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 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 listItemStyles = (0, _react2.css)({
-  margin: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
   overflowWrap: 'break-word'
 });
 var titleStyles = (0, _react2.css)({
@@ -65,15 +43,11 @@ var titleStyles = (0, _react2.css)({
     transition: "opacity var(".concat(_constants.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
 });
-
 var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
-
   var _super = _createSuper(ProgressTrackerStage);
-
   function ProgressTrackerStage(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, ProgressTrackerStage);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEntered", function () {
@@ -90,7 +64,6 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     };
     return _this;
   }
-
   (0, _createClass2.default)(ProgressTrackerStage, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
@@ -114,17 +87,17 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _listInlineStyles;
-
       var _this$props = this.props,
-          item = _this$props.item,
-          render = _this$props.render,
-          transitionDelay = _this$props.transitionDelay,
-          transitionSpeed = _this$props.transitionSpeed,
-          transitionEasing = _this$props.transitionEasing,
-          testId = _this$props.testId;
+        item = _this$props.item,
+        render = _this$props.render,
+        transitionDelay = _this$props.transitionDelay,
+        transitionSpeed = _this$props.transitionSpeed,
+        transitionEasing = _this$props.transitionEasing,
+        testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
       var listInlineStyles = (_listInlineStyles = {}, (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionSpeed, "".concat(transitionSpeed, "ms")), (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionDelay, "".concat(transitionDelay, "ms")), (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionEasing, transitionEasing), (0, _defineProperty2.default)(_listInlineStyles, _constants.varMarkerColor, this.state.oldMarkerColor), (0, _defineProperty2.default)(_listInlineStyles, _constants.varBackgroundColor, (0, _utils.getMarkerColor)(item.status)), _listInlineStyles);
-      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      return (
+        // eslint-disable-next-line @repo/internal/react/use-primitives
         (0, _react2.jsx)("li", {
           "data-testid": testId,
           style: listInlineStyles,
@@ -174,5 +147,4 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   }]);
   return ProgressTrackerStage;
 }(_react.PureComponent);
-
 exports.default = ProgressTrackerStage;

package/dist/cjs/internal/utils.js

@@ -4,62 +4,46 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTextColor = exports.getMarkerColor = exports.getFontWeight = void 0;
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("./constants");
-
 var getMarkerColor = function getMarkerColor(status) {
   switch (status) {
     case 'unvisited':
       return "var(--ds-icon-subtle, ".concat(_colors.N70, ")");
-
     case 'current':
     case 'visited':
     case 'disabled':
       return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
-
     default:
       return;
   }
 };
-
 exports.getMarkerColor = getMarkerColor;
-
 var getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
       return 'subtlest';
-
     case 'current':
       return 'brand';
-
     case 'visited':
       return 'color.text';
-
     case 'disabled':
       return 'disabled';
-
     default:
       return;
   }
 };
-
 exports.getTextColor = getTextColor;
-
 var getFontWeight = function getFontWeight(status) {
   switch (status) {
     case 'unvisited':
       return _constants.REGULAR_FONT_WEIGHT;
-
     case 'current':
     case 'visited':
     case 'disabled':
       return _constants.SEMI_BOLD_FONT_WEIGHT;
-
     default:
       return undefined;
   }
 };
-
 exports.getFontWeight = getFontWeight;

package/dist/cjs/progress-tracker.js

@@ -1,74 +1,49 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _constants = require("./constants");
-
 var _constants2 = require("./internal/constants");
-
 var _link = _interopRequireDefault(require("./internal/link"));
-
 var _stage = _interopRequireDefault(require("./internal/stage"));
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 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 containerStyles = (0, _react2.css)({
   display: 'grid',
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  padding: "var(--ds-scale-0, 0px)",
+  padding: "var(--ds-space-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: "var(".concat(_constants2.varSpacing, ")"),
   listStyleType: 'none',
   '&&': {
-    marginTop: "var(--ds-scale-500, 40px)"
+    marginTop: "var(--ds-space-500, 40px)"
   }
 });
-
 var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ProgressTracker, _PureComponent);
-
   var _super = _createSuper(ProgressTracker);
-
   function ProgressTracker() {
     var _this;
-
     (0, _classCallCheck2.default)(this, ProgressTracker);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       prevStages: _this.props.items.map(function (stage) {
@@ -79,17 +54,14 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(ProgressTracker, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var _this2 = this;
-
       var prevStages = nextProps.items.map(function (stage) {
         var oldStage = _this2.props.items.find(function (st) {
           return st.id === stage.id;
         });
-
         return oldStage !== undefined ? oldStage : stage;
       });
       this.setState({
@@ -100,11 +72,10 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this3 = this,
-          _listInlineStyles;
-
+        _listInlineStyles;
       var _this$props = this.props,
-          testId = _this$props.testId,
-          label = _this$props.label;
+        testId = _this$props.testId,
+        label = _this$props.label;
       var progressChanges = this.props.items.filter(function (stage, index) {
         return stage.percentageComplete !== _this3.state.prevStages[index].percentageComplete;
       }).length;
@@ -120,10 +91,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
         var transitionSpeed = 0;
         var transitionDelay = 0;
         var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
-
         if (_this3.props.animated) {
           transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
-
           if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
             /**
              * load each transition sequentially in reverse
@@ -138,7 +107,6 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
             stepsForward -= 1;
           }
         }
-
         return (0, _react2.jsx)(_stage.default, {
           transitionSpeed: transitionSpeed,
           transitionDelay: transitionDelay,
@@ -151,7 +119,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
       var listInlineStyles = (_listInlineStyles = {
         gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
       }, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[this.props.spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
-      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      return (
+        // eslint-disable-next-line @repo/internal/react/use-primitives
         (0, _react2.jsx)("ul", {
           "data-testid": testId,
           style: listInlineStyles,
@@ -163,7 +132,6 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   }]);
   return ProgressTracker;
 }(_react.PureComponent);
-
 exports.default = ProgressTracker;
 (0, _defineProperty2.default)(ProgressTracker, "defaultProps", {
   items: [],

package/dist/cjs/version.json

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

package/dist/es2019/constants.js

@@ -2,7 +2,7 @@
  * Ideally these are exported by @atlaskit/page
  */
 export const spacing = {
-  comfortable: "var(--ds-scale-500, 40px)",
-  cosy: "var(--ds-scale-200, 16px)",
-  compact: "var(--ds-scale-050, 4px)"
+  comfortable: "var(--ds-space-500, 40px)",
+  cosy: "var(--ds-space-200, 16px)",
+  compact: "var(--ds-space-050, 4px)"
 };

package/dist/es2019/internal/bar.js

@@ -14,17 +14,18 @@ const progressBarStyles = css({
   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
-}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+}) =>
+// eslint-disable-next-line @repo/internal/react/use-primitives
 jsx("div", {
   "data-testid": testId,
   style: {
@@ -32,5 +33,4 @@ jsx("div", {
   },
   css: progressBarStyles
 });
-
 export default ProgressBar;

package/dist/es2019/internal/constants.js

@@ -9,7 +9,8 @@ export const varMarkerColor = '--ds--pt--mc';
 export const varBackgroundColor = '--ds--pt--bg';
 export const SEMI_BOLD_FONT_WEIGHT = 'semibold';
 export const REGULAR_FONT_WEIGHT = 'regular';
-export const HALF_GRID_SIZE = "var(--ds-scale-050, 4px)";
-export const PROGRESS_BAR_HEIGHT = "var(--ds-scale-100, 8px)"; // Labels sit 16px from bottom of progress bar i.e. 8 + 16
+export const HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
+export const PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 
-export const LABEL_TOP_SPACING = "var(--ds-scale-300, 24px)";
+// Labels sit 16px from bottom of progress bar i.e. 8 + 16
+export const LABEL_TOP_SPACING = "var(--ds-space-300, 24px)";

package/dist/es2019/internal/link.js

@@ -1,25 +1,26 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 const linkStyles = css({
   color: `var(--ds-text, ${N800})`,
   cursor: 'pointer'
 });
+
 /**
  * __Progress tracker link__
  */
-
 const Link = ({
   href,
   onClick,
   label,
   testId
-}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+}) =>
+// eslint-disable-next-line @repo/internal/react/use-primitives
 jsx("a", {
   css: linkStyles,
   href: href,
   onClick: onClick,
   "data-testid": testId
 }, label);
-
 export default Link;

package/dist/es2019/internal/marker.js

@@ -1,6 +1,6 @@
 /* eslint-disable @repo/internal/styles/no-nested-styles */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 const progressMarkerStyles = css({
@@ -26,19 +26,19 @@ const progressMarkerStyles = css({
     backgroundColor: `var(${varBackgroundColor})`
   }
 });
+
 /**
  * __Progress marker__
  *
  * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
  */
-
 const ProgressMarker = ({
   testId
-}) => // too many props that would go in UNSAFE_style + css transition prop having issues
+}) =>
+// too many props that would go in UNSAFE_style + css transition prop having issues
 // eslint-disable-next-line @repo/internal/react/use-primitives
 jsx("div", {
   "data-testid": testId,
   css: progressMarkerStyles
 });
-
 export default ProgressMarker;

package/dist/es2019/internal/stage.js

@@ -1,7 +1,5 @@
 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/react';
@@ -13,7 +11,7 @@ import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDel
 import ProgressMarker from './marker';
 import { getFontWeight, getMarkerColor, getTextColor } from './utils';
 const listItemStyles = css({
-  margin: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
   overflowWrap: 'break-word'
 });
 const titleStyles = css({
@@ -33,7 +31,6 @@ const titleStyles = css({
 export default class ProgressTrackerStage extends PureComponent {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "onEntered", () => {
       this.setState({
         transitioning: false,
@@ -41,30 +38,27 @@ export default class ProgressTrackerStage extends PureComponent {
         oldPercentageComplete: this.props.item.percentageComplete
       });
     });
-
     this.state = {
       transitioning: false,
       oldMarkerColor: getMarkerColor(this.props.item.status),
       oldPercentageComplete: 0
     };
   }
-
   UNSAFE_componentWillMount() {
-    this.setState({ ...this.state,
+    this.setState({
+      ...this.state,
       transitioning: true
     });
   }
-
   UNSAFE_componentWillReceiveProps() {
-    this.setState({ ...this.state,
+    this.setState({
+      ...this.state,
       transitioning: true
     });
   }
-
   shouldShowLink() {
     return this.props.item.status === 'visited' && !this.props.item.noLink;
   }
-
   render() {
     const {
       item,
@@ -82,7 +76,8 @@ export default class ProgressTrackerStage extends PureComponent {
       [varMarkerColor]: this.state.oldMarkerColor,
       [varBackgroundColor]: getMarkerColor(item.status)
     };
-    return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    return (
+      // eslint-disable-next-line @repo/internal/react/use-primitives
       jsx("li", {
         "data-testid": testId,
         style: listInlineStyles,
@@ -129,5 +124,4 @@ export default class ProgressTrackerStage extends PureComponent {
       }) : item.label)))))
     );
   }
-
 }

package/dist/es2019/internal/utils.js

@@ -4,12 +4,10 @@ export const getMarkerColor = status => {
   switch (status) {
     case 'unvisited':
       return `var(--ds-icon-subtle, ${N70})`;
-
     case 'current':
     case 'visited':
     case 'disabled':
       return `var(--ds-icon-brand, ${B300})`;
-
     default:
       return;
   }
@@ -18,16 +16,12 @@ export const getTextColor = status => {
   switch (status) {
     case 'unvisited':
       return 'subtlest';
-
     case 'current':
       return 'brand';
-
     case 'visited':
       return 'color.text';
-
     case 'disabled':
       return 'disabled';
-
     default:
       return;
   }
@@ -36,12 +30,10 @@ 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/progress-tracker.js

@@ -1,7 +1,5 @@
 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/react';
@@ -14,25 +12,24 @@ const containerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  padding: "var(--ds-scale-0, 0px)",
+  padding: "var(--ds-space-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: `var(${varSpacing})`,
   listStyleType: 'none',
   '&&': {
-    marginTop: "var(--ds-scale-500, 40px)"
+    marginTop: "var(--ds-space-500, 40px)"
   }
 });
 export default class ProgressTracker extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
-      prevStages: this.props.items.map(stage => ({ ...stage,
+      prevStages: this.props.items.map(stage => ({
+        ...stage,
         percentageComplete: 0
       }))
     });
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     const prevStages = nextProps.items.map(stage => {
       const oldStage = this.props.items.find(st => st.id === stage.id);
@@ -42,7 +39,6 @@ export default class ProgressTracker extends PureComponent {
       prevStages
     });
   }
-
   render() {
     const {
       testId,
@@ -57,10 +53,8 @@ export default class ProgressTracker extends PureComponent {
       let transitionSpeed = 0;
       let transitionDelay = 0;
       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
@@ -75,7 +69,6 @@ export default class ProgressTracker extends PureComponent {
           stepsForward -= 1;
         }
       }
-
       return jsx(Stage, {
         transitionSpeed: transitionSpeed,
         transitionDelay: transitionDelay,
@@ -90,7 +83,8 @@ export default class ProgressTracker extends PureComponent {
       [varSpacing]: spacing[this.props.spacing],
       maxWidth: 8 * 10 * items.length * 2
     };
-    return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    return (
+      // eslint-disable-next-line @repo/internal/react/use-primitives
       jsx("ul", {
         "data-testid": testId,
         style: listInlineStyles,
@@ -99,9 +93,7 @@ export default class ProgressTracker extends PureComponent {
       }, items)
     );
   }
-
 }
-
 _defineProperty(ProgressTracker, "defaultProps", {
   items: [],
   spacing: 'cosy',

package/dist/es2019/version.json

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

package/dist/esm/constants.js

@@ -2,7 +2,7 @@
  * Ideally these are exported by @atlaskit/page
  */
 export var spacing = {
-  comfortable: "var(--ds-scale-500, 40px)",
-  cosy: "var(--ds-scale-200, 16px)",
-  compact: "var(--ds-scale-050, 4px)"
+  comfortable: "var(--ds-space-500, 40px)",
+  cosy: "var(--ds-space-200, 16px)",
+  compact: "var(--ds-space-050, 4px)"
 };

package/dist/esm/internal/bar.js

@@ -14,17 +14,18 @@ var progressBarStyles = css({
   transition: "width var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
   transitionDelay: "var(".concat(varTransitionDelay, ")")
 });
+
 /**
  * __Progress bar__
  *
  * A progress bar describes the horizontal tracking bar that traverses each individual step.
  *
  */
-
 var ProgressBar = function ProgressBar(_ref) {
   var percentageComplete = _ref.percentageComplete,
-      testId = _ref.testId;
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    testId = _ref.testId;
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     jsx("div", {
       "data-testid": testId,
       style: {
@@ -34,5 +35,4 @@ var ProgressBar = function ProgressBar(_ref) {
     })
   );
 };
-
 export default ProgressBar;

package/dist/esm/internal/constants.js

@@ -9,7 +9,8 @@ export var varMarkerColor = '--ds--pt--mc';
 export var varBackgroundColor = '--ds--pt--bg';
 export var SEMI_BOLD_FONT_WEIGHT = 'semibold';
 export var REGULAR_FONT_WEIGHT = 'regular';
-export var HALF_GRID_SIZE = "var(--ds-scale-050, 4px)";
-export var PROGRESS_BAR_HEIGHT = "var(--ds-scale-100, 8px)"; // Labels sit 16px from bottom of progress bar i.e. 8 + 16
+export var HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
+export var PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 
-export var LABEL_TOP_SPACING = "var(--ds-scale-300, 24px)";
+// Labels sit 16px from bottom of progress bar i.e. 8 + 16
+export var LABEL_TOP_SPACING = "var(--ds-space-300, 24px)";

package/dist/esm/internal/link.js

@@ -1,20 +1,22 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 var linkStyles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
   cursor: 'pointer'
 });
+
 /**
  * __Progress tracker link__
  */
-
 var Link = function Link(_ref) {
   var href = _ref.href,
-      onClick = _ref.onClick,
-      label = _ref.label,
-      testId = _ref.testId;
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    onClick = _ref.onClick,
+    label = _ref.label,
+    testId = _ref.testId;
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     jsx("a", {
       css: linkStyles,
       href: href,
@@ -23,5 +25,4 @@ var Link = function Link(_ref) {
     }, label)
   );
 };
-
 export default Link;

package/dist/esm/internal/marker.js

@@ -1,6 +1,6 @@
 /* eslint-disable @repo/internal/styles/no-nested-styles */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 var progressMarkerStyles = css({
@@ -26,15 +26,16 @@ var progressMarkerStyles = css({
     backgroundColor: "var(".concat(varBackgroundColor, ")")
   }
 });
+
 /**
  * __Progress marker__
  *
  * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
  */
-
 var ProgressMarker = function ProgressMarker(_ref) {
   var testId = _ref.testId;
-  return (// too many props that would go in UNSAFE_style + css transition prop having issues
+  return (
+    // too many props that would go in UNSAFE_style + css transition prop having issues
     // eslint-disable-next-line @repo/internal/react/use-primitives
     jsx("div", {
       "data-testid": testId,
@@ -42,5 +43,4 @@ var ProgressMarker = function ProgressMarker(_ref) {
     })
   );
 };
-
 export default ProgressMarker;

package/dist/esm/internal/stage.js

@@ -5,17 +5,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 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; } }
-
 /* eslint-disable @repo/internal/styles/no-nested-styles */
-
 /** @jsx jsx */
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -27,7 +21,7 @@ import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDel
 import ProgressMarker from './marker';
 import { getFontWeight, getMarkerColor, getTextColor } from './utils';
 var listItemStyles = css({
-  margin: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
   overflowWrap: 'break-word'
 });
 var titleStyles = css({
@@ -44,19 +38,13 @@ var titleStyles = css({
     transition: "opacity var(".concat(varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
 });
-
 var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   _inherits(ProgressTrackerStage, _PureComponent);
-
   var _super = _createSuper(ProgressTrackerStage);
-
   function ProgressTrackerStage(props) {
     var _this;
-
     _classCallCheck(this, ProgressTrackerStage);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "onEntered", function () {
       _this.setState({
         transitioning: false,
@@ -64,7 +52,6 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
         oldPercentageComplete: _this.props.item.percentageComplete
       });
     });
-
     _this.state = {
       transitioning: false,
       oldMarkerColor: getMarkerColor(_this.props.item.status),
@@ -72,7 +59,6 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     };
     return _this;
   }
-
   _createClass(ProgressTrackerStage, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
@@ -96,17 +82,17 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _listInlineStyles;
-
       var _this$props = this.props,
-          item = _this$props.item,
-          render = _this$props.render,
-          transitionDelay = _this$props.transitionDelay,
-          transitionSpeed = _this$props.transitionSpeed,
-          transitionEasing = _this$props.transitionEasing,
-          testId = _this$props.testId;
+        item = _this$props.item,
+        render = _this$props.render,
+        transitionDelay = _this$props.transitionDelay,
+        transitionSpeed = _this$props.transitionSpeed,
+        transitionEasing = _this$props.transitionEasing,
+        testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
       var listInlineStyles = (_listInlineStyles = {}, _defineProperty(_listInlineStyles, varTransitionSpeed, "".concat(transitionSpeed, "ms")), _defineProperty(_listInlineStyles, varTransitionDelay, "".concat(transitionDelay, "ms")), _defineProperty(_listInlineStyles, varTransitionEasing, transitionEasing), _defineProperty(_listInlineStyles, varMarkerColor, this.state.oldMarkerColor), _defineProperty(_listInlineStyles, varBackgroundColor, getMarkerColor(item.status)), _listInlineStyles);
-      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      return (
+        // eslint-disable-next-line @repo/internal/react/use-primitives
         jsx("li", {
           "data-testid": testId,
           style: listInlineStyles,
@@ -154,8 +140,6 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
       );
     }
   }]);
-
   return ProgressTrackerStage;
 }(PureComponent);
-
 export { ProgressTrackerStage as default };

package/dist/esm/internal/utils.js

@@ -4,12 +4,10 @@ export var getMarkerColor = function getMarkerColor(status) {
   switch (status) {
     case 'unvisited':
       return "var(--ds-icon-subtle, ".concat(N70, ")");
-
     case 'current':
     case 'visited':
     case 'disabled':
       return "var(--ds-icon-brand, ".concat(B300, ")");
-
     default:
       return;
   }
@@ -18,16 +16,12 @@ export var getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
       return 'subtlest';
-
     case 'current':
       return 'brand';
-
     case 'visited':
       return 'color.text';
-
     case 'disabled':
       return 'disabled';
-
     default:
       return;
   }
@@ -36,12 +30,10 @@ export var getFontWeight = function 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/esm/progress-tracker.js

@@ -5,17 +5,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 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; } }
-
 /* eslint-disable @repo/internal/styles/no-nested-styles */
-
 /** @jsx jsx */
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -28,31 +22,24 @@ var containerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  padding: "var(--ds-scale-0, 0px)",
+  padding: "var(--ds-space-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: "var(".concat(varSpacing, ")"),
   listStyleType: 'none',
   '&&': {
-    marginTop: "var(--ds-scale-500, 40px)"
+    marginTop: "var(--ds-space-500, 40px)"
   }
 });
-
 var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   _inherits(ProgressTracker, _PureComponent);
-
   var _super = _createSuper(ProgressTracker);
-
   function ProgressTracker() {
     var _this;
-
     _classCallCheck(this, ProgressTracker);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       prevStages: _this.props.items.map(function (stage) {
         return _objectSpread(_objectSpread({}, stage), {}, {
@@ -60,20 +47,16 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
         });
       })
     });
-
     return _this;
   }
-
   _createClass(ProgressTracker, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var _this2 = this;
-
       var prevStages = nextProps.items.map(function (stage) {
         var oldStage = _this2.props.items.find(function (st) {
           return st.id === stage.id;
         });
-
         return oldStage !== undefined ? oldStage : stage;
       });
       this.setState({
@@ -84,11 +67,10 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this3 = this,
-          _listInlineStyles;
-
+        _listInlineStyles;
       var _this$props = this.props,
-          testId = _this$props.testId,
-          label = _this$props.label;
+        testId = _this$props.testId,
+        label = _this$props.label;
       var progressChanges = this.props.items.filter(function (stage, index) {
         return stage.percentageComplete !== _this3.state.prevStages[index].percentageComplete;
       }).length;
@@ -104,10 +86,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
         var transitionSpeed = 0;
         var transitionDelay = 0;
         var transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
-
         if (_this3.props.animated) {
           transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
-
           if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
             /**
              * load each transition sequentially in reverse
@@ -122,7 +102,6 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
             stepsForward -= 1;
           }
         }
-
         return jsx(Stage, {
           transitionSpeed: transitionSpeed,
           transitionDelay: transitionDelay,
@@ -135,7 +114,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
       var listInlineStyles = (_listInlineStyles = {
         gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
       }, _defineProperty(_listInlineStyles, varSpacing, spacing[this.props.spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
-      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      return (
+        // eslint-disable-next-line @repo/internal/react/use-primitives
         jsx("ul", {
           "data-testid": testId,
           style: listInlineStyles,
@@ -145,10 +125,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
       );
     }
   }]);
-
   return ProgressTracker;
 }(PureComponent);
-
 _defineProperty(ProgressTracker, "defaultProps", {
   items: [],
   spacing: 'cosy',
@@ -161,5 +139,4 @@ _defineProperty(ProgressTracker, "defaultProps", {
   animated: true,
   label: 'Progress'
 });
-
 export { ProgressTracker as default };

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

@@ -2,8 +2,8 @@
  * Ideally these are exported by @atlaskit/page
  */
 export declare const spacing: {
-    readonly comfortable: "var(--ds-scale-500)";
-    readonly cosy: "var(--ds-scale-200)";
-    readonly compact: "var(--ds-scale-050)";
+    readonly comfortable: "var(--ds-space-500)";
+    readonly cosy: "var(--ds-space-200)";
+    readonly compact: "var(--ds-space-050)";
 };
 export declare type Spacing = keyof typeof spacing;

package/dist/types/internal/constants.d.ts

@@ -9,6 +9,6 @@ export declare const varMarkerColor = "--ds--pt--mc";
 export declare const varBackgroundColor = "--ds--pt--bg";
 export declare const SEMI_BOLD_FONT_WEIGHT = "semibold";
 export declare const REGULAR_FONT_WEIGHT = "regular";
-export declare const HALF_GRID_SIZE: "var(--ds-scale-050)";
-export declare const PROGRESS_BAR_HEIGHT: "var(--ds-scale-100)";
-export declare const LABEL_TOP_SPACING: "var(--ds-scale-300)";
+export declare const HALF_GRID_SIZE: "var(--ds-space-050)";
+export declare const PROGRESS_BAR_HEIGHT: "var(--ds-space-100)";
+export declare const LABEL_TOP_SPACING: "var(--ds-space-300)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-tracker",
-  "version": "8.4.4",
+  "version": "8.4.5",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"