@atlaskit/progress-tracker 8.11.1 → 9.0.0

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,3 +1,4 @@
+/* stage.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,50 +7,49 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 _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);
@@ -107,17 +107,17 @@ 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 = (_listInlineStyles = {}, _defineProperty(_listInlineStyles, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), _defineProperty(_listInlineStyles, '--ds--pt--td', "".concat(transitionDelay, "ms")), _defineProperty(_listInlineStyles, '--ds--pt--te', transitionEasing), _defineProperty(_listInlineStyles, '--ds--pt--mc', this.state.oldMarkerColor), _defineProperty(_listInlineStyles, '--ds--pt--bg', getMarkerColor(item.status)), _defineProperty(_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
-      }, 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, _extends({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
@@ -125,9 +125,9 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
         classNames: "fade"
       }, fg('platform_design_system_team_transition_group_r18') && {
         nodeRef: this.nodeRefMarker
-      }), jsx(ProgressMarker, {
+      }), /*#__PURE__*/React.createElement(ProgressMarker, {
         testId: testId && "".concat(testId, "-marker")
-      })), jsx(CSSTransition, _extends({
+      })), /*#__PURE__*/React.createElement(CSSTransition, _extends({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
@@ -135,10 +135,10 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
         classNames: "fade"
       }, fg('platform_design_system_team_transition_group_r18') && {
         nodeRef: this.nodeRefBar
-      }), jsx(ProgressBar, {
+      }), /*#__PURE__*/React.createElement(ProgressBar, {
         testId: testId && "".concat(testId, "-bar"),
         percentageComplete: item.percentageComplete
-      })), jsx(CSSTransition, _extends({
+      })), /*#__PURE__*/React.createElement(CSSTransition, _extends({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
@@ -146,15 +146,9 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
         classNames: "fade"
       }, fg('platform_design_system_team_transition_group_r18') && {
         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))));

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__
  *
@@ -51,7 +38,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 +76,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 +93,7 @@ var ProgressTracker = function ProgressTracker(_ref) {
         stepsForward -= 1;
       }
     }
-    return jsx(Stage, {
+    return /*#__PURE__*/React.createElement(Stage, {
       transitionSpeed: transitionSpeed,
       transitionDelay: transitionDelay,
       transitionEasing: transitionEasing,
@@ -117,14 +104,14 @@ var ProgressTracker = function ProgressTracker(_ref) {
   });
   var listInlineStyles = (_listInlineStyles = {
     gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
-  }, _defineProperty(_listInlineStyles, varSpacing, spacingOptions[spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
-  return jsx("ul", {
+  }, _defineProperty(_listInlineStyles, '--ds--pt--sp', spacingOptions[spacing]), _defineProperty(_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: 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;

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.11.1",
+	"version": "9.0.0",
 	"description": "A progress tracker displays the steps and progress through a journey.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
+		"@compiled/react": "^0.18.1",
 		"react-transition-group": "^4.4.1"
 	},
 	"peerDependencies": {
@@ -79,7 +79,6 @@
 		}
 	},
 	"af:exports": {
-		"./constants": "./src/constants.tsx",
 		"./types": "./src/types.tsx",
 		".": "./src/index.tsx"
 	},

package/constants/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@atlaskit/progress-tracker/constants",
-  "main": "../dist/cjs/constants.js",
-  "module": "../dist/esm/constants.js",
-  "module:es2019": "../dist/es2019/constants.js",
-  "sideEffects": [
-    "**/*.compiled.css"
-  ],
-  "types": "../dist/types/constants.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.4": {
-      "*": [
-        "../dist/types-ts4.5/constants.d.ts"
-      ]
-    }
-  }
-}

package/dist/cjs/constants.js

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

package/dist/cjs/internal/constants.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.varTransitionSpeed = exports.varTransitionEasing = exports.varTransitionDelay = exports.varSpacing = exports.varMarkerColor = exports.varBackgroundColor = exports.TRANSITION_SPEED = exports.PROGRESS_BAR_HEIGHT = exports.LINEAR_TRANSITION_SPEED = exports.LABEL_TOP_SPACING = exports.HALF_GRID_SIZE = exports.ANIMATION_EASE_OUT = void 0;
-var TRANSITION_SPEED = exports.TRANSITION_SPEED = 300;
-var LINEAR_TRANSITION_SPEED = exports.LINEAR_TRANSITION_SPEED = 50;
-var ANIMATION_EASE_OUT = exports.ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
-var varSpacing = exports.varSpacing = '--ds--pt--sp';
-var varTransitionSpeed = exports.varTransitionSpeed = '--ds--pt--ts';
-var varTransitionDelay = exports.varTransitionDelay = '--ds--pt--td';
-var varTransitionEasing = exports.varTransitionEasing = '--ds--pt--te';
-var varMarkerColor = exports.varMarkerColor = '--ds--pt--mc';
-var varBackgroundColor = exports.varBackgroundColor = '--ds--pt--bg';
-var HALF_GRID_SIZE = exports.HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
-var PROGRESS_BAR_HEIGHT = exports.PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
-
-// Labels sit 16px from bottom of progress bar
-// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
-var LABEL_TOP_SPACING = exports.LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";

package/dist/es2019/constants.js

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

package/dist/es2019/internal/constants.js

@@ -1,15 +0,0 @@
-export const TRANSITION_SPEED = 300;
-export const LINEAR_TRANSITION_SPEED = 50;
-export const ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
-export const varSpacing = '--ds--pt--sp';
-export const varTransitionSpeed = '--ds--pt--ts';
-export const varTransitionDelay = '--ds--pt--td';
-export const varTransitionEasing = '--ds--pt--te';
-export const varMarkerColor = '--ds--pt--mc';
-export const varBackgroundColor = '--ds--pt--bg';
-export const HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
-export const PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
-
-// Labels sit 16px from bottom of progress bar
-// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
-export const LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";

package/dist/esm/constants.js

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

package/dist/esm/internal/constants.js

@@ -1,15 +0,0 @@
-export var TRANSITION_SPEED = 300;
-export var LINEAR_TRANSITION_SPEED = 50;
-export var ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
-export var varSpacing = '--ds--pt--sp';
-export var varTransitionSpeed = '--ds--pt--ts';
-export var varTransitionDelay = '--ds--pt--td';
-export var varTransitionEasing = '--ds--pt--te';
-export var varMarkerColor = '--ds--pt--mc';
-export var varBackgroundColor = '--ds--pt--bg';
-export var HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
-export var PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
-
-// Labels sit 16px from bottom of progress bar
-// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
-export var LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";

package/dist/types/constants.d.ts

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

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

@@ -1,12 +0,0 @@
-export declare const TRANSITION_SPEED = 300;
-export declare const LINEAR_TRANSITION_SPEED = 50;
-export declare const ANIMATION_EASE_OUT = "cubic-bezier(0.15,1,0.3,1)";
-export declare const varSpacing = "--ds--pt--sp";
-export declare const varTransitionSpeed = "--ds--pt--ts";
-export declare const varTransitionDelay = "--ds--pt--td";
-export declare const varTransitionEasing = "--ds--pt--te";
-export declare const varMarkerColor = "--ds--pt--mc";
-export declare const varBackgroundColor = "--ds--pt--bg";
-export declare const HALF_GRID_SIZE: "var(--ds-space-050)";
-export declare const PROGRESS_BAR_HEIGHT: "var(--ds-space-100)";
-export declare const LABEL_TOP_SPACING: "var(--ds-space-250)";