@atlaskit/progress-tracker 8.3.3 → 8.4.0

package/dist/es2019/progress-tracker.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
-import { defaultGridSize, spacing } from './constants';
+import { 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';
@@ -14,13 +14,11 @@ const containerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: `var(${varSpacing})`,
   listStyleType: 'none',
   '&&': {
-    // TODO Delete this comment after verifying spacing token -> previous value `40`
     marginTop: "var(--ds-scale-500, 40px)"
   }
 });
@@ -87,16 +85,19 @@ export default class ProgressTracker extends PureComponent {
         render: this.props.render
       });
     });
-    return jsx("ul", {
-      "data-testid": testId,
-      style: {
-        gridTemplateColumns: `repeat(${items.length}, 1fr)`,
-        [varSpacing]: `${spacing[this.props.spacing]}px`,
-        maxWidth: defaultGridSize * 10 * items.length * 2
-      },
-      css: containerStyles,
-      "aria-label": label
-    }, items);
+    const listInlineStyles = {
+      gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+      [varSpacing]: spacing[this.props.spacing],
+      maxWidth: 8 * 10 * items.length * 2
+    };
+    return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      jsx("ul", {
+        "data-testid": testId,
+        style: listInlineStyles,
+        css: containerStyles,
+        "aria-label": label
+      }, items)
+    );
   }
 
 }

package/dist/es2019/version.json

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

package/dist/esm/constants.js

@@ -1,11 +1,8 @@
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-export var defaultGridSize = getGridSize();
 /**
  * Ideally these are exported by @atlaskit/page
  */
-
 export var spacing = {
-  comfortable: defaultGridSize * 5,
-  cosy: defaultGridSize * 2,
-  compact: defaultGridSize / 2
+  comfortable: "var(--ds-scale-500, 40px)",
+  cosy: "var(--ds-scale-200, 16px)",
+  compact: "var(--ds-scale-050, 4px)"
 };

package/dist/esm/internal/bar.js

@@ -10,7 +10,7 @@ var progressBarStyles = css({
   backgroundColor: "var(--ds-background-brand-bold, ".concat(B300, ")"),
   borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
   borderTopRightRadius: PROGRESS_BAR_HEIGHT,
-  transform: "translate(0, -".concat(LABEL_TOP_SPACING, "px)"),
+  transform: "translate(0, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
   transition: "width var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
   transitionDelay: "var(".concat(varTransitionDelay, ")")
 });
@@ -24,13 +24,15 @@ var progressBarStyles = css({
 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
-  });
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", {
+      "data-testid": testId,
+      style: {
+        width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(varSpacing, ", ").concat(spacing.cosy, ") + ").concat(HALF_GRID_SIZE, "))")
+      },
+      css: progressBarStyles
+    })
+  );
 };
 
 export default ProgressBar;

package/dist/esm/internal/constants.js

@@ -1,4 +1,3 @@
-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)';
@@ -10,7 +9,7 @@ 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 HALF_GRID_SIZE = "var(--ds-scale-050, 4px)";
+export var PROGRESS_BAR_HEIGHT = "var(--ds-scale-100, 8px)"; // Labels sit 16px from bottom of progress bar i.e. 8 + 16
 
-export var LABEL_TOP_SPACING = defaultGridSize + 20;
+export var LABEL_TOP_SPACING = "var(--ds-scale-300, 24px)";

package/dist/esm/internal/link.js

@@ -14,12 +14,14 @@ var Link = function Link(_ref) {
       onClick = _ref.onClick,
       label = _ref.label,
       testId = _ref.testId;
-  return jsx("a", {
-    css: linkStyles,
-    href: href,
-    onClick: onClick,
-    "data-testid": testId
-  }, label);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("a", {
+      css: linkStyles,
+      href: href,
+      onClick: onClick,
+      "data-testid": testId
+    }, label)
+  );
 };
 
 export default Link;

