@pingux/astro 1.16.0-alpha.3 → 1.16.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.16.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.15.0...@pingux/astro@1.16.0) (2022-06-08)
+
+
+### Bug Fixes
+
+* [UIP-5364] make chip icon not wrapped in a button aria-hidden ([cdf7df3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/cdf7df39dcce043faaba97f54f491057d1dc4174))
+* Added 5px padding to add btn ([1445f77](https://gitlab.corp.pingidentity.com/ux/pingux/commit/1445f77cbb8b8ece4c6d21249c3277e409dfd87c))
+
+
+### Features
+
+* [UIP-5374] change Loader role to alert ([27e9cfa](https://gitlab.corp.pingidentity.com/ux/pingux/commit/27e9cfa578b80f164ad617f28c1dd9fa92346d10))
+* [UIP-5456] Multivalues selectedKeys not showing selected options in external app ([8342005](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8342005406d0d1c351eda6a38c7070ce21ebb19b))
+
+
+
+
+
 # [1.15.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.14.0...@pingux/astro@1.15.0) (2022-05-31)
 
 

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -81,6 +81,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/**
+ * Displays array collections providing useful functions and
+ * optimizations for arrays.
+ */
 var ArrayField = function ArrayField(props) {
   var _context2;
 
@@ -123,7 +127,7 @@ var ArrayField = function ArrayField(props) {
     });
   }, []);
   var onFieldValueChange = (0, _react.useCallback)(function (event, fieldId) {
-    var tempValue = event; // Checks if value receieved is a key or event
+    var tempValue = event; // Checks if value received is a key or event
 
     if (typeof event !== 'string') {
       tempValue = event.target.value;

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

@@ -30,6 +30,7 @@ var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Form/ArrayField',
+  component: _index.ArrayField,
   parameters: {
     actions: {
       argTypesRegex: '^on.*'

package/lib/cjs/components/Button/Button.js

@@ -64,6 +64,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
+/**
+ * Buttons are used to trigger actions or events.
+ * This component is based on the [Button - Theme-UI](https://theme-ui.com/components/button/)
+ * and includes a variety of styles, such as primary action, secondary action, or warning.
+ */
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       isDisabled = props.isDisabled,

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

@@ -133,7 +133,9 @@ var ChipWithIcon = function ChipWithIcon() {
     icon: _ContentCopyIcon["default"],
     ml: "xs",
     size: "14px",
-    color: "white"
+    color: "white",
+    "aria-hidden": "true",
+    focusable: "false"
   })));
 };
 

package/lib/cjs/components/Link/Link.js

@@ -44,6 +44,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and
+ * React Aria's [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook.
+ *
+ */
 var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       isDisabled = props.isDisabled,

package/lib/cjs/components/ListView/ListView.js

@@ -107,6 +107,12 @@ function useListLayout(state) {
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
+/**
+ * ListViews are used to display a list of items. Users can select,
+ * view, or edit items in this list. This virtualized component supports
+ * asynchronous data in infinitely scrollable lists.
+*/
+
 
 var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var disabledKeys = props.disabledKeys,

package/lib/cjs/components/Messages/Messages.js

@@ -46,6 +46,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ *Messages are intended to display non-critical alerts that
+ attract the users’ attention, but do not interfere or temporarily block their work.
+ */
 var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
 

package/lib/cjs/components/Modal/Modal.js

@@ -68,6 +68,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
+/**
+  * Modals are overlays that interrupt a user’s workflow to convey an important message.
+  * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
+  * such as Button.
+*/
 var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       closeButton = props.closeButton,

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

@@ -36,7 +36,7 @@ var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'NavBar',
-  component: 'NavBar',
+  component: _index.NavBar,
   subcomponents: {
     NavBarSection: _index.NavBarSection,
     NavBarItemLink: _index.NavBarItemLink,

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -44,6 +44,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ * In Astro, side panels are used to show details and present modal interactions.
+ */
 var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$sx;
 

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -48,6 +48,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ * List of requirements for a password, with indicators that can change to show when
+ * requirements are satisfied.
+ */
 var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var requirements = props.requirements,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);

package/lib/cjs/components/ScrollBox/ScrollBox.js

@@ -56,6 +56,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
+/**
+ * Scrollbox is a container that allows content to be scrolled
+ */
 var ScrollBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var maxHeight = props.maxHeight,
       children = props.children,
@@ -66,7 +69,7 @@ var ScrollBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      scrollTopPostion = _useState2[0],
+      scrollTopPosition = _useState2[0],
       setScrollTopPosition = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
@@ -94,7 +97,7 @@ var ScrollBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         setIsTopShadowShowing(outerRef.current.firstChild.scrollTop !== 0);
       }
     }
-  }, [scrollTopPostion]);
+  }, [scrollTopPosition]);
   /* istanbul ignore next */
 
   var onScroll = function onScroll() {

package/lib/cjs/components/Stepper/Stepper.js

@@ -73,6 +73,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var ACTIVE = _Stepper.stepStatuses.ACTIVE,
     COMPLETED = _Stepper.stepStatuses.COMPLETED,
     INACTIVE = _Stepper.stepStatuses.INACTIVE;
+/**
+ * The Stepper component acts as a wrapper for individual Step components.
+ * Stepper is used to display progress through a sequence of logical and numbered steps
+ *  usually within a configuration wizard.
+ */
+
 var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var activeStep = props.activeStep,
       onStepChange = props.onStepChange,

package/lib/cjs/components/Tab/Tab.js

@@ -52,6 +52,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ * Tab control for dividing up closely-related content.
+ * Typically used as a child of the Tabs component.
+ */
 var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       item = props.item,

package/lib/cjs/components/Tabs/Tabs.js

@@ -73,6 +73,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var TabsContext = /*#__PURE__*/_react["default"].createContext({});
+/**
+ * Tabs are used to divide content, navigate to other views, and indicate work progress.
+ */
+
 
 exports.TabsContext = TabsContext;
 var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

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

@@ -109,7 +109,7 @@ var listBoxSectionTitle = {
   justifyContent: 'center'
 };
 var chip = {
-  cursor: 'pointer',
+  cursor: 'default',
   p: '3px 5px 4px 5px',
   alignItems: 'center',
   justifyContent: 'center',

package/lib/components/ArrayField/ArrayField.js

@@ -32,6 +32,11 @@ import Text from '../Text';
 import Label from '../Label';
 import statuses from '../../utils/devUtils/constants/statuses';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
+/**
+ * Displays array collections providing useful functions and
+ * optimizations for arrays.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var ArrayField = function ArrayField(props) {
@@ -77,7 +82,7 @@ var ArrayField = function ArrayField(props) {
     });
   }, []);
   var onFieldValueChange = useCallback(function (event, fieldId) {
-    var tempValue = event; // Checks if value receieved is a key or event
+    var tempValue = event; // Checks if value received is a key or event
 
     if (typeof event !== 'string') {
       tempValue = event.target.value;

package/lib/components/ArrayField/ArrayField.stories.js

@@ -9,6 +9,7 @@ import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/ArrayField',
+  component: ArrayField,
   parameters: {
     actions: {
       argTypesRegex: '^on.*'

package/lib/components/Button/Button.js

@@ -24,6 +24,12 @@ import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import { useStatusClasses, usePropWarning, useAriaLabelWarning, useDeprecationWarning } from '../../hooks';
 import Loader from '../Loader';
+/**
+ * Buttons are used to trigger actions or events.
+ * This component is based on the [Button - Theme-UI](https://theme-ui.com/components/button/)
+ * and includes a variety of styles, such as primary action, secondary action, or warning.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Chip/Chip.stories.js

@@ -102,6 +102,8 @@ export var ChipWithIcon = function ChipWithIcon() {
     icon: ContentCopy,
     ml: "xs",
     size: "14px",
-    color: "white"
+    color: "white",
+    "aria-hidden": "true",
+    focusable: "false"
   })));
 };

package/lib/components/Link/Link.js

@@ -9,6 +9,12 @@ import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { usePropWarning, useStatusClasses } from '../../hooks';
+/**
+ * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and
+ * React Aria's [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook.
+ *
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Link = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/ListView/ListView.js

@@ -58,6 +58,12 @@ export function useListLayout(state) {
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
+/**
+ * ListViews are used to display a list of items. Users can select,
+ * view, or edit items in this list. This virtualized component supports
+ * asynchronous data in infinitely scrollable lists.
+*/
+
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabledKeys = props.disabledKeys,
       loadingState = props.loadingState,

package/lib/components/Messages/Messages.js

@@ -10,6 +10,11 @@ import { useListState } from '@react-stately/list';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Message from './Message';
 import Box from '../Box';
+/**
+ *Messages are intended to display non-critical alerts that
+ attract the users’ attention, but do not interfere or temporarily block their work.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;

package/lib/components/Modal/Modal.js

@@ -26,6 +26,12 @@ import IconButton from '../IconButton';
 import Icon from '../Icon';
 import Text from '../Text';
 import { useStatusClasses, useDeprecationWarning } from '../../hooks';
+/**
+  * Modals are overlays that interrupt a user’s workflow to convey an important message.
+  * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
+  * such as Button.
+*/
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/NavBar/NavBar.stories.js

@@ -12,7 +12,7 @@ import { Separator, Box, Link, NavBar, NavBarSection, NavBarItemButton, NavBarIt
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'NavBar',
-  component: 'NavBar',
+  component: NavBar,
   subcomponents: {
     NavBarSection: NavBarSection,
     NavBarItemLink: NavBarItemLink,

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -9,6 +9,10 @@ import { FocusScope } from '@react-aria/focus';
 import Box from '../Box';
 import { useStatusClasses, useOverlayPanelState } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+/**
+ * In Astro, side panels are used to show details and present modal interactions.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$sx;

package/lib/components/RequirementsList/RequirementsList.js

@@ -11,6 +11,11 @@ import DefaultCircle from 'mdi-react/CheckboxBlankCircleOutlineIcon';
 import Box from '../Box';
 import Text from '../Text';
 import Icon from '../Icon';
+/**
+ * List of requirements for a password, with indicators that can change to show when
+ * requirements are satisfied.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,

package/lib/components/ScrollBox/ScrollBox.js

@@ -20,6 +20,10 @@ import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useSta
 import PropTypes from 'prop-types';
 import Box from '../Box';
 import useStatusClasses from '../../hooks/useStatusClasses';
+/**
+ * Scrollbox is a container that allows content to be scrolled
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
   var maxHeight = props.maxHeight,
@@ -31,7 +35,7 @@ var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
-      scrollTopPostion = _useState2[0],
+      scrollTopPosition = _useState2[0],
       setScrollTopPosition = _useState2[1];
 
   var _useState3 = useState(false),
@@ -59,7 +63,7 @@ var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
         setIsTopShadowShowing(outerRef.current.firstChild.scrollTop !== 0);
       }
     }
-  }, [scrollTopPostion]);
+  }, [scrollTopPosition]);
   /* istanbul ignore next */
 
   var onScroll = function onScroll() {

package/lib/components/Stepper/Stepper.js

@@ -31,6 +31,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var ACTIVE = stepStatuses.ACTIVE,
     COMPLETED = stepStatuses.COMPLETED,
     INACTIVE = stepStatuses.INACTIVE;
+/**
+ * The Stepper component acts as a wrapper for individual Step components.
+ * Stepper is used to display progress through a sequence of logical and numbered steps
+ *  usually within a configuration wizard.
+ */
+
 var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
   var activeStep = props.activeStep,
       onStepChange = props.onStepChange,

package/lib/components/Tab/Tab.js

@@ -13,6 +13,11 @@ import { useStatusClasses, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import TabPicker from '../TabPicker';
 import { Box, Text, TooltipTrigger, Tooltip, Button } from '../..';
+/**
+ * Tab control for dividing up closely-related content.
+ * Typically used as a child of the Tabs component.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Tabs/Tabs.js

@@ -28,6 +28,10 @@ import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { usePropWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TabsContext = /*#__PURE__*/React.createContext({});
+/**
+ * Tabs are used to divide content, navigate to other views, and indicate work progress.
+ */
+
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context4, _context5;
 

package/lib/styles/variants/boxes.js

@@ -90,7 +90,7 @@ var listBoxSectionTitle = {
   justifyContent: 'center'
 };
 export var chip = {
-  cursor: 'pointer',
+  cursor: 'default',
   p: '3px 5px 4px 5px',
   alignItems: 'center',
   justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.16.0-alpha.3",
+  "version": "1.16.1-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",