@pingux/astro 2.140.0-alpha.3 → 2.140.0-alpha.5

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

@@ -50,6 +50,14 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
     color: 'neutral.80'
   }
 });
+var stepperLabel = _objectSpread(_objectSpread({}, base), {}, {
+  fontSize: '14px',
+  fontWeight: '500',
+  display: 'flex',
+  ml: '14px',
+  color: 'neutral.30',
+  cursor: 'pointer'
+});
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
   fontWeight: 3,
@@ -249,6 +257,7 @@ var text = _objectSpread(_objectSpread(_objectSpread({
   title: title,
   copyRightText: copyRightText,
   attachmentTitle: attachmentTitle,
-  messagesText: _objectSpread({}, base)
+  messagesText: _objectSpread({}, base),
+  stepperLabel: stepperLabel
 });
 exports.text = text;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -42,6 +42,7 @@ export declare const colors: {
     };
     font: {
         base: string;
+        light: string;
     };
     badge: {
         background: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -26,7 +26,8 @@ var overrides = {
 };
 exports.overrides = overrides;
 var font = {
-  base: _colorTokens.nextGenColors['gray-100']
+  base: _colorTokens.nextGenColors['gray-100'],
+  light: _colorTokens.nextGenColors['gray-400']
 };
 var hoverDark = _chromaJs["default"].mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {

package/lib/cjs/styles/themes/astro/customProperties/icons.js

@@ -31,5 +31,5 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var _default = (_MenuDown$MenuUp$stat = {
   MenuDown: _MenuDownIcon["default"],
   MenuUp: _MenuUpIcon["default"]
-}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _MoreVertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Ascending", _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Descending", _ArrowDownIcon["default"]), _MenuDown$MenuUp$stat);
+}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _MoreVertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Ascending", _MenuUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Descending", _MenuDownIcon["default"]), _MenuDown$MenuUp$stat);
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -3940,6 +3940,11 @@ declare const _default: {
                 px: string;
                 fontWeight: string;
                 fontSize: string;
+                '&.is-column-sortable': {
+                    svg: {
+                        fill: string;
+                    };
+                };
                 '&.is-first-column': {
                     borderTopLeftRadius: string;
                 };

package/lib/cjs/styles/themes/next-gen/variants/dataTable.d.ts

@@ -45,6 +45,11 @@ export declare const dataTable: {
         px: string;
         fontWeight: string;
         fontSize: string;
+        '&.is-column-sortable': {
+            svg: {
+                fill: string;
+            };
+        };
         '&.is-first-column': {
             borderTopLeftRadius: string;
         };

package/lib/cjs/styles/themes/next-gen/variants/dataTable.js

@@ -58,6 +58,11 @@ var dataTable = {
     px: 'lg',
     fontWeight: '2',
     fontSize: 'md',
+    '&.is-column-sortable': {
+      'svg': {
+        fill: 'font.light'
+      }
+    },
     '&.is-first-column': {
       borderTopLeftRadius: '16px'
     },

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -591,6 +591,11 @@ declare const _default: {
             px: string;
             fontWeight: string;
             fontSize: string;
+            '&.is-column-sortable': {
+                svg: {
+                    fill: string;
+                };
+            };
             '&.is-first-column': {
                 borderTopLeftRadius: string;
             };

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

@@ -3,6 +3,7 @@ import { Layout, ReusableView } from '@react-stately/virtualizer';
 import type { GridNode } from '@react-types/grid';
 import type { ColumnSize, TableCollection } from '@react-types/table';
 import { BadgeProps } from './badge';
+import { BoxProps } from './box';
 import { IconTypeExtended } from './icon';
 import { loadingState } from './shared';
 export interface DataTableBadgeProps extends BadgeProps {
@@ -68,6 +69,7 @@ export interface DataTableProps {
     width?: string | number;
     children: ReactNode;
     scale?: 'large' | 'medium' | 'xl';
+    containerProps?: BoxProps;
 }
 export interface DataTableCellProps {
     cell: GridNode<object>;

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

@@ -116,15 +116,25 @@ Warning.parameters = {
     url: 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'
+};
 export var WithCustomIcon = function WithCustomIcon() {
   return ___EmotionJSX(Callout, {
     icon: ___EmotionJSX(Box, {
-      variant: "stepper.step.completed",
-      mx: "md",
-      minHeight: 25,
-      minWidth: 25,
-      height: 25,
-      width: 25
+      sx: iconContainer
     }, ___EmotionJSX(Icon, {
       icon: CheckBoldIcon,
       title: {

package/lib/components/DataTable/DataTable.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultSelectedKeys", "selectionMode", "selectedKeys"],
+var _excluded = ["defaultSelectedKeys", "selectionMode", "selectedKeys", "containerProps"],
   _excluded2 = ["children"],
   _excluded3 = ["children"],
   _excluded4 = ["item", "children", "hasActions"];
@@ -58,6 +58,7 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     defaultSelectedKeys = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
     selectionMode = props.selectionMode,
     selectedKeys = props.selectedKeys,
+    containerProps = props.containerProps,
     others = _objectWithoutProperties(props, _excluded);
   var direction = 'ltr';
   var onAction = props.onAction,
@@ -235,9 +236,9 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
   var mergedProps = mergeProps(gridProps, focusProps);
-  return ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, _extends({
     variant: "dataTable.container"
-  }, ___EmotionJSX(DataTableContext.Provider, {
+  }, containerProps), ___EmotionJSX(DataTableContext.Provider, {
     value: {
       state: state,
       layout: layout,
@@ -280,24 +281,26 @@ var TableColumnHeader = function TableColumnHeader(props) {
   var _useDataTableContext = useDataTableContext(),
     state = _useDataTableContext.state;
   var _useGetTheme2 = useGetTheme(),
-    icons = _useGetTheme2.icons;
-  var MenuUp = icons.MenuUp,
-    MenuDown = icons.MenuDown;
+    icons = _useGetTheme2.icons,
+    isOnyx = _useGetTheme2.themeState.isOnyx;
+  var Ascending = icons.Ascending,
+    Descending = icons.Descending;
   var _useTableColumnHeader = useTableColumnHeader({
       node: column,
       isVirtualized: true
     }, state, ref),
     columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
   var columnProps = column.props;
+  var iconSize = isOnyx ? 16 : 24;
   var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? ___EmotionJSX(Icon, {
-    size: 24,
-    icon: MenuUp,
+    size: iconSize,
+    icon: Ascending,
     title: {
       name: 'Menu Up Icon'
     }
   }) : ___EmotionJSX(Icon, {
-    size: 24,
-    icon: MenuDown,
+    size: iconSize,
+    icon: Descending,
     color: "active",
     title: {
       name: 'Menu Down Icon'

package/lib/components/Stepper/Step.js

@@ -5,31 +5,38 @@ 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';
 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;
+    value = props.value,
+    className = props.className,
+    orientation = props.orientation;
   var _useHover = useHover(props),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
+  var stepValue = orientation !== ORIENTATION.VERTICAL && value;
   return ___EmotionJSX(Box, _extends({
     variant: "stepper.step.".concat(status),
     ref: ref
-  }, hoverProps), status === COMPLETED && !isHovered ? ___EmotionJSX(Icon, {
+  }, hoverProps, {
+    className: className
+  }), status === COMPLETED && !isHovered ? ___EmotionJSX(Icon, {
     icon: CheckBoldIcon,
     size: 23,
     color: "text.primaryLight",
     title: {
       name: 'Check Bold Icon'
     }
-  }) : value);
+  }) : stepValue);
 });
 Step.propTypes = {
   status: PropTypes.oneOf(_Object$values(stepStatuses)),
-  value: PropTypes.number
+  value: PropTypes.number,
+  orientation: PropTypes.oneOf([ORIENTATION.VERTICAL, ORIENTATION.HORIZONTAL])
 };
 Step.defaultProps = {
   status: INACTIVE,

package/lib/components/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps"];
+var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps", "orientation", "className"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -19,10 +19,13 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import React, { forwardRef } from 'react';
 import { useSingleSelectListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { Step, Tab, Tabs } from '../..';
+import { Box, Step, Tab, Tabs, Text } from '../..';
+import { useStatusClasses } from '../../hooks';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import Line from './Line';
 import { stepStatuses } from './Stepper.constants';
+import { verticalLine } from './Stepper.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ACTIVE = stepStatuses.ACTIVE,
   COMPLETED = stepStatuses.COMPLETED,
@@ -33,6 +36,8 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
     onStepChange = props.onStepChange,
     tabListProps = props.tabListProps,
     tooltipProps = props.tooltipProps,
+    orientation = props.orientation,
+    className = props.className,
     others = _objectWithoutProperties(props, _excluded);
   var state = useSingleSelectListState(props);
   var getStatus = function getStatus(i) {
@@ -49,23 +54,46 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
       onStepChange(+key);
     }
   };
+  var _useStatusClasses = useStatusClasses(className, {
+      'is-vertical': orientation === ORIENTATION.VERTICAL,
+      'is-horizontal': orientation === ORIENTATION.HORIZONTAL
+    }),
+    classNames = _useStatusClasses.classNames;
   var steps = _Array$from(state.collection);
   var lines = _mapInstanceProperty(steps).call(steps, function (_v, i) {
     return ___EmotionJSX(Line, {
+      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 = _mapInstanceProperty(steps).call(steps, function (item, i) {
+    var _item$props;
     var stepIndex = i + 1;
     var stepStatus = getStatus(stepIndex);
+    var line = _Array$isArray(lines) ? lines[i - 1] : lines;
+    var defaultIndicator = ___EmotionJSX(Box, {
+      variant: "forms.label.indicator"
+    }, "*");
     var step = ___EmotionJSX(Step, {
       key: item.key,
       value: stepIndex,
-      status: stepStatus
+      status: stepStatus,
+      className: classNames,
+      orientation: orientation
     });
-    var line = _Array$isArray(lines) ? lines[i - 1] : lines;
+    var verticalStep = ___EmotionJSX(Box, {
+      isRow: true
+    }, ___EmotionJSX(Step, {
+      key: item.key,
+      value: stepIndex,
+      status: stepStatus,
+      className: classNames,
+      orientation: orientation
+    }), ___EmotionJSX(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();
@@ -79,11 +107,12 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
         variant: 'stepper.tabLabel'
       },
       textValue: textValue,
-      title: step,
+      title: orientation === ORIENTATION.VERTICAL ? verticalStep : step,
       "aria-label": textValue,
       content: item.rendered,
-      separator: !isFirst && line,
-      tooltipTriggerProps: tooltipProps
+      separator: !isFirst && orientation === ORIENTATION.HORIZONTAL && !isFirst && line,
+      tooltipTriggerProps: tooltipProps,
+      sx: i !== steps.length - 1 && orientation === ORIENTATION.VERTICAL && verticalLine
     });
     isFirst = isFirst && !container;
     return container;
@@ -97,7 +126,8 @@ var Stepper = /*#__PURE__*/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 = {
@@ -121,7 +151,11 @@ Stepper.propTypes = {
   onStepChange: PropTypes.func,
   /** A props object that is subsequently spread into the rendered tablist. */
   tabListProps: PropTypes.shape({}),
-  tooltipProps: PropTypes.shape({})
+  tooltipProps: PropTypes.shape({}),
+  orientation: PropTypes.oneOf(['vertical', 'horizontal'])
 };
 Stepper.displayName = 'Stepper';
+Stepper.defaultProps = {
+  orientation: 'horizontal'
+};
 export default Stepper;

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

@@ -70,6 +70,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',
@@ -84,6 +101,11 @@ var sx = {
   },
   buttonStyle: {
     margin: '50px 0px'
+  },
+  verticalContentContainer: {
+    marginTop: 'lg',
+    ml: 'lg',
+    gap: 'sm'
   }
 };
 export var Default = function Default(args) {
@@ -274,4 +296,27 @@ export var Panel = function Panel() {
       }, item.children)));
     })))
   );
+};
+export var VerticalStepper = function VerticalStepper() {
+  var _useState5 = useState(2),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeStep = _useState6[0],
+    setActiveStep = _useState6[1];
+  return ___EmotionJSX(Stepper, {
+    items: customSteps,
+    activeStep: activeStep,
+    onStepChange: setActiveStep,
+    orientation: "vertical",
+    mode: "tooltipIsDisabled"
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.title,
+      isRequired: item === null || item === void 0 ? void 0 : item.isRequired
+    }, ___EmotionJSX(Box, {
+      sx: sx.verticalContentContainer
+    }, ___EmotionJSX(Text, {
+      fontSize: "md"
+    }, item.children)));
+  });
 };

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

@@ -18,19 +18,48 @@ 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'
+  }
+};
+export var verticalLine = {
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    borderLeft: '2px solid',
+    borderLeftColor: 'neutral.80',
+    left: '27px',
+    top: '28px',
+    height: '26px'
+  }
 };
 var tab = {
-  mb: 0,
-  mr: 0,
-  outline: 'none',
-  '&.is-focused': _objectSpread({
-    borderRadius: '50%'
-  }, defaultFocus),
-  '&:not(:first-of-type)': {
-    flex: 1,
-    maxWidth: 122
+  '&.is-horizontal': {
+    mb: 0,
+    mr: 0,
+    outline: 'none',
+    '&.is-focused': _objectSpread({
+      borderRadius: '50%'
+    }, 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 = {
@@ -42,13 +71,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%',
@@ -61,22 +90,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 */

package/lib/components/Text/Text.styles.js

@@ -41,6 +41,14 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
     color: 'neutral.80'
   }
 });
+var stepperLabel = _objectSpread(_objectSpread({}, base), {}, {
+  fontSize: '14px',
+  fontWeight: '500',
+  display: 'flex',
+  ml: '14px',
+  color: 'neutral.30',
+  cursor: 'pointer'
+});
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
   fontWeight: 3,
@@ -240,5 +248,6 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   title: title,
   copyRightText: copyRightText,
   attachmentTitle: attachmentTitle,
-  messagesText: _objectSpread({}, base)
+  messagesText: _objectSpread({}, base),
+  stepperLabel: stepperLabel
 });

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -18,7 +18,8 @@ export var overrides = {
   disabled: '#30373f'
 };
 var font = {
-  base: nextGenColors['gray-100']
+  base: nextGenColors['gray-100'],
+  light: nextGenColors['gray-400']
 };
 var hoverDark = chroma.mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {

package/lib/styles/themes/astro/customProperties/icons.js

@@ -18,4 +18,4 @@ import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statu
 export default (_MenuDown$MenuUp$stat = {
   MenuDown: MenuDown,
   MenuUp: MenuUp
-}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _defineProperty(_MenuDown$MenuUp$stat, "Ascending", ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, "Descending", ArrowDownIcon), _MenuDown$MenuUp$stat);
+}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _defineProperty(_MenuDown$MenuUp$stat, "Ascending", MenuUp), _defineProperty(_MenuDown$MenuUp$stat, "Descending", MenuDown), _MenuDown$MenuUp$stat);

package/lib/styles/themes/next-gen/variants/dataTable.js

@@ -51,6 +51,11 @@ export var dataTable = {
     px: 'lg',
     fontWeight: '2',
     fontSize: 'md',
+    '&.is-column-sortable': {
+      'svg': {
+        fill: 'font.light'
+      }
+    },
     '&.is-first-column': {
       borderTopLeftRadius: '16px'
     },

package/package.json

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