@atlaskit/progress-tracker 8.11.0 → 9.0.0

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,45 @@
+/* stage.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
 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,23 +87,23 @@ 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, _extends({
       appear: true,
       in: this.state.transitioning,
       onEntered: this.onEntered,
@@ -111,9 +111,9 @@ export default class ProgressTrackerStage extends PureComponent {
       classNames: "fade"
     }, fg('platform_design_system_team_transition_group_r18') && {
       nodeRef: this.nodeRefMarker
-    }), jsx(ProgressMarker, {
+    }), /*#__PURE__*/React.createElement(ProgressMarker, {
       testId: testId && `${testId}-marker`
-    })), jsx(CSSTransition, _extends({
+    })), /*#__PURE__*/React.createElement(CSSTransition, _extends({
       appear: true,
       in: this.state.transitioning,
       onEntered: this.onEntered,
@@ -121,10 +121,10 @@ export default class ProgressTrackerStage extends PureComponent {
       classNames: "fade"
     }, fg('platform_design_system_team_transition_group_r18') && {
       nodeRef: this.nodeRefBar
-    }), jsx(ProgressBar, {
+    }), /*#__PURE__*/React.createElement(ProgressBar, {
       testId: testId && `${testId}-bar`,
       percentageComplete: item.percentageComplete
-    })), jsx(CSSTransition, _extends({
+    })), /*#__PURE__*/React.createElement(CSSTransition, _extends({
       appear: true,
       in: this.state.transitioning,
       onEntered: this.onEntered,
@@ -132,15 +132,9 @@ export default class ProgressTrackerStage extends 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 && `${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)}

package/dist/esm/internal/bar.js

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

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

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

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

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

package/dist/esm/internal/link.js

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

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

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