@atlaskit/progress-tracker 8.11.1 → 9.0.1

package/dist/esm/internal/bar.js

@@ -1,29 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* bar.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./bar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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';
-var progressBarStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: PROGRESS_BAR_HEIGHT,
-  position: 'absolute',
-  backgroundColor: "var(--ds-background-brand-bold, ".concat(B300, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderEndEndRadius: PROGRESS_BAR_HEIGHT,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderStartEndRadius: PROGRESS_BAR_HEIGHT,
-  insetInlineStart: '50%',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  transform: "translate(0, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  transition: "width var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  transitionDelay: "var(".concat(varTransitionDelay, ")")
-});
+var spacing = {
+  comfortable: "var(--ds-space-500, 40px)",
+  cosy: "var(--ds-space-200, 16px)",
+  compact: "var(--ds-space-050, 4px)"
+};
+var progressBarStyles = null;
 
 /**
  * __Progress bar__
@@ -34,14 +19,14 @@ var progressBarStyles = css({
 var ProgressBar = function ProgressBar(_ref) {
   var percentageComplete = _ref.percentageComplete,
     testId = _ref.testId;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
+    className: ax(["_4t3iu2gc _kqswstnw _bfhk1j1x _1einu2gc _5fbcu2gc _1e021ssb _t9ec5ihf _v564d86a _1lww1oqq"]),
     style: {
-      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      , " * calc(var(").concat(varSpacing, ", ").concat(spacing.cosy, ") + ").concat(HALF_GRID_SIZE, "))")
-    },
-    css: progressBarStyles
+      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(--ds--pt--sp, ").concat(spacing.cosy, ") + ", "var(--ds-space-050, 4px)", "))"),
+      "--_vcj3ew": ix("var(--ds-background-brand-bold, ".concat(B300, ")")),
+      "--_22xnfg": ix("translate(0, calc(-1 * ".concat("var(--ds-space-250, 20px)", "))"))
+    }
   });
 };
 export default ProgressBar;

package/dist/esm/internal/link-new.js

@@ -2,9 +2,9 @@
 import "./link-new.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import Anchor from '@atlaskit/primitives/anchor';
+import { Anchor } from '@atlaskit/primitives/compiled';
 var styles = {
-  root: "_4bfu18uv _1hmsglyw _ajmmnqa1 _syaz1fxt _11c81kw7 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+  anchor: "_4bfu18uv _1hmsglyw _ajmmnqa1 _syaz1fxt _11c81kw7 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
 };
 
 /**
@@ -16,7 +16,7 @@ var Link = function Link(_ref) {
     label = _ref.label,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Anchor, {
-    xcss: styles.root
+    xcss: styles.anchor
     // TODO: We should not be rendering empty hrefs on anchors. This should be plain text or a button/pressable if `onClick` is provided.
     ,
     href: href || '',

package/dist/esm/internal/link.compiled.css

@@ -0,0 +1,2 @@
+._80omtlke{cursor:pointer}
+._syaz1o8f{color:var(--_ggxzyp)}

package/dist/esm/internal/link.js

@@ -1,15 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* link.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./link.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N800 } from '@atlaskit/theme/colors';
-var linkStyles = css({
-  color: "var(--ds-text, ".concat(N800, ")"),
-  cursor: 'pointer'
-});
+var linkStyles = null;
 
 /**
  * __Progress tracker link__
@@ -19,11 +13,14 @@ var Link = function Link(_ref) {
     onClick = _ref.onClick,
     label = _ref.label,
     testId = _ref.testId;
-  return jsx("a", {
-    css: linkStyles,
+  return /*#__PURE__*/React.createElement("a", {
     href: href,
     onClick: onClick,
-    "data-testid": testId
+    "data-testid": testId,
+    className: ax(["_syaz1o8f _80omtlke"]),
+    style: {
+      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
+    }
   }, label);
 };
 export default Link;

package/dist/esm/internal/marker.compiled.css

@@ -0,0 +1,13 @@
+
+._2rkou2gc{border-radius:var(--ds-space-100,8px)}
+._v5645rui{transition:opacity var(--ds--pt--ts) var(--ds--pt--te),background-color var(--ds--pt--ts) var(--ds--pt--te)}._1190pbrw.fade-enter{background-color:var(--ds--pt--mc)}
+._1bsbu2gc{width:var(--ds-space-100,8px)}
+._1e021ssb{inset-inline-start:50%}
+._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
+._1ia8r3ku.fade-enter.fade-enter-active{background-color:var(--ds--pt--bg)}
+._1lww1oqq{transition-delay:var(--ds--pt--td)}
+._1uuw17dr.fade-appear{opacity:.01}
+._4t3iu2gc{height:var(--ds-space-100,8px)}
+._bfhkr3ku{background-color:var(--ds--pt--bg)}
+._kqswstnw{position:absolute}
+._t9ec17h2{transform:var(--_nsjg4d)}

