@atlaskit/progress-tracker 8.11.1 → 9.0.1

package/dist/cjs/progress-tracker.js

@@ -1,37 +1,31 @@
+/* progress-tracker.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./progress-tracker.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _constants = require("./constants");
-var _constants2 = require("./internal/constants");
 var _link = _interopRequireDefault(require("./internal/link"));
 var _linkNew = _interopRequireDefault(require("./internal/link-new"));
 var _stage = _interopRequireDefault(require("./internal/stage"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var containerStyles = (0, _react2.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(_constants2.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)"
-  }
-});
+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) { (0, _defineProperty2.default)(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; }
+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__
  *
@@ -42,7 +36,6 @@ var containerStyles = (0, _react2.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,
@@ -54,7 +47,7 @@ var ProgressTracker = function ProgressTracker(_ref) {
         return (
           // Anchor content is coming from another location
           // eslint-disable-next-line jsx-a11y/anchor-has-content
-          (0, _platformFeatureFlags.fg)('platform_progress_tracker_link_migration') ? (0, _react2.jsx)(_linkNew.default, item) : (0, _react2.jsx)(_link.default, item)
+          (0, _platformFeatureFlags.fg)('platform_progress_tracker_link_migration') ? /*#__PURE__*/React.createElement(_linkNew.default, item) : /*#__PURE__*/React.createElement(_link.default, item)
         );
       }
     } : _ref$render,
@@ -92,9 +85,9 @@ var ProgressTracker = function ProgressTracker(_ref) {
   var progressItems = items.map(function (stage, index) {
     var transitionSpeed = 0;
     var transitionDelay = 0;
-    var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
+    var transitionEasing = progressChanges > 1 ? 'linear' : 'cubic-bezier(0.15,1,0.3,1)';
     if (animated) {
-      transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
+      transitionSpeed = progressChanges > 1 ? 50 : 300;
       if (stage.percentageComplete < previousStages[index].percentageComplete) {
         /**
          * Load each transition sequentially in reverse.
@@ -109,7 +102,7 @@ var ProgressTracker = function ProgressTracker(_ref) {
         stepsForward -= 1;
       }
     }
-    return (0, _react2.jsx)(_stage.default, {
+    return /*#__PURE__*/React.createElement(_stage.default, {
       transitionSpeed: transitionSpeed,
       transitionDelay: transitionDelay,
       transitionEasing: transitionEasing,
@@ -118,16 +111,16 @@ var ProgressTracker = function ProgressTracker(_ref) {
       render: render
     });
   });
-  var listInlineStyles = (_listInlineStyles = {
+  var listInlineStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)({
     gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
-  }, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
-  return (0, _react2.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: (0, _runtime.ax)(["_1e0c11p5 _1bsb1osq _19pkidpf _2hwx1wug _otyridpf _18u01wug _1yt4ze3t _zulp6odm _2mzuglyw _rxvc1jfw"])
   }, progressItems);
 };
 var _default = exports.default = ProgressTracker;

package/dist/es2019/internal/bar.compiled.css

@@ -0,0 +1,9 @@
+
+._v564d86a{transition:width var(--ds--pt--ts) var(--ds--pt--te)}._1e021ssb{inset-inline-start:50%}
+._1einu2gc{border-end-end-radius:var(--ds-space-100,8px)}
+._1lww1oqq{transition-delay:var(--ds--pt--td)}
+._4t3iu2gc{height:var(--ds-space-100,8px)}
+._5fbcu2gc{border-start-end-radius:var(--ds-space-100,8px)}
+._bfhkq17z{background-color:var(--ds-background-brand-bold,#0065ff)}
+._kqswstnw{position:absolute}
+._t9ecymk3{transform:translate(0,calc(var(--ds-space-250, 20px)*-1))}

package/dist/es2019/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';
-const 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, ${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 * ${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(${varTransitionSpeed}) var(${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(${varTransitionDelay})`
-});
+const spacing = {
+  comfortable: "var(--ds-space-500, 40px)",
+  cosy: "var(--ds-space-200, 16px)",
+  compact: "var(--ds-space-050, 4px)"
+};
+const progressBarStyles = null;
 
 /**
  * __Progress bar__
@@ -34,13 +19,11 @@ const progressBarStyles = css({
 const ProgressBar = ({
   percentageComplete,
   testId
-}) => jsx("div", {
+}) => /*#__PURE__*/React.createElement("div", {
   "data-testid": testId,
   style: {
-    width: `calc(${percentageComplete}% + ${percentageComplete / 100
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    } * calc(var(${varSpacing}, ${spacing.cosy}) + ${HALF_GRID_SIZE}))`
+    width: `calc(${percentageComplete}% + ${percentageComplete / 100} * calc(var(--ds--pt--sp, ${spacing.cosy}) + ${"var(--ds-space-050, 4px)"}))`
   },
-  css: progressBarStyles
+  className: ax(["_4t3iu2gc _kqswstnw _bfhkq17z _1einu2gc _5fbcu2gc _1e021ssb _t9ecymk3 _v564d86a _1lww1oqq"])
 });
 export default ProgressBar;

package/dist/es2019/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';
 const styles = {
-  root: "_4bfu18uv _1hmsglyw _ajmmnqa1 _syaz1fxt _11c81kw7 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+  anchor: "_4bfu18uv _1hmsglyw _ajmmnqa1 _syaz1fxt _11c81kw7 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
 };
 
 /**
@@ -17,7 +17,7 @@ const Link = ({
   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/es2019/internal/link.compiled.css

@@ -0,0 +1,2 @@
+._80omtlke{cursor:pointer}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/es2019/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';
-const linkStyles = css({
-  color: `var(--ds-text, ${N800})`,
-  cursor: 'pointer'
-});
+const linkStyles = null;
 
 /**
  * __Progress tracker link__
@@ -19,10 +13,10 @@ const Link = ({
   onClick,
   label,
   testId
-}) => jsx("a", {
-  css: linkStyles,
+}) => /*#__PURE__*/React.createElement("a", {
   href: href,
   onClick: onClick,
-  "data-testid": testId
+  "data-testid": testId,
+  className: ax(["_syaz1fxt _80omtlke"])
 }, label);
 export default Link;

package/dist/es2019/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}
+._t9ec157a{transform:translate(-50%,calc(var(--ds-space-250, 20px)*-1))}

package/dist/es2019/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';
-const 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(${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 * ${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(${varTransitionSpeed}) var(${varTransitionEasing}), background-color var(${varTransitionSpeed}) var(${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(${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(${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(${varBackgroundColor})`
-  }
-});
+import "./marker.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const progressMarkerStyles = null;
 
 /**
  * __Progress marker__
@@ -51,11 +12,8 @@ const progressMarkerStyles = css({
  */
 const ProgressMarker = ({
   testId
-}) =>
-// too many props that would go in UNSAFE_style + css transition prop having issues
-
-jsx("div", {
+}) => /*#__PURE__*/React.createElement("div", {
   "data-testid": testId,
-  css: progressMarkerStyles
+  className: ax(["_1bsbu2gc _4t3iu2gc _kqswstnw _bfhkr3ku _2rkou2gc _1e021ssb _t9ec157a _v5645rui _1lww1oqq _1uuw17dr _1ez2kb7n _1190pbrw _1ia8r3ku"])
 });
 export default ProgressMarker;

package/dist/es2019/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/es2019/internal/stage.js

@@ -1,45 +1,43 @@
-import _extends from "@babel/runtime/helpers/extends";
+/* stage.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./stage.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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';
-const listItemContentStyles = xcss({
-  width: '100%',
-  position: 'relative'
-});
-const listItemStyles = css({
-  margin: "var(--ds-space-0, 0px)",
-  overflowWrap: 'break-word'
-});
-const 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(${varTransitionSpeed}) cubic-bezier(0.2, 0, 0, 1)`
+const styles = {
+  listItemContent: "_1bsb1osq _kqswh2mm"
+};
+const textColor = {
+  unvisited: "_syaz131l",
+  current: "_syaz1e6v",
+  visited: "_syaz1fxt",
+  disabled: "_syaz1lh4"
+};
+const fontWeight = {
+  unvisited: "_k48pi7a9",
+  current: "_k48pmoej",
+  visited: "_k48pmoej",
+  disabled: "_k48pmoej"
+};
+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;
   }
-});
+};
+const listItemStyles = null;
+const titleStyles = null;
 export default class ProgressTrackerStage extends PureComponent {
   constructor(props) {
     super(props);
@@ -87,60 +85,51 @@ export default class ProgressTrackerStage extends PureComponent {
     } = this.props;
     const ariaCurrent = item.status === 'current' ? 'step' : 'false';
     const listInlineStyles = {
-      [varTransitionSpeed]: `${transitionSpeed}ms`,
-      [varTransitionDelay]: `${transitionDelay}ms`,
-      [varTransitionEasing]: transitionEasing,
-      [varMarkerColor]: this.state.oldMarkerColor,
-      [varBackgroundColor]: getMarkerColor(item.status),
+      ['--ds--pt--ts']: `${transitionSpeed}ms`,
+      ['--ds--pt--td']: `${transitionDelay}ms`,
+      ['--ds--pt--te']: transitionEasing,
+      ['--ds--pt--mc']: this.state.oldMarkerColor,
+      ['--ds--pt--bg']: getMarkerColor(item.status),
       listStyleType: 'none'
     };
-    return jsx("li", {
+    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 && `${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 && `${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 && `${testId}-title`
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId && `${testId}-title`,
+      className: ax(["_11c81oud _1pfhv47k _y3gn1h6o _v564ph28 _1uuw17dr _1ez2kb7n _1t9yph28", textColor[item.status], fontWeight[item.status]])
     }, this.shouldShowLink() ? render.link({
       item
     }) : item.label))));

package/dist/es2019/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/es2019/progress-tracker.js

@@ -1,31 +1,18 @@
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* progress-tracker.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./progress-tracker.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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';
-const 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(${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)"
-  }
-});
+const containerStyles = null;
+const spacingOptions = {
+  comfortable: "var(--ds-space-500, 40px)",
+  cosy: "var(--ds-space-200, 16px)",
+  compact: "var(--ds-space-050, 4px)"
+};
 /**
  * __Progress tracker__
  *
@@ -44,7 +31,7 @@ const ProgressTracker = ({
     }) =>
     // 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)
   },
   animated = true,
   testId,
@@ -70,9 +57,9 @@ const ProgressTracker = ({
   const progressItems = items.map((stage, index) => {
     let transitionSpeed = 0;
     let transitionDelay = 0;
-    const transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
+    const 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.
@@ -87,7 +74,7 @@ const ProgressTracker = ({
         stepsForward -= 1;
       }
     }
-    return jsx(Stage, {
+    return /*#__PURE__*/React.createElement(Stage, {
       transitionSpeed: transitionSpeed,
       transitionDelay: transitionDelay,
       transitionEasing: transitionEasing,
@@ -98,16 +85,16 @@ const ProgressTracker = ({
   });
   const listInlineStyles = {
     gridTemplateColumns: `repeat(${items.length}, 1fr)`,
-    [varSpacing]: spacingOptions[spacing],
+    ['--ds--pt--sp']: spacingOptions[spacing],
     maxWidth: 8 * 10 * items.length * 2
   };
-  return jsx("ul", {
+  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/esm/internal/bar.compiled.css

@@ -0,0 +1,9 @@
+
+._v564d86a{transition:width var(--ds--pt--ts) var(--ds--pt--te)}._1e021ssb{inset-inline-start:50%}
+._1einu2gc{border-end-end-radius:var(--ds-space-100,8px)}
+._1lww1oqq{transition-delay:var(--ds--pt--td)}
+._4t3iu2gc{height:var(--ds-space-100,8px)}
+._5fbcu2gc{border-start-end-radius:var(--ds-space-100,8px)}
+._bfhk1j1x{background-color:var(--_vcj3ew)}
+._kqswstnw{position:absolute}
+._t9ec5ihf{transform:var(--_22xnfg)}