@planningcenter/tapestry-react 2.10.0-rc.8 → 2.10.0

package/dist/cjs/Tooltip/Tooltip.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mitt = _interopRequireDefault(require("mitt"));
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+var _utils = require("../utils");
+
+var _system = require("../system");
+
+var emitter = (0, _mitt["default"])();
+var globalTimeoutId = null;
+var instantDelay = false;
+
+function startGlobalTimeout() {
+  instantDelay = true;
+  globalTimeoutId = setTimeout(function () {
+    instantDelay = false;
+  }, 500);
+}
+
+function clearGlobalTimeout() {
+  clearTimeout(globalTimeoutId);
+}
+
+function Tooltip(props, ref) {
+  var _useThemeProps = (0, _system.useThemeProps)('tooltip', props),
+      children = _useThemeProps.children,
+      _useThemeProps$openDe = _useThemeProps.openDelay,
+      openDelay = _useThemeProps$openDe === void 0 ? 500 : _useThemeProps$openDe,
+      _useThemeProps$closeD = _useThemeProps.closeDelay,
+      closeDelay = _useThemeProps$closeD === void 0 ? 300 : _useThemeProps$closeD,
+      _useThemeProps$defaul = _useThemeProps.defaultOpen,
+      defaultOpen = _useThemeProps$defaul === void 0 ? false : _useThemeProps$defaul,
+      _useThemeProps$keepIn = _useThemeProps.keepInView,
+      keepInView = _useThemeProps$keepIn === void 0 ? true : _useThemeProps$keepIn,
+      placement = _useThemeProps.placement,
+      popoverProps = _useThemeProps.popoverProps,
+      renderTo = _useThemeProps.renderTo,
+      title = _useThemeProps.title,
+      _useThemeProps$trigge = _useThemeProps.triggerOnFocus,
+      triggerOnFocus = _useThemeProps$trigge === void 0 ? true : _useThemeProps$trigge,
+      _useThemeProps$trigge2 = _useThemeProps.triggerOnHover,
+      triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 9999 : _useThemeProps$zIndex,
+      childProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover", "zIndex"]);
+
+  var isPageInView = (0, _react.useRef)(true);
+  var isMouseDown = (0, _react.useRef)(false);
+  var openTimeoutId = (0, _react.useRef)(null);
+  var closeTimeoutId = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    var cleanupPageViewChange = (0, _utils.pageViewChange)(function (inView) {
+      return setTimeout(function () {
+        return isPageInView.current = inView;
+      });
+    });
+    emitter.on('CLOSE_OPEN_TOOLTIPS', close);
+    return function () {
+      emitter.off('CLOSE_OPEN_TOOLTIPS', close);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
+      cleanupPageViewChange();
+    };
+  }, []);
+
+  var open = function open() {
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
+    setIsPopoverOpen(true);
+  };
+
+  var close = function close() {
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
+    setIsPopoverOpen(false);
+  };
+
+  var toggle = function toggle() {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      open: open,
+      close: close,
+      toggle: toggle
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (triggerOnFocus === false) {
+      close();
+    }
+  }, [triggerOnFocus]);
+  (0, _react.useEffect)(function () {
+    if (triggerOnHover === false) {
+      close();
+    }
+  }, [triggerOnHover]);
+
+  var createOpenTimeout = function createOpenTimeout() {
+    clearGlobalTimeout();
+
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
+
+      if (isPopoverOpen === false) {
+        emitter.emit('CLOSE_OPEN_TOOLTIPS');
+        openTimeoutId.current = setTimeout(function () {
+          return open();
+        }, instantDelay ? 0 : openDelay);
+      }
+    }
+  };
+
+  var createCloseTimeout = function createCloseTimeout() {
+    startGlobalTimeout();
+
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
+      }, closeDelay);
+    }
+  };
+
+  var handleFocus = function handleFocus() {
+    if (isPageInView.current && !isMouseDown.current) {
+      open();
+    }
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    isMouseDown.current = true;
+    close();
+  };
+
+  var handleMouseUp = function handleMouseUp() {
+    isMouseDown.current = false;
+  };
+
+  var child = _react.Children.only(children);
+
+  var _child$props = child.props,
+      onFocus = _child$props.onFocus,
+      onBlur = _child$props.onBlur,
+      onMouseEnter = _child$props.onMouseEnter,
+      onMouseLeave = _child$props.onMouseLeave,
+      onMouseDown = _child$props.onMouseDown,
+      onMouseUp = _child$props.onMouseUp;
+
+  if (!title) {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
+  }
+
+  if (triggerOnFocus) {
+    childProps.onFocus = (0, _utils.composeEvents)(handleFocus, onFocus);
+    childProps.onBlur = (0, _utils.composeEvents)(close, onBlur);
+    childProps.onMouseDown = (0, _utils.composeEvents)(handleMouseDown, onMouseDown);
+    childProps.onMouseUp = (0, _utils.composeEvents)(handleMouseUp, onMouseUp);
+  }
+
+  if (triggerOnHover) {
+    childProps.onMouseEnter = (0, _utils.composeEvents)(createOpenTimeout, onMouseEnter);
+    childProps.onMouseLeave = (0, _utils.composeEvents)(createCloseTimeout, onMouseLeave);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({
+    shouldFlip: true,
+    paddingHorizontal: 0.75,
+    paddingVertical: 0.25,
+    fontSize: 5,
+    textAlign: "center",
+    radius: 2,
+    backgroundColor: "grey-9",
+    color: "rgba(255,255,255,0.94)",
+    zIndex: zIndex
+  }, popoverProps, {
+    anchorElement: /*#__PURE__*/(0, _react.cloneElement)(child, childProps),
+    onMouseEnter: createOpenTimeout,
+    onMouseLeave: createCloseTimeout,
+    keepInView: keepInView,
+    placement: placement,
+    renderTo: renderTo,
+    children: title,
+    open: isPopoverOpen
+  }));
+}
+
+Tooltip = /*#__PURE__*/(0, _react.forwardRef)(Tooltip);
+var _default = Tooltip;
+exports["default"] = _default;

package/dist/cjs/Tooltip/Tooltip.test.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require("..");
+
+describe('Tooltip', function () {
+  test('does not render string when closed', function () {
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+      title: string
+    }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+    expect(_react2.screen.queryByText(string)).toBeNull();
+  });
+  test('renders string on hover', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var string, tooltip;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string
+            }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+
+            _userEvent["default"].hover(_react2.screen.getByText('Tooltip anchor'));
+
+            _context.next = 5;
+            return _react2.screen.findByText(string);
+
+          case 5:
+            tooltip = _context.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test('renders string on focus', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var string, tooltip;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string,
+              triggerOnFocus: true
+            }, /*#__PURE__*/_react["default"].createElement(_.Button, null, "Tooltip anchor")));
+
+            _userEvent["default"].tab();
+
+            _context2.next = 5;
+            return _react2.screen.findByText(string);
+
+          case 5:
+            tooltip = _context2.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('removes string after timeout', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var string, anchor, tooltip;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string
+            }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+            anchor = _react2.screen.getByText('Tooltip anchor');
+            expect(_react2.screen.queryByText(string)).toBeNull();
+
+            _userEvent["default"].hover(anchor);
+
+            _context3.next = 7;
+            return _react2.screen.findByText(string);
+
+          case 7:
+            tooltip = _context3.sent;
+            expect(tooltip).toBeInTheDocument();
+
+            _userEvent["default"].unhover(anchor);
+
+            _context3.next = 12;
+            return (0, _react2.waitFor)(function () {
+              expect(_react2.screen.queryByText(string)).not.toBeInTheDocument();
+            });
+
+          case 12:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  test('stays open when hovering a custom tooltip', function () {
+    var CustomTooltip = function CustomTooltip() {
+      var _hooks$useHover = _.hooks.useHover(),
+          hover = _hooks$useHover.hover,
+          hoverProps = _hooks$useHover.hoverProps;
+
+      return /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+        title: /*#__PURE__*/_react["default"].createElement(_.Link, {
+          to: "#"
+        }, /*#__PURE__*/_react["default"].createElement(_.StackView, null, /*#__PURE__*/_react["default"].createElement(_.Text, {
+          "data-hover": hover
+        }, string)))
+      }, /*#__PURE__*/_react["default"].createElement(_.Button, hoverProps, "Tooltip anchor"));
+    };
+
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(CustomTooltip, null));
+
+    var anchor = _react2.screen.getByText('Tooltip anchor');
+
+    _userEvent["default"].hover(anchor);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+
+    var tooltip = _react2.screen.getByText(string);
+
+    expect(tooltip).toBeInTheDocument();
+
+    _userEvent["default"].unhover(anchor);
+
+    _userEvent["default"].hover(tooltip);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).toBeInTheDocument();
+
+    _userEvent["default"].unhover(tooltip);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+  test('cleans up pageViewChange listeners', function () {
+    window.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+    document.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+      title: "Test Text"
+    }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor"))),
+        unmount = _render.unmount;
+
+    unmount();
+    expect(window.removeEventListener).toBeCalledWith('focus', expect.any(Function));
+    expect(window.removeEventListener).toBeCalledWith('blur', expect.any(Function));
+    expect(document.removeEventListener).toBeCalledWith('visibilitychange', expect.any(Function));
+  });
+});

package/dist/cjs/Tooltip/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+
+var _default = _Tooltip["default"];
+exports["default"] = _default;

package/dist/cjs/VariantProvider/VariantProvider.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useVariant = useVariant;
+exports.VariantProvider = VariantProvider;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var VariantContext = /*#__PURE__*/(0, _react.createContext)();
+
+function useVariant() {
+  var variant = (0, _react.useContext)(VariantContext);
+  return variant ? Object.keys(variant).filter(function (key) {
+    return variant[key];
+  }) : null;
+}
+
+function VariantProvider(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children"]);
+  var parentVariant = useVariant();
+  return /*#__PURE__*/_react["default"].createElement(VariantContext.Provider, {
+    value: props
+  }, children);
+}

package/dist/cjs/VariantProvider/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useVariant = exports["default"] = void 0;
+
+var _VariantProvider = require("./VariantProvider");
+
+exports["default"] = _VariantProvider.VariantProvider;
+exports.useVariant = _VariantProvider.useVariant;

package/dist/cjs/Wizard/Step.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = require("react");
+
+var _WizardContext = _interopRequireDefault(require("./WizardContext"));
+
+function Step(_ref) {
+  var children = _ref.children,
+      name = _ref.name,
+      valid = _ref.valid;
+
+  var _useContext = (0, _react.useContext)(_WizardContext["default"]),
+      addStep = _useContext.addStep,
+      wizard = (0, _objectWithoutPropertiesLoose2["default"])(_useContext, ["addStep"]);
+
+  (0, _react.useEffect)(function () {
+    return addStep({
+      name: name,
+      valid: valid
+    });
+  }, []);
+  return children(wizard);
+}
+
+var _default = Step;
+exports["default"] = _default;

package/dist/cjs/Wizard/Wizard.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _PagerView = _interopRequireDefault(require("../PagerView"));
+
+var _StepperProgress = _interopRequireDefault(require("../StepperProgress"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _system = require("../system");
+
+var _WizardContext = _interopRequireDefault(require("./WizardContext"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var Wizard = function Wizard(props) {
+  var _useThemeProps = (0, _system.useThemeProps)('wizard', props),
+      _useThemeProps$autoFo = _useThemeProps.autoFocus,
+      autoFocus = _useThemeProps$autoFo === void 0 ? true : _useThemeProps$autoFo,
+      backButtonProps = _useThemeProps.backButtonProps,
+      buttonProps = _useThemeProps.buttonProps,
+      cancelButtonProps = _useThemeProps.cancelButtonProps,
+      children = _useThemeProps.children,
+      footerProps = _useThemeProps.footerProps,
+      _useThemeProps$initia = _useThemeProps.initialPayload,
+      initialPayload = _useThemeProps$initia === void 0 ? {} : _useThemeProps$initia,
+      nextButtonProps = _useThemeProps.nextButtonProps,
+      _useThemeProps$nextBu = _useThemeProps.nextButtonTitle,
+      nextButtonTitle = _useThemeProps$nextBu === void 0 ? function (_ref) {
+    var activeStepIndex = _ref.activeStepIndex,
+        steps = _ref.steps,
+        totalSteps = _ref.totalSteps;
+    return activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next';
+  } : _useThemeProps$nextBu,
+      onCancel = _useThemeProps.onCancel,
+      onSubmit = _useThemeProps.onSubmit,
+      renderProgress = _useThemeProps.renderProgress,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
+
+  var _useState = (0, _react.useState)(0),
+      activeStepIndex = _useState[0],
+      setActiveStepIndex = _useState[1];
+
+  var _useState2 = (0, _react.useState)([]),
+      steps = _useState2[0],
+      setSteps = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      sendingPayload = _useState3[0],
+      setSendingPayload = _useState3[1];
+
+  var totalSteps = steps.length;
+
+  var _useReducer = (0, _react.useReducer)(function (prevState, updatedProperty) {
+    return _objectSpread(_objectSpread({}, prevState), updatedProperty);
+  }, initialPayload),
+      payload = _useReducer[0],
+      setPayload = _useReducer[1];
+
+  var addStep = (0, _react.useCallback)(function (step) {
+    setSteps(function (steps) {
+      return [].concat(steps, [step]);
+    });
+    return function () {
+      setSteps(function (steps) {
+        return steps.filter(function (previousStep) {
+          return previousStep.name !== step.name;
+        });
+      });
+    };
+  }, []);
+  var isCurrentStepValid = (0, _react.useCallback)(function () {
+    var currentStep = steps[activeStepIndex];
+    return currentStep && currentStep.valid ? currentStep.valid(payload) : true;
+  }, [activeStepIndex, steps, payload]);
+  var handleSubmit = (0, _react.useCallback)(function () {
+    if (onSubmit) {
+      var _complete = function _complete() {
+        return setSendingPayload(false);
+      };
+
+      setSendingPayload(true);
+      onSubmit(payload, _complete);
+    }
+  }, [onSubmit, payload]);
+  return /*#__PURE__*/_react["default"].createElement(_WizardContext["default"].Provider, {
+    value: {
+      activeStepIndex: activeStepIndex,
+      addStep: addStep,
+      setPayload: setPayload,
+      payload: payload,
+      totalSteps: totalSteps
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
+    minWidth: 48,
+    maxWidth: 96
+  }, restProps), renderProgress ? renderProgress({
+    activeStepIndex: activeStepIndex,
+    steps: steps,
+    totalSteps: totalSteps
+  }) : /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"], {
+    width: "80%",
+    paddingTop: 6,
+    paddingBottom: 4,
+    activeStepIndex: activeStepIndex
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"].Step, {
+      key: index,
+      renderEnd: /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+        align: "center",
+        marginTop: 2
+      }, step.name)
+    });
+  })), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+    spacing: /*#__PURE__*/_react["default"].createElement(_Divider["default"], null),
+    elevation: 1
+  }, /*#__PURE__*/_react["default"].createElement(_PagerView["default"], {
+    activeViewIndex: activeStepIndex,
+    autoFocus: autoFocus
+  }, _react.Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react["default"].createElement(_PagerView["default"].View, {
+      key: index
+    }, child);
+  })), /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal",
+    distribution: activeStepIndex > 0 ? 'space-between' : 'end',
+    padding: 1,
+    spacing: 1
+  }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    disabled: sendingPayload,
+    onClick: onCancel,
+    size: "lg",
+    title: "Cancel",
+    variant: "naked"
+  }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    disabled: sendingPayload,
+    iconLeft: {
+      name: 'general.leftChevron',
+      size: 'sm'
+    },
+    onClick: function onClick() {
+      return setActiveStepIndex(activeStepIndex - 1);
+    },
+    size: "lg",
+    title: "Back",
+    variant: "naked"
+  }, buttonProps, backButtonProps)), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    disabled: !isCurrentStepValid(),
+    onClick: function onClick() {
+      return activeStepIndex >= totalSteps - 1 ? handleSubmit() : setActiveStepIndex(activeStepIndex + 1);
+    },
+    size: "lg",
+    spinner: sendingPayload,
+    theme: "primary",
+    title: nextButtonTitle({
+      activeStepIndex: activeStepIndex,
+      steps: steps,
+      totalSteps: totalSteps
+    })
+  }, buttonProps, nextButtonProps))))));
+};
+
+var _default = Wizard;
+exports["default"] = _default;

package/dist/cjs/Wizard/WizardContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var WizardContext = /*#__PURE__*/(0, _react.createContext)();
+var _default = WizardContext;
+exports["default"] = _default;