@atlaskit/progress-indicator 11.0.7 → 11.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/progress-indicator
 
+## 11.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.0
+
+### Minor Changes
+
+- [#98760](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98760)
+  [`4ed94e5c74659`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ed94e5c74659) -
+  Compiled migration for progress indicator
+
 ## 11.0.7
 
 ### Patch Changes

package/dist/cjs/components/indicator.compiled.css

@@ -0,0 +1,18 @@
+
+._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
+._19itt9ly{border:var(--ds-border-width,1px) solid var(--ds-border-bold,#758195)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}._12ji1r31{outline-color:currentColor}
+._12y3idpf{outline-width:0}
+._1bsbg7kr{width:var(--ds-dots-size)}
+._1cs8stnw:before{position:absolute}
+._1kt9b3bt:before{content:""}
+._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
+._1qu2glyw{outline-style:none}
+._4t3ig7kr{height:var(--ds-dots-size)}
+._80omtlke{cursor:pointer}
+._cfu11ule:before{display:block}
+._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
+._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
+._kqswh2mm{position:relative}
+._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}

package/dist/cjs/components/indicator.js

@@ -1,78 +1,49 @@
+/* indicator.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PresentationalIndicator = exports.ButtonIndicator = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+require("./indicator.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _react2 = require("@compiled/react");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var _constants = require("./constants");
-// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
-var colorMap = {
-  default: (0, _primitives.xcss)({
-    backgroundColor: 'elevation.surface',
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
-  }),
-  help: (0, _primitives.xcss)({
-    backgroundColor: 'elevation.surface',
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
-  }),
-  inverted: (0, _primitives.xcss)({
-    // @ts-ignore
-    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-inverse, #FFFFFF)")
-  }),
-  primary: (0, _primitives.xcss)({
-    backgroundColor: 'elevation.surface',
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
-  })
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var commonStyles = {
+  common: "_2rko14q2 _1bsbg7kr _4t3ig7kr _kqswh2mm _cfu11ule _1mp41th6 _kfgt1th6 _1cs8stnw _1kt9b3bt _iajm1yh4 _z5wt1yh4"
 };
-var selectedColorMap = {
-  default: (0, _primitives.xcss)({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon, #44546F)"
-  }),
-  help: (0, _primitives.xcss)({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-discovery, #8270DB)"
-  }),
-  inverted: (0, _primitives.xcss)({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
-  }),
-  primary: (0, _primitives.xcss)({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-brand, #0C66E4)"
-  })
+var colorBorderMap = {
+  default: "_19itt9ly",
+  help: "_19itt9ly",
+  inverted: "_19it1ps9",
+  primary: "_19itt9ly"
 };
-var commonStyles = (0, _primitives.xcss)({
-  // 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: "var(".concat(_constants.varDotsSize, ")"),
-  // 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: "var(".concat(_constants.varDotsSize, ")"),
-  position: 'relative',
-  borderRadius: 'border.radius.circle',
-  '::before': {
-    display: 'block',
-    // 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: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
-    // 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: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
-    position: 'absolute',
-    content: '""',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    insetBlockStart: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    insetInlineStart: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)")
+var buttonStyle = {
+  root: "_1yt4ze3t _12ji1r31 _1qu2glyw _12y3idpf _80omtlke"
+};
+var backgroundColor = function backgroundColor(isSelected) {
+  if (!isSelected) {
+    return {
+      default: "var(--ds-surface, #FFFFFF)",
+      help: "var(--ds-surface, #FFFFFF)",
+      inverted: "var(--ds-background-neutral-subtle, #00000000)",
+      primary: "var(--ds-surface, #FFFFFF)"
+    };
   }
-});
-var buttonStyles = (0, _primitives.xcss)({
-  padding: 'space.0',
-  cursor: 'pointer',
-  outline: 0
-});
+  return {
+    default: "var(--ds-icon, #44546F)",
+    help: "var(--ds-icon-discovery, #8270DB)",
+    inverted: "var(--ds-icon-inverse, #FFFFFF)",
+    primary: "var(--ds-icon-brand, #0C66E4)"
+  };
+};
+
 /**
  * __Presentational indicator__
  *
@@ -82,9 +53,14 @@ var PresentationalIndicator = exports.PresentationalIndicator = function Present
   var appearance = _ref.appearance,
     isSelected = _ref.isSelected,
     testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    testId: testId,
-    xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    testId: testId
+    // here we set it dynamic because that backgroundColor and xcss don't support the colors we need here eg. token('color.icon')
+    ,
+    style: {
+      backgroundColor: backgroundColor(isSelected)[appearance]
+    },
+    xcss: (0, _react2.cx)(commonStyles.common, colorBorderMap[appearance])
   });
 };
 /**
@@ -99,14 +75,17 @@ var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(_ref2)
     isSelected = _ref2.isSelected,
     onClick = _ref2.onClick,
     testId = _ref2.testId;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
     role: "tab",
-    xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
+    style: {
+      backgroundColor: backgroundColor(isSelected)[appearance]
+    },
+    xcss: (0, _react2.cx)(commonStyles.common, buttonStyle.root, colorBorderMap[appearance]),
     "aria-controls": panelId,
     "aria-selected": isSelected,
     id: tabId,
     onClick: onClick,
     tabIndex: isSelected ? -1 : undefined,
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, tabId));
+  }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, tabId));
 };

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

@@ -7,26 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
 var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _primitives = require("@atlaskit/primitives");
-var _constants = require("./constants");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _indicator = require("./indicator");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "11.0.7";
+var packageVersion = "11.1.1";
+var progressIndicatorGapMap = {
+  comfortable: {
+    default: 'space.100',
+    large: 'space.150'
+  },
+  cozy: {
+    default: 'space.075',
+    large: 'space.100'
+  },
+  compact: {
+    default: 'space.050',
+    large: 'space.075'
+  }
+};
+var sizes = {
+  default: 8,
+  large: 12
+};
+var varDotsSize = '--ds-dots-size';
+var varDotsMargin = '--ds-dots-margin';
 
 /**
  * __ProgressDots__
@@ -34,7 +44,6 @@ var packageVersion = "11.0.7";
  * A progress indicator shows the user where they are along the steps of a journey.
  */
 var ProgressDots = function ProgressDots(_ref) {
-  var _ref2;
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$ariaControls = _ref.ariaControls,
@@ -57,9 +66,7 @@ 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 gap = progressIndicatorGapMap[gutter][size];
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var indicators = Array.from(tablistRef.current.children);
 
@@ -106,22 +113,22 @@ var ProgressDots = function ProgressDots(_ref) {
       }
     });
   }, [onSelect, handleKeyDown]);
-  return (0, _react2.jsx)(_primitives.Box, {
-    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, rawGapValue), _ref2),
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, varDotsSize, "".concat(sizes[size], "px")), varDotsMargin, gap),
     role: onSelect && 'tablist'
-  }, (0, _react2.jsx)(_primitives.Inline, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     testId: testId,
     ref: function ref(r) {
       tablistRef.current = r;
     },
     alignInline: "center",
-    space: inlineGapValue
+    space: gap
   }, values.map(function (_, index) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
     var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
-    return onSelect ? (0, _react2.jsx)(_indicator.ButtonIndicator, {
+    return onSelect ? /*#__PURE__*/_react.default.createElement(_indicator.ButtonIndicator, {
       key: index,
       testId: indicatorTestId,
       appearance: appearance,
@@ -134,7 +141,7 @@ var ProgressDots = function ProgressDots(_ref) {
           index: index
         });
       }
-    }) : (0, _react2.jsx)(_indicator.PresentationalIndicator, {
+    }) : /*#__PURE__*/_react.default.createElement(_indicator.PresentationalIndicator, {
       key: index,
       testId: indicatorTestId,
       appearance: appearance,

package/dist/es2019/components/indicator.compiled.css

@@ -0,0 +1,18 @@
+
+._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
+._19itt9ly{border:var(--ds-border-width,1px) solid var(--ds-border-bold,#758195)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}._12ji1r31{outline-color:currentColor}
+._12y3idpf{outline-width:0}
+._1bsbg7kr{width:var(--ds-dots-size)}
+._1cs8stnw:before{position:absolute}
+._1kt9b3bt:before{content:""}
+._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
+._1qu2glyw{outline-style:none}
+._4t3ig7kr{height:var(--ds-dots-size)}
+._80omtlke{cursor:pointer}
+._cfu11ule:before{display:block}
+._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
+._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
+._kqswh2mm{position:relative}
+._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}

package/dist/es2019/components/indicator.js

@@ -1,71 +1,39 @@
-import React from 'react';
-import { Box, Pressable, xcss } from '@atlaskit/primitives';
+/* indicator.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./indicator.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { varDotsMargin, varDotsSize } from './constants';
-// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
-const colorMap = {
-  default: xcss({
-    backgroundColor: 'elevation.surface',
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-bold, #758195)"}`
-  }),
-  help: xcss({
-    backgroundColor: 'elevation.surface',
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-bold, #758195)"}`
-  }),
-  inverted: xcss({
-    // @ts-ignore
-    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-inverse, #FFFFFF)"}`
-  }),
-  primary: xcss({
-    backgroundColor: 'elevation.surface',
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-bold, #758195)"}`
-  })
+const commonStyles = {
+  common: "_2rko14q2 _1bsbg7kr _4t3ig7kr _kqswh2mm _cfu11ule _1mp41th6 _kfgt1th6 _1cs8stnw _1kt9b3bt _iajm1yh4 _z5wt1yh4"
 };
-const selectedColorMap = {
-  default: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon, #44546F)"
-  }),
-  help: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-discovery, #8270DB)"
-  }),
-  inverted: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
-  }),
-  primary: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-brand, #0C66E4)"
-  })
+const colorBorderMap = {
+  default: "_19itt9ly",
+  help: "_19itt9ly",
+  inverted: "_19it1ps9",
+  primary: "_19itt9ly"
 };
-const commonStyles = xcss({
-  // 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: `var(${varDotsSize})`,
-  // 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: `var(${varDotsSize})`,
-  position: 'relative',
-  borderRadius: 'border.radius.circle',
-  '::before': {
-    display: 'block',
-    // 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: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
-    // 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: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
-    position: 'absolute',
-    content: '""',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    insetBlockStart: `calc(-1 * var(${varDotsMargin}) / 2)`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    insetInlineStart: `calc(-1 * var(${varDotsMargin}) / 2)`
+const buttonStyle = {
+  root: "_1yt4ze3t _12ji1r31 _1qu2glyw _12y3idpf _80omtlke"
+};
+const backgroundColor = isSelected => {
+  if (!isSelected) {
+    return {
+      default: "var(--ds-surface, #FFFFFF)",
+      help: "var(--ds-surface, #FFFFFF)",
+      inverted: "var(--ds-background-neutral-subtle, #00000000)",
+      primary: "var(--ds-surface, #FFFFFF)"
+    };
   }
-});
-const buttonStyles = xcss({
-  padding: 'space.0',
-  cursor: 'pointer',
-  outline: 0
-});
+  return {
+    default: "var(--ds-icon, #44546F)",
+    help: "var(--ds-icon-discovery, #8270DB)",
+    inverted: "var(--ds-icon-inverse, #FFFFFF)",
+    primary: "var(--ds-icon-brand, #0C66E4)"
+  };
+};
+
 /**
  * __Presentational indicator__
  *
@@ -75,10 +43,17 @@ export const PresentationalIndicator = ({
   appearance,
   isSelected,
   testId
-}) => /*#__PURE__*/React.createElement(Box, {
-  testId: testId,
-  xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
-});
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: testId
+    // here we set it dynamic because that backgroundColor and xcss don't support the colors we need here eg. token('color.icon')
+    ,
+    style: {
+      backgroundColor: backgroundColor(isSelected)[appearance]
+    },
+    xcss: cx(commonStyles.common, colorBorderMap[appearance])
+  });
+};
 /**
  * __Button indicator__
  *
@@ -94,7 +69,10 @@ export const ButtonIndicator = ({
 }) => {
   return /*#__PURE__*/React.createElement(Pressable, {
     role: "tab",
-    xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
+    style: {
+      backgroundColor: backgroundColor(isSelected)[appearance]
+    },
+    xcss: cx(commonStyles.common, buttonStyle.root, colorBorderMap[appearance]),
     "aria-controls": panelId,
     "aria-selected": isSelected,
     id: tabId,

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

@@ -1,19 +1,31 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { useCallback, useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
-import { Box, Inline } from '@atlaskit/primitives';
-import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "11.0.7";
+const packageVersion = "11.1.1";
+const progressIndicatorGapMap = {
+  comfortable: {
+    default: 'space.100',
+    large: 'space.150'
+  },
+  cozy: {
+    default: 'space.075',
+    large: 'space.100'
+  },
+  compact: {
+    default: 'space.050',
+    large: 'space.075'
+  }
+};
+const sizes = {
+  default: 8,
+  large: 12
+};
+const varDotsSize = '--ds-dots-size';
+const varDotsMargin = '--ds-dots-margin';
 
 /**
  * __ProgressDots__
@@ -41,7 +53,7 @@ const ProgressDots = ({
     packageName,
     packageVersion
   });
-  const [inlineGapValue, rawGapValue] = progressIndicatorGapMap[gutter][size];
+  const gap = progressIndicatorGapMap[gutter][size];
   const handleKeyDown = useCallback(event => {
     const indicators = Array.from(tablistRef.current.children);
 
@@ -88,28 +100,28 @@ const ProgressDots = ({
       }
     });
   }, [onSelect, handleKeyDown]);
-  return jsx(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       [varDotsSize]: `${sizes[size]}px`,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      [varDotsMargin]: rawGapValue
+      [varDotsMargin]: gap
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     },
     role: onSelect && 'tablist'
-  }, jsx(Inline, {
+  }, /*#__PURE__*/React.createElement(Inline, {
     testId: testId,
     ref: r => {
       tablistRef.current = r;
     },
     alignInline: "center",
-    space: inlineGapValue
+    space: gap
   }, values.map((_, index) => {
     const isSelected = selectedIndex === index;
     const tabId = `${ariaLabel}${index}`;
     const panelId = `${ariaControls}${index}`;
     const indicatorTestId = testId && `${testId}-ind-${index}`;
-    return onSelect ? jsx(ButtonIndicator, {
+    return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
       key: index,
       testId: indicatorTestId,
       appearance: appearance,
@@ -120,7 +132,7 @@ const ProgressDots = ({
         event,
         index
       })
-    }) : jsx(PresentationalIndicator, {
+    }) : /*#__PURE__*/React.createElement(PresentationalIndicator, {
       key: index,
       testId: indicatorTestId,
       appearance: appearance,

package/dist/esm/components/indicator.compiled.css

@@ -0,0 +1,18 @@
+
+._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
+._19itt9ly{border:var(--ds-border-width,1px) solid var(--ds-border-bold,#758195)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}._12ji1r31{outline-color:currentColor}
+._12y3idpf{outline-width:0}
+._1bsbg7kr{width:var(--ds-dots-size)}
+._1cs8stnw:before{position:absolute}
+._1kt9b3bt:before{content:""}
+._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
+._1qu2glyw{outline-style:none}
+._4t3ig7kr{height:var(--ds-dots-size)}
+._80omtlke{cursor:pointer}
+._cfu11ule:before{display:block}
+._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
+._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
+._kqswh2mm{position:relative}
+._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}

package/dist/esm/components/indicator.js

@@ -1,71 +1,39 @@
-import React from 'react';
-import { Box, Pressable, xcss } from '@atlaskit/primitives';
+/* indicator.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./indicator.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { varDotsMargin, varDotsSize } from './constants';
-// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
-var colorMap = {
-  default: xcss({
-    backgroundColor: 'elevation.surface',
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
-  }),
-  help: xcss({
-    backgroundColor: 'elevation.surface',
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
-  }),
-  inverted: xcss({
-    // @ts-ignore
-    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-inverse, #FFFFFF)")
-  }),
-  primary: xcss({
-    backgroundColor: 'elevation.surface',
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
-  })
+var commonStyles = {
+  common: "_2rko14q2 _1bsbg7kr _4t3ig7kr _kqswh2mm _cfu11ule _1mp41th6 _kfgt1th6 _1cs8stnw _1kt9b3bt _iajm1yh4 _z5wt1yh4"
 };
-var selectedColorMap = {
-  default: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon, #44546F)"
-  }),
-  help: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-discovery, #8270DB)"
-  }),
-  inverted: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
-  }),
-  primary: xcss({
-    // @ts-expect-error
-    backgroundColor: "var(--ds-icon-brand, #0C66E4)"
-  })
+var colorBorderMap = {
+  default: "_19itt9ly",
+  help: "_19itt9ly",
+  inverted: "_19it1ps9",
+  primary: "_19itt9ly"
 };
-var commonStyles = xcss({
-  // 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: "var(".concat(varDotsSize, ")"),
-  // 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: "var(".concat(varDotsSize, ")"),
-  position: 'relative',
-  borderRadius: 'border.radius.circle',
-  '::before': {
-    display: 'block',
-    // 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: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
-    // 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: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
-    position: 'absolute',
-    content: '""',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    insetBlockStart: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    insetInlineStart: "calc(-1 * var(".concat(varDotsMargin, ") / 2)")
+var buttonStyle = {
+  root: "_1yt4ze3t _12ji1r31 _1qu2glyw _12y3idpf _80omtlke"
+};
+var backgroundColor = function backgroundColor(isSelected) {
+  if (!isSelected) {
+    return {
+      default: "var(--ds-surface, #FFFFFF)",
+      help: "var(--ds-surface, #FFFFFF)",
+      inverted: "var(--ds-background-neutral-subtle, #00000000)",
+      primary: "var(--ds-surface, #FFFFFF)"
+    };
   }
-});
-var buttonStyles = xcss({
-  padding: 'space.0',
-  cursor: 'pointer',
-  outline: 0
-});
+  return {
+    default: "var(--ds-icon, #44546F)",
+    help: "var(--ds-icon-discovery, #8270DB)",
+    inverted: "var(--ds-icon-inverse, #FFFFFF)",
+    primary: "var(--ds-icon-brand, #0C66E4)"
+  };
+};
+
 /**
  * __Presentational indicator__
  *
@@ -76,8 +44,13 @@ export var PresentationalIndicator = function PresentationalIndicator(_ref) {
     isSelected = _ref.isSelected,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Box, {
-    testId: testId,
-    xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
+    testId: testId
+    // here we set it dynamic because that backgroundColor and xcss don't support the colors we need here eg. token('color.icon')
+    ,
+    style: {
+      backgroundColor: backgroundColor(isSelected)[appearance]
+    },
+    xcss: cx(commonStyles.common, colorBorderMap[appearance])
   });
 };
 /**
@@ -94,7 +67,10 @@ export var ButtonIndicator = function ButtonIndicator(_ref2) {
     testId = _ref2.testId;
   return /*#__PURE__*/React.createElement(Pressable, {
     role: "tab",
-    xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
+    style: {
+      backgroundColor: backgroundColor(isSelected)[appearance]
+    },
+    xcss: cx(commonStyles.common, buttonStyle.root, colorBorderMap[appearance]),
     "aria-controls": panelId,
     "aria-selected": isSelected,
     id: tabId,

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

@@ -1,21 +1,32 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { useCallback, useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
-import { Box, Inline } from '@atlaskit/primitives';
-import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "11.0.7";
+var packageVersion = "11.1.1";
+var progressIndicatorGapMap = {
+  comfortable: {
+    default: 'space.100',
+    large: 'space.150'
+  },
+  cozy: {
+    default: 'space.075',
+    large: 'space.100'
+  },
+  compact: {
+    default: 'space.050',
+    large: 'space.075'
+  }
+};
+var sizes = {
+  default: 8,
+  large: 12
+};
+var varDotsSize = '--ds-dots-size';
+var varDotsMargin = '--ds-dots-margin';
 
 /**
  * __ProgressDots__
@@ -23,7 +34,6 @@ var packageVersion = "11.0.7";
  * A progress indicator shows the user where they are along the steps of a journey.
  */
 var ProgressDots = function ProgressDots(_ref) {
-  var _ref2;
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$ariaControls = _ref.ariaControls,
@@ -46,9 +56,7 @@ var ProgressDots = function ProgressDots(_ref) {
     packageName: packageName,
     packageVersion: packageVersion
   });
-  var _progressIndicatorGap = _slicedToArray(progressIndicatorGapMap[gutter][size], 2),
-    inlineGapValue = _progressIndicatorGap[0],
-    rawGapValue = _progressIndicatorGap[1];
+  var gap = progressIndicatorGapMap[gutter][size];
   var handleKeyDown = useCallback(function (event) {
     var indicators = Array.from(tablistRef.current.children);
 
@@ -95,22 +103,22 @@ var ProgressDots = function ProgressDots(_ref) {
       }
     });
   }, [onSelect, handleKeyDown]);
-  return jsx(Box, {
-    style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, rawGapValue), _ref2),
+  return /*#__PURE__*/React.createElement(Box, {
+    style: _defineProperty(_defineProperty({}, varDotsSize, "".concat(sizes[size], "px")), varDotsMargin, gap),
     role: onSelect && 'tablist'
-  }, jsx(Inline, {
+  }, /*#__PURE__*/React.createElement(Inline, {
     testId: testId,
     ref: function ref(r) {
       tablistRef.current = r;
     },
     alignInline: "center",
-    space: inlineGapValue
+    space: gap
   }, values.map(function (_, index) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
     var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
-    return onSelect ? jsx(ButtonIndicator, {
+    return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
       key: index,
       testId: indicatorTestId,
       appearance: appearance,
@@ -123,7 +131,7 @@ var ProgressDots = function ProgressDots(_ref) {
           index: index
         });
       }
-    }) : jsx(PresentationalIndicator, {
+    }) : /*#__PURE__*/React.createElement(PresentationalIndicator, {
       key: index,
       testId: indicatorTestId,
       appearance: appearance,

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

@@ -1,5 +1,9 @@
-import React from 'react';
-import { type DotsAppearance } from './types';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
 type CommonProps = {
     appearance: DotsAppearance;
     isSelected: boolean;

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

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { type FC } from 'react';
 import type { ProgressDotsProps } from '../types';
 /**

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

@@ -1,5 +1,9 @@
-import React from 'react';
-import { type DotsAppearance } from './types';
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
 type CommonProps = {
     appearance: DotsAppearance;
     isSelected: boolean;

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

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { type FC } from 'react';
 import type { ProgressDotsProps } from '../types';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "11.0.7",
+	"version": "11.1.1",
 	"description": "A progress indicator shows the user where they are along the steps of a journey.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,17 +21,17 @@
 		"runReact18": true,
 		"website": {
 			"name": "Progress indicator",
-			"category": "Components"
+			"category": "Status indicators"
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/primitives": "^13.2.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/analytics-next": "^10.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/primitives": "^13.3.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
+		"@compiled/react": "^0.18.1",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
@@ -39,6 +39,7 @@
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
+		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",

package/dist/cjs/components/constants.js

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

package/dist/es2019/components/constants.js

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

package/dist/esm/components/constants.js

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

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

@@ -1,27 +0,0 @@
-import type { InlineProps } from '@atlaskit/primitives';
-import { token } from '@atlaskit/tokens';
-type TokenValue = ReturnType<typeof token>;
-type ScaleValue = InlineProps['space'];
-type SpacingTuple = [ScaleValue, TokenValue];
-type SpacingPropsToTokensMap = {
-    comfortable: {
-        default: SpacingTuple;
-        large: SpacingTuple;
-    };
-    cozy: {
-        default: SpacingTuple;
-        large: SpacingTuple;
-    };
-    compact: {
-        default: SpacingTuple;
-        large: SpacingTuple;
-    };
-};
-export declare const progressIndicatorGapMap: SpacingPropsToTokensMap;
-export declare const sizes: {
-    default: number;
-    large: number;
-};
-export declare const varDotsSize = "--ds-dots-size";
-export declare const varDotsMargin = "--ds-dots-margin";
-export {};

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

@@ -1,30 +0,0 @@
-import type { InlineProps } from '@atlaskit/primitives';
-import { token } from '@atlaskit/tokens';
-type TokenValue = ReturnType<typeof token>;
-type ScaleValue = InlineProps['space'];
-type SpacingTuple = [
-    ScaleValue,
-    TokenValue
-];
-type SpacingPropsToTokensMap = {
-    comfortable: {
-        default: SpacingTuple;
-        large: SpacingTuple;
-    };
-    cozy: {
-        default: SpacingTuple;
-        large: SpacingTuple;
-    };
-    compact: {
-        default: SpacingTuple;
-        large: SpacingTuple;
-    };
-};
-export declare const progressIndicatorGapMap: SpacingPropsToTokensMap;
-export declare const sizes: {
-    default: number;
-    large: number;
-};
-export declare const varDotsSize = "--ds-dots-size";
-export declare const varDotsMargin = "--ds-dots-margin";
-export {};