package/dist/esm/internal/marker.js

@@ -1,48 +1,9 @@
+/* marker.tsx generated by @compiled/babel-plugin v0.32.2 */
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
-var progressMarkerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: PROGRESS_BAR_HEIGHT,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: PROGRESS_BAR_HEIGHT,
-  position: 'absolute',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(".concat(varBackgroundColor, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: PROGRESS_BAR_HEIGHT,
-  insetInlineStart: '50%',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  transform: "translate(-50%, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  transition: "opacity var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, "), background-color var(").concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  transitionDelay: "var(".concat(varTransitionDelay, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.fade-appear': {
-    opacity: 0.01
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.fade-appear.fade-appear-active': {
-    opacity: 1
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.fade-enter': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    backgroundColor: "var(".concat(varMarkerColor, ")")
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.fade-enter.fade-enter-active': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    backgroundColor: "var(".concat(varBackgroundColor, ")")
-  }
-});
+import "./marker.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var progressMarkerStyles = null;
 
 /**
  * __Progress marker__
@@ -51,13 +12,12 @@ var progressMarkerStyles = css({
  */
 var ProgressMarker = function ProgressMarker(_ref) {
   var testId = _ref.testId;
-  return (
-    // too many props that would go in UNSAFE_style + css transition prop having issues
-
-    jsx("div", {
-      "data-testid": testId,
-      css: progressMarkerStyles
-    })
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_1bsbu2gc _4t3iu2gc _kqswstnw _bfhkr3ku _2rkou2gc _1e021ssb _t9ec17h2 _v5645rui _1lww1oqq _1uuw17dr _1ez2kb7n _1190pbrw _1ia8r3ku"]),
+    style: {
+      "--_nsjg4d": ix("translate(-50%, calc(-1 * ".concat("var(--ds-space-250, 20px)", "))"))
+    }
+  });
 };
 export default ProgressMarker;

package/dist/esm/internal/stage.compiled.css

