@pingux/astro 2.139.0 → 2.140.0-alpha.1

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

@@ -1,3 +1,17 @@
-import React from 'react';
-declare const GridList: (props: any) => React.JSX.Element;
+import React, { Key } from 'react';
+import { Collection } from 'react-stately';
+import type { Node } from '@react-types/shared';
+type GridListProps = {
+    containerProps: object;
+    rowProps: object;
+    cellProps: object;
+    children?: React.ReactNode;
+    isReorderable?: boolean;
+    items: Iterable<object>;
+    keyboardNavigationBehavior?: 'arrow' | 'tab';
+    onAction?: (key: Key) => void;
+    onSelectionChange?: (keys: Selection) => void;
+    collection: Collection<Node<object>>;
+};
+declare const GridList: (props: GridListProps) => React.JSX.Element;
 export default GridList;

package/lib/cjs/components/GridList/GridList.js

@@ -20,12 +20,14 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 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 _reactAria = require("react-aria");
 var _useGridList2 = _interopRequireDefault(require("../../hooks/useGridList"));
 var _index = require("../../index");
 var _GridListRow = _interopRequireDefault(require("./GridListRow"));
 var _react2 = require("@emotion/react");
+var _excluded = ["containerProps", "rowProps", "cellProps"];
 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; }
@@ -33,14 +35,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var GridList = function GridList(props) {
   var _context, _context2;
   var ref = (0, _react.useRef)(null);
-  var _useGridList = (0, _useGridList2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+  var containerProps = props.containerProps,
+    rowProps = props.rowProps,
+    cellProps = props.cellProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGridList = (0, _useGridList2["default"])(_objectSpread(_objectSpread({}, others), {}, {
       ref: ref
     })),
     collectionProps = _useGridList.collectionProps,
     gridListItemProps = _useGridList.gridListItemProps,
     gridProps = _useGridList.gridProps,
     state = _useGridList.state;
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(gridProps, collectionProps), {
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(gridProps, collectionProps, containerProps), {
     ref: ref,
     className: "list",
     variant: "gridList.container",
@@ -48,7 +54,9 @@ var GridList = function GridList(props) {
   }), (0, _map["default"])(_context = (0, _concat["default"])(_context2 = []).call(_context2, (0, _from["default"])(state.collection))).call(_context, function (item) {
     return (0, _react2.jsx)(_GridListRow["default"], (0, _extends2["default"])({
       key: item.key,
-      item: item
+      item: item,
+      rowProps: rowProps,
+      cellProps: cellProps
     }, gridListItemProps));
   }));
 };

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

@@ -1,7 +1,18 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: (props: any) => React.JSX.Element;
+    component: (props: {
+        containerProps: object;
+        rowProps: object;
+        cellProps: object;
+        children?: React.ReactNode;
+        isReorderable?: boolean | undefined;
+        items: Iterable<object>;
+        keyboardNavigationBehavior?: "tab" | "arrow" | undefined;
+        onAction?: ((key: React.Key) => void) | undefined;
+        onSelectionChange?: ((keys: Selection) => void) | undefined;
+        collection: import("react-stately").Collection<import("@react-types/shared").Node<object>>;
+    }) => React.JSX.Element;
     argTypes: {
         isReorderable: {
             description: string;

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

@@ -69,12 +69,14 @@ var ExampleComponent = function ExampleComponent(_ref) {
     sx: {
       alignItems: 'center'
     },
-    gap: "sm"
+    gap: "sm",
+    flexGrow: "1"
   }, (0, _react2.jsx)(_index.TextField, {
     "aria-label": label,
     ref: ref,
     defaultValue: label,
-    "data-testid": "".concat(label, "-text-field")
+    "data-testid": "".concat(label, "-text-field"),
+    flexGrow: "1"
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -122,7 +124,17 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.GridList, (0, _extends2["default"])({
     items: items,
     isReorderable: true,
-    keyboardNavigationBehavior: "tab"
+    keyboardNavigationBehavior: "tab",
+    rowProps: {
+      sx: {
+        flexGrow: 1
+      }
+    },
+    cellProps: {
+      sx: {
+        flexGrow: 1
+      }
+    }
   }, args), function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
       textValue: item.name,

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

@@ -53,12 +53,12 @@ describe('GridList Component', function () {
     });
   });
   test('renders GridListRow for each item', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = _testWrapper.screen.getAllByRole('row');
     expect(rows).toHaveLength(items.length);
   });
   test('handles keyboard navigation', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = _testWrapper.screen.getAllByRole('row');
     _userEvent["default"].tab();
     expect(rows[0]).toHaveClass('is-focused');
@@ -150,4 +150,37 @@ describe('GridList Component', function () {
       }
     }, _callee2);
   })));
