@atlaskit/progress-tracker 8.0.4 → 8.1.0

package/dist/esm/internal/bar.js

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+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({
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: B300,
+  borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
+  borderTopRightRadius: PROGRESS_BAR_HEIGHT,
+  transform: "translate(0, -".concat(LABEL_TOP_SPACING, "px)"),
+  transition: "width var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
+  transitionDelay: "var(".concat(varTransitionDelay, ")")
+});
+/**
+ * __Progress bar__
+ *
+ * A progress bar describes the horizontal tracking bar that traverses each individual step.
+ *
+ */
+
+var ProgressBar = function ProgressBar(_ref) {
+  var percentageComplete = _ref.percentageComplete,
+      testId = _ref.testId;
+  return jsx("div", {
+    "data-testid": testId,
+    style: {
+      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(varSpacing, ", ").concat(spacing.cosy, "px) + ").concat(HALF_GRID_SIZE, "px))")
+    },
+    css: progressBarStyles
+  });
+};
+
+export default ProgressBar;

package/dist/esm/internal/constants.js

@@ -0,0 +1,16 @@
+import { defaultGridSize } from '../constants';
+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 SEMI_BOLD_FONT_WEIGHT = '600';
+export var REGULAR_FONT_WEIGHT = '400';
+export var HALF_GRID_SIZE = defaultGridSize / 2;
+export var PROGRESS_BAR_HEIGHT = defaultGridSize; // Labels sit 20px from bottom of progress bar.
+
+export var LABEL_TOP_SPACING = defaultGridSize + 20;

package/dist/esm/internal/link.js

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N800 } from '@atlaskit/theme/colors';
+var linkStyles = css({
+  color: N800,
+  cursor: 'pointer'
+});
+/**
+ * __Progress tracker link__
+ */
+
+var Link = function Link(_ref) {
+  var href = _ref.href,
+      onClick = _ref.onClick,
+      label = _ref.label,
+      testId = _ref.testId;
+  return jsx("a", {
+    css: linkStyles,
+    href: href,
+    onClick: onClick,
+    "data-testid": testId
+  }, label);
+};
+
+export default Link;

package/dist/esm/internal/marker.js

@@ -0,0 +1,43 @@
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+var progressMarkerStyles = css({
+  width: PROGRESS_BAR_HEIGHT,
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: "var(".concat(varBackgroundColor, ")"),
+  borderRadius: PROGRESS_BAR_HEIGHT,
+  transform: "translate(-50%, -".concat(LABEL_TOP_SPACING, "px)"),
+  transition: "opacity var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, "), background-color var(").concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
+  transitionDelay: "var(".concat(varTransitionDelay, ")"),
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1
+  },
+  '&.fade-enter': {
+    backgroundColor: "var(".concat(varMarkerColor, ")")
+  },
+  '&.fade-enter.fade-enter-active': {
+    backgroundColor: "var(".concat(varBackgroundColor, ")")
+  }
+});
+/**
+ * __Progress marker__
+ *
+ * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
+ */
+
+var ProgressMarker = function ProgressMarker(_ref) {
+  var testId = _ref.testId;
+  return jsx("div", {
+    "data-testid": testId,
+    css: progressMarkerStyles
+  });
+};
+
+export default ProgressMarker;

package/dist/esm/{ProgressTrackerStage/index.js → internal/stage.js}

