@pingux/astro 2.140.0-alpha.0 → 2.140.0-alpha.1

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

@@ -32,6 +32,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     item = props.item,
     tabsDisabled = props.isDisabled,
+    isRequired = props.isRequired,
     orientation = props.orientation,
     mode = props.mode,
     slots = props.slots;
@@ -63,6 +64,9 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isDisabled: isDisabled
     }, state, tabRef),
     tabProps = _useTab.tabProps;
+  var defaultIndicator = (0, _react2.jsx)(_.Box, {
+    variant: "forms.label.indicator"
+  }, "*");
   var tab = (0, _react2.jsx)(_.Box, {
     isRow: true
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
@@ -71,10 +75,12 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), {
     ref: tabRef
   }, itemProps, {
-    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
+    width: "100%"
   }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
-    variant: "tabLabel"
-  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
+    variant: "tabLabel",
+    display: "flex"
+  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered, isRequired && defaultIndicator), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
   if (mode === 'list' && itemProps !== null && itemProps !== void 0 && itemProps.list) {
     return (0, _react2.jsx)(_TabPicker["default"], (0, _extends2["default"])({
       ref: tabRef,

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -181,7 +181,8 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onAction: setSelectedItem,
     selectionMode: "single",
     selectedKeys: [selectionManager.focusedKey],
-    ref: menuRef
+    ref: menuRef,
+    className: className
   }, (0, _map["default"])(items).call(items, function (tab) {
     return (0, _react2.jsx)(_reactStately.Item, {
       role: tab.role,

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

@@ -32,7 +32,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _Tab = require("../Tab");
 var _react2 = require("@emotion/react");
 var _excluded = ["state"],
-  _excluded2 = ["isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
+  _excluded2 = ["isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps", "className"];
 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 = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -44,7 +44,8 @@ var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var state = _ref.state,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var children = props.children,
-    tabPanelProps = props.tabPanelProps;
+    tabPanelProps = props.tabPanelProps,
+    className = props.className;
   var tabPanelRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _ref2 = (0, _reactAria.useTabPanel)(props, state, tabPanelRef),
     raTabPanelProps = _ref2.tabPanelProps;
@@ -54,7 +55,9 @@ var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     raTabPanelProps['aria-labelledby'] = parentTab === null || parentTab === void 0 ? void 0 : parentTab.id;
   }
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, tabPanelProps, raTabPanelProps, {
-    ref: tabPanelRef
+    ref: tabPanelRef,
+    className: className,
+    variant: "tabPanelBody"
   }), children);
 });
 var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -66,6 +69,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     mode = props.mode,
     tabListProps = props.tabListProps,
     tabPanelProps = props.tabPanelProps,
+    className = props.className,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var tabListRef = (0, _hooks.useLocalOrForwardRef)(ref);
@@ -91,30 +95,40 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }));
   var _useTabList = (0, _reactAria.useTabList)(props, state, tabListRef),
     raTabListProps = _useTabList.tabListProps;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      'is-vertical': orientation === _orientation["default"].VERTICAL,