@@ -0,0 +1,17 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1t9yph28.fade-appear.fade-appear-active{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
+._v564ph28{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
+._1bsb1osq{width:100%}
+._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
+._1i4q1hna{overflow-wrap:break-word}
+._1pfhv47k{margin-block-start:var(--ds-space-250,20px)}
+._1uuw17dr.fade-appear{opacity:.01}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._kqswh2mm{position:relative}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz1e6v{color:var(--ds-text-brand,#0c66e4)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._y3gn1h6o{text-align:center}

package/dist/esm/internal/stage.js

@@ -1,66 +1,61 @@
-import _extends from "@babel/runtime/helpers/extends";
+/* stage.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./stage.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { createRef, PureComponent } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
+import { B300, N70 } from '@atlaskit/theme/colors';
 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';
-var listItemContentStyles = xcss({
-  width: '100%',
-  position: 'relative'
-});
-var listItemStyles = css({
-  margin: "var(--ds-space-0, 0px)",
-  overflowWrap: 'break-word'
-});
-var titleStyles = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBlockStart: LABEL_TOP_SPACING,
-  textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.fade-appear': {
-    opacity: 0.01
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.fade-appear.fade-appear-active': {
-    opacity: 1,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    transition: "opacity var(".concat(varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
+var styles = {
+  listItemContent: "_1bsb1osq _kqswh2mm"
+};
+var textColor = {
+  unvisited: "_syaz131l",
+  current: "_syaz1e6v",
+  visited: "_syaz1fxt",
+  disabled: "_syaz1lh4"
+};
+var fontWeight = {
+  unvisited: "_k48pi7a9",
+  current: "_k48pmoej",
+  visited: "_k48pmoej",
+  disabled: "_k48pmoej"
+};
+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;
   }
-});
+};
+var listItemStyles = null;
+var titleStyles = null;
 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), "nodeRefMarker", /*#__PURE__*/createRef());
-    _defineProperty(_assertThisInitialized(_this), "nodeRefBar", /*#__PURE__*/createRef());
-    _defineProperty(_assertThisInitialized(_this), "nodeRefTitle", /*#__PURE__*/createRef());
-    _defineProperty(_assertThisInitialized(_this), "onEntered", function () {
+    _this = _callSuper(this, ProgressTrackerStage, [props]);
+    _defineProperty(_this, "nodeRefMarker", /*#__PURE__*/createRef());
+    _defineProperty(_this, "nodeRefBar", /*#__PURE__*/createRef());
+    _defineProperty(_this, "nodeRefTitle", /*#__PURE__*/createRef());
+    _defineProperty(_this, "onEntered", function () {
       _this.setState({
         transitioning: false,
         oldMarkerColor: getMarkerColor(_this.props.item.status),
@@ -74,7 +69,8 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     };
     return _this;
   }
-  _createClass(ProgressTrackerStage, [{
+  _inherits(ProgressTrackerStage, _PureComponent);
+  return _createClass(ProgressTrackerStage, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
@@ -98,7 +94,6 @@ 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,
@@ -107,59 +102,49 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
         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)), _defineProperty(_listInlineStyles, "listStyleType", 'none'), _listInlineStyles);
-      return jsx("li", {
+      var listInlineStyles = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing), '--ds--pt--mc', this.state.oldMarkerColor), '--ds--pt--bg', getMarkerColor(item.status)), "listStyleType", 'none');
+      return /*#__PURE__*/React.createElement("li", {
         "data-testid": testId
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: listInlineStyles,
-        css: listItemStyles,
-        "aria-current": ariaCurrent
-      }, jsx(Box, {
-        xcss: listItemContentStyles
-      }, jsx(CSSTransition, _extends({
+        "aria-current": ariaCurrent,
+        className: ax(["_18s8ze3t _1i4q1hna"])
+      }, /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.listItemContent
+      }, /*#__PURE__*/React.createElement(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, fg('platform_design_system_team_transition_group_r18') && {
+        classNames: "fade",
         nodeRef: this.nodeRefMarker
-      }), jsx(ProgressMarker, {
+      }, /*#__PURE__*/React.createElement(ProgressMarker, {
         testId: testId && "".concat(testId, "-marker")
-      })), jsx(CSSTransition, _extends({
+      })), /*#__PURE__*/React.createElement(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, fg('platform_design_system_team_transition_group_r18') && {
+        classNames: "fade",
         nodeRef: this.nodeRefBar
-      }), jsx(ProgressBar, {
+      }, /*#__PURE__*/React.createElement(ProgressBar, {
         testId: testId && "".concat(testId, "-bar"),
         percentageComplete: item.percentageComplete
-      })), jsx(CSSTransition, _extends({
+      })), /*#__PURE__*/React.createElement(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, fg('platform_design_system_team_transition_group_r18') && {
+        classNames: "fade",
         nodeRef: this.nodeRefTitle
-      }), jsx("div", {
-        css: titleStyles,
-        style: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          color: getTextColor(item.status),
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          fontWeight: getFontWeight(item.status)
-        },
-        "data-testid": testId && "".concat(testId, "-title")
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": testId && "".concat(testId, "-title"),
+        className: ax(["_11c81oud _1pfhv47k _y3gn1h6o _v564ph28 _1uuw17dr _1ez2kb7n _1t9yph28", textColor[item.status], fontWeight[item.status]])
       }, this.shouldShowLink() ? render.link({
         item: item
       }) : item.label))));
     }
   }]);
-  return ProgressTrackerStage;
 }(PureComponent);
 export { ProgressTrackerStage as default };

package/dist/esm/progress-tracker.compiled.css

@@ -0,0 +1,10 @@
+
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._zulp6odm{gap:var(--ds--pt--sp)}._18u01wug{margin-left:auto}
+._19pkidpf{margin-top:0}
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._2hwx1wug{margin-right:auto}
+._2mzuglyw{list-style-type:none}
+._otyridpf{margin-bottom:0}
+._rxvc1jfw._rxvc1jfw{margin-block-start:var(--ds-space-500,40px)}

package/dist/esm/progress-tracker.js

@@ -1,34 +1,21 @@
+/* progress-tracker.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./progress-tracker.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { spacing as spacingOptions } from './constants';
-import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
 import Link from './internal/link';
 import LinkNew from './internal/link-new';
 import Stage from './internal/stage';
-var containerStyles = css({
-  display: 'grid',
-  width: '100%',
-  margin: '0 auto',
-  padding: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  gap: "var(".concat(varSpacing, ")"),
-  listStyleType: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&&': {
-    marginBlockStart: "var(--ds-space-500, 40px)"
-  }
-});
+var containerStyles = null;
+var spacingOptions = {
+  comfortable: "var(--ds-space-500, 40px)",
+  cosy: "var(--ds-space-200, 16px)",
+  compact: "var(--ds-space-050, 4px)"
+};
 /**
  * __Progress tracker__
  *
@@ -39,7 +26,6 @@ var containerStyles = css({
  * - [Usage](https://atlassian.design/components/progress-tracker/usage)
  */
 var ProgressTracker = function ProgressTracker(_ref) {
-  var _listInlineStyles;
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     _ref$spacing = _ref.spacing,
@@ -51,7 +37,7 @@ var ProgressTracker = function ProgressTracker(_ref) {
         return (
           // Anchor content is coming from another location
           // eslint-disable-next-line jsx-a11y/anchor-has-content
-          fg('platform_progress_tracker_link_migration') ? jsx(LinkNew, item) : jsx(Link, item)
+          fg('platform_progress_tracker_link_migration') ? /*#__PURE__*/React.createElement(LinkNew, item) : /*#__PURE__*/React.createElement(Link, item)
         );
       }
     } : _ref$render,
