@pingux/astro 2.75.0 → 2.76.0-alpha.0

package/lib/cjs/components/Badge/Badge.styles.d.ts

@@ -777,5 +777,135 @@ declare const _default: {
         borderRadius: string;
         fontWeight: number;
     };
+    dataTable: {
+        pending: {
+            '& span, & > svg': {
+                color: string;
+            };
+            borderColor: string;
+            border: string;
+            borderStyle: string;
+            flexDirection: "row-reverse";
+            bg: string;
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+        failed: {
+            '& span, & > svg': {
+                color: string;
+            };
+            borderColor: string;
+            border: string;
+            borderStyle: string;
+            flexDirection: "row-reverse";
+            bg: string;
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+        rejected: {
+            '& span, & > svg': {
+                color: string;
+            };
+            borderColor: string;
+            border: string;
+            borderStyle: string;
+            flexDirection: "row-reverse";
+            bg: string;
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+        approved: {
+            '& span, & > svg': {
+                color: string;
+            };
+            borderColor: string;
+            border: string;
+            borderStyle: string;
+            flexDirection: "row-reverse";
+            bg: string;
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+    };
 };
 export default _default;

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

@@ -225,6 +225,38 @@ var removableBadge = _objectSpread(_objectSpread({}, invertedRemovableBadge), {}
     color: 'text.primary'
   }
 });
+var dataTableBase = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  border: '1px',
+  borderStyle: 'solid',
+  flexDirection: 'row-reverse !important',
+  bg: 'white !important'
+});
+var dataTable = {
+  pending: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'line.light'
+    },
+    borderColor: 'line.light'
+  }),
+  failed: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'warning.bright'
+    },
+    borderColor: 'warning.bright'
+  }),
+  rejected: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'critical.bright'
+    },
+    borderColor: 'critical.bright'
+  }),
+  approved: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'success.dark'
+    },
+    borderColor: 'success.dark'
+  })
+};
 var _default = {
   activeStatusBadge: activeStatusBadge,
   badgeDeleteButton: badgeDeleteButton,
@@ -248,6 +280,7 @@ var _default = {
   warningStatusBadge: warningStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   removableBadge: removableBadge,
-  invertedRemovableBadge: invertedRemovableBadge
+  invertedRemovableBadge: invertedRemovableBadge,
+  dataTable: dataTable
 };
 exports["default"] = _default;

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

@@ -120,8 +120,8 @@ var TextIconButton = function TextIconButton() {
     mb: "sm",
     variant: "primaryWithIcon"
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PlusIcon["default"],
     mr: "xs",
+    icon: _PlusIcon["default"],
     color: "white",
     size: 20,
     title: {

package/lib/cjs/components/DataTable/DataTable.js

@@ -59,7 +59,8 @@ var ROW_HEIGHTS = {
   },
   spacious: {
     medium: 48,
-    large: 60
+    large: 60,
+    xl: 74
   }
 };
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -218,7 +219,9 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
   var mergedProps = (0, _reactAria.mergeProps)(gridProps, focusProps);
-  return (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
+  return (0, _react2.jsx)(_index.Box, {
+    variant: "dataTable.container"
+  }, (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
     value: {
       state: state,
       layout: layout,
@@ -243,7 +246,7 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     style: {
       whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
     }
-  })));
+  }))));
 });
 var TableHeader = function TableHeader(_ref2) {
   var children = _ref2.children,
@@ -386,7 +389,8 @@ var CenteredWrapper = function CenteredWrapper(_ref7) {
     variant: "dataTable.tableCenteredWrapper"
   }, (0, _react2.jsx)(_index.Box, {
     role: "rowheader",
-    "aria-colspan": state.collection.columns.length
+    "aria-colspan": state.collection.columns.length,
+    variant: "dataTable.rowHeader"
   }, children));
 };
 var _default = DataTable;

package/lib/cjs/components/DataTable/DataTable.styles.d.ts

@@ -136,6 +136,7 @@ declare const _default: {
     };
     tableMenu: {
         borderRadius: string;
+        mr: string;
     };
 };
 export default _default;

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