+  test('renders GridList with containerProps', function () {
+    getDefaultComponent({
+      containerProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var list = _testWrapper.screen.getByRole('grid');
+    expect(list).toHaveStyle('background: red');
+  });
+  test('renders GridList with rowProps', function () {
+    getDefaultComponent({
+      rowProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var rows = _testWrapper.screen.getAllByRole('row');
+    expect(rows[0]).toHaveStyle('background: red');
+  });
+  test('renders GridList with cellProps', function () {
+    getDefaultComponent({
+      cellProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var gridCells = _testWrapper.screen.getAllByRole('gridcell');
+    expect(gridCells[0]).toHaveStyle('background: red');
+  });
 });

package/lib/cjs/components/GridList/GridListRow.js

@@ -24,7 +24,9 @@ var GridListRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var rowRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var buttonRef = _react["default"].useRef(null);
   var cellRef = _react["default"].useRef(null);
-  var dragState = props.dragState,
+  var customRowProps = props.rowProps,
+    cellProps = props.cellProps,
+    dragState = props.dragState,
     dropState = props.dropState,
     isReorderable = props.isReorderable,
     item = props.item,
@@ -54,6 +56,8 @@ var GridListRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "gridList.rowContainer",
     isRow: true,
     ref: rowRef
+  }, customRowProps, {
+    flexGrow: "1"
   }), isReorderable && (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -70,10 +74,8 @@ var GridListRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     icon: _DragVerticalIcon["default"]
   }))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, gridCellProps, {
     isRow: true,
-    sx: {
-      alignItems: 'center'
-    }
-  }), item.rendered)), state.collection.getKeyAfter(item.key) == null && (0, _react2.jsx)(_TreeView.InsertionIndicator, {
+    alignItems: "center"
+  }, cellProps), item.rendered)), state.collection.getKeyAfter(item.key) == null && (0, _react2.jsx)(_TreeView.InsertionIndicator, {
     key: "".concat(item.key, "-after"),
     target: {
       type: 'item',

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/dnd.d.ts

@@ -54,6 +54,8 @@ export interface GridListRowProps {
     isReorderable?: boolean;
     item: Node<object>;
     state: ListState<object>;
+    rowProps?: object;
+    cellProps?: object;
 }
 export interface UseReorderableCollectionProps {
     draggableCollectionStateOptions: DraggableCollectionStateOptions;

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/GridList/GridList.js

@@ -8,6 +8,8 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 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 = ["containerProps", "rowProps", "cellProps"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -22,14 +24,18 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var GridList = function GridList(props) {
   var _context, _context2;
   var ref = useRef(null);
-  var _useGridList = useGridList(_objectSpread(_objectSpread({}, props), {}, {
+  var containerProps = props.containerProps,
+    rowProps = props.rowProps,
+    cellProps = props.cellProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useGridList = useGridList(_objectSpread(_objectSpread({}, others), {}, {
       ref: ref
     })),
     collectionProps = _useGridList.collectionProps,
     gridListItemProps = _useGridList.gridListItemProps,
     gridProps = _useGridList.gridProps,
     state = _useGridList.state;
-  return ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, collectionProps), {
+  return ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, collectionProps, containerProps), {
     ref: ref,
     className: "list",
     variant: "gridList.container",
@@ -37,7 +43,9 @@ var GridList = function GridList(props) {
   }), _mapInstanceProperty(_context = _concatInstanceProperty(_context2 = []).call(_context2, _Array$from(state.collection))).call(_context, function (item) {
     return ___EmotionJSX(GridListRow, _extends({
       key: item.key,
-      item: item
+      item: item,
+      rowProps: rowProps,
+      cellProps: cellProps
     }, gridListItemProps));
   }));
 };

package/lib/components/GridList/GridList.stories.js

@@ -57,12 +57,14 @@ var ExampleComponent = function ExampleComponent(_ref) {
     sx: {
       alignItems: 'center'
     },
-    gap: "sm"
+    gap: "sm",
+    flexGrow: "1"
   }, ___EmotionJSX(TextField, {
     "aria-label": label,
     ref: ref,
     defaultValue: label,
-    "data-testid": "".concat(label, "-text-field")
+    "data-testid": "".concat(label, "-text-field"),
+    flexGrow: "1"
   }), ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -110,7 +112,17 @@ export var Default = function Default(args) {
   return ___EmotionJSX(GridList, _extends({
     items: items,
     isReorderable: true,
-    keyboardNavigationBehavior: "tab"
+    keyboardNavigationBehavior: "tab",
+    rowProps: {
+      sx: {
+        flexGrow: 1
+      }
+    },
+    cellProps: {
+      sx: {
+        flexGrow: 1
+      }
+    }
   }, args), function (item) {
     return ___EmotionJSX(Item, {
       textValue: item.name,

package/lib/components/GridList/GridList.test.js

@@ -49,12 +49,12 @@ describe('GridList Component', function () {
     });
   });
   test('renders GridListRow for each item', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = screen.getAllByRole('row');
     expect(rows).toHaveLength(items.length);
   });
   test('handles keyboard navigation', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = screen.getAllByRole('row');
     userEvent.tab();
     expect(rows[0]).toHaveClass('is-focused');
@@ -146,4 +146,37 @@ describe('GridList Component', function () {
       }
     }, _callee2);
   })));
+  test('renders GridList with containerProps', function () {
+    getDefaultComponent({
+      containerProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var list = screen.getByRole('grid');
+    expect(list).toHaveStyle('background: red');
+  });
+  test('renders GridList with rowProps', function () {
+    getDefaultComponent({
+      rowProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var rows = screen.getAllByRole('row');
+    expect(rows[0]).toHaveStyle('background: red');
+  });
+  test('renders GridList with cellProps', function () {
+    getDefaultComponent({
+      cellProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var gridCells = screen.getAllByRole('gridcell');
+    expect(gridCells[0]).toHaveStyle('background: red');
+  });
 });

package/lib/components/GridList/GridListRow.js

@@ -11,7 +11,9 @@ var GridListRow = /*#__PURE__*/forwardRef(function (props, ref) {
   var rowRef = useLocalOrForwardRef(ref);
   var buttonRef = React.useRef(null);
   var cellRef = React.useRef(null);
-  var dragState = props.dragState,
+  var customRowProps = props.rowProps,
+    cellProps = props.cellProps,
+    dragState = props.dragState,
     dropState = props.dropState,
     isReorderable = props.isReorderable,
     item = props.item,
@@ -41,6 +43,8 @@ var GridListRow = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "gridList.rowContainer",
     isRow: true,
     ref: rowRef
+  }, customRowProps, {
+    flexGrow: "1"
   }), isReorderable && ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -57,10 +61,8 @@ var GridListRow = /*#__PURE__*/forwardRef(function (props, ref) {
     icon: DragIcon
   }))), ___EmotionJSX(Box, _extends({}, gridCellProps, {
     isRow: true,
-    sx: {
-      alignItems: 'center'
-    }
-  }), item.rendered)), state.collection.getKeyAfter(item.key) == null && ___EmotionJSX(InsertionIndicator, {
+    alignItems: "center"
+  }, cellProps), item.rendered)), state.collection.getKeyAfter(item.key) == null && ___EmotionJSX(InsertionIndicator, {
     key: "".concat(item.key, "-after"),
     target: {
       type: 'item',

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.139.0",
+  "version": "2.140.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",