@pingux/astro 2.59.0-alpha.0 → 2.59.0

package/lib/cjs/components/Loader/Loader.mdx

@@ -11,7 +11,7 @@ This component should be:
 - Restricted to a single use per view to avoid unnecessary disruption.
 
 It should not be used: 
-- When the wait time for a process is known.
+- When the wait time for a process is known. If it is known, use [ProgressBar](./?path=/story/expirimental-progressbar--default) component instead.
 - When trying to communicate progression in steps.
 
 The Loader component is based on the [useProgressBar](https://react-spectrum.adobe.com/react-aria/useProgressBar.html) React Aria component.
@@ -26,4 +26,9 @@ This component can be used independently and does not require additional compone
 
 This component uses the following attributes to assist screen readers:
 - The **`aria-label`** attribute is used to provide an accessible name.
-- The **`aria-live`** attribute is used to announce content changes in a live region.
+- The **`aria-live`** attribute is used to announce content changes in a live region.
+
+### Determinate vs Indeterminate usage
+
+- If the progress to be indicated is determinate, use [ProgressBar](./?path=/story/experimental-progressbar--default) component instead.
+- If the progress to be indicated is indeterminate, use the Loader Component

package/lib/cjs/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ProgressBarProps } from '../../types';
+export declare const calculateBarWidth: (value: number, minValue: number, maxValue: number) => string;
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLElement>>;
+export default ProgressBar;

package/lib/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.calculateBarWidth = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _progress = require("@react-aria/progress");
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _react2 = require("@emotion/react");
+var _excluded = ["role"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Calculate the width of the progress bar as a percentage
+var calculateBarWidth = function calculateBarWidth(value, minValue, maxValue) {
+  if (value < minValue) {
+    throw new Error('Value cannot be less than minValue');
+  }
+  if (value > maxValue) {
+    throw new Error('Value cannot be greater than maxValue');
+  }
+  var percentage = (value - minValue) / (maxValue - minValue);
+  var barWidth = "".concat(Math.round(percentage * 100), "%");
+  return barWidth;
+};
+exports.calculateBarWidth = calculateBarWidth;
+var ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? '' : _props$label,
+    _props$showValueLabel = props.showValueLabel,
+    showValueLabel = _props$showValueLabel === void 0 ? true : _props$showValueLabel,
+    value = props.value,
+    _props$minValue = props.minValue,
+    minValue = _props$minValue === void 0 ? 0 : _props$minValue,
+    _props$maxValue = props.maxValue,
+    maxValue = _props$maxValue === void 0 ? 100 : _props$maxValue;
+  var progressBarRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var _useProgressBar = (0, _progress.useProgressBar)(props),
+    progressBarProps = _useProgressBar.progressBarProps,
+    labelProps = _useProgressBar.labelProps;
+  var role = labelProps.role,
+    restLabelProps = (0, _objectWithoutProperties2["default"])(labelProps, _excluded);
+  var barWidth = calculateBarWidth(value, minValue, maxValue);
+  var ariaLabel = props['aria-label'];
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, progressBarProps, {
+    role: "progressbar",
+    "aria-labelledby": labelProps.id,
+    "aria-label": ariaLabel,
+    gap: "2px",
+    ref: progressBarRef
+  }), (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, label && (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
+    fontSize: "xs",
+    fontWeight: "3"
+  }, restLabelProps), label), showValueLabel && (0, _react2.jsx)(_.Text, {
+    fontSize: "xs",
+    fontWeight: "3"
+  }, progressBarProps['aria-valuetext'])), (0, _react2.jsx)(_.Box, {
+    variant: "progressBar.container"
+  }, (0, _react2.jsx)(_.Box, {
+    variant: "progressBar.percentageBar",
+    style: {
+      width: barWidth
+    }
+  })));
+});
+var _default = ProgressBar;
+exports["default"] = _default;