@@ -89,9 +75,9 @@ var ProgressTracker = function ProgressTracker(_ref) {
   var progressItems = items.map(function (stage, index) {
     var transitionSpeed = 0;
     var transitionDelay = 0;
-    var transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
+    var transitionEasing = progressChanges > 1 ? 'linear' : 'cubic-bezier(0.15,1,0.3,1)';
     if (animated) {
-      transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
+      transitionSpeed = progressChanges > 1 ? 50 : 300;
       if (stage.percentageComplete < previousStages[index].percentageComplete) {
         /**
          * Load each transition sequentially in reverse.
@@ -106,7 +92,7 @@ var ProgressTracker = function ProgressTracker(_ref) {
         stepsForward -= 1;
       }
     }
-    return jsx(Stage, {
+    return /*#__PURE__*/React.createElement(Stage, {
       transitionSpeed: transitionSpeed,
       transitionDelay: transitionDelay,
       transitionEasing: transitionEasing,
@@ -115,16 +101,16 @@ var ProgressTracker = function ProgressTracker(_ref) {
       render: render
     });
   });
-  var listInlineStyles = (_listInlineStyles = {
+  var listInlineStyles = _defineProperty(_defineProperty({
     gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
-  }, _defineProperty(_listInlineStyles, varSpacing, spacingOptions[spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
-  return jsx("ul", {
+  }, '--ds--pt--sp', spacingOptions[spacing]), "maxWidth", 8 * 10 * items.length * 2);
+  return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: listInlineStyles,
-    css: containerStyles,
-    "aria-label": label
+    "aria-label": label,
+    className: ax(["_1e0c11p5 _1bsb1osq _19pkidpf _2hwx1wug _otyridpf _18u01wug _1yt4ze3t _zulp6odm _2mzuglyw _rxvc1jfw"])
   }, progressItems);
 };
 export default ProgressTracker;

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 interface StageBarProps {
     testId?: string;
     percentageComplete: number;
@@ -13,5 +9,5 @@ interface StageBarProps {
  * A progress bar describes the horizontal tracking bar that traverses each individual step.
  *
  */
-declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => jsx.JSX.Element;
+declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => JSX.Element;
 export default ProgressBar;

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { PureComponent } from 'react';
-import { jsx } from '@emotion/react';
 import type { ProgressTrackerStageProps } from './types';
 interface State {
     transitioning: boolean;
@@ -20,5 +19,5 @@ export default class ProgressTrackerStage extends PureComponent<ProgressTrackerS
     UNSAFE_componentWillReceiveProps(): void;
     shouldShowLink(): boolean;
     onEntered: () => void;
-    render(): jsx.JSX.Element;
+    render(): JSX.Element;
 }

package/dist/types/progress-tracker.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
 export interface ProgressTrackerProps {
     /**
@@ -35,5 +35,5 @@ export interface ProgressTrackerProps {
  * - [Code](https://atlassian.design/components/progress-tracker/code)
  * - [Usage](https://atlassian.design/components/progress-tracker/usage)
  */
-declare const ProgressTracker: ({ items, spacing, render, animated, testId, label, }: ProgressTrackerProps) => jsx.JSX.Element;
+declare const ProgressTracker: ({ items, spacing, render, animated, testId, label, }: ProgressTrackerProps) => JSX.Element;
 export default ProgressTracker;

package/dist/types/types.d.ts

@@ -2,7 +2,7 @@
 /**
  * Ideally these are exported by @atlaskit/page
  */
-export type { Spacing } from './constants';
+export type Spacing = 'comfortable' | 'cosy' | 'compact';
 export type Status = 'unvisited' | 'visited' | 'current' | 'disabled';
 /**
  * @deprecated

package/dist/types-ts4.5/internal/bar.d.ts

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 interface StageBarProps {
     testId?: string;
     percentageComplete: number;
@@ -13,5 +9,5 @@ interface StageBarProps {
  * A progress bar describes the horizontal tracking bar that traverses each individual step.
  *
  */
-declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => jsx.JSX.Element;
+declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => JSX.Element;
 export default ProgressBar;