package/dist/esm/internal/marker.js

@@ -10,7 +10,7 @@ var progressMarkerStyles = css({
   left: '50%',
   backgroundColor: "var(".concat(varBackgroundColor, ")"),
   borderRadius: PROGRESS_BAR_HEIGHT,
-  transform: "translate(-50%, -".concat(LABEL_TOP_SPACING, "px)"),
+  transform: "translate(-50%, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
   transition: "opacity var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, "), background-color var(").concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
   transitionDelay: "var(".concat(varTransitionDelay, ")"),
   '&.fade-appear': {
@@ -34,10 +34,13 @@ var progressMarkerStyles = css({
 
 var ProgressMarker = function ProgressMarker(_ref) {
   var testId = _ref.testId;
-  return jsx("div", {
-    "data-testid": testId,
-    css: progressMarkerStyles
-  });
+  return (// too many props that would go in UNSAFE_style + css transition prop having issues
+    // eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", {
+      "data-testid": testId,
+      css: progressMarkerStyles
+    })
+  );
 };
 
 export default ProgressMarker;

package/dist/esm/internal/stage.js

@@ -20,27 +20,20 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
-import { fontSize } from '@atlaskit/theme/constants';
+import Box from '@atlaskit/ds-explorations/box';
+import Text from '@atlaskit/ds-explorations/text';
 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({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   margin: "var(--ds-scale-0, 0px)",
   overflowWrap: 'break-word'
 });
 var titleStyles = css({
-  marginTop: LABEL_TOP_SPACING,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  marginRight: 'auto',
+  marginTop: LABEL_TOP_SPACING,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  marginLeft: 'auto',
-  fontSize: fontSize(),
   lineHeight: '16px',
   textAlign: 'center',
   '&.fade-appear': {
@@ -102,7 +95,7 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _ref;
+      var _listInlineStyles;
 
       var _this$props = this.props,
           item = _this$props.item,
@@ -112,46 +105,53 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
           transitionEasing = _this$props.transitionEasing,
           testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
-      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
-      }, jsx("div", {
-        css: containerStyles
-      }, jsx(CSSTransition, {
-        appear: true,
-        in: this.state.transitioning,
-        onEntered: this.onEntered,
-        timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, jsx(ProgressMarker, {
-        testId: testId && "".concat(testId, "-marker")
-      })), jsx(CSSTransition, {
-        appear: true,
-        in: this.state.transitioning,
-        onEntered: this.onEntered,
-        timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, jsx(ProgressBar, {
-        testId: testId && "".concat(testId, "-bar"),
-        percentageComplete: item.percentageComplete
-      })), jsx(CSSTransition, {
-        appear: true,
-        in: this.state.transitioning,
-        onEntered: this.onEntered,
-        timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, jsx("div", {
-        css: titleStyles,
-        "data-testid": testId && "".concat(testId, "-title"),
-        style: {
+      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)), _listInlineStyles);
+      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+        jsx("li", {
+          "data-testid": testId,
+          style: listInlineStyles,
+          css: listItemStyles,
+          "aria-current": ariaCurrent
+        }, jsx(Box, {
+          display: "block",
+          UNSAFE_style: {
+            width: '100%'
+          }
+        }, jsx(CSSTransition, {
+          appear: true,
+          in: this.state.transitioning,
+          onEntered: this.onEntered,
+          timeout: transitionDelay + transitionSpeed,
+          classNames: "fade"
+        }, jsx(ProgressMarker, {
+          testId: testId && "".concat(testId, "-marker")
+        })), jsx(CSSTransition, {
+          appear: true,
+          in: this.state.transitioning,
+          onEntered: this.onEntered,
+          timeout: transitionDelay + transitionSpeed,
+          classNames: "fade"
+        }, jsx(ProgressBar, {
+          testId: testId && "".concat(testId, "-bar"),
+          percentageComplete: item.percentageComplete
+        })), jsx(CSSTransition, {
+          appear: true,
+          in: this.state.transitioning,
+          onEntered: this.onEntered,
+          timeout: transitionDelay + transitionSpeed,
+          classNames: "fade"
+        }, jsx("div", {
+          css: titleStyles
+        }, jsx(Text, {
+          fontSize: "14px",
+          lineHeight: "16px",
+          testId: testId && "".concat(testId, "-title"),
           color: getTextColor(item.status),
           fontWeight: getFontWeight(item.status)
-        }
-      }, this.shouldShowLink() ? render.link({
-        item: item
-      }) : item.label))));
+        }, this.shouldShowLink() ? render.link({
+          item: item
+        }) : item.label)))))
+      );
     }
   }]);
 