package/lib/cjs/components/ProgressBar/ProgressBar.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Experimental/ProgressBar/ProgressBar" />
+
+# ProgressBar
+
+The ProgressBar component shows progression that can be calculated against a certain goal, such as loading or percent completion of a task.
+
+This component should be:
+- Used to show a determinate loading state.
+- When trying to communicate progression in steps.
+
+It should not be used: 
+- When the wait time for a process is unknown. If it is unknown, use [Loader](./?path=/story/components-loader--default) component instead.
+
+### Required components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA ProgressBar](https://w3c.github.io/aria/#progressbar) accessibility guidelines.
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The progressBar uses the **`aria-valuemin`** and **`aria-valuemax`** to indicate the minimum and maximum progress indicator values. If they are missing, they default to 0 and 100 respectively. 
+- The progressBar uses the **`aria-valuenow`** attribute to indicate the current value of the progressbar.
+- If the progressbar is describing the loading progress of a particular region of a page, authors SHOULD both use **`aria-describedby`** to reference the progressbar status, and set the **`aria-busy`** attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always read-only
+
+### Determinate vs Indeterminate usage
+
+- If the progress to be indicated is determinate, use the ProgressBar component.
+- If the progress to be indicated is indeterminate, use the [Loader](./?path=/story/components-loader--default) component instead.

package/lib/cjs/components/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ProgressBarProps } from '../../index';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ProgressBarProps>;

package/lib/cjs/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/ProgressBar',
+  component: _index.ProgressBar,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ProgressBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    isIndeterminate: {
+      table: {
+        disable: true
+      }
+    },
+    'data-testid': {
+      table: {
+        disable: true
+      }
+    },
+    label: {
+      table: {
+        disable: true
+      }
+    },
+    showValueLabel: {
+      table: {
+        disable: true
+      }
+    },
+    valueLabel: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.ProgressBar, (0, _extends2["default"])({}, args, {
+    value: 25,
+    "aria-label": "Progress Bar"
+  }));
+};
+exports.Default = Default;

package/lib/cjs/components/ProgressBar/ProgressBar.styles.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    container: {
+        backgroundColor: string;
+        borderRadius: string;
+        height: string;
+    };
+    percentageBar: {
+        backgroundColor: string;
+        borderRadius: string;
+        height: string;
+    };
+};
+export default _default;

package/lib/cjs/components/ProgressBar/ProgressBar.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var container = {
+  backgroundColor: 'neutral.90',
+  borderRadius: '3px',
+  height: '7px'
+};
+var percentageBar = _objectSpread(_objectSpread({}, container), {}, {
+  backgroundColor: 'active'
+});
+var _default = {
+  container: container,
+  percentageBar: percentageBar
+};
+exports["default"] = _default;

package/lib/cjs/components/ProgressBar/ProgressBar.test.d.ts

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

package/lib/cjs/components/ProgressBar/ProgressBar.test.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _ = _interopRequireWildcard(require("."));
+var _react3 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var testId = 'test-progressbar';
+var defaultProps = {
+  'data-testid': testId,
+  value: 25,
+  minValue: 0,
+  maxValue: 100
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    "aria-label": "Progress Bar"
+  })));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props, {
+      "aria-label": "Progress Bar"
+    }));
+  }
+});
+test('ProgressBar component does load', function () {
+  getComponent();
+  var progressBar = _react2.screen.getByRole('progressbar', {
+    name: 'Progress Bar'
+  });
+  expect(progressBar).toBeInTheDocument();
+});
+test('should render a label', function () {
+  getComponent({
+    label: 'Loading...'
+  });
+  var label = _react2.screen.getByText('Loading...');
+  expect(label).toBeInTheDocument();
+});
+test('renders value as a percentage', function () {
+  getComponent({
+    value: 25
+  });
+  var value = _react2.screen.getByText('25%');
+  expect(value).toBeInTheDocument();
+});
+test('renders value as custom valueLabel instead of percentage', function () {
+  getComponent({
+    value: 25,
+    valueLabel: '25 of 100 dogs'
+  });
+  var value = _react2.screen.queryByText('25%');
+  var valueLabel = _react2.screen.getByText('25 of 100 dogs');
+  expect(value).not.toBeInTheDocument();
+  expect(valueLabel).toBeInTheDocument();
+});
+test('does not render value when showValueLabel is false', function () {
+  getComponent({
+    value: 25,
+    showValueLabel: false
+  });
+  var valueLabel = _react2.screen.queryByText('25%');
+  expect(valueLabel).not.toBeInTheDocument();
+});
+test('renders label and custom valueLabel when labe and valueLabel are present', function () {
+  getComponent({
+    value: 25,
+    label: 'Loading...',
+    valueLabel: '25 of 100 dogs'
+  });
+  var label = _react2.screen.getByText('Loading...');
+  var valueLabel = _react2.screen.getByText('25 of 100 dogs');
+  expect(label).toBeInTheDocument();
+  expect(valueLabel).toBeInTheDocument();
+});
+test('calculates bar width with default min and max values', function () {
+  expect((0, _.calculateBarWidth)(25, 0, 100)).toBe('25%');
+});
+test('calculates bar width when value equals minValue', function () {
+  expect((0, _.calculateBarWidth)(0, 0, 100)).toBe('0%');
+});
+test('calculates bar width when value equals maxValue', function () {
+  expect((0, _.calculateBarWidth)(100, 0, 100)).toBe('100%');
+});
+test('throws error when value is less than minValue', function () {
+  expect(function () {
+    return (0, _.calculateBarWidth)(-10, 0, 100);
+  }).toThrow('Value cannot be less than minValue');
+});
+test('throws error when value is greater than maxValue', function () {
+  expect(function () {
+    return (0, _.calculateBarWidth)(110, 0, 100);
+  }).toThrow('Value cannot be greater than maxValue');
+});

