@atlaskit/progress-indicator 9.3.2 → 9.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/progress-indicator
 
+## 9.4.0
+
+### Minor Changes
+
+- [`c146611a18c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c146611a18c) - [ux] Migrate progress-indicator package to use spacing primitives to control spacing in both component and examples. Spacing values have been slightly updated depending on indicator size and spacing properties
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.3.2
 
 ### Patch Changes

package/dist/cjs/components/constants.js

@@ -3,19 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.varDotsSize = exports.varDotsMargin = exports.spacingDivision = exports.sizes = void 0;
+exports.varDotsSize = exports.varDotsMargin = exports.sizes = exports.progressIndicatorGapMap = void 0;
+var progressIndicatorGapMap = {
+  comfortable: {
+    small: ['scale.075', "var(--ds-space-075, 6px)"],
+    default: ['scale.100', "var(--ds-space-100, 8px)"],
+    large: ['scale.150', "var(--ds-space-150, 12px)"]
+  },
+  cozy: {
+    small: ['scale.050', "var(--ds-space-050, 4px)"],
+    default: ['scale.075', "var(--ds-space-075, 6px)"],
+    large: ['scale.100', "var(--ds-space-100, 8px)"]
+  },
+  compact: {
+    small: ['scale.025', "var(--ds-space-025, 2px)"],
+    default: ['scale.050', "var(--ds-space-050, 4px)"],
+    large: ['scale.075', "var(--ds-space-075, 6px)"]
+  }
+};
+exports.progressIndicatorGapMap = progressIndicatorGapMap;
 var sizes = {
   small: 4,
   default: 8,
   large: 12
 };
 exports.sizes = sizes;
-var spacingDivision = {
-  comfortable: 1,
-  cozy: 2,
-  compact: 4
-};
-exports.spacingDivision = spacingDivision;
 var varDotsSize = '--ds-dots-size';
 exports.varDotsSize = varDotsSize;
 var varDotsMargin = '--ds-dots-margin';

package/dist/cjs/components/indicator.js

@@ -15,6 +15,8 @@ var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
 var _constants = require("./constants");
 
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 var commonStyles = (0, _react.css)({
   width: "var(".concat(_constants.varDotsSize, ")"),
@@ -32,7 +34,6 @@ var commonStyles = (0, _react.css)({
   }
 });
 var buttonStyles = (0, _react.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   border: 0,
   cursor: 'pointer',

package/dist/cjs/components/progress-dots.js

@@ -11,6 +11,8 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
@@ -19,6 +21,10 @@ var _bindEventListener = require("bind-event-listener");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
+
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var _components = require("@atlaskit/theme/components");
@@ -35,12 +41,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.3.2";
-var containerStyles = (0, _react2.css)({
-  display: 'flex',
-  justifyContent: 'center',
-  gap: "var(".concat(_constants.varDotsMargin, ")")
-});
+var packageVersion = "9.4.0";
 /**
  * __ProgressDots__
  *
@@ -72,6 +73,11 @@ var ProgressDots = function ProgressDots(_ref) {
     packageName: packageName,
     packageVersion: packageVersion
   });
+
+  var _progressIndicatorGap = (0, _slicedToArray2.default)(_constants.progressIndicatorGapMap[gutter][size], 2),
+      inlineGapValue = _progressIndicatorGap[0],
+      rawGapValue = _progressIndicatorGap[1];
+
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -122,14 +128,16 @@ var ProgressDots = function ProgressDots(_ref) {
     });
   }, [onSelect, handleKeyDown]);
   var theme = (0, _components.useGlobalTheme)();
-  return (0, _react2.jsx)("div", {
-    "data-testid": testId,
-    css: containerStyles,
-    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, "".concat(_constants.sizes[size] / _constants.spacingDivision[gutter], "px")), _ref2),
+  return (0, _react2.jsx)(_box.default, {
+    UNSAFE_style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, rawGapValue), _ref2),
+    role: "tablist"
+  }, (0, _react2.jsx)(_inline.default, {
+    testId: testId,
     ref: function ref(r) {
       tablistRef.current = r;
     },
-    role: "tablist"
+    justifyContent: "center",
+    gap: inlineGapValue
   }, values.map(function (_, index) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
@@ -161,7 +169,7 @@ var ProgressDots = function ProgressDots(_ref) {
         backgroundColor: backgroundColor
       }
     });
-  }));
+  })));
 };
 
 var _default = ProgressDots;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.3.2",
+	"version": "9.4.0",
 	"sideEffects": false
 }

package/dist/es2019/components/constants.js

@@ -1,12 +1,24 @@
+export const progressIndicatorGapMap = {
+  comfortable: {
+    small: ['scale.075', "var(--ds-space-075, 6px)"],
+    default: ['scale.100', "var(--ds-space-100, 8px)"],
+    large: ['scale.150', "var(--ds-space-150, 12px)"]
+  },
+  cozy: {
+    small: ['scale.050', "var(--ds-space-050, 4px)"],
+    default: ['scale.075', "var(--ds-space-075, 6px)"],
+    large: ['scale.100', "var(--ds-space-100, 8px)"]
+  },
+  compact: {
+    small: ['scale.025', "var(--ds-space-025, 2px)"],
+    default: ['scale.050', "var(--ds-space-050, 4px)"],
+    large: ['scale.075', "var(--ds-space-075, 6px)"]
+  }
+};
 export const sizes = {
   small: 4,
   default: 8,
   large: 12
 };
-export const spacingDivision = {
-  comfortable: 1,
-  cozy: 2,
-  compact: 4
-};
 export const varDotsSize = '--ds-dots-size';
 export const varDotsMargin = '--ds-dots-margin';

package/dist/es2019/components/indicator.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
@@ -20,7 +22,6 @@ const commonStyles = css({
   }
 });
 const buttonStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   border: 0,
   cursor: 'pointer',

package/dist/es2019/components/progress-dots.js

@@ -1,20 +1,17 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
 import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBgColor } from './appearances';
-import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
+import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "9.3.2";
-const containerStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  gap: `var(${varDotsMargin})`
-});
+const packageVersion = "9.4.0";
 /**
  * __ProgressDots__
  *
@@ -42,6 +39,7 @@ const ProgressDots = ({
     packageName,
     packageVersion
   });
+  const [inlineGapValue, rawGapValue] = progressIndicatorGapMap[gutter][size];
   const handleKeyDown = useCallback(event => {
     const indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -92,17 +90,19 @@ const ProgressDots = ({
     });
   }, [onSelect, handleKeyDown]);
   const theme = useGlobalTheme();
-  return jsx("div", {
-    "data-testid": testId,
-    css: containerStyles,
-    style: {
+  return jsx(Box, {
+    UNSAFE_style: {
       [varDotsSize]: `${sizes[size]}px`,
-      [varDotsMargin]: `${sizes[size] / spacingDivision[gutter]}px`
+      [varDotsMargin]: rawGapValue
     },
+    role: "tablist"
+  }, jsx(Inline, {
+    testId: testId,
     ref: r => {
       tablistRef.current = r;
     },
-    role: "tablist"
+    justifyContent: "center",
+    gap: inlineGapValue
   }, values.map((_, index) => {
     const isSelected = selectedIndex === index;
     const tabId = `${ariaLabel}${index}`;
@@ -132,7 +132,7 @@ const ProgressDots = ({
         backgroundColor
       }
     });
-  }));
+  })));
 };
 
 export default ProgressDots;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.3.2",
+	"version": "9.4.0",
 	"sideEffects": false
 }

package/dist/esm/components/constants.js

@@ -1,12 +1,24 @@
+export var progressIndicatorGapMap = {
+  comfortable: {
+    small: ['scale.075', "var(--ds-space-075, 6px)"],
+    default: ['scale.100', "var(--ds-space-100, 8px)"],
+    large: ['scale.150', "var(--ds-space-150, 12px)"]
+  },
+  cozy: {
+    small: ['scale.050', "var(--ds-space-050, 4px)"],
+    default: ['scale.075', "var(--ds-space-075, 6px)"],
+    large: ['scale.100', "var(--ds-space-100, 8px)"]
+  },
+  compact: {
+    small: ['scale.025', "var(--ds-space-025, 2px)"],
+    default: ['scale.050', "var(--ds-space-050, 4px)"],
+    large: ['scale.075', "var(--ds-space-075, 6px)"]
+  }
+};
 export var sizes = {
   small: 4,
   default: 8,
   large: 12
 };
-export var spacingDivision = {
-  comfortable: 1,
-  cozy: 2,
-  compact: 4
-};
 export var varDotsSize = '--ds-dots-size';
 export var varDotsMargin = '--ds-dots-margin';

package/dist/esm/components/indicator.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
@@ -20,7 +22,6 @@ var commonStyles = css({
   }
 });
 var buttonStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   border: 0,
   cursor: 'pointer',

package/dist/esm/components/progress-dots.js

@@ -1,22 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
 import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBgColor } from './appearances';
-import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
+import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.3.2";
-var containerStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  gap: "var(".concat(varDotsMargin, ")")
-});
+var packageVersion = "9.4.0";
 /**
  * __ProgressDots__
  *
@@ -48,6 +46,11 @@ var ProgressDots = function ProgressDots(_ref) {
     packageName: packageName,
     packageVersion: packageVersion
   });
+
+  var _progressIndicatorGap = _slicedToArray(progressIndicatorGapMap[gutter][size], 2),
+      inlineGapValue = _progressIndicatorGap[0],
+      rawGapValue = _progressIndicatorGap[1];
+
   var handleKeyDown = useCallback(function (event) {
     var indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -98,14 +101,16 @@ var ProgressDots = function ProgressDots(_ref) {
     });
   }, [onSelect, handleKeyDown]);
   var theme = useGlobalTheme();
-  return jsx("div", {
-    "data-testid": testId,
-    css: containerStyles,
-    style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, "".concat(sizes[size] / spacingDivision[gutter], "px")), _ref2),
+  return jsx(Box, {
+    UNSAFE_style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, rawGapValue), _ref2),
+    role: "tablist"
+  }, jsx(Inline, {
+    testId: testId,
     ref: function ref(r) {
       tablistRef.current = r;
     },
-    role: "tablist"
+    justifyContent: "center",
+    gap: inlineGapValue
   }, values.map(function (_, index) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
@@ -137,7 +142,7 @@ var ProgressDots = function ProgressDots(_ref) {
         backgroundColor: backgroundColor
       }
     });
-  }));
+  })));
 };
 
 export default ProgressDots;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.3.2",
+	"version": "9.4.0",
 	"sideEffects": false
 }

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

@@ -1,12 +1,31 @@
+import type { UNSAFE_InlineProps } from '@atlaskit/ds-explorations';
+import { token } from '@atlaskit/tokens';
+declare type TokenValue = ReturnType<typeof token>;
+declare type ScaleValue = UNSAFE_InlineProps['gap'];
+declare type SpacingTuple = [ScaleValue, TokenValue];
+declare type SpacingPropsToTokensMap = {
+    comfortable: {
+        small: SpacingTuple;
+        default: SpacingTuple;
+        large: SpacingTuple;
+    };
+    cozy: {
+        small: SpacingTuple;
+        default: SpacingTuple;
+        large: SpacingTuple;
+    };
+    compact: {
+        small: SpacingTuple;
+        default: SpacingTuple;
+        large: SpacingTuple;
+    };
+};
+export declare const progressIndicatorGapMap: SpacingPropsToTokensMap;
 export declare const sizes: {
     small: number;
     default: number;
     large: number;
 };
-export declare const spacingDivision: {
-    comfortable: number;
-    cozy: number;
-    compact: number;
-};
 export declare const varDotsSize = "--ds-dots-size";
 export declare const varDotsMargin = "--ds-dots-margin";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.3.2",
+  "version": "9.4.0",
   "description": "A progress indicator shows the user where they are along the steps of 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": {
@@ -33,10 +25,11 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
+    "@atlaskit/ds-explorations": "^1.5.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/focus-ring": "^1.1.0",
+    "@atlaskit/focus-ring": "^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",
     "bind-event-listener": "^2.1.1"
@@ -45,7 +38,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
@@ -66,7 +59,10 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "lite-mode",
+        "primitives"
+      ],
       "design-system": "v1",
       "styling": [
         "static",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/progress-indicator".
+## API Report File for "@atlaskit/progress-indicator"
 
-> 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,24 +14,14 @@
 import { FC } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-declare type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
+// @public (undocumented)
+type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
 
-export declare interface ProgressDotsProps {
-  /**
-   * The color of the indicators
-   */
+// @public (undocumented)
+export interface ProgressDotsProps {
   appearance?: DotsAppearance;
-  /**
-   * The aria-controls text applied to each indicator, appended by the index
-   */
   ariaControls?: string;
-  /**
-   * The aria-label text applied to each indicator, appended by the index
-   */
   ariaLabel?: string;
-  /**
-   * Function called when an indicator is selected
-   */
   onSelect?: (
     eventData: {
       event: React.MouseEvent<HTMLButtonElement>;
@@ -35,38 +29,21 @@ export declare interface ProgressDotsProps {
     },
     analyticsEvent: UIAnalyticsEvent,
   ) => void;
-  /**
-   * Which indicator is currently selected
-   */
   selectedIndex: number;
-  /**
-   * Corresponds to the width & height of each indicator
-   */
   size?: Size;
-  /**
-   * How much of a gutter is desired between indicators
-   */
   spacing?: Spacing;
-  /**
-   * A hook for automated tests.
-   */
   testId?: string;
-  /**
-   * An array of values mapped over to create the indicators
-   */
   values: any[];
 }
 
-/**
- * __ProgressDots__
- *
- * A progress indicator shows the user where they are along the steps of a journey.
- */
-export declare const ProgressIndicator: FC<ProgressDotsProps>;
+// @public
+export const ProgressIndicator: FC<ProgressDotsProps>;
 
-declare type Size = 'small' | 'default' | 'large';
+// @public (undocumented)
+type Size = 'small' | 'default' | 'large';
 
-declare type Spacing = 'comfortable' | 'cozy' | 'compact';
+// @public (undocumented)
+type Spacing = 'comfortable' | 'cozy' | 'compact';
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/components/appearances.d.ts

@@ -1,2 +0,0 @@
-import type { DotsAppearance } from './types';
-export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-discovery)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-brand)">;

package/dist/types-ts4.0/components/constants.d.ts

@@ -1,12 +0,0 @@
-export declare const sizes: {
-    small: number;
-    default: number;
-    large: number;
-};
-export declare const spacingDivision: {
-    comfortable: number;
-    cozy: number;
-    compact: number;
-};
-export declare const varDotsSize = "--ds-dots-size";
-export declare const varDotsMargin = "--ds-dots-margin";

package/dist/types-ts4.0/components/indicator.d.ts

@@ -1,15 +0,0 @@
-/** @jsx jsx */
-import type { HTMLAttributes } from 'react';
-import { jsx } from '@emotion/react';
-/**
- * __Presentational indicator__
- *
- * A presentational indicator with no interactivity
- */
-export declare const PresentationalIndicator: (props: HTMLAttributes<HTMLDivElement>) => jsx.JSX.Element;
-/**
- * __Button indicator__
- *
- * An interactive indicator.
- */
-export declare const ButtonIndicator: (props: HTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;

package/dist/types-ts4.0/components/progress-dots.d.ts

@@ -1,10 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import type { ProgressDotsProps } from '../types';
-/**
- * __ProgressDots__
- *
- * A progress indicator shows the user where they are along the steps of a journey.
- */
-declare const ProgressDots: FC<ProgressDotsProps>;
-export default ProgressDots;

package/dist/types-ts4.0/components/types.d.ts

@@ -1,3 +0,0 @@
-export declare type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
-export declare type Spacing = 'comfortable' | 'cozy' | 'compact';
-export declare type Size = 'small' | 'default' | 'large';

package/dist/types-ts4.0/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ProgressIndicator } from './components/progress-dots';
-export type { ProgressDotsProps } from './types';

package/dist/types-ts4.0/types.d.ts

@@ -1,44 +0,0 @@
-/// <reference types="react" />
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { DotsAppearance, Size, Spacing } from './components/types';
-export interface ProgressDotsProps {
-    /**
-     * The color of the indicators
-     */
-    appearance?: DotsAppearance;
-    /**
-     * The aria-controls text applied to each indicator, appended by the index
-     */
-    ariaControls?: string;
-    /**
-     * The aria-label text applied to each indicator, appended by the index
-     */
-    ariaLabel?: string;
-    /**
-     * Function called when an indicator is selected
-     */
-    onSelect?: (eventData: {
-        event: React.MouseEvent<HTMLButtonElement>;
-        index: number;
-    }, analyticsEvent: UIAnalyticsEvent) => void;
-    /**
-     * Which indicator is currently selected
-     */
-    selectedIndex: number;
-    /**
-     * Corresponds to the width & height of each indicator
-     */
-    size?: Size;
-    /**
-     * How much of a gutter is desired between indicators
-     */
-    spacing?: Spacing;
-    /**
-     * A hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * An array of values mapped over to create the indicators
-     */
-    values: any[];
-}