package/dist/esm/internal/utils.js

@@ -1,4 +1,4 @@
-import { B300, N300, N70, N800 } from '@atlaskit/theme/colors';
+import { B300, N70 } from '@atlaskit/theme/colors';
 import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
 export var getMarkerColor = function getMarkerColor(status) {
   switch (status) {
@@ -17,16 +17,16 @@ export var getMarkerColor = function getMarkerColor(status) {
 export var getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
-      return "var(--ds-text-subtlest, ".concat(N300, ")");
+      return 'subtlest';
 
     case 'current':
-      return "var(--ds-text-brand, ".concat(B300, ")");
+      return 'brand';
 
     case 'visited':
-      return "var(--ds-text, ".concat(N800, ")");
+      return 'color.text';
 
     case 'disabled':
-      return "var(--ds-text-disabled, ".concat(N70, ")");
+      return 'disabled';
 
     default:
       return;

package/dist/esm/progress-tracker.js

@@ -19,7 +19,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
-import { defaultGridSize, spacing } from './constants';
+import { 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';
@@ -28,13 +28,11 @@ var containerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: "var(".concat(varSpacing, ")"),
   listStyleType: 'none',
   '&&': {
-    // TODO Delete this comment after verifying spacing token -> previous value `40`
     marginTop: "var(--ds-scale-500, 40px)"
   }
 });
@@ -86,7 +84,7 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this3 = this,
-          _ref;
+          _listInlineStyles;
 
       var _this$props = this.props,
           testId = _this$props.testId,
@@ -134,14 +132,17 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
           render: _this3.props.render
         });
       });
-      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);
+      var listInlineStyles = (_listInlineStyles = {
+        gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+      }, _defineProperty(_listInlineStyles, varSpacing, spacing[this.props.spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
+      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+        jsx("ul", {
+          "data-testid": testId,
+          style: listInlineStyles,
+          css: containerStyles,
+          "aria-label": label
+        }, items)
+      );
     }
   }]);
 