package/lib/cjs/components/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ProgressBar';
+export * from './ProgressBar';

package/lib/cjs/components/ProgressBar/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _context;
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBar["default"];
+  }
+});
+var _ProgressBar = _interopRequireWildcard(require("./ProgressBar"));
+_forEachInstanceProperty(_context = _Object$keys(_ProgressBar)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ProgressBar[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ProgressBar[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/cjs/index.d.ts

@@ -120,6 +120,7 @@ export * from './components/PasswordField';
 export { default as PopoverContainer } from './components/PopoverContainer';
 export * from './components/PopoverContainer';
 export { default as PopoverMenu } from './components/PopoverMenu';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as Radio } from './components/Radio';
 export * from './components/Radio';
 export { default as RadioField } from './components/RadioField';

package/lib/cjs/index.js

@@ -89,6 +89,7 @@ var _exportNames = {
   PasswordField: true,
   PopoverContainer: true,
   PopoverMenu: true,
+  ProgressBar: true,
   Radio: true,
   RadioField: true,
   RadioGroupField: true,
@@ -624,6 +625,12 @@ _Object$defineProperty(exports, "PopoverMenu", {
     return _PopoverMenu["default"];
   }
 });
+_Object$defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBar["default"];
+  }
+});
 _Object$defineProperty(exports, "Radio", {
   enumerable: true,
   get: function get() {
@@ -1416,6 +1423,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_PopoverContainer)).call(_con
   });
 });
 var _PopoverMenu = _interopRequireDefault(require("./components/PopoverMenu"));
+var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
 var _Radio = _interopRequireWildcard(require("./components/Radio"));
 _forEachInstanceProperty(_context46 = _Object$keys(_Radio)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/styles/variants/variants.js

@@ -45,6 +45,7 @@ var _NavBar = _interopRequireDefault(require("../../components/NavBar/NavBar.sty
 var _OverlayPanel = _interopRequireDefault(require("../../components/OverlayPanel/OverlayPanel.styles"));
 var _PanelHeader = _interopRequireDefault(require("../../components/PanelHeader/PanelHeader.styles"));
 var _PopoverMenu = _interopRequireDefault(require("../../components/PopoverMenu/PopoverMenu.styles"));
+var _ProgressBar = _interopRequireDefault(require("../../components/ProgressBar/ProgressBar.styles"));
 var _RockerButton = _interopRequireDefault(require("../../components/RockerButton/RockerButton.styles"));
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox/ScrollBox.styles"));
 var _Separator = _interopRequireDefault(require("../../components/Separator/Separator.styles"));
@@ -88,6 +89,7 @@ var _default = _objectSpread({
   overlayPanel: _OverlayPanel["default"],
   popoverMenu: _PopoverMenu["default"],
   panelHeader: _PanelHeader["default"],
+  progressBar: _ProgressBar["default"],
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],
   separator: _Separator["default"],

package/lib/cjs/types/index.d.ts

@@ -29,6 +29,7 @@ export * from './navBar';
 export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';
+export * from './progressBar';
 export * from './requirementsList';
 export * from './rockerButtonGroup';
 export * from './scrollBox';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -348,8 +348,19 @@ _forEachInstanceProperty(_context31 = _Object$keys(_popoverMenu)).call(_context3
     }
   });
 });