@@ -140,7 +140,8 @@ var tableBody = {
   overflow: 'auto'
 };
 var tableMenu = {
-  borderRadius: '50px'
+  borderRadius: '50px',
+  mr: 'md'
 };
 var _default = {
   tableBody: tableBody,

package/lib/cjs/components/DataTable/DataTableBadge.js

@@ -9,6 +9,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
 var _AlertIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertIcon"));
@@ -21,27 +22,56 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var DataTableBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var cell = _ref.cell;
-  var color = cell === 'Pending' ? 'line.light' : cell === 'Failed' ? 'warning.bright' : cell === 'Rejected' ? 'critical.bright' : 'success.dark';
-  return (0, _react2.jsx)(_index.Badge, {
-    label: cell,
-    bg: "white",
-    ref: ref,
-    textColor: cell === 'Pending' || cell === 'Failed' ? 'text.primary' : color,
-    sx: {
-      border: '1px',
-      borderStyle: 'solid',
-      borderColor: color,
-      flexDirection: 'row-reverse !important'
-    }
-  }, cell && cell !== 'Pending' && (0, _react2.jsx)(_index.Icon, {
-    icon: cell === 'Approved' ? _CheckIcon["default"] : cell === 'Rejected' ? _AlertCircleIcon["default"] : cell === 'Failed' ? _AlertIcon["default"] : undefined,
-    title: {
-      name: cell === 'Approved' ? 'Check Icon' : cell === 'Rejected' ? 'Alert Circle Icon' : cell === 'Failed' ? 'Alert Icon' : ''
+  var componentProps = {
+    'Pending': {
+      badgeProps: {
+        variant: 'dataTable.pending'
+      },
+      iconProps: {
+        icon: _CheckIcon["default"]
+      }
+    },
+    'Failed': {
+      badgeProps: {
+        variant: 'dataTable.failed'
+      },
+      iconProps: {
+        icon: _AlertIcon["default"],
+        title: {
+          name: 'Alert Icon'
+        }
+      }
     },
+    'Rejected': {
+      badgeProps: {
+        variant: 'dataTable.rejected'
+      },
+      iconProps: {
+        icon: _AlertCircleIcon["default"],
+        title: {
+          name: 'Alert Circle Icon'
+        }
+      }
+    },
+    'Approved': {
+      badgeProps: {
+        variant: 'dataTable.approved'
+      },
+      iconProps: {
+        icon: _CheckIcon["default"],
+        title: {
+          name: 'Check Icon'
+        }
+      }
+    }
+  };
+  return (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
+    label: cell,
+    ref: ref
+  }, cell && componentProps[cell].badgeProps), cell && cell !== 'Pending' && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     mr: "xs",
-    size: "14px",
-    color: color
-  }));
+    size: "14px"
+  }, cell && componentProps[cell].iconProps)));
 });
 var _default = DataTableBadge;
 exports["default"] = _default;

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -101,7 +101,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: popoverRef,
     isOpen: state.isOpen,
     onClose: state.setOpen,
-    overflow: "scroll"
+    overflow: "auto"
   }, (0, _utils.mergeProps)(dialogProps, positionProps)), (0, _react2.jsx)(_focus.FocusScope, {
     autoFocus: true,
     contain: true,

package/lib/cjs/components/ListView/ListView.js

@@ -26,13 +26,14 @@ var _reactStately = require("react-stately");
 var _i18n = require("@react-aria/i18n");
 var _virtualizer = require("@react-aria/virtualizer");
 var _layout = require("@react-stately/layout");
+var _index = require("../../index");
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _ListViewContext = require("./ListViewContext");
 var _ListViewExpandableItem = _interopRequireDefault(require("./ListViewExpandableItem"));
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items", "onFocus"];
+var _excluded = ["containerProps", "disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items", "onFocus"];
 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; }
@@ -63,7 +64,8 @@ function useListLayout(state) {
   return layout;
 }
 var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var disabledKeys = props.disabledKeys,
+  var containerProps = props.containerProps,
+    disabledKeys = props.disabledKeys,
     _props$isHoverable = props.isHoverable,
     isHoverable = _props$isHoverable === void 0 ? true : _props$isHoverable,
     loadingState = props.loadingState,
@@ -138,7 +140,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value: {
       state: state
     }
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, items ? gridProps : {
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "listView.container"
+  }, containerProps), (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, items ? gridProps : {
     role: 'presentation'
   }, {
     onLoadMore: onLoadMore,
@@ -178,7 +182,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       });
     }
     return null;