@@ -152,8 +153,8 @@ _defineProperty(ProgressTracker, "defaultProps", {
   items: [],
   spacing: 'cosy',
   render: {
-    link: function link(_ref2) {
-      var item = _ref2.item;
+    link: function link(_ref) {
+      var item = _ref.item;
       return jsx(Link, item);
     }
   },

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

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

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 interface StageBarProps {
     testId?: string;

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

@@ -9,6 +9,6 @@ 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;
+export declare const HALF_GRID_SIZE: "var(--ds-scale-050)";
+export declare const PROGRESS_BAR_HEIGHT: "var(--ds-scale-100)";
+export declare const LABEL_TOP_SPACING: "var(--ds-scale-300)";

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

@@ -1,4 +1,5 @@
+import { TextColor } from '@atlaskit/ds-explorations/text';
 import type { Status } from '../types';
 export declare const getMarkerColor: (status: Status) => "var(--ds-icon-subtle)" | "var(--ds-icon-brand)" | undefined;
-export declare const getTextColor: (status: Status) => "var(--ds-text)" | "var(--ds-text-subtlest)" | "var(--ds-text-brand)" | "var(--ds-text-disabled)" | undefined;
+export declare const getTextColor: (status: Status) => TextColor | undefined;
 export declare const getFontWeight: (status: Status) => "600" | "400" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-tracker",
-  "version": "8.3.3",
+  "version": "8.4.0",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -32,8 +24,9 @@
     }
   },
   "dependencies": {
+    "@atlaskit/ds-explorations": "^1.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-transition-group": "^4.4.1"
@@ -42,7 +35,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/icon": "^21.11.0",
@@ -71,7 +64,8 @@
         "emotion"
       ],
       "analytics": "analytics-next",
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "ui-components": "primitives"
     }
   },
   "af:exports": {

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/progress-tracker".
+## API Report File for "@atlaskit/progress-tracker"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -10,14 +14,18 @@
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 
-declare interface LinkComponentProps {
+// @public (undocumented)
+interface LinkComponentProps {
+  // (undocumented)
   item: Stage;
 }
 
-export declare class ProgressTracker extends PureComponent<
+// @public (undocumented)
+export class ProgressTracker extends PureComponent<
   ProgressTrackerProps,
   State
 > {
+  // (undocumented)
   static defaultProps: {
     items: never[];
     spacing: string;
@@ -27,6 +35,9 @@ export declare class ProgressTracker extends PureComponent<
     animated: boolean;
     label: string;
   };
+  // (undocumented)
+  render(): jsx.JSX.Element;
+  // (undocumented)
   state: {
     prevStages: {
       percentageComplete: number;
@@ -38,69 +49,65 @@ export declare class ProgressTracker extends PureComponent<
       onClick?: (() => void) | undefined;
     }[];
   };
+  // (undocumented)
   UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
-  render(): jsx.JSX.Element;
 }
 
-export declare interface ProgressTrackerProps {
-  /**
-   * Ordered list of stage data
-   */
+// @public (undocumented)
+export interface ProgressTrackerProps {
+  animated: boolean;
   items: Stages;
-  /**
-   * Margin spacing type between steps
-   */
-  spacing: Spacing;
-  /**
-   * Render prop to specify custom implementations of components
-   */
+  label?: string;
   render: ProgressTrackerStageRenderProp;
-  /**
-   * Turns off transition animations if set to false
-   */
-  animated: boolean;
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-   */
+  spacing: Spacing;
   testId?: string;
-  /**
-   * Text to be used as an aria-label of progress tracker
-   */
-  label?: string;
 }
 
-declare interface ProgressTrackerStageRenderProp {
+// @public (undocumented)
+interface ProgressTrackerStageRenderProp {
+  // (undocumented)
   link: (props: LinkComponentProps) => JSX.Element;
 }
 
-declare type Spacing = keyof typeof spacing;
+// @public (undocumented)
+type Spacing = keyof typeof spacing;
 
-/**
- * Ideally these are exported by @atlaskit/page
- */
-declare const spacing: {
+// @public
+const spacing: {
   readonly comfortable: number;
   readonly cosy: number;
   readonly compact: number;
 };
 
-export declare interface Stage {
+// @public (undocumented)
+export interface Stage {
+  // (undocumented)
+  href?: string;
+  // (undocumented)
   id: string;
+  // (undocumented)
   label: string;
-  percentageComplete: number;
-  status: Status;
+  // (undocumented)
   noLink?: boolean;
-  href?: string;
+  // (undocumented)
   onClick?: () => void;
+  // (undocumented)
+  percentageComplete: number;
+  // (undocumented)
+  status: Status;
 }
 
-export declare type Stages = Stage[];
+// @public (undocumented)
+export type Stages = Stage[];
 
-declare interface State {
+// @public (undocumented)
+interface State {
+  // (undocumented)
   prevStages: Stages;
 }
 
-declare type Status = 'unvisited' | 'visited' | 'current' | 'disabled';
+// @public (undocumented)
+type Status = 'unvisited' | 'visited' | 'current' | 'disabled';
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```