+var _progressBar = require("./progressBar");
+_forEachInstanceProperty(_context32 = _Object$keys(_progressBar)).call(_context32, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _progressBar[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _progressBar[key];
+    }
+  });
+});
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context32 = _Object$keys(_requirementsList)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_requirementsList)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context33 = _Object$keys(_rockerButtonGroup)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_rockerButtonGroup)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context34 = _Object$keys(_scrollBox)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_scrollBox)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -382,7 +393,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_scrollBox)).call(_context34,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context35 = _Object$keys(_separator)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_separator)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -393,7 +404,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_separator)).call(_context35,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context36 = _Object$keys(_shared)).call(_context36, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_shared)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -404,7 +415,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_shared)).call(_context36, fu
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context37 = _Object$keys(_tab)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_tab)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -415,7 +426,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_tab)).call(_context37, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context38 = _Object$keys(_table)).call(_context38, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_table)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -426,7 +437,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_table)).call(_context38, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context39 = _Object$keys(_tabs)).call(_context39, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_tabs)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -437,7 +448,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_tabs)).call(_context39, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context40 = _Object$keys(_text)).call(_context40, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_text)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -448,7 +459,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_text)).call(_context40, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context41 = _Object$keys(_tooltipTrigger)).call(_context41, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_tooltipTrigger)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/progressBar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TestingAttributes } from './shared/test';
+export interface ProgressBarProps extends TestingAttributes {
+    isIndeterminate?: boolean;
+    label?: React.ReactNode;
+    formatOptions?: Intl.NumberFormatOptions;
+    valueLabel?: React.ReactNode;
+    value: number;
+    minValue?: number;
+    maxValue?: number;
+    showValueLabel?: boolean;
+}

package/lib/cjs/types/progressBar.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Loader/Loader.mdx

@@ -11,7 +11,7 @@ This component should be:
 - Restricted to a single use per view to avoid unnecessary disruption.
 
 It should not be used: 
-- When the wait time for a process is known.
+- When the wait time for a process is known. If it is known, use [ProgressBar](./?path=/story/expirimental-progressbar--default) component instead.
 - When trying to communicate progression in steps.
 
 The Loader component is based on the [useProgressBar](https://react-spectrum.adobe.com/react-aria/useProgressBar.html) React Aria component.
@@ -26,4 +26,9 @@ This component can be used independently and does not require additional compone
 
 This component uses the following attributes to assist screen readers:
 - The **`aria-label`** attribute is used to provide an accessible name.
-- The **`aria-live`** attribute is used to announce content changes in a live region.
+- The **`aria-live`** attribute is used to announce content changes in a live region.
+
+### Determinate vs Indeterminate usage
+
+- If the progress to be indicated is determinate, use [ProgressBar](./?path=/story/experimental-progressbar--default) component instead.
+- If the progress to be indicated is indeterminate, use the Loader Component

package/lib/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["role"];
+import React, { forwardRef } from 'react';
+import { useProgressBar } from '@react-aria/progress';
+import { Box, Text } from '../..';
+import { useLocalOrForwardRef } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+// Calculate the width of the progress bar as a percentage
+export var calculateBarWidth = function calculateBarWidth(value, minValue, maxValue) {
+  if (value < minValue) {
+    throw new Error('Value cannot be less than minValue');
+  }
+  if (value > maxValue) {
+    throw new Error('Value cannot be greater than maxValue');
+  }
+  var percentage = (value - minValue) / (maxValue - minValue);
+  var barWidth = "".concat(Math.round(percentage * 100), "%");
+  return barWidth;
+};
+var ProgressBar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? '' : _props$label,
+    _props$showValueLabel = props.showValueLabel,
+    showValueLabel = _props$showValueLabel === void 0 ? true : _props$showValueLabel,
+    value = props.value,
+    _props$minValue = props.minValue,
+    minValue = _props$minValue === void 0 ? 0 : _props$minValue,
+    _props$maxValue = props.maxValue,
+    maxValue = _props$maxValue === void 0 ? 100 : _props$maxValue;
+  var progressBarRef = useLocalOrForwardRef(ref);
+  var _useProgressBar = useProgressBar(props),
+    progressBarProps = _useProgressBar.progressBarProps,
+    labelProps = _useProgressBar.labelProps;
+  var role = labelProps.role,
+    restLabelProps = _objectWithoutProperties(labelProps, _excluded);
+  var barWidth = calculateBarWidth(value, minValue, maxValue);
+  var ariaLabel = props['aria-label'];
+  return ___EmotionJSX(Box, _extends({}, progressBarProps, {
+    role: "progressbar",
+    "aria-labelledby": labelProps.id,
+    "aria-label": ariaLabel,
+    gap: "2px",
+    ref: progressBarRef
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, label && ___EmotionJSX(Text, _extends({
+    fontSize: "xs",
+    fontWeight: "3"
+  }, restLabelProps), label), showValueLabel && ___EmotionJSX(Text, {
+    fontSize: "xs",
+    fontWeight: "3"
+  }, progressBarProps['aria-valuetext'])), ___EmotionJSX(Box, {
+    variant: "progressBar.container"
+  }, ___EmotionJSX(Box, {
+    variant: "progressBar.percentageBar",
+    style: {
+      width: barWidth
+    }
+  })));
+});
+export default ProgressBar;

package/lib/components/ProgressBar/ProgressBar.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Experimental/ProgressBar/ProgressBar" />
+
+# ProgressBar
+
+The ProgressBar component shows progression that can be calculated against a certain goal, such as loading or percent completion of a task.
+
+This component should be:
+- Used to show a determinate loading state.
+- When trying to communicate progression in steps.
+
+It should not be used: 
+- When the wait time for a process is unknown. If it is unknown, use [Loader](./?path=/story/components-loader--default) component instead.
+
+### Required components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA ProgressBar](https://w3c.github.io/aria/#progressbar) accessibility guidelines.
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The progressBar uses the **`aria-valuemin`** and **`aria-valuemax`** to indicate the minimum and maximum progress indicator values. If they are missing, they default to 0 and 100 respectively. 
+- The progressBar uses the **`aria-valuenow`** attribute to indicate the current value of the progressbar.
+- If the progressbar is describing the loading progress of a particular region of a page, authors SHOULD both use **`aria-describedby`** to reference the progressbar status, and set the **`aria-busy`** attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always read-only
+
+### Determinate vs Indeterminate usage
+
+- If the progress to be indicated is determinate, use the ProgressBar component.
+- If the progress to be indicated is indeterminate, use the [Loader](./?path=/story/components-loader--default) component instead.

package/lib/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { ProgressBar } from '../../index';
+import ProgressBarReadMe from './ProgressBar.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ProgressBarReadMe, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    isIndeterminate: {
+      table: {
+        disable: true
+      }
+    },
+    'data-testid': {
+      table: {
+        disable: true
+      }
+    },
+    label: {
+      table: {
+        disable: true
+      }
+    },
+    showValueLabel: {
+      table: {
+        disable: true
+      }
+    },
+    valueLabel: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(ProgressBar, _extends({}, args, {
+    value: 25,
+    "aria-label": "Progress Bar"
+  }));
+};

package/lib/components/ProgressBar/ProgressBar.styles.js

@@ -0,0 +1,23 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var container = {
+  backgroundColor: 'neutral.90',
+  borderRadius: '3px',
+  height: '7px'
+};
+var percentageBar = _objectSpread(_objectSpread({}, container), {}, {
+  backgroundColor: 'active'
+});
+export default {
+  container: container,
+  percentageBar: percentageBar
+};

package/lib/components/ProgressBar/ProgressBar.test.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import ProgressBar, { calculateBarWidth } from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-progressbar';
+var defaultProps = {
+  'data-testid': testId,
+  value: 25,
+  minValue: 0,
+  maxValue: 100
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(ProgressBar, _extends({}, defaultProps, props, {
+    "aria-label": "Progress Bar"
+  })));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ProgressBar, _extends({}, defaultProps, props, {
+      "aria-label": "Progress Bar"
+    }));
+  }
+});
+test('ProgressBar component does load', function () {
+  getComponent();
+  var progressBar = screen.getByRole('progressbar', {
+    name: 'Progress Bar'
+  });
+  expect(progressBar).toBeInTheDocument();
+});
+test('should render a label', function () {
+  getComponent({
+    label: 'Loading...'
+  });
+  var label = screen.getByText('Loading...');
+  expect(label).toBeInTheDocument();
+});
+test('renders value as a percentage', function () {
+  getComponent({
+    value: 25
+  });
+  var value = screen.getByText('25%');
+  expect(value).toBeInTheDocument();
+});
+test('renders value as custom valueLabel instead of percentage', function () {
+  getComponent({
+    value: 25,
+    valueLabel: '25 of 100 dogs'
+  });
+  var value = screen.queryByText('25%');
+  var valueLabel = screen.getByText('25 of 100 dogs');
+  expect(value).not.toBeInTheDocument();
+  expect(valueLabel).toBeInTheDocument();
+});
+test('does not render value when showValueLabel is false', function () {
+  getComponent({
+    value: 25,
+    showValueLabel: false
+  });
+  var valueLabel = screen.queryByText('25%');
+  expect(valueLabel).not.toBeInTheDocument();
+});
+test('renders label and custom valueLabel when labe and valueLabel are present', function () {
+  getComponent({
+    value: 25,
+    label: 'Loading...',
+    valueLabel: '25 of 100 dogs'
+  });
+  var label = screen.getByText('Loading...');
+  var valueLabel = screen.getByText('25 of 100 dogs');
+  expect(label).toBeInTheDocument();
+  expect(valueLabel).toBeInTheDocument();
+});
+test('calculates bar width with default min and max values', function () {
+  expect(calculateBarWidth(25, 0, 100)).toBe('25%');
+});
+test('calculates bar width when value equals minValue', function () {
+  expect(calculateBarWidth(0, 0, 100)).toBe('0%');
+});
+test('calculates bar width when value equals maxValue', function () {
+  expect(calculateBarWidth(100, 0, 100)).toBe('100%');
+});
+test('throws error when value is less than minValue', function () {
+  expect(function () {
+    return calculateBarWidth(-10, 0, 100);
+  }).toThrow('Value cannot be less than minValue');
+});
+test('throws error when value is greater than maxValue', function () {
+  expect(function () {
+    return calculateBarWidth(110, 0, 100);
+  }).toThrow('Value cannot be greater than maxValue');
+});

package/lib/components/ProgressBar/index.js

@@ -0,0 +1,2 @@
+export { default } from './ProgressBar';
+export * from './ProgressBar';

package/lib/index.js

@@ -124,6 +124,7 @@ export * from './components/PasswordField';
 export { default as PopoverContainer } from './components/PopoverContainer';
 export * from './components/PopoverContainer';
 export { default as PopoverMenu } from './components/PopoverMenu';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as Radio } from './components/Radio';
 export * from './components/Radio';
 export { default as RadioField } from './components/RadioField';

package/lib/styles/variants/variants.js

@@ -38,6 +38,7 @@ import navBar from '../../components/NavBar/NavBar.styles';
 import overlayPanel from '../../components/OverlayPanel/OverlayPanel.styles';
 import panelHeader from '../../components/PanelHeader/PanelHeader.styles';
 import popoverMenu from '../../components/PopoverMenu/PopoverMenu.styles';
+import progressBar from '../../components/ProgressBar/ProgressBar.styles';
 import rockerButton from '../../components/RockerButton/RockerButton.styles';
 import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
 import separator from '../../components/Separator/Separator.styles';
@@ -77,6 +78,7 @@ export default _objectSpread({
   overlayPanel: overlayPanel,
   popoverMenu: popoverMenu,
   panelHeader: panelHeader,
+  progressBar: progressBar,
   rockerButton: rockerButton,
   scrollBox: scrollBox,
   separator: separator,

package/lib/types/index.js

@@ -29,6 +29,7 @@ export * from './navBar';
 export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';
+export * from './progressBar';
 export * from './requirementsList';
 export * from './rockerButtonGroup';
 export * from './scrollBox';

package/lib/types/progressBar.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.59.0-alpha.0",
+  "version": "2.59.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -65,6 +65,7 @@
     "@react-aria/listbox": "~3.10.2",
     "@react-aria/live-announcer": "~3.1.1",
     "@react-aria/overlays": "^3.7.0",
+    "@react-aria/progress": "^3.4.9",
     "@react-aria/selection": "~3.10.1",
     "@react-aria/table": "^3.9.0",
     "@react-aria/tabs": "^3.8.3",
@@ -73,7 +74,6 @@
     "@react-aria/visually-hidden": "~3.6.0",
     "@react-spectrum/utils": "~3.6.1",
     "@react-stately/calendar": "3.0.1",
-    "@react-stately/collections": "^3.10.5",
     "@react-stately/color": "~3.1.1",
     "@react-stately/datepicker": "^3.0.1",
     "@react-stately/dnd": "^3.2.6",
@@ -139,6 +139,7 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/eslint-plugin": "^11.2.0",
+    "@react-stately/collections": "^3.10.2",
     "@storybook/addon-a11y": "^7.1.0",
     "@storybook/addon-console": "^2.0.0",
     "@storybook/addon-docs": "^7.1.0",