+      'is-horizontal': orientation === _orientation["default"].HORIZONTAL
+    }),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(TabsContext.Provider, {
     value: state
-  }, (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, others, {
+    isRow: orientation === _orientation["default"].VERTICAL
+  }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "tabs",
     isRow: orientation === _orientation["default"].HORIZONTAL
   }, tabListProps, raTabListProps, {
-    ref: tabListRef
+    ref: tabListRef,
+    className: classNames
   }), (0, _map["default"])(_context4 = (0, _filter["default"])(_context5 = (0, _from["default"])(state.collection)).call(_context5, function (item) {
     var _item$props;
     return !(item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.isListItem);
   })).call(_context4, function (item) {
-    var _item$props2;
+    var _item$props2, _item$props3;
     return (0, _react2.jsx)(_Tab.CollectionTab, {
       key: item.key,
       item: item,
       isDisabled: isDisabled,
+      isRequired: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.isRequired,
       orientation: orientation,
       mode: mode,
-      slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
+      slots: item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.slots
     });
   })), (0, _react2.jsx)(TabPanel, {
     key: (_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.key,
     state: state,
-    tabPanelProps: tabPanelProps
+    tabPanelProps: tabPanelProps,
+    className: classNames
   }, ((_state$selectedItem4 = state.selectedItem) === null || _state$selectedItem4 === void 0 ? void 0 : _state$selectedItem4.props.children) || ((_state$selectedItem5 = state.selectedItem) === null || _state$selectedItem5 === void 0 ? void 0 : _state$selectedItem5.props.content))));
 });
 Tabs.defaultProps = {

package/lib/cjs/components/Tabs/Tabs.stories.d.ts

@@ -11,3 +11,4 @@ export declare const ContentSlots: StoryFn;
 export declare const WithList: StoryFn;
 export declare const CustomTabLine: StoryFn;
 export declare const CustomPanelProps: StoryFn;
+export declare const VerticalOrientation: StoryFn<TabsProps>;

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithList = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.Default = exports.CustomTabLine = exports.CustomPanelProps = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
+exports["default"] = exports.WithList = exports.VerticalOrientation = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.Default = exports.CustomTabLine = exports.CustomPanelProps = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -68,6 +68,17 @@ var tabs = [{
   name: 'Tab 3',
   children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }];
+var customTabs = [{
+  name: 'Details',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 1 body"),
+  isRequired: true
+}, {
+  name: 'First Factor',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 2 body")
+}, {
+  name: 'MFA & Risk',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}];
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Tabs, (0, _extends2["default"])({
     items: tabs
@@ -240,4 +251,32 @@ var CustomPanelProps = function CustomPanelProps() {
     }, item.children);
   });
 };
-exports.CustomPanelProps = CustomPanelProps;
+exports.CustomPanelProps = CustomPanelProps;
+CustomPanelProps.parameters = {
+  codesandbox: false
+};
+var VerticalOrientation = function VerticalOrientation(args) {
+  return (0, _react2.jsx)(_index.Tabs, (0, _extends2["default"])({
+    items: customTabs
+  }, args, {
+    orientation: "vertical",
+    tabPanelProps: {
+      sx: {
+        m: '24px'
+      }
+    },
+    tabListProps: {
+      sx: {
+        width: '209px'
+      }
+    }
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Tab, {
+      key: item.name,
+      title: item.name,
+      "data-testid": "testing-".concat(item.name),
+      isRequired: item === null || item === void 0 ? void 0 : item.isRequired
+    }, item.children);
+  });
+};
+exports.VerticalOrientation = VerticalOrientation;

package/lib/cjs/components/Tabs/Tabs.style.d.ts