-  }));
+  })));
 });
 ListView.defaultProps = {
   'aria-label': 'listView',

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

@@ -826,7 +826,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
   });
   return (0, _react2.jsx)(_.Box, {
     sx: {
-      maxHeight: '400px'
+      height: '400px'
     }
   }, (0, _react2.jsx)(_.ListView, (0, _extends2["default"])({}, actions, {
     items: list.items,

package/lib/cjs/components/ListView/ListView.styles.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    container: {
+        height: string;
+        overflowY: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var container = {
+  height: '100%',
+  overflowY: 'hidden'
+};
+var _default = {
+  container: container
+};
+exports["default"] = _default;

package/lib/cjs/components/ListView/ListViewFocusWrapper.js

@@ -77,7 +77,8 @@ var ExpandableItemChildrenContainer = /*#__PURE__*/(0, _react.forwardRef)(functi
     tabIndex: 0,
     onKeyDown: function onKeyDown(e) {
       escapeFocusDelegate(e, setIsFocusEscaped, focusManager, isFocusEscaped);
-    }
+    },
+    variant: "listViewItem.expandableItemBody"
   }), children);
 });
 var ListViewFocusWrapper = function ListViewFocusWrapper(props) {

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -19,7 +19,7 @@ var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _listViewItemAttributes = require("./listViewItemAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+var _excluded = ["children", "className", "data", "iconProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
 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; }
 var LIST_ITEM_ICON = '-list-item-icon';
@@ -30,6 +30,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     data = _ref.data,
+    iconProps = _ref.iconProps,
     isHovered = _ref.isHovered,
     isSelected = _ref.isSelected,
     linkProps = _ref.linkProps,
@@ -61,15 +62,16 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return 'listViewItem.iconWrapper';
   };
   var renderIcon = icon && (0, _react2.jsx)(_.Box, {
-    width: "25px"
-  }, (0, _react2.jsx)(_.Icon, {
+    width: "25px",
+    variant: "listViewItem.iconContainer"
+  }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     color: "accent.40",
     icon: icon,
     size: "md",
     title: {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     }
-  }));
+  }, iconProps)));
   var renderImage = !icon && image && (0, _react2.jsx)(_.Box, {
     width: "35px"
   }, (0, _react2.jsx)(_.Image, {

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

@@ -125,14 +125,19 @@ var expandableFocusContainer = {
     boxShadow: '0 0 0 1px inset #D033FF'
   }
 };
+var expandableItemBody = {
+  px: 'md'
+};
 var expandableStyledListItem = {
   display: 'flex',
   padding: '0px 15px 0px 25px',
   flex: '1 1 0px',
-  minHeight: '80px',
   flexGrow: 1,
   justifyContent: 'center',
   bg: 'white',
+  minHeight: '75px',
+  py: 'lg',
+  px: 'md',
   '&.is-hovered': {
     bg: 'accent.99',
     cursor: 'pointer'
@@ -159,6 +164,7 @@ var _default = {
   styledListItem: styledListItem,
   loaderContainer: loaderContainer,
   expandableFocusContainer: expandableFocusContainer,
+  expandableItemBody: expandableItemBody,
   expandableStyledListItem: expandableStyledListItem,
   expandableRow: expandableRow
 };

package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js

@@ -369,8 +369,8 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     }, (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
       key: item.key,
       role: "presentation",
-      variant: "selectedItemBadge",
       bg: "active",
+      variant: "selectedItemBadge",
       label: item.name,
       slots: item.slots
     }, item.badgeProps), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({

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

@@ -93,13 +93,10 @@ var Verify = function Verify(props) {
     id: "Hero-Chart",
     stroke: "none",
     strokeWidth: "1",
-    fill: "none",
     fillRule: "evenodd"
   }, (0, _react2.jsx)("g", {
     id: "Dashboard-\u2013-Verify",
-    transform: "translate(-251.000000, -579.000000)",
-    fill: "#ffffff",
-    fillRule: "nonzero"
+    transform: "translate(-251.000000, -579.000000)"
   }, (0, _react2.jsx)("g", {
     id: "Group",
     transform: "translate(251.000000, 577.000000)"

package/lib/cjs/components/PanelHeader/PanelHeader.js

@@ -64,7 +64,7 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var renderData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
     variant: text && subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, icon ? renderIcon : renderImage, (0, _react2.jsx)(_index.Box, {
+  }, slots !== null && slots !== void 0 && slots.leftOfData || icon ? renderIcon : renderImage, (0, _react2.jsx)(_index.Box, {
     variant: "panelHeader.wrapper"
   }, text && (0, _react2.jsx)(_index.Text, {
     variant: "panelHeaderText"

package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.js

@@ -194,12 +194,7 @@ var useExpandableListViewItem = function useExpandableListViewItem(props) {
     variant: 'listViewItem.expandableRow'
   });
   var cellProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, hoverProps), {}, {
-    variant: 'listViewItem.expandableStyledListItem',
-    sx: {
-      minHeight: '75px',
-      py: 'lg',
-      px: 'md'
-    }
+    variant: 'listViewItem.expandableStyledListItem'
   }, gridCellProps), {}, {
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,

package/lib/cjs/index.d.ts

@@ -183,6 +183,7 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
+export { default as NextGenTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';

package/lib/cjs/index.js

@@ -123,6 +123,7 @@ var _exportNames = {
   TimeZonePicker: true,
   TooltipTrigger: true,
   TreeView: true,
+  NextGenTheme: true,
   OverlayProvider: true,
   useOverlayPosition: true,
   useOverlayTrigger: true,
@@ -562,6 +563,12 @@ _Object$defineProperty(exports, "NavBarSection", {
     return _NavBarSection["default"];
   }
 });
+_Object$defineProperty(exports, "NextGenTheme", {
+  enumerable: true,
+  get: function get() {
+    return _nextGen["default"];
+  }
+});
 _Object$defineProperty(exports, "NoticeIcon", {
   enumerable: true,
   get: function get() {
@@ -1807,6 +1814,7 @@ _forEachInstanceProperty(_context75 = _Object$keys(_TreeView)).call(_context75,
     }
   });
 });
+var _nextGen = _interopRequireDefault(require("./styles/themes/next-gen"));
 var _types = require("./types");
 _forEachInstanceProperty(_context76 = _Object$keys(_types)).call(_context76, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -46,8 +46,7 @@ var sx = {
     px: 'lg',
     py: 'lg',
     bg: 'accent.99',
-    height: '900px',
-    overflowY: 'scroll'
+    height: '900px'
   },
   separator: {
     bg: 'accent.90'

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Next Gen Recipes/Default Avatar'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenTheme]
+  }, (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    gap: "md",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_.Box, {
+    variant: "avatar.sm",
+    backgroundColor: "green-100",
+    color: "green-800"
+  }, "AT"), (0, _react2.jsx)(_.Box, {
+    variant: "avatar.md",
+    backgroundColor: "blue-100",
+    color: "blue-800"
+  }, "LP"), (0, _react2.jsx)(_.Box, {
+    variant: "avatar.lg",
+    backgroundColor: "teal-100",
+    color: "teal-800"
+  }, "WP"), (0, _react2.jsx)(_.Box, {
+    variant: "avatar.xl",
+    backgroundColor: "red-100",
+    color: "red-800"
+  }, "JS")));
+};
+exports.Default = Default;