@pingux/astro 2.204.0-alpha.0 → 2.205.0-alpha.0

package/lib/cjs/components/Stepper/Line.d.ts

@@ -0,0 +1,7 @@
+import { StepStatus } from './Stepper.constants';
+interface LineProps {
+    className?: string;
+    status?: StepStatus;
+}
+declare const Line: ({ className, status, }: LineProps) => import("react/jsx-runtime").JSX.Element;
+export default Line;

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

@@ -6,9 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Stepper = require("./Stepper.constants");
@@ -29,7 +27,4 @@ var Line = function Line(_ref) {
     className: classNames
   });
 };
-Line.propTypes = {
-  status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses))
-};
 var _default = exports["default"] = Line;

package/lib/cjs/components/Stepper/Step.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StepStatus } from './Stepper.constants';
+interface StepProps {
+    status?: StepStatus;
+    value?: number;
+    className?: string;
+    orientation?: 'vertical' | 'horizontal';
+}
+declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLElement>>;
+export default Step;

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

@@ -9,12 +9,10 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBoldIcon"));
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _Stepper = require("./Stepper.constants");
@@ -23,11 +21,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var
 var COMPLETED = _Stepper.stepStatuses.COMPLETED,
   INACTIVE = _Stepper.stepStatuses.INACTIVE;
 var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var status = props.status,
-    value = props.value,
+  var _props$status = props.status,
+    status = _props$status === void 0 ? INACTIVE : _props$status,
+    _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
     className = props.className,
     orientation = props.orientation;
-  var _useHover = (0, _interactions.useHover)(props),
+  var _useHover = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var stepValue = orientation !== _orientation["default"].VERTICAL && value;
@@ -45,13 +45,5 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }) : stepValue);
 });
-Step.propTypes = {
-  status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses)),
-  value: _propTypes["default"].number,
-  orientation: _propTypes["default"].oneOf([_orientation["default"].VERTICAL, _orientation["default"].HORIZONTAL])
-};
-Step.defaultProps = {
-  status: INACTIVE,
-  value: 0
-};
+Step.displayName = 'Step';
 var _default = exports["default"] = Step;

package/lib/cjs/components/Stepper/Stepper.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const stepStatuses: {
+    readonly ACTIVE: "active";
+    readonly COMPLETED: "completed";
+    readonly INACTIVE: "inactive";
+};
+export type StepStatus = typeof stepStatuses[keyof typeof stepStatuses];

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StepperProps } from '../../types';
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;
+export default Stepper;

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

@@ -23,11 +23,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _list = require("@react-stately/list");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
+var _Tab = _interopRequireDefault(require("../Tab"));
 var _Line = _interopRequireDefault(require("./Line"));
 var _Stepper = require("./Stepper.constants");
 var _Stepper2 = require("./Stepper.styles");
@@ -49,6 +49,15 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     orientation = props.orientation,
     className = props.className,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var stepperRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  if (process.env.NODE_ENV !== 'production' && props.activeStep !== undefined) {
+    var validationError = (0, _isValidPositiveInt["default"])({
+      activeStep: props.activeStep
+    }, 'activeStep', 'Stepper');
+    if (validationError) {
+      console.error(validationError.message);
+    }
+  }
   var state = (0, _list.useSingleSelectListState)(props);
   var getStatus = function getStatus(i) {
     if (i === activeStep) {
@@ -61,7 +70,7 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   var onStepChangeHandler = function onStepChangeHandler(key) {
     if (onStepChange) {
-      onStepChange(+key);
+      onStepChange(Number(key));
     }
   };
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
@@ -107,7 +116,8 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     /* istanbul ignore next */
     var textValue = item && item.value && item.value.label || item.textValue || stepIndex.toString();
-    var container = (0, _react2.jsx)(_.Tab, {
+    var TabItem = _Tab["default"];
+    var container = (0, _react2.jsx)(TabItem, {
       key: stepIndex,
       variant: "stepper.tab",
       tabLineProps: {
@@ -122,13 +132,13 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       content: item.rendered,
       separator: !isFirst && orientation === _orientation["default"].HORIZONTAL && !isFirst && line,
       tooltipTriggerProps: tooltipProps,
-      sx: i !== steps.length - 1 && orientation === _orientation["default"].VERTICAL && _Stepper2.verticalLine
+      sx: i !== steps.length - 1 && orientation === _orientation["default"].VERTICAL ? _Stepper2.verticalLine : undefined
     });
     isFirst = isFirst && !container;
     return container;
   });
   return (0, _react2.jsx)(_.Tabs, (0, _extends2["default"])({
-    ref: ref,
+    ref: stepperRef,
     variant: "stepper.wrapper",
     tabListProps: _objectSpread({
       variant: 'stepper.tabs',
@@ -140,30 +150,6 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     orientation: orientation
   }, others), render);
 });
-Stepper.propTypes = {
-  /**
-   * *For performance reasons,
-  use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-  */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    /** The primary option for the tooltip label. */
-    label: _propTypes["default"].string,
-    children: _propTypes["default"].node,
-    name: _propTypes["default"].string
-  })),
-  /** The number of the current step (using one-based indexing) */
-  activeStep: _isValidPositiveInt["default"],
-  /**
-  * Handler that is called when the current step changes
-  * `(index: number) => void`
-  */
-  onStepChange: _propTypes["default"].func,
-  /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: _propTypes["default"].shape({}),
-  tooltipProps: _propTypes["default"].shape({}),
-  orientation: _propTypes["default"].oneOf(['vertical', 'horizontal'])
-};
 Stepper.displayName = 'Stepper';
 Stepper.defaultProps = {
   orientation: 'horizontal'

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

@@ -16,7 +16,7 @@ var _CreationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/Cre
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _Stepper = _interopRequireDefault(require("./Stepper.mdx"));
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -248,7 +248,7 @@ var Panel = exports.Panel = function Panel() {
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     state = _useOverlayPanelState.state,
     onClose = _useOverlayPanelState.onClose;
-  var triggerRef = _react.useRef < HTMLButtonElement > null;
+  var triggerRef = (0, _react.useRef)(null);
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };

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

@@ -0,0 +1,257 @@
+export declare const verticalLine: {
+    '&:before': {
+        position: string;
+        content: string;
+        borderLeft: string;
+        borderLeftColor: string;
+        left: string;
+        top: string;
+        height: string;
+    };
+};
+declare const _default: {
+    wrapper: {
+        width: string;
+    };
+    tabs: {
+        outline: string;
+        borderBottom: string;
+        mb: string;
+        justifyContent: string;
+        '&.is-horizontal': {
+            width: string;
+        };
+        '&.is-vertical': {
+            minWidth: string;
+            borderRight: string;
+        };
+    };
+    tab: {
+        '&.is-horizontal': {
+            mb: number;
+            mr: number;
+            outline: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+                borderRadius: string;
+            };
+            '&:not(:first-of-type)': {
+                flex: number;
+                maxWidth: number;
+            };
+        };
+        '&.is-vertical': {
+            position: string;
+            height: string;
+            width: string;
+            py: string;
+            px: string;
+            ':focus-visible:not(.is-focused)': {
+                outline: string;
+            };
+        };
+    };
+    tabLabel: {
+        mb: number;
+    };
+    outerWrapper: {
+        alignItems: string;
+    };
+    step: {
+        active: {
+            '&.is-horizontal': {
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                borderWidth: number;
+                borderStyle: string;
+                borderRadius: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                fontFamily: string;
+                '&[aria-expanded="true"]': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    color: string;
+                };
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
+            '&.is-vertical': {
+                backgroundColor: string;
+                border: string;
+                borderColor: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                borderWidth: number;
+                borderStyle: string;
+                borderRadius: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                fontFamily: string;
+                '&[aria-expanded="true"]': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    color: string;
+                };
+            };
+        };
+        completed: {
+            '&.is-horizontal': {
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                borderWidth: number;
+                borderStyle: string;
+                borderRadius: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                fontFamily: string;
+                '&[aria-expanded="true"]': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    color: string;
+                };
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
+            '&.is-vertical': {
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                borderWidth: number;
+                borderStyle: string;
+                borderRadius: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                fontFamily: string;
+                '&[aria-expanded="true"]': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    color: string;
+                };
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+        inactive: {
+            '&.is-horizontal': {
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                borderWidth: number;
+                borderStyle: string;
+                borderRadius: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                fontFamily: string;
+                '&[aria-expanded="true"]': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    color: string;
+                };
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
+            '&.is-vertical': {
+                backgroundColor: string;
+                border: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                borderWidth: number;
+                borderStyle: string;
+                borderRadius: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                fontFamily: string;
+                '&[aria-expanded="true"]': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    color: string;
+                };
+            };
+        };
+        default: {
+            display: string;
+            justifyContent: string;
+            alignItems: string;
+            width: number;
+            height: number;
+            minWidth: number;
+            minHeight: number;
+            borderWidth: number;
+            borderStyle: string;
+            borderRadius: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            fontFamily: string;
+            '&[aria-expanded="true"]': {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+    };
+    line: {
+        alignSelf: string;
+        width: string;
+        maxWidth: string;
+        borderBottomWidth: number;
+        borderBottomStyle: string;
+        borderBottomColor: string;
+        '&.is-inactive': {
+            borderBottomStyle: string;
+            borderBottomColor: string;
+        };
+        '&.is-default': {
+            width: number;
+            height: string;
+            maxHeight: string;
+            borderRightWidth: number;
+            borderRightStyle: string;
+            borderRightColor: string;
+        };
+    };
+};
+export default _default;

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

@@ -61,34 +61,31 @@ var defaultProps = {
   activeStep: 1,
   items: steps
 };
+
+// StepperProps.children is ReactNode (from BoxProps), but Stepper also accepts a render-prop
+// function via react-stately's collection mechanism. We cast to silence the assignability error.
+var stepperChildren = function stepperChildren(_ref) {
+  var name = _ref.name,
+    children = _ref.children;
+  return (0, _react2.jsx)(_reactStately.Item, {
+    key: name || children,
+    textValue: name || children
+  }, (0, _react2.jsx)(_Text["default"], null, children));
+};
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$renderFn = _ref.renderFn,
-    renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref2$renderFn = _ref2.renderFn,
+    renderFn = _ref2$renderFn === void 0 ? _testWrapper.render : _ref2$renderFn;
   return renderFn((0, _react2.jsx)(_react2.CacheProvider, {
     value: emotionCache
-  }, (0, _react2.jsx)(_Stepper["default"], (0, _extends2["default"])({}, defaultProps, props), function (_ref2) {
-    var name = _ref2.name,
-      children = _ref2.children;
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: name || children,
-      textValue: name || children
-    }, (0, _react2.jsx)(_Text["default"], null, children));
-  })));
+  }, (0, _react2.jsx)(_Stepper["default"], (0, _extends2["default"])({}, defaultProps, props), stepperChildren)));
 };
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
-    return (0, _react2.jsx)(_Stepper["default"], (0, _extends2["default"])({}, defaultProps, props), function (_ref3) {
-      var name = _ref3.name,
-        children = _ref3.children;
-      return (0, _react2.jsx)(_reactStately.Item, {
-        key: name || children,
-        textValue: name || children
-      }, (0, _react2.jsx)(_Text["default"], null, children));
-    });
+    return (0, _react2.jsx)(_Stepper["default"], (0, _extends2["default"])({}, defaultProps, props), stepperChildren);
   }
 });
 test('renders Stepper component in the default state', function () {
@@ -162,8 +159,9 @@ test('tooltip renders expected content based on props', /*#__PURE__*/(0, _asyncT
         _testWrapper.fireEvent.mouseMove(tab0);
         _testWrapper.fireEvent.mouseEnter(tab0);
         (0, _setTimeout2["default"])(function () {
+          var _steps$0$label;
           expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
-          expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent(steps[0].label);
+          expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent((_steps$0$label = steps[0].label) !== null && _steps$0$label !== void 0 ? _steps$0$label : '');
         }, 0);
 
         // Should render textValue

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

@@ -0,0 +1,2 @@
+export { default as Step } from './Step';
+export { default } from './Stepper';

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { TestingAttributes } from './shared/test';
+import { ValidPositiveInteger } from './shared/validPositiveInteger';
+import { BoxProps } from './box';
+export interface StepperItemProps {
+    /** The primary option for the tooltip label. */
+    label?: string;
+    children?: ReactNode;
+    name?: string;
+    /** Whether the step is required. */
+    isRequired?: boolean;
+}
+export interface StepperProps extends BoxProps, TestingAttributes {
+    /**
+     * *For performance reasons,
+     * use this prop instead of Array.map when iteratively rendering Items*.
+     * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+     */
+    items?: Array<StepperItemProps>;
+    /** The number of the current step (using one-based indexing) */
+    activeStep?: ValidPositiveInteger;
+    /**
+     * Handler that is called when the current step changes.
+     * `(index: number) => void`
+     */
+    onStepChange?: (index: number) => void;
+    /** A props object that is subsequently spread into the rendered tablist. */
+    tabListProps?: Record<string, unknown>;
+    /** A props object that is subsequently spread into the rendered tooltip. */
+    tooltipProps?: Record<string, unknown>;
+    /** The orientation of the stepper. */
+    orientation?: 'vertical' | 'horizontal';
+}

package/lib/cjs/types/Stepper.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/cjs/types/index.d.ts

@@ -52,6 +52,7 @@ export * from './separator';
 export * from './ServerErrorBoundary';
 export * from './shared';
 export * from './skeleton';
+export * from './Stepper';
 export * from './switchField';
 export * from './tab';
 export * from './table';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context0, _context1, _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, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context0, _context1, _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, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61;
 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");
@@ -601,8 +601,19 @@ _forEachInstanceProperty(_context52 = _Object$keys(_skeleton)).call(_context52,
     }
   });
 });
+var _Stepper = require("./Stepper");
+_forEachInstanceProperty(_context53 = _Object$keys(_Stepper)).call(_context53, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Stepper[key];
+    }
+  });
+});
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context53 = _Object$keys(_switchField)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_switchField)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -613,7 +624,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_switchField)).call(_context5
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context54 = _Object$keys(_tab)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_tab)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -624,7 +635,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_tab)).call(_context54, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context55 = _Object$keys(_table)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_table)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -635,7 +646,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_table)).call(_context55, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context56 = _Object$keys(_tabs)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_tabs)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -646,7 +657,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_tabs)).call(_context56, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context57 = _Object$keys(_text)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_text)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -657,7 +668,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_text)).call(_context57, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context58 = _Object$keys(_textField)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_textField)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -668,7 +679,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_textField)).call(_context58,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context59 = _Object$keys(_timefield)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_timefield)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -679,7 +690,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_timefield)).call(_context59,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context60 = _Object$keys(_tooltipTrigger)).call(_context60, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_tooltipTrigger)).call(_context61, 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/tabs.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import { AriaTabListProps } from '@react-aria/tabs';
 import { TabListState } from '@react-stately/tabs';
 import type { CollectionChildren } from '@react-types/shared';
@@ -21,7 +21,7 @@ export interface TabsProps extends StyleProps, TestingAttributes, OrientationPro
     /** Whether the entire tablist is disabled. */
     isDisabled?: boolean;
     /** Handler that is called when the selected tab has changed. */
-    onSelectionChange?: Dispatch<SetStateAction<string | undefined>>;
+    onSelectionChange?: (key: string) => void;
     /** A props object that is subsequently spread into the rendered tablist. */
     tabListProps?: object;
     /** Props object that is spread directly into all of the tab panel wrapper elements. */

package/lib/cjs/utils/devUtils/props/isValidPositiveInt.d.ts

@@ -0,0 +1,2 @@
+declare const isValidPositiveInt: (props: Record<string, unknown>, propName: string, componentName: string) => null | Error;
+export default isValidPositiveInt;

package/lib/cjs/utils/devUtils/props/isValidPositiveInt.js

@@ -20,7 +20,8 @@ var validatePositiveInteger = function validatePositiveInteger() {
     var isPositiveInteger = isWithinRange(1, Infinity);
     if (props[propName] && !isPositiveInteger(props[propName])) {
       var _context, _context2;
-      return new Error((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "Expected a positive integer for ".concat(propName, " in ")).call(_context2, componentName, ", but instead received `")).call(_context, props[propName], "`."));
+      var received = props[propName];
+      return new Error((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "Expected a positive integer for ".concat(propName, " in ")).call(_context2, componentName, ", but instead received `")).call(_context, received, "`."));
     }
     // Everything is fine
     return null;

package/lib/components/Stepper/Line.js

@@ -1,7 +1,5 @@
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 /* istanbul ignore file */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import { stepStatuses } from './Stepper.constants';
@@ -20,7 +18,4 @@ var Line = function Line(_ref) {
     className: classNames
   });
 };
-Line.propTypes = {
-  status: PropTypes.oneOf(_Object$values(stepStatuses))
-};
 export default Line;

package/lib/components/Stepper/Step.js

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef } from 'react';
 import CheckBoldIcon from '@pingux/mdi-react/CheckBoldIcon';
 import { useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { Box, Icon } from '../../index';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { stepStatuses } from './Stepper.constants';
@@ -11,11 +9,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var COMPLETED = stepStatuses.COMPLETED,
   INACTIVE = stepStatuses.INACTIVE;
 var Step = /*#__PURE__*/forwardRef(function (props, ref) {
-  var status = props.status,
-    value = props.value,
+  var _props$status = props.status,
+    status = _props$status === void 0 ? INACTIVE : _props$status,
+    _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
     className = props.className,
     orientation = props.orientation;
-  var _useHover = useHover(props),
+  var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var stepValue = orientation !== ORIENTATION.VERTICAL && value;
@@ -33,13 +33,5 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }) : stepValue);
 });
-Step.propTypes = {
-  status: PropTypes.oneOf(_Object$values(stepStatuses)),
-  value: PropTypes.number,
-  orientation: PropTypes.oneOf([ORIENTATION.VERTICAL, ORIENTATION.HORIZONTAL])
-};
-Step.defaultProps = {
-  status: INACTIVE,
-  value: 0
-};
+Step.displayName = 'Step';
 export default Step;

package/lib/components/Stepper/Stepper.js

@@ -18,11 +18,11 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 /* istanbul ignore file */
 import React, { forwardRef } from 'react';
 import { useSingleSelectListState } from '@react-stately/list';
-import PropTypes from 'prop-types';
-import { Box, Step, Tab, Tabs, Text } from '../..';
-import { useStatusClasses } from '../../hooks';
+import { Box, Step, Tabs, Text } from '../..';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
+import Tab from '../Tab';
 import Line from './Line';
 import { stepStatuses } from './Stepper.constants';
 import { verticalLine } from './Stepper.styles';
@@ -39,6 +39,15 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
     orientation = props.orientation,
     className = props.className,
     others = _objectWithoutProperties(props, _excluded);
+  var stepperRef = useLocalOrForwardRef(ref);
+  if (process.env.NODE_ENV !== 'production' && props.activeStep !== undefined) {
+    var validationError = isValidPositiveInt({
+      activeStep: props.activeStep
+    }, 'activeStep', 'Stepper');
+    if (validationError) {
+      console.error(validationError.message);
+    }
+  }
   var state = useSingleSelectListState(props);
   var getStatus = function getStatus(i) {
     if (i === activeStep) {
@@ -51,7 +60,7 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   var onStepChangeHandler = function onStepChangeHandler(key) {
     if (onStepChange) {
-      onStepChange(+key);
+      onStepChange(Number(key));
     }
   };
   var _useStatusClasses = useStatusClasses(className, {
@@ -97,7 +106,8 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
 
     /* istanbul ignore next */
     var textValue = item && item.value && item.value.label || item.textValue || stepIndex.toString();
-    var container = ___EmotionJSX(Tab, {
+    var TabItem = Tab;
+    var container = ___EmotionJSX(TabItem, {
       key: stepIndex,
       variant: "stepper.tab",
       tabLineProps: {
@@ -112,13 +122,13 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
       content: item.rendered,
       separator: !isFirst && orientation === ORIENTATION.HORIZONTAL && !isFirst && line,
       tooltipTriggerProps: tooltipProps,
-      sx: i !== steps.length - 1 && orientation === ORIENTATION.VERTICAL && verticalLine
+      sx: i !== steps.length - 1 && orientation === ORIENTATION.VERTICAL ? verticalLine : undefined
     });
     isFirst = isFirst && !container;
     return container;
   });
   return ___EmotionJSX(Tabs, _extends({
-    ref: ref,
+    ref: stepperRef,
     variant: "stepper.wrapper",
     tabListProps: _objectSpread({
       variant: 'stepper.tabs',
@@ -130,30 +140,6 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
     orientation: orientation
   }, others), render);
 });
-Stepper.propTypes = {
-  /**
-   * *For performance reasons,
-  use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-  */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    /** The primary option for the tooltip label. */
-    label: PropTypes.string,
-    children: PropTypes.node,
-    name: PropTypes.string
-  })),
-  /** The number of the current step (using one-based indexing) */
-  activeStep: isValidPositiveInt,
-  /**
-  * Handler that is called when the current step changes
-  * `(index: number) => void`
-  */
-  onStepChange: PropTypes.func,
-  /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: PropTypes.shape({}),
-  tooltipProps: PropTypes.shape({}),
-  orientation: PropTypes.oneOf(['vertical', 'horizontal'])
-};
 Stepper.displayName = 'Stepper';
 Stepper.defaultProps = {
   orientation: 'horizontal'

package/lib/components/Stepper/Stepper.stories.js

@@ -5,7 +5,7 @@ import CreationOutlineIcon from '@pingux/mdi-react/CreationOutlineIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
 import { Box, Button, Item, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import StepperReadme from './Stepper.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -236,7 +236,7 @@ export var Panel = function Panel() {
   var _useOverlayPanelState = useOverlayPanelState(),
     state = _useOverlayPanelState.state,
     onClose = _useOverlayPanelState.onClose;
-  var triggerRef = useRef < HTMLButtonElement > null;
+  var triggerRef = useRef(null);
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };

package/lib/components/Stepper/Stepper.test.js

@@ -61,34 +61,31 @@ var defaultProps = {
   activeStep: 1,
   items: steps
 };
+
+// StepperProps.children is ReactNode (from BoxProps), but Stepper also accepts a render-prop
+// function via react-stately's collection mechanism. We cast to silence the assignability error.
+var stepperChildren = function stepperChildren(_ref) {
+  var name = _ref.name,
+    children = _ref.children;
+  return ___EmotionJSX(Item, {
+    key: name || children,
+    textValue: name || children
+  }, ___EmotionJSX(Text, null, children));
+};
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$renderFn = _ref.renderFn,
-    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref2$renderFn = _ref2.renderFn,
+    renderFn = _ref2$renderFn === void 0 ? render : _ref2$renderFn;
   return renderFn(___EmotionJSX(CacheProvider, {
     value: emotionCache
-  }, ___EmotionJSX(Stepper, _extends({}, defaultProps, props), function (_ref2) {
-    var name = _ref2.name,
-      children = _ref2.children;
-    return ___EmotionJSX(Item, {
-      key: name || children,
-      textValue: name || children
-    }, ___EmotionJSX(Text, null, children));
-  })));
+  }, ___EmotionJSX(Stepper, _extends({}, defaultProps, props), stepperChildren)));
 };
 
 // Needs to be added to each components test file
 universalComponentTests({
   renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Stepper, _extends({}, defaultProps, props), function (_ref3) {
-      var name = _ref3.name,
-        children = _ref3.children;
-      return ___EmotionJSX(Item, {
-        key: name || children,
-        textValue: name || children
-      }, ___EmotionJSX(Text, null, children));
-    });
+    return ___EmotionJSX(Stepper, _extends({}, defaultProps, props), stepperChildren);
   }
 });
 test('renders Stepper component in the default state', function () {
@@ -162,8 +159,9 @@ test('tooltip renders expected content based on props', /*#__PURE__*/_asyncToGen
         fireEvent.mouseMove(tab0);
         fireEvent.mouseEnter(tab0);
         _setTimeout(function () {
+          var _steps$0$label;
           expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-          expect(screen.queryByRole('tooltip')).toHaveTextContent(steps[0].label);
+          expect(screen.queryByRole('tooltip')).toHaveTextContent((_steps$0$label = steps[0].label) !== null && _steps$0$label !== void 0 ? _steps$0$label : '');
         }, 0);
 
         // Should render textValue

package/lib/types/Stepper.js

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

package/lib/types/index.js

@@ -52,6 +52,7 @@ export * from './separator';
 export * from './ServerErrorBoundary';
 export * from './shared';
 export * from './skeleton';
+export * from './Stepper';
 export * from './switchField';
 export * from './tab';
 export * from './table';

package/lib/utils/devUtils/props/isValidPositiveInt.js

@@ -12,7 +12,8 @@ var validatePositiveInteger = function validatePositiveInteger() {
     var isPositiveInteger = isWithinRange(1, Infinity);
     if (props[propName] && !isPositiveInteger(props[propName])) {
       var _context, _context2;
-      return new Error(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "Expected a positive integer for ".concat(propName, " in ")).call(_context2, componentName, ", but instead received `")).call(_context, props[propName], "`."));
+      var received = props[propName];
+      return new Error(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "Expected a positive integer for ".concat(propName, " in ")).call(_context2, componentName, ", but instead received `")).call(_context, received, "`."));
     }
     // Everything is fine
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.204.0-alpha.0",
+  "version": "2.205.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",