@@ -22,6 +22,48 @@ export declare const tab: {
     '& > svg': {
         flexShrink: number;
     };
+    '&.is-vertical': {
+        borderRadius: string;
+        p: string;
+        WebkitAlignItems: string;
+        '& > span': {
+            m: string;
+            p: string;
+            fontSize: string;
+            color: string;
+        };
+        '&.is-selected': {
+            borderLeft: string;
+            borderLeftColor: string;
+            bg: string;
+            '& > span': {
+                p: string;
+                color: string;
+            };
+            '& > div': {
+                border: string;
+                borderBottomColor: string;
+                bg: string;
+                height: string;
+            };
+        };
+        '&.is-hovered:not(.is-selected)': {
+            bg: string;
+        };
+        '&.is-hovered.is-selected': {
+            bg: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            borderRadius: string;
+            zIndex: number;
+            '& > span': {
+                outline: string;
+            };
+        };
+    };
 };
 export declare const tabLine: {
     height: string;
@@ -33,11 +75,16 @@ export declare const tabPanel: {
     outline: string;
 };
 export declare const tabs: {
-    borderBottomWidth: number;
-    borderBottomStyle: string;
-    borderBottomColor: string;
     mb: string;
-    gap: string;
+    '&.is-vertical': {
+        borderRight: string;
+    };
+    '&.is-horizontal': {
+        borderBottomWidth: number;
+        borderBottomStyle: string;
+        borderBottomColor: string;
+        gap: string;
+    };
 };
 export declare const menuTab: {
     color: string;
@@ -48,6 +95,10 @@ export declare const menuTab: {
     '& + *:not(div:first-of-type)': {
         ml: string;
     };
+    '&.is-selected.is-vertical': {
+        bg: string;
+    };
     all: string;
     display: string;
 };
+export declare const tabPanelBody: {};

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabs = exports.tabPanel = exports.tabLine = exports.tab = exports.menuTab = void 0;
+exports.tabs = exports.tabPanelBody = exports.tabPanel = exports.tabLine = exports.tab = exports.menuTab = 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; }
@@ -37,6 +37,48 @@ var tab = {
   },
   '& > svg': {
     flexShrink: 0
+  },
+  '&.is-vertical': {
+    borderRadius: '0px',
+    p: '12px 20px',
+    WebkitAlignItems: 'start',
+    '& > span': {
+      m: '0',
+      p: '0',
+      fontSize: '14px',
+      color: '#68747f'
+    },
+    '&.is-selected': {
+      borderLeft: '3px solid',
+      borderLeftColor: 'active',
+      bg: 'accent.95',
+      '& > span': {
+        p: '0',
+        color: 'active'
+      },
+      '& > div': {
+        border: ' none',
+        borderBottomColor: 'none',
+        bg: 'transparent',
+        height: '0px'
+      }
+    },
+    '&.is-hovered:not(.is-selected)': {
+      bg: '#f2f3f4'
+    },
+    '&.is-hovered.is-selected': {
+      bg: 'accent.95'
+    },
+    '&.is-focused': {
+      boxShadow: 'none',
+      outline: '2px solid',
+      outlineColor: 'active',
+      borderRadius: '2px',
+      zIndex: 1,
+      '& > span': {
+        outline: 'none'
+      }
+    }
   }
 };
 exports.tab = tab;
@@ -52,11 +94,16 @@ var tabPanel = {
 };
 exports.tabPanel = tabPanel;
 var tabs = {
-  borderBottomWidth: 1,
-  borderBottomStyle: 'solid',
-  borderBottomColor: 'neutral.90',
   mb: 'lg',
-  gap: '25px'
+  '&.is-vertical': {
+    borderRight: '1px solid #e4e6e9'
+  },
+  '&.is-horizontal': {
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'neutral.90',
+    gap: 'lg'
+  }
 };
 exports.tabs = tabs;
 var menuTab = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
@@ -66,7 +113,12 @@ var menuTab = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
     color: 'active'
   },
   '& + *:not(div:first-of-type)': {
-    'ml': 'md'
+    ml: 'md'
+  },
+  '&.is-selected.is-vertical': {
+    bg: 'accent.95'
   }
 });
-exports.menuTab = menuTab;
+exports.menuTab = menuTab;
+var tabPanelBody = {};
+exports.tabPanelBody = tabPanelBody;

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