@@ -1,9 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -13,61 +14,40 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React, { PureComponent } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import * as colors from '@atlaskit/theme/colors';
-import { ProgressTrackerListItem, ProgressTrackerStageBar, ProgressTrackerStageContainer, ProgressTrackerStageMarker, ProgressTrackerStageTitle } from './styled';
-var semibold = '600';
-var regular = '400';
-
-var getMarkerColor = function getMarkerColor(status) {
-  switch (status) {
-    case 'unvisited':
-      return colors.N70;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return colors.B300;
-
-    default:
-      return;
-  }
-};
-
-var getTextColor = function getTextColor(status) {
-  switch (status) {
-    case 'unvisited':
-      return colors.N300;
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 
-    case 'current':
-      return colors.B300;
-
-    case 'visited':
-      return colors.N800;
-
-    case 'disabled':
-      return colors.N70;
-
-    default:
-      return;
-  }
-};
-
-var getFontWeight = function getFontWeight(status) {
-  switch (status) {
-    case 'unvisited':
-      return regular;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return semibold;
-
-    default:
-      return;
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/core';
+import { CSSTransition } from 'react-transition-group';
+import { fontSize } from '@atlaskit/theme/constants';
+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 containerStyles = css({
+  width: '100%',
+  position: 'relative'
+});
+var listItemStyles = css({
+  margin: 0,
+  overflowWrap: 'break-word'
+});
+var titleStyles = css({
+  marginTop: LABEL_TOP_SPACING,
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  fontSize: fontSize(),
+  lineHeight: '16px',
+  textAlign: 'center',
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1,
+    transition: "opacity var(".concat(varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
-};
+});
 
 var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   _inherits(ProgressTrackerStage, _PureComponent);
@@ -80,6 +60,15 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     _classCallCheck(this, ProgressTrackerStage);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "onEntered", function () {
+      _this.setState({
+        transitioning: false,
+        oldMarkerColor: getMarkerColor(_this.props.item.status),
+        oldPercentageComplete: _this.props.item.percentageComplete
+      });
+    });
+
     _this.state = {
       transitioning: false,
       oldMarkerColor: getMarkerColor(_this.props.item.status),
@@ -110,61 +99,53 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _ref;
 
       var _this$props = this.props,
           item = _this$props.item,
           render = _this$props.render,
           transitionDelay = _this$props.transitionDelay,
           transitionSpeed = _this$props.transitionSpeed,
-          transitionEasing = _this$props.transitionEasing;
-
-      var onEntered = function onEntered() {
-        _this2.setState({
-          transitioning: false,
-          oldMarkerColor: getMarkerColor(item.status),
-          oldPercentageComplete: item.percentageComplete
-        });
-      };
-
+          transitionEasing = _this$props.transitionEasing,
+          testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
-      return /*#__PURE__*/React.createElement(ProgressTrackerListItem, {
+      return jsx("li", {
+        "data-testid": testId,
+        style: (_ref = {}, _defineProperty(_ref, varTransitionSpeed, "".concat(transitionSpeed, "ms")), _defineProperty(_ref, varTransitionDelay, "".concat(transitionDelay, "ms")), _defineProperty(_ref, varTransitionEasing, transitionEasing), _defineProperty(_ref, varMarkerColor, this.state.oldMarkerColor), _defineProperty(_ref, varBackgroundColor, getMarkerColor(item.status)), _ref),
+        css: listItemStyles,
         "aria-current": ariaCurrent
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageContainer, null, /*#__PURE__*/React.createElement(CSSTransition, {
+      }, jsx("div", {
+        css: containerStyles
+      }, jsx(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageMarker, {
-        oldMarkerColor: this.state.oldMarkerColor,
-        color: getMarkerColor(item.status),
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
-      })), /*#__PURE__*/React.createElement(CSSTransition, {
+      }, jsx(ProgressMarker, {
+        testId: testId && "".concat(testId, "-marker")
+      })), jsx(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageBar, {
-        oldPercentageComplete: this.state.oldPercentageComplete,
-        percentageComplete: item.percentageComplete,
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
-      })), /*#__PURE__*/React.createElement(CSSTransition, {
+      }, jsx(ProgressBar, {
+        testId: testId && "".concat(testId, "-bar"),
+        percentageComplete: item.percentageComplete
+      })), jsx(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageTitle, {
-        color: getTextColor(item.status),
-        fontweight: getFontWeight(item.status),
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay
+      }, jsx("div", {
+        css: titleStyles,
+        "data-testid": testId && "".concat(testId, "-title"),
+        style: {
+          color: getTextColor(item.status),
+          fontWeight: getFontWeight(item.status)
+        }
       }, this.shouldShowLink() ? render.link({
         item: item
       }) : item.label))));

package/dist/esm/internal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/internal/utils.js

@@ -0,0 +1,48 @@
+import { B300, N300, N70, N800 } from '@atlaskit/theme/colors';
+import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
+export var getMarkerColor = function getMarkerColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return N70;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return B300;
+
+    default:
+      return;
+  }
+};
+export var getTextColor = function getTextColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return N300;
+
+    case 'current':
+      return B300;
+
+    case 'visited':
+      return N800;
+
+    case 'disabled':
+      return N70;
+
+    default:
+      return;
+  }
+};
+export var getFontWeight = function getFontWeight(status) {
+  switch (status) {
+    case 'unvisited':
+      return REGULAR_FONT_WEIGHT;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return SEMI_BOLD_FONT_WEIGHT;
+
+    default:
+      return undefined;
+  }
+};

package/dist/esm/{ProgressTracker/index.js → progress-tracker.js}

@@ -14,16 +14,26 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React, { PureComponent } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { Grid } from '@atlaskit/page';
-import ProgressTrackerLink from '../ProgressTrackerLink';
-import ProgressTrackerStage from '../ProgressTrackerStage';
-import { ProgressTrackerContainer } from './styled';
-var TRANSITION_SPEED = 300;
-var LINEAR_TRANSITION_SPEED = 50;
-var easeOut = 'cubic-bezier(0.15,1,0.3,1)';
-var defaultLabel = 'Progress';
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/core';
+import { defaultGridSize, spacing } from './constants';
+import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
+import Link from './internal/link';
+import Stage from './internal/stage';
+var containerStyles = css({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: 0,
+  gap: "var(".concat(varSpacing, ")"),
+  listStyleType: 'none',
+  '&&': {
+    marginTop: 40
+  }
+});
 
 var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   _inherits(ProgressTracker, _PureComponent);
@@ -41,15 +51,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "createTheme", function () {
-      return {
-        spacing: _this.props.spacing,
-        columns: _this.props.items.length * 2
-      };
-    });
-
     _defineProperty(_assertThisInitialized(_this), "state", {
-      prevStages: _this.props.items.map(function (stage, index) {
+      prevStages: _this.props.items.map(function (stage) {
         return _objectSpread(_objectSpread({}, stage), {}, {
           percentageComplete: 0
         });
@@ -78,7 +81,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this3 = this,
+          _ref;
 
       var _this$props = this.props,
           testId = _this$props.testId,
@@ -97,38 +101,43 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
       var items = this.props.items.map(function (stage, index) {
         var transitionSpeed = 0;
         var transitionDelay = 0;
-        var transitionEasing = progressChanges > 1 ? 'linear' : easeOut;
+        var transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
 
         if (_this3.props.animated) {
           transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
 
           if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially in reverse */
+            /**
+             * load each transition sequentially in reverse
+             */
             transitionDelay = (stepsBack - 1) * transitionSpeed;
             stepsBack -= 1;
           } else if (stage.percentageComplete > _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially */
+            /**
+             * load each transition sequentially
+             */
             transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
             stepsForward -= 1;
           }
         }
 
-        return /*#__PURE__*/React.createElement(ProgressTrackerStage, {
-          key: stage.id,
-          item: stage,
-          render: _this3.props.render,
+        return jsx(Stage, {
           transitionSpeed: transitionSpeed,
           transitionDelay: transitionDelay,
-          transitionEasing: transitionEasing
+          transitionEasing: transitionEasing,
+          key: stage.id,
+          item: stage,
+          render: _this3.props.render
         });
       });
-      return /*#__PURE__*/React.createElement(ThemeProvider, {
-        theme: this.createTheme()
-      }, /*#__PURE__*/React.createElement(Grid, {
-        testId: testId
-      }, /*#__PURE__*/React.createElement(ProgressTrackerContainer, {
+      return jsx("ul", {
+        "data-testid": testId,
+        style: (_ref = {
+          gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+        }, _defineProperty(_ref, varSpacing, "".concat(spacing[this.props.spacing], "px")), _defineProperty(_ref, "maxWidth", defaultGridSize * 10 * items.length * 2), _ref),
+        css: containerStyles,
         "aria-label": label
-      }, items)));
+      }, items);
     }
   }]);
 
@@ -139,12 +148,13 @@ _defineProperty(ProgressTracker, "defaultProps", {
   items: [],
   spacing: 'cosy',
   render: {
-    link: function link(props) {
-      return /*#__PURE__*/React.createElement(ProgressTrackerLink, props);
+    link: function link(_ref2) {
+      var item = _ref2.item;
+      return jsx(Link, item);
     }
   },
   animated: true,
-  label: defaultLabel
+  label: 'Progress'
 });
 
 export { ProgressTracker as default };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.0.4",
+	"version": "8.1.0",
 	"sideEffects": false
 }

package/dist/types/constants.d.ts

@@ -1,3 +1,10 @@
 export declare const defaultGridSize: number;
-/** Ideally these are exported by @atlaskit/page */
-export declare const spacing: Record<string, number>;
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
+export declare const spacing: {
+    readonly comfortable: number;
+    readonly cosy: number;
+    readonly compact: number;
+};
+export declare type Spacing = keyof typeof spacing;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { default as ProgressTracker } from './ProgressTracker';
-export type { ProgressTrackerProps } from './ProgressTracker';
+export { default as ProgressTracker } from './progress-tracker';
+export type { ProgressTrackerProps } from './progress-tracker';
 export type { Stages, Stage } from './types';

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

@@ -0,0 +1,12 @@
+interface StageBarProps {
+    testId?: string;
+    percentageComplete: number;
+}
+/**
+ * __Progress bar__
+ *
+ * A progress bar describes the horizontal tracking bar that traverses each individual step.
+ *
+ */
+declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => JSX.Element;
+export default ProgressBar;

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

@@ -0,0 +1,14 @@
+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 SEMI_BOLD_FONT_WEIGHT = "600";
+export declare const REGULAR_FONT_WEIGHT = "400";
+export declare const HALF_GRID_SIZE: number;
+export declare const PROGRESS_BAR_HEIGHT: number;
+export declare const LABEL_TOP_SPACING: number;

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

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { Stage } from '../types';
+/**
+ * __Progress tracker link__
+ */
+declare const Link: FC<Stage & {
+    testId?: string;
+}>;
+export default Link;

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __Progress marker__
+ *
+ * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
+ */
+declare const ProgressMarker: FC<{
+    testId?: string;
+}>;
+export default ProgressMarker;

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

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import type { ProgressTrackerStageProps } from './types';
+interface State {
+    transitioning: boolean;
+    oldMarkerColor?: string;
+    oldPercentageComplete: number;
+}
+export type { ProgressTrackerStageProps };
+export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
+    constructor(props: ProgressTrackerStageProps);
+    UNSAFE_componentWillMount(): void;
+    UNSAFE_componentWillReceiveProps(): void;
+    shouldShowLink(): boolean;
+    onEntered: () => void;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,27 @@
+import type { ProgressTrackerStageRenderProp, Stage } from '../types';
+export interface ProgressTrackerStageProps {
+    /**
+     * stage data passed to each `ProgressTrackerStage` component
+     */
+    item: Stage;
+    /**
+     * render prop to specify how to render components
+     */
+    render: ProgressTrackerStageRenderProp;
+    /**
+     * An internal hook applied to key elements for automated testing
+     */
+    testId?: string;
+    /**
+     * delay before transitioning in ms
+     */
+    transitionDelay: number;
+    /**
+     * speed at which to transition in ms
+     */
+    transitionSpeed: number;
+    /**
+     * interface of easing for transition
+     */
+    transitionEasing: string;
+}

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

@@ -0,0 +1,4 @@
+import type { Status } from '../types';
+export declare const getMarkerColor: (status: Status) => "#0065FF" | "#A5ADBA" | undefined;
+export declare const getTextColor: (status: Status) => "#172B4D" | "#0065FF" | "#A5ADBA" | "#5E6C84" | undefined;
+export declare const getFontWeight: (status: Status) => "600" | "400" | undefined;