@pingux/astro 2.140.0-alpha.4 → 2.140.0-alpha.6

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

@@ -128,15 +128,25 @@ Warning.parameters = {
     url: _figmaLinks.FIGMA_LINKS.callout.warning
   }
 };
+var iconContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 25,
+  height: 25,
+  minWidth: 25,
+  minHeight: 25,
+  borderStyle: 'solid',
+  borderRadius: '50%',
+  backgroundColor: 'active',
+  borderColor: 'active',
+  color: 'text.primaryLight',
+  mx: 'md'
+};
 var WithCustomIcon = function WithCustomIcon() {
   return (0, _react2.jsx)(_index.Callout, {
     icon: (0, _react2.jsx)(_index.Box, {
-      variant: "stepper.step.completed",
-      mx: "md",
-      minHeight: 25,
-      minWidth: 25,
-      height: 25,
-      width: 25
+      sx: iconContainer
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _CheckBoldIcon["default"],
       title: {

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { OverlayTriggerState } from 'react-stately';
+import type { AriaPopoverProps } from '@react-aria/overlays';
+export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
+    children?: React.ReactNode;
+    state: OverlayTriggerState;
+    className?: string;
+    popoverRef?: React.RefObject<HTMLDivElement>;
+    style?: React.CSSProperties;
+    width?: string | number;
+    'data-testid'?: string;
+}
+declare const Popover: (props: PopoverProps) => React.JSX.Element | null;
+export default Popover;

package/lib/cjs/components/Popover/Popover.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _overlays = require("@react-aria/overlays");
+var _hooks = require("../../hooks");
+var _Box = _interopRequireDefault(require("../Box"));
+var _react2 = require("@emotion/react");
+var _excluded = ["popoverRef", "state", "children", "className", "isNonModal", "width"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Popover = function Popover(props) {
+  var ref = React.useRef(null);
+  var _props$popoverRef = props.popoverRef,
+    popoverRef = _props$popoverRef === void 0 ? ref : _props$popoverRef,
+    state = props.state,
+    children = props.children,
+    className = props.className,
+    isNonModal = props.isNonModal,
+    width = props.width,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _usePopover = (0, _overlays.usePopover)(_objectSpread(_objectSpread({}, props), {}, {
+      popoverRef: popoverRef
+    }), state),
+    popoverProps = _usePopover.popoverProps,
+    underlayProps = _usePopover.underlayProps;
+  var isOpen = state.isOpen;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isOpen: isOpen
+    }),
+    classNames = _useStatusClasses.classNames;
+  if (!isOpen) {
+    return null;
+  }
+  return (0, _react2.jsx)(_overlays.Overlay, null, !isNonModal && (0, _react2.jsx)("div", underlayProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: popoverRef,
+    variant: "popoverMenu.container",
+    className: classNames,
+    role: "presentation",
+    width: width
+  }, popoverProps, others), !isNonModal && (0, _react2.jsx)(_overlays.DismissButton, {
+    onDismiss: state.close
+  }), children, (0, _react2.jsx)(_overlays.DismissButton, {
+    onDismiss: state.close
+  })));
+};
+var _default = Popover;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Box = _interopRequireDefault(require("../Box"));
+var _Popover = _interopRequireDefault(require("./Popover"));
+var _react3 = require("@emotion/react");
+var mockState = function mockState(isOpen) {
+  return {
+    isOpen: isOpen,
+    close: jest.fn(),
+    open: jest.fn(),
+    toggle: jest.fn(),
+    setOpen: jest.fn()
+  };
+};
+var triggerRef = /*#__PURE__*/_react["default"].createRef();
+var defaultProps = {
+  'data-testid': 'popover',
+  state: mockState(true),
+  triggerRef: triggerRef
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_Popover["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)(_Box["default"], {
+    "data-testid": "popover-children"
+  }, "I am in a popover")));
+};
+describe('Popover', function () {
+  test('does not render when isOpen is false', function () {
+    getComponent({
+      state: mockState(false)
+    });
+    expect(_react2.screen.queryByTestId('popover')).not.toBeInTheDocument();
+  });
+  test('renders when isOpen is true', function () {
+    getComponent({
+      state: mockState(true)
+    });
+    expect(_react2.screen.getByTestId('popover')).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('popover-children')).toBeInTheDocument();
+  });
+  test('applies custom className', function () {
+    getComponent({
+      state: mockState(true),
+      className: 'custom-class'
+    });
+    expect(_react2.screen.getByTestId('popover')).toHaveClass('custom-class');
+  });
+  test('applies custom width', function () {
+    getComponent({
+      state: mockState(true),
+      width: 300
+    });
+    expect(_react2.screen.getByTestId('popover')).toHaveStyle({
+      width: '300px'
+    });
+  });
+  test('renders underlay and DismissButton when isNonModal is false', function () {
+    var _screen$getByTestId$p;
+    getComponent({
+      state: mockState(true),
+      isNonModal: false
+    });
+    expect((_screen$getByTestId$p = _react2.screen.getByTestId('popover').parentElement) === null || _screen$getByTestId$p === void 0 ? void 0 : _screen$getByTestId$p.querySelector('div')).toBeTruthy();
+    expect(_react2.screen.getByTestId('popover')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1 @@
+export { default } from './Popover';

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

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Popover["default"];
+  }
+});
+var _Popover = _interopRequireDefault(require("./Popover"));

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

@@ -298,9 +298,6 @@ test('two listbox can not be open at the same time', function () {
     name: 'Alpha'
   })).toBeInTheDocument();
   _userEvent["default"].click(button2);
-  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
-  _userEvent["default"].click(button2);
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
   expect(_testWrapper.screen.queryByRole('option', {

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

@@ -16,6 +16,7 @@ var _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBold
 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");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,25 +25,31 @@ 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;
+    value = props.value,
+    className = props.className,
+    orientation = props.orientation;
   var _useHover = (0, _interactions.useHover)(props),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
+  var stepValue = orientation !== _orientation["default"].VERTICAL && value;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "stepper.step.".concat(status),
     ref: ref
-  }, hoverProps), status === COMPLETED && !isHovered ? (0, _react2.jsx)(_index.Icon, {
+  }, hoverProps, {
+    className: className
+  }), status === COMPLETED && !isHovered ? (0, _react2.jsx)(_index.Icon, {
     icon: _CheckBoldIcon["default"],
     size: 23,
     color: "text.primaryLight",
     title: {
       name: 'Check Bold Icon'
     }
-  }) : value);
+  }) : stepValue);
 });
 Step.propTypes = {
   status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses)),
-  value: _propTypes["default"].number
+  value: _propTypes["default"].number,
+  orientation: _propTypes["default"].oneOf([_orientation["default"].VERTICAL, _orientation["default"].HORIZONTAL])
 };
 Step.defaultProps = {
   status: INACTIVE,

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

@@ -25,11 +25,14 @@ 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 _Line = _interopRequireDefault(require("./Line"));
 var _Stepper = require("./Stepper.constants");
+var _Stepper2 = require("./Stepper.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps"];
+var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps", "orientation", "className"];
 /* istanbul ignore file */
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -44,6 +47,8 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onStepChange = props.onStepChange,
     tabListProps = props.tabListProps,
     tooltipProps = props.tooltipProps,
+    orientation = props.orientation,
+    className = props.className,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _list.useSingleSelectListState)(props);
   var getStatus = function getStatus(i) {
@@ -60,23 +65,46 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onStepChange(+key);
     }
   };
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      'is-vertical': orientation === _orientation["default"].VERTICAL,
+      'is-horizontal': orientation === _orientation["default"].HORIZONTAL
+    }),
+    classNames = _useStatusClasses.classNames;
   var steps = (0, _from["default"])(state.collection);
   var lines = (0, _map["default"])(steps).call(steps, function (_v, i) {
     return (0, _react2.jsx)(_Line["default"], {
+      className: classNames,
       status: getStatus(i + 2)
     });
   });
   var isFirst = true; // make sure not to insert until there's at least one non-null child
 
   var render = (0, _map["default"])(steps).call(steps, function (item, i) {
+    var _item$props;
     var stepIndex = i + 1;
     var stepStatus = getStatus(stepIndex);
+    var line = (0, _isArray["default"])(lines) ? lines[i - 1] : lines;
+    var defaultIndicator = (0, _react2.jsx)(_.Box, {
+      variant: "forms.label.indicator"
+    }, "*");
     var step = (0, _react2.jsx)(_.Step, {
       key: item.key,
       value: stepIndex,
-      status: stepStatus
+      status: stepStatus,
+      className: classNames,
+      orientation: orientation
     });
-    var line = (0, _isArray["default"])(lines) ? lines[i - 1] : lines;
+    var verticalStep = (0, _react2.jsx)(_.Box, {
+      isRow: true
+    }, (0, _react2.jsx)(_.Step, {
+      key: item.key,
+      value: stepIndex,
+      status: stepStatus,
+      className: classNames,
+      orientation: orientation
+    }), (0, _react2.jsx)(_.Text, {
+      variant: "stepperLabel"
+    }, item.textValue, (item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.isRequired) && defaultIndicator));
 
     /* istanbul ignore next */
     var textValue = item && item.value && item.value.label || item.textValue || stepIndex.toString();
@@ -90,11 +118,12 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         variant: 'stepper.tabLabel'
       },
       textValue: textValue,
-      title: step,
+      title: orientation === _orientation["default"].VERTICAL ? verticalStep : step,
       "aria-label": textValue,
       content: item.rendered,
-      separator: !isFirst && line,
-      tooltipTriggerProps: tooltipProps
+      separator: !isFirst && orientation === _orientation["default"].HORIZONTAL && !isFirst && line,
+      tooltipTriggerProps: tooltipProps,
+      sx: i !== steps.length - 1 && orientation === _orientation["default"].VERTICAL && _Stepper2.verticalLine
     });
     isFirst = isFirst && !container;
     return container;
@@ -108,7 +137,8 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, tabListProps),
     onSelectionChange: onStepChangeHandler,
     selectedKey: activeStep === null || activeStep === void 0 ? void 0 : activeStep.toString(),
-    mode: "tooltip"
+    mode: "tooltip",
+    orientation: orientation
   }, others), render);
 });
 Stepper.propTypes = {
@@ -132,8 +162,12 @@ Stepper.propTypes = {
   onStepChange: _propTypes["default"].func,
   /** A props object that is subsequently spread into the rendered tablist. */
   tabListProps: _propTypes["default"].shape({}),
-  tooltipProps: _propTypes["default"].shape({})
+  tooltipProps: _propTypes["default"].shape({}),
+  orientation: _propTypes["default"].oneOf(['vertical', 'horizontal'])
 };
 Stepper.displayName = 'Stepper';
+Stepper.defaultProps = {
+  orientation: 'horizontal'
+};
 var _default = Stepper;
 exports["default"] = _default;

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithCustomTooltip = exports.Panel = exports.DisabledToolTips = exports.Default = exports.ControlledStepper = void 0;
+exports["default"] = exports.WithCustomTooltip = exports.VerticalStepper = exports.Panel = exports.DisabledToolTips = exports.Default = exports.ControlledStepper = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -84,6 +84,23 @@ var steps = [{
   title: 'Excepteur Sint',
   name: 'step3'
 }];
+var customSteps = [{
+  label: 'Duis Aute',
+  children: 'Quis autem vel eum iure reprehenderit qui in ea voluptate',
+  title: 'Duis Aute',
+  name: 'step1',
+  isRequired: true
+}, {
+  label: 'Lorem Ipsum',
+  children: 'Sed ut perspiciatis unde omnis',
+  title: 'Lorem Ipsum',
+  name: 'step2'
+}, {
+  label: 'Excepteur Sint',
+  children: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam',
+  title: 'Excepteur Sint',
+  name: 'step3'
+}];
 var sx = {
   overlayPanel: {
     padding: '0px',
@@ -98,6 +115,11 @@ var sx = {
   },
   buttonStyle: {
     margin: '50px 0px'
+  },
+  verticalContentContainer: {
+    marginTop: 'lg',
+    ml: 'lg',
+    gap: 'sm'
   }
 };
 var Default = function Default(args) {
@@ -293,4 +315,28 @@ var Panel = function Panel() {
     })))
   );
 };
-exports.Panel = Panel;
+exports.Panel = Panel;
+var VerticalStepper = function VerticalStepper() {
+  var _useState5 = (0, _react.useState)(2),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    activeStep = _useState6[0],
+    setActiveStep = _useState6[1];
+  return (0, _react2.jsx)(_index.Stepper, {
+    items: customSteps,
+    activeStep: activeStep,
+    onStepChange: setActiveStep,
+    orientation: "vertical",
+    mode: "tooltipIsDisabled"
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name,
+      textValue: item.title,
+      isRequired: item === null || item === void 0 ? void 0 : item.isRequired
+    }, (0, _react2.jsx)(_index.Box, {
+      sx: sx.verticalContentContainer
+    }, (0, _react2.jsx)(_index.Text, {
+      fontSize: "md"
+    }, item.children)));
+  });
+};
+exports.VerticalStepper = VerticalStepper;

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.verticalLine = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Buttons = require("../Button/Buttons.styles");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -24,19 +24,49 @@ var tabs = {
   outline: 'none',
   borderBottom: 'none',
   mb: 0,
-  width: '100%',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  '&.is-horizontal': {
+    width: '100%'
+  },
+  '&.is-vertical': {
+    minWidth: '217px',
+    borderRight: '1px solid #e4e6e9'
+  }
+};
+var verticalLine = {
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    borderLeft: '2px solid',
+    borderLeftColor: 'neutral.80',
+    left: '27px',
+    top: '28px',
+    height: '26px'
+  }
 };
+exports.verticalLine = verticalLine;
 var tab = {
-  mb: 0,
-  mr: 0,
-  outline: 'none',
-  '&.is-focused': _objectSpread({
-    borderRadius: '50%'
-  }, _Buttons.defaultFocus),
-  '&:not(:first-of-type)': {
-    flex: 1,
-    maxWidth: 122
+  '&.is-horizontal': {
+    mb: 0,
+    mr: 0,
+    outline: 'none',
+    '&.is-focused': _objectSpread({
+      borderRadius: '50%'
+    }, _Buttons.defaultFocus),
+    '&:not(:first-of-type)': {
+      flex: 1,
+      maxWidth: 122
+    }
+  },
+  '&.is-vertical': {
+    position: 'relative',
+    height: '42px',
+    width: '100%',
+    py: '12px',
+    px: '20px',
+    ':focus-visible:not(.is-focused)': {
+      outline: 'none'
+    }
   }
 };
 var tabLabel = {
@@ -48,13 +78,13 @@ var outerWrapper = {
 
 /** Step styles */
 var stepBase = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
   width: 32,
   height: 32,
   minWidth: 32,
   minHeight: 32,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
   borderWidth: 1,
   borderStyle: 'solid',
   borderRadius: '50%',
@@ -67,22 +97,47 @@ var stepBase = {
     color: 'text.primaryLight'
   }
 };
+var stepBaseVertical = _objectSpread(_objectSpread({}, stepBase), {}, {
+  width: 16,
+  height: 16,
+  minWidth: 16,
+  minHeight: 16
+});
 var step = {
-  active: _objectSpread({
-    backgroundColor: 'accent.99',
-    borderColor: 'active',
-    color: 'active'
-  }, stepBase),
-  completed: _objectSpread({
-    backgroundColor: 'active',
-    borderColor: 'active',
-    color: 'text.primaryLight'
-  }, stepBase),
-  inactive: _objectSpread({
-    backgroundColor: 'white',
-    borderColor: 'neutral.80',
-    color: 'neutral.40'
-  }, stepBase)
+  active: {
+    '&.is-horizontal': _objectSpread({
+      backgroundColor: 'accent.99',
+      borderColor: 'active',
+      color: 'active'
+    }, stepBase),
+    '&.is-vertical': _objectSpread(_objectSpread({}, stepBaseVertical), {}, {
+      backgroundColor: '#fff',
+      border: '4px solid',
+      borderColor: 'active'
+    })
+  },
+  completed: {
+    '&.is-horizontal': _objectSpread({
+      backgroundColor: 'active',
+      borderColor: 'active',
+      color: 'text.primaryLight'
+    }, stepBase),
+    '&.is-vertical': _objectSpread({
+      backgroundColor: 'active',
+      borderColor: 'transparent'
+    }, stepBaseVertical)
+  },
+  inactive: {
+    '&.is-horizontal': _objectSpread({
+      backgroundColor: 'white',
+      borderColor: 'neutral.80',
+      color: 'neutral.40'
+    }, stepBase),
+    '&.is-vertical': _objectSpread(_objectSpread({}, stepBaseVertical), {}, {
+      backgroundColor: '#caced3',
+      border: '4px solid #fff'
+    })
+  }
 };
 
 /** Line styles */