@@ -7,6 +7,7 @@ export declare const componentSpecificNextGenBlacklist: {
     TextField: string[];
     OverlayPanel: string[];
     DataTable: string[];
+    Tabs: string[];
 };
 export declare const astroBlacklistStory: {
     DataTable: string[];

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -13,7 +13,8 @@ var componentSpecificNextGenBlacklist = {
   PasswordField: ['Success'],
   TextField: ['Success'],
   OverlayPanel: ['Expandable'],
-  DataTable: ['Default']
+  DataTable: ['Default'],
+  Tabs: ['Vertical Orientation']
 };
 exports.componentSpecificNextGenBlacklist = componentSpecificNextGenBlacklist;
 var astroBlacklistStory = {

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

@@ -4105,7 +4105,9 @@ declare const _default: {
             };
         };
         tabs: {
-            gap: string;
+            '&.is-horizontal': {
+                gap: string;
+            };
         };
         menu: {
             p: string;

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

@@ -1,5 +1,7 @@
 export declare const tabs: {
-    gap: string;
+    '&.is-horizontal': {
+        gap: string;
+    };
 };
 export declare const menuTab: {
     ml: string;

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

@@ -6,7 +6,9 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.tabs = exports.tab = exports.menuTab = void 0;
 var tabs = {
-  gap: '0px'
+  '&.is-horizontal': {
+    gap: '0px'
+  }
 };
 exports.tabs = tabs;
 var menuTab = {

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

@@ -756,7 +756,9 @@ declare const _default: {
         };
     };
     tabs: {
-        gap: string;
+        '&.is-horizontal': {
+            gap: string;
+        };
     };
     menu: {
         p: string;

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

@@ -37,6 +37,7 @@ declare module '@react-types/shared' {
         icon?: IconTypeExtended;
         /** isCurrent for the Breadcrumbs item. */
         isCurrent?: boolean;
+        isRequired?: boolean;
     }
 }
 export default ItemProps;

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

@@ -5,6 +5,7 @@ import { DOMAttributes, OrientationProps, StyleProps } from './shared';
 import { TooltipTriggerProps } from './tooltipTrigger';
 export interface TabProps extends StyleProps, DOMAttributes, OrientationProps, TestingAttributes {
     isDisabled?: boolean;
+    isRequired?: boolean;
     item: {
         key: string | number;
         props?: {

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

@@ -16,7 +16,7 @@ export interface TabsProps extends StyleProps, TestingAttributes, OrientationPro
     /**
      * *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<TabListItemProps>;
     /** Whether the entire tablist is disabled. */
     isDisabled?: boolean;
@@ -29,6 +29,7 @@ export interface TabsProps extends StyleProps, TestingAttributes, OrientationPro
     /** Whether tabs are activated automatically on focus or manually¸ */
     keyboardActivation?: 'automatic' | 'manual';
     children?: CollectionChildren<object>;
+    className?: string;
 }
 export interface AriaTabListOptions<T> extends Omit<AriaTabListProps<T>, 'children'> {
     children: CollectionChildren<T>;
@@ -49,4 +50,5 @@ export interface TabListItemProps {
     }>;
     props?: object;
     index?: number;
+    isRequired?: boolean;
 }

package/lib/components/Tab/Tab.js

@@ -19,6 +19,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     item = props.item,
     tabsDisabled = props.isDisabled,
+    isRequired = props.isRequired,
     orientation = props.orientation,
     mode = props.mode,
     slots = props.slots;
@@ -50,6 +51,9 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
       isDisabled: isDisabled
     }, state, tabRef),
     tabProps = _useTab.tabProps;
+  var defaultIndicator = ___EmotionJSX(Box, {
+    variant: "forms.label.indicator"
+  }, "*");
   var tab = ___EmotionJSX(Box, {
     isRow: true
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, ___EmotionJSX(Box, _extends({
@@ -58,10 +62,12 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), {
     ref: tabRef
   }, itemProps, {
-    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
+    width: "100%"
   }), ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, ___EmotionJSX(Text, _extends({
-    variant: "tabLabel"
-  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered), isSelected && !isDisabled && ___EmotionJSX(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
+    variant: "tabLabel",
+    display: "flex"
+  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered, isRequired && defaultIndicator), isSelected && !isDisabled && ___EmotionJSX(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
   if (mode === 'list' && itemProps !== null && itemProps !== void 0 && itemProps.list) {
     return ___EmotionJSX(TabPicker, _extends({
       ref: tabRef,

package/lib/components/TabPicker/TabPicker.js

@@ -169,7 +169,8 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onAction: setSelectedItem,
     selectionMode: "single",
     selectedKeys: [selectionManager.focusedKey],
-    ref: menuRef
+    ref: menuRef,
+    className: className
   }, _mapInstanceProperty(items).call(items, function (tab) {
     return ___EmotionJSX(Tab, {
       role: tab.role,

package/lib/components/Tabs/Tabs.js

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["state"],
-  _excluded2 = ["isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
+  _excluded2 = ["isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps", "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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -19,7 +19,7 @@ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React, { forwardRef } from 'react';
 import { useTabList, useTabPanel } from 'react-aria';
 import { useTabListState } from 'react-stately';
-import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import Box from '../Box';
 import { CollectionTab } from '../Tab';
@@ -30,7 +30,8 @@ var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var state = _ref.state,
     props = _objectWithoutProperties(_ref, _excluded);
   var children = props.children,
-    tabPanelProps = props.tabPanelProps;
+    tabPanelProps = props.tabPanelProps,
+    className = props.className;
   var tabPanelRef = useLocalOrForwardRef(ref);
   var _ref2 = useTabPanel(props, state, tabPanelRef),
     raTabPanelProps = _ref2.tabPanelProps;
@@ -40,7 +41,9 @@ var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     raTabPanelProps['aria-labelledby'] = parentTab === null || parentTab === void 0 ? void 0 : parentTab.id;
   }
   return ___EmotionJSX(Box, _extends({}, tabPanelProps, raTabPanelProps, {
-    ref: tabPanelRef
+    ref: tabPanelRef,
+    className: className,
+    variant: "tabPanelBody"
   }), children);
 });
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -52,6 +55,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     mode = props.mode,
     tabListProps = props.tabListProps,
     tabPanelProps = props.tabPanelProps,
+    className = props.className,
     others = _objectWithoutProperties(props, _excluded2);
   usePropWarning(props, 'disabled', 'isDisabled');
   var tabListRef = useLocalOrForwardRef(ref);
@@ -77,30 +81,40 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
   var _useTabList = useTabList(props, state, tabListRef),
     raTabListProps = _useTabList.tabListProps;
+  var _useStatusClasses = useStatusClasses(className, {
+      'is-vertical': orientation === ORIENTATION.VERTICAL,
+      'is-horizontal': orientation === ORIENTATION.HORIZONTAL
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(TabsContext.Provider, {
     value: state
-  }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
+  }, ___EmotionJSX(Box, _extends({}, others, {
+    isRow: orientation === ORIENTATION.VERTICAL
+  }), ___EmotionJSX(Box, _extends({
     variant: "tabs",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, tabListProps, raTabListProps, {
-    ref: tabListRef
+    ref: tabListRef,
+    className: classNames
   }), _mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = _Array$from(state.collection)).call(_context5, function (item) {
     var _item$props;
     return !(item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.isListItem);
   })).call(_context4, function (item) {
-    var _item$props2;
+    var _item$props2, _item$props3;
     return ___EmotionJSX(CollectionTab, {
       key: item.key,
       item: item,
       isDisabled: isDisabled,
+      isRequired: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.isRequired,
       orientation: orientation,
       mode: mode,
-      slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
+      slots: item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.slots
     });
   })), ___EmotionJSX(TabPanel, {
     key: (_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.key,
     state: state,
-    tabPanelProps: tabPanelProps
+    tabPanelProps: tabPanelProps,
+    className: classNames
   }, ((_state$selectedItem4 = state.selectedItem) === null || _state$selectedItem4 === void 0 ? void 0 : _state$selectedItem4.props.children) || ((_state$selectedItem5 = state.selectedItem) === null || _state$selectedItem5 === void 0 ? void 0 : _state$selectedItem5.props.content))));
 });
 Tabs.defaultProps = {

package/lib/components/Tabs/Tabs.stories.js

@@ -54,6 +54,17 @@ var tabs = [{
   name: 'Tab 3',
   children: ___EmotionJSX(Text, null, "Tab 3 body")
 }];
+var customTabs = [{
+  name: 'Details',
+  children: ___EmotionJSX(Text, null, "Tab 1 body"),
+  isRequired: true
+}, {
+  name: 'First Factor',
+  children: ___EmotionJSX(Text, null, "Tab 2 body")
+}, {
+  name: 'MFA & Risk',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}];
 export var Default = function Default(args) {
   return ___EmotionJSX(Tabs, _extends({
     items: tabs
@@ -217,4 +228,31 @@ export var CustomPanelProps = function CustomPanelProps() {
       "data-testid": "testing-".concat(item.name)
     }, item.children);
   });
+};
+CustomPanelProps.parameters = {
+  codesandbox: false
+};
+export var VerticalOrientation = function VerticalOrientation(args) {
+  return ___EmotionJSX(Tabs, _extends({
+    items: customTabs
+  }, args, {
+    orientation: "vertical",
+    tabPanelProps: {
+      sx: {
+        m: '24px'
+      }
+    },
+    tabListProps: {
+      sx: {
+        width: '209px'
+      }
+    }
+  }), function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name,
+      "data-testid": "testing-".concat(item.name),
+      isRequired: item === null || item === void 0 ? void 0 : item.isRequired
+    }, item.children);
+  });
 };

package/lib/components/Tabs/Tabs.style.js

@@ -30,6 +30,48 @@ export var tab = {
   },
   '& > svg': {
     flexShrink: 0
+  },
+  '&.is-vertical': {
+    borderRadius: '0px',
+    p: '12px 20px',
+    WebkitAlignItems: 'start',
+    '& > span': {
+      m: '0',
+      p: '0',
+      fontSize: '14px',
+      color: '#68747f'
+    },
+    '&.is-selected': {
+      borderLeft: '3px solid',
+      borderLeftColor: 'active',
+      bg: 'accent.95',
+      '& > span': {
+        p: '0',
+        color: 'active'
+      },
+      '& > div': {
+        border: ' none',
+        borderBottomColor: 'none',
+        bg: 'transparent',
+        height: '0px'
+      }
+    },
+    '&.is-hovered:not(.is-selected)': {
+      bg: '#f2f3f4'
+    },
+    '&.is-hovered.is-selected': {
+      bg: 'accent.95'
+    },
+    '&.is-focused': {
+      boxShadow: 'none',
+      outline: '2px solid',
+      outlineColor: 'active',
+      borderRadius: '2px',
+      zIndex: 1,
+      '& > span': {
+        outline: 'none'
+      }
+    }
   }
 };
 export var tabLine = {
@@ -42,11 +84,16 @@ export var tabPanel = {
   outline: 'none'
 };
 export var tabs = {
-  borderBottomWidth: 1,
-  borderBottomStyle: 'solid',
-  borderBottomColor: 'neutral.90',
   mb: 'lg',
-  gap: '25px'
+  '&.is-vertical': {
+    borderRight: '1px solid #e4e6e9'
+  },
+  '&.is-horizontal': {
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'neutral.90',
+    gap: 'lg'
+  }
 };
 export var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
   color: 'neutral.40',
@@ -55,6 +102,10 @@ export var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
     color: 'active'
   },
   '& + *:not(div:first-of-type)': {
-    'ml': 'md'
+    ml: 'md'
+  },
+  '&.is-selected.is-vertical': {
+    bg: 'accent.95'
   }
-});
+});
+export var tabPanelBody = {};

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -6,7 +6,8 @@ export var componentSpecificNextGenBlacklist = {
   PasswordField: ['Success'],
   TextField: ['Success'],
   OverlayPanel: ['Expandable'],
-  DataTable: ['Default']
+  DataTable: ['Default'],
+  Tabs: ['Vertical Orientation']
 };
 export var astroBlacklistStory = {
   DataTable: ['Onyx Default'],

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

@@ -1,5 +1,7 @@
 export var tabs = {
-  gap: '0px'
+  '&.is-horizontal': {
+    gap: '0px'
+  }
 };
 export var menuTab = {
   ml: '0px !important'

package/package.json

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