@atlaskit/progress-tracker 8.11.1 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/progress-tracker
 
+## 9.0.0
+
+### Major Changes
+
+- [#171836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171836)
+  [`30eff06f3753e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/30eff06f3753e) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/progress-tracker`, you will need to ensure
+  that your bundler is configured to handle `.css` imports correctly. Most bundlers come with
+  built-in support for `.css` imports, so you may not need to do anything. If you are using a
+  different bundler, please refer to the documentation for that bundler to understand how to handle
+  `.css` imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 8.11.1
 
 ### Patch Changes

package/dist/cjs/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)}

package/dist/cjs/internal/bar.js

@@ -1,36 +1,23 @@
+/* bar.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./bar.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("../constants");
-var _constants2 = require("./constants");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var progressBarStyles = (0, _react.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: _constants2.PROGRESS_BAR_HEIGHT,
-  position: 'absolute',
-  backgroundColor: "var(--ds-background-brand-bold, ".concat(_colors.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: _constants2.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: _constants2.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(_constants2.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(_constants2.varTransitionSpeed, ") var(").concat(_constants2.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(_constants2.varTransitionDelay, ")")
-});
+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; }
+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__
@@ -41,14 +28,14 @@ var progressBarStyles = (0, _react.css)({
 var ProgressBar = function ProgressBar(_ref) {
   var percentageComplete = _ref.percentageComplete,
     testId = _ref.testId;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
+    className: (0, _runtime.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(_constants2.varSpacing, ", ").concat(_constants.spacing.cosy, ") + ").concat(_constants2.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": (0, _runtime.ix)("var(--ds-background-brand-bold, ".concat(_colors.B300, ")")),
+      "--_22xnfg": (0, _runtime.ix)("translate(0, calc(-1 * ".concat("var(--ds-space-250, 20px)", "))"))
+    }
   });
 };
 var _default = exports.default = ProgressBar;

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

@@ -9,9 +9,9 @@ exports.default = void 0;
 require("./link-new.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
+var _compiled = require("@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"
 };
 
 /**
@@ -22,8 +22,8 @@ var Link = function Link(_ref) {
     onClick = _ref.onClick,
     label = _ref.label,
     testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_anchor.default, {
-    xcss: styles.root
+  return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
+    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/cjs/internal/link.compiled.css

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

package/dist/cjs/internal/link.js

@@ -1,22 +1,18 @@
+/* link.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./link.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var linkStyles = (0, _react.css)({
-  color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  cursor: 'pointer'
-});
+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; }
+var linkStyles = null;
 
 /**
  * __Progress tracker link__
@@ -26,11 +22,14 @@ var Link = function Link(_ref) {
     onClick = _ref.onClick,
     label = _ref.label,
     testId = _ref.testId;
-  return (0, _react.jsx)("a", {
-    css: linkStyles,
+  return /*#__PURE__*/React.createElement("a", {
     href: href,
     onClick: onClick,
-    "data-testid": testId
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_syaz1o8f _80omtlke"]),
+    style: {
+      "--_ggxzyp": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N800, ")"))
+    }
   }, label);
 };
 var _default = exports.default = Link;

package/dist/cjs/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/cjs/internal/marker.js

@@ -1,55 +1,18 @@
+/* marker.tsx generated by @compiled/babel-plugin v0.32.2 */
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
-var _constants = require("./constants");
-/* 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 progressMarkerStyles = (0, _react.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: _constants.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: _constants.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(_constants.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: _constants.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(_constants.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(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, "), background-color var(").concat(_constants.varTransitionSpeed, ") var(").concat(_constants.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(_constants.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(_constants.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(_constants.varBackgroundColor, ")")
-  }
-});
+require("./marker.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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; }
+var progressMarkerStyles = null;
 
 /**
  * __Progress marker__
@@ -58,13 +21,12 @@ var progressMarkerStyles = (0, _react.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
-
-    (0, _react.jsx)("div", {
-      "data-testid": testId,
-      css: progressMarkerStyles
-    })
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_1bsbu2gc _4t3iu2gc _kqswstnw _bfhkr3ku _2rkou2gc _1e021ssb _t9ec17h2 _v5645rui _1lww1oqq _1uuw17dr _1ez2kb7n _1190pbrw _1ia8r3ku"]),
+    style: {
+      "--_nsjg4d": (0, _runtime.ix)("translate(-50%, calc(-1 * ".concat("var(--ds-space-250, 20px)", "))"))
+    }
+  });
 };
 var _default = exports.default = ProgressMarker;

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

@@ -1,10 +1,16 @@
+/* stage.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("./stage.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -13,46 +19,47 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _colors = require("@atlaskit/theme/colors");
 var _bar = _interopRequireDefault(require("./bar"));
-var _constants = require("./constants");
 var _marker = _interopRequireDefault(require("./marker"));
-var _utils = require("./utils");
+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; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, 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
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var listItemContentStyles = (0, _primitives.xcss)({
-  width: '100%',
-  position: 'relative'
-});
-var listItemStyles = (0, _react2.css)({
-  margin: "var(--ds-space-0, 0px)",
-  overflowWrap: 'break-word'
-});
-var titleStyles = (0, _react2.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: _constants.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(_constants.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+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(_colors.N70, ")");
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
+    default:
+      return;
   }
-});
+};
+var listItemStyles = null;
+var titleStyles = null;
 var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
   var _super = _createSuper(ProgressTrackerStage);
@@ -66,13 +73,13 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEntered", function () {
       _this.setState({
         transitioning: false,
-        oldMarkerColor: (0, _utils.getMarkerColor)(_this.props.item.status),
+        oldMarkerColor: getMarkerColor(_this.props.item.status),
         oldPercentageComplete: _this.props.item.percentageComplete
       });
     });
     _this.state = {
       transitioning: false,
-      oldMarkerColor: (0, _utils.getMarkerColor)(_this.props.item.status),
+      oldMarkerColor: getMarkerColor(_this.props.item.status),
       oldPercentageComplete: 0
     };
     return _this;
@@ -110,17 +117,17 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         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)), (0, _defineProperty2.default)(_listInlineStyles, "listStyleType", 'none'), _listInlineStyles);
-      return (0, _react2.jsx)("li", {
+      var listInlineStyles = (_listInlineStyles = {}, (0, _defineProperty2.default)(_listInlineStyles, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), (0, _defineProperty2.default)(_listInlineStyles, '--ds--pt--td', "".concat(transitionDelay, "ms")), (0, _defineProperty2.default)(_listInlineStyles, '--ds--pt--te', transitionEasing), (0, _defineProperty2.default)(_listInlineStyles, '--ds--pt--mc', this.state.oldMarkerColor), (0, _defineProperty2.default)(_listInlineStyles, '--ds--pt--bg', getMarkerColor(item.status)), (0, _defineProperty2.default)(_listInlineStyles, "listStyleType", 'none'), _listInlineStyles);
+      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
-      }, (0, _react2.jsx)(_primitives.Box, {
-        xcss: listItemContentStyles
-      }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
+        "aria-current": ariaCurrent,
+        className: (0, _runtime.ax)(["_18s8ze3t _1i4q1hna"])
+      }, /*#__PURE__*/React.createElement(_compiled.Box, {
+        xcss: styles.listItemContent
+      }, /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
@@ -128,9 +135,9 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         classNames: "fade"
       }, (0, _platformFeatureFlags.fg)('platform_design_system_team_transition_group_r18') && {
         nodeRef: this.nodeRefMarker
-      }), (0, _react2.jsx)(_marker.default, {
+      }), /*#__PURE__*/React.createElement(_marker.default, {
         testId: testId && "".concat(testId, "-marker")
-      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
+      })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
@@ -138,10 +145,10 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         classNames: "fade"
       }, (0, _platformFeatureFlags.fg)('platform_design_system_team_transition_group_r18') && {
         nodeRef: this.nodeRefBar
-      }), (0, _react2.jsx)(_bar.default, {
+      }), /*#__PURE__*/React.createElement(_bar.default, {
         testId: testId && "".concat(testId, "-bar"),
         percentageComplete: item.percentageComplete
-      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
+      })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
@@ -149,15 +156,9 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         classNames: "fade"
       }, (0, _platformFeatureFlags.fg)('platform_design_system_team_transition_group_r18') && {
         nodeRef: this.nodeRefTitle
-      }), (0, _react2.jsx)("div", {
-        css: titleStyles,
-        style: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          color: (0, _utils.getTextColor)(item.status),
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          fontWeight: (0, _utils.getFontWeight)(item.status)
-        },
-        "data-testid": testId && "".concat(testId, "-title")
+      }), /*#__PURE__*/React.createElement("div", {
+        "data-testid": testId && "".concat(testId, "-title"),
+        className: (0, _runtime.ax)(["_11c81oud _1pfhv47k _y3gn1h6o _v564ph28 _1uuw17dr _1ez2kb7n _1t9yph28", textColor[item.status], fontWeight[item.status]])
       }, this.shouldShowLink() ? render.link({
         item: item
       }) : item.label))));

package/dist/cjs/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/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__
  *
@@ -54,7 +48,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 +86,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 +103,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,
@@ -120,14 +114,14 @@ var ProgressTracker = function ProgressTracker(_ref) {
   });
   var listInlineStyles = (_listInlineStyles = {
     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", {
+  }, (0, _defineProperty2.default)(_listInlineStyles, '--ds--pt--sp', spacingOptions[spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
+  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))}