@pingux/astro 2.150.0-alpha.2 → 2.151.0-alpha.3

package/lib/cjs/components/Avatar/Avatar.js

@@ -53,7 +53,8 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       sx: _objectSpread({
         size: size,
         width: _sizes["default"].avatar[size],
-        height: _sizes["default"].avatar[size]
+        height: _sizes["default"].avatar[size],
+        borderRadius: isSquare ? '0px' : '100%'
       }, sx)
     }, others));
   }

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

@@ -155,14 +155,6 @@ var expandableRow = {
 var expandIcon = {
   color: 'gray-900'
 };
-var editIcon = {
-  width: '25px !important',
-  height: '25px !important'
-};
-var menuIcon = {
-  width: '25px !important',
-  height: '25px !important'
-};
 var _default = {
   container: container,
   controls: controls,
@@ -178,8 +170,6 @@ var _default = {
   expandableItemBody: expandableItemBody,
   expandableStyledListItem: expandableStyledListItem,
   expandableRow: expandableRow,
-  expandIcon: expandIcon,
-  editIcon: editIcon,
-  menuIcon: menuIcon
+  expandIcon: expandIcon
 };
 exports["default"] = _default;

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

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     ml: "sm"
   }, (0, _react2.jsx)(_.IconButton, props, (0, _react2.jsx)(_.Icon, {
     icon: _CreateIcon["default"],
-    variant: "listViewItem.editIcon"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = _iconButtonAttributes.iconButtonPropTypes;

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

@@ -38,7 +38,7 @@ var ListViewItemMenu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     ref: ref
   }, iconButtonProps), (0, _react2.jsx)(_.Icon, {
     icon: listViewMenu,
-    variant: "listViewItem.menuIcon",
+    size: "md",
     title: {
       name: 'Menu Icon'
     }

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

@@ -50,7 +50,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current2;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -99,14 +99,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     hasFocusWithin = _useState6[0],
     setFocusWithin = _useState6[1];
-  var _useState7 = (0, _react.useState)([]),
+  var _useState7 = (0, _react.useState)(''),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    initialItems = _useState8[0],
-    setInitialItems = _useState8[1];
-  var _useState9 = (0, _react.useState)(''),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    activeDescendant = _useState10[0],
-    setActiveDescendant = _useState10[1];
+    activeDescendant = _useState8[0],
+    setActiveDescendant = _useState8[1];
   var inputWrapperRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
@@ -123,9 +119,6 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       inputValue: filterString
     }),
     isLoading = _useInputLoader.isLoading;
-  (0, _react.useEffect)(function () {
-    setInitialItems((0, _from["default"])(items));
-  }, []);
   var toggleItems = function toggleItems(keys) {
     if (onSelectionChange) onSelectionChange(keys);
   };
@@ -204,10 +197,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState11 = (0, _react.useState)(null),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    menuWidth = _useState12[0],
-    setMenuWidth = _useState12[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    menuWidth = _useState10[0],
+    setMenuWidth = _useState10[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -272,20 +265,20 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
   var handleBlur = function handleBlur(e) {
-    var _inputWrapperRef$curr, _listBoxRef$current;
+    var _inputWrapperRef$curr, _popoverRef$current;
     var relatedTarget = e.relatedTarget || document.activeElement;
-    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
+    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_popoverRef$current = popoverRef.current) !== null && _popoverRef$current !== void 0 && _popoverRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
       return;
     }
     setFilterString('');
     setIsOpen(false);
   };
-  var _useState13 = (0, _react.useState)('Select All'),
-    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    selectionState = _useState14[0],
-    setSelectionState = _useState14[1];
+  var _useState11 = (0, _react.useState)('Select All'),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    selectionState = _useState12[0],
+    setSelectionState = _useState12[1];
   var arrayItems = (0, _from["default"])(items);
-  var itemCount = (0, _reduce["default"])(initialItems).call(initialItems, function (count, obj) {
+  var itemCount = (0, _reduce["default"])(arrayItems).call(arrayItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;
@@ -353,7 +346,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
+      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef,
@@ -411,8 +404,8 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     value: setActiveDescendant
   }, (0, _react2.jsx)(_.Box, (0, _reactAria.mergeProps)(containerProps, focusWithinProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: function onBlur(e) {
-      var _popoverRef$current;
-      var blurIntoPopover = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.contains(e.relatedTarget);
+      var _popoverRef$current2;
+      var blurIntoPopover = (_popoverRef$current2 = popoverRef.current) === null || _popoverRef$current2 === void 0 ? void 0 : _popoverRef$current2.contains(e.relatedTarget);
       if (blurIntoPopover) {
         return;
       }

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

@@ -47,7 +47,7 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     image = data.image,
     subtext = data.subtext,
     text = data.text,
-    avatarDefualtText = data.avatarDefualtText;
+    avatarDefaultText = data.avatarDefaultText;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
     themeState = _useGetTheme.themeState;
   var isOnyx = themeState.isOnyx;
@@ -63,10 +63,12 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }));
   var renderAvatar = (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({
+    color: "green",
     src: image === null || image === void 0 ? void 0 : image.src,
+    isSquare: !!(image !== null && image !== void 0 && image.src),
     size: "avatar.lg",
-    defaultText: avatarDefualtText,
-    mr: "md"
+    defaultText: avatarDefaultText,
+    mr: "lg"
   }, avatarProps));
   var renderImage = !icon && image && (0, _react2.jsx)(_index.Box, {
     variant: "panelHeader.iconWrapper"
@@ -100,7 +102,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'
-  }, renderLeftContent(), (0, _react2.jsx)(_index.Box, headerWrapperPropsSpread, text && (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, headerPropsSpread, {
+  }, renderLeftContent(), (text || subtext) && (0, _react2.jsx)(_index.Box, headerWrapperPropsSpread, text && (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, headerPropsSpread, {
     variant: "panelHeaderText"
   }), text), subtext && (0, _react2.jsx)(_index.Text, {
     variant: "panelHeaderSubtext"

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

@@ -37,7 +37,7 @@ var Default = function Default(_ref) {
     data: {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }));
 };
@@ -55,7 +55,7 @@ var WithSubtext = function WithSubtext(_ref2) {
       icon: _AccountIcon["default"],
       subtext: 'rad_developer@pingidentity.com',
       text: 'Fons Vernall',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }));
 };
@@ -73,7 +73,7 @@ var WithControls = function WithControls(_ref3) {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall',
       subtext: 'rad_developer@pingidentity.com',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }), (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_index.Item, {
     key: "enable"
@@ -97,7 +97,7 @@ var WithImage = function WithImage(args) {
         src: _images.pingImg,
         alt: 'Ping Identity Logo',
         'aria-label': 'Ping Identity Logo',
-        avatarDefualtText: 'FV'
+        avatarDefaultText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -158,7 +158,7 @@ var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
-      avatarDefualtText: 'FV',
+      avatarDefaultText: 'FV',
       icon: _AccountIcon["default"],
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
       subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'

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

@@ -45,7 +45,8 @@ var wrapper = {
   flex: '1 1 0px'
 };
 var rightOfData = {
-  alignSelf: 'center'
+  alignSelf: 'center',
+  mr: 'md'
 };
 var iconWrapper = {
   width: '25px',

package/lib/cjs/components/PanelHeader/stories/OnyxDarkPanelHeader.chromatic.stories.js

@@ -0,0 +1,22 @@
+"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 _OnyxPanelHeaderComponent = _interopRequireDefault(require("./OnyxPanelHeaderComponent"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark Panel Header'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.OnyxDarkTheme
+  }, (0, _react2.jsx)(_OnyxPanelHeaderComponent["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/components/PanelHeader/stories/OnyxPanelHeader.chromatic.stories.js

@@ -0,0 +1,22 @@
+"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 _OnyxPanelHeaderComponent = _interopRequireDefault(require("./OnyxPanelHeaderComponent"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Panel Header'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.OnyxTheme
+  }, (0, _react2.jsx)(_OnyxPanelHeaderComponent["default"], null));
+};
+exports.Default = Default;

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

@@ -0,0 +1,89 @@
+"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"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
+var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
+var _ = require("../../..");
+var _images = require("../../../utils/devUtils/constants/images");
+var _react2 = require("@emotion/react");
+var PanelHeaderComponent = function PanelHeaderComponent() {
+  var breadcrumbs = (0, _react2.jsx)(_.Box, {
+    width: "100%"
+  }, (0, _react2.jsx)(_.Breadcrumbs, {
+    icon: _ChevronRightIcon["default"]
+  }, (0, _react2.jsx)(_.Item, {
+    "aria-label": "Lorem Text",
+    href: "https://www.pingidentity.com",
+    key: "Item1Key"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_.Item, {
+    "aria-label": "Lorem Ut",
+    key: "Item2Key"
+  }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco, laboris nisi ut aliquip ex ea commodo consequat incididunt et dolore.")));
+  return (0, _react2.jsx)(_.Box, {
+    gap: "md"
+  }, (0, _react2.jsx)(_.PanelHeader, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: 'Fons Vernall',
+      avatarDefaultText: 'FV'
+    }
+  }), (0, _react2.jsx)(_.PanelHeader, {
+    data: {
+      icon: _AccountIcon["default"],
+      subtext: 'rad_developer@pingidentity.com',
+      text: 'Fons Vernall',
+      avatarDefaultText: 'FV'
+    }
+  }), (0, _react2.jsx)(_.PanelHeader, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefaultText: 'FV'
+    }
+  }, (0, _react2.jsx)(_.PanelHeaderSwitchField, null), (0, _react2.jsx)(_.PanelHeaderMenu, null, (0, _react2.jsx)(_.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_.Item, {
+    key: "delete"
+  }, "Delete user")), (0, _react2.jsx)(_.PanelHeaderCloseButton, null)), (0, _react2.jsx)(_.PanelHeader, {
+    data: {
+      image: {
+        src: _images.pingImg,
+        alt: 'Ping Identity Logo',
+        'aria-label': 'Ping Identity Logo',
+        avatarDefaultText: 'FV'
+      },
+      text: 'Fons Vernall'
+    }
+  }), (0, _react2.jsx)(_.PanelHeader, {
+    data: {
+      icon: _AccountIcon["default"]
+    },
+    slots: {
+      rightOfData: breadcrumbs
+    }
+  }, (0, _react2.jsx)(_.PanelHeaderCloseButton, null)), (0, _react2.jsx)(_.PanelHeader, {
+    data: {
+      avatarDefaultText: 'FV',
+      icon: _AccountIcon["default"],
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+      subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
+    }
+  }, (0, _react2.jsx)(_.PanelHeaderSwitchField, null), (0, _react2.jsx)(_.PanelHeaderMenu, null, (0, _react2.jsx)(_.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_.Item, {
+    key: "delete"
+  }, "Delete user")), (0, _react2.jsx)(_.PanelHeaderCloseButton, null)));
+};
+var _default = PanelHeaderComponent;
+exports["default"] = _default;

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

@@ -645,5 +645,13 @@ declare const _default: {
             boxShadow: string;
         };
     };
+    breadcrumb: {
+        link: {
+            color: string;
+            '&.is-current': {
+                color: string;
+            };
+        };
+    };
 };
 export default _default;

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

@@ -259,6 +259,14 @@ var _default = {
       border: '1px solid border.separator',
       boxShadow: 'none'
     }
+  },
+  breadcrumb: {
+    link: {
+      color: 'blue-400',
+      '&.is-current': {
+        color: 'text.secondary'
+      }
+    }
   }
 };
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/customProperties/customSizes.js

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var copyButtonSize = 'sm';
 var breadcrumbIconSize = 'sm';
-var breadcrumbIconMargin = 'sm';
+var breadcrumbIconMargin = 'md';
 var accordionItemMarginLeft = 'md';
 var pageHeaderTitleMargin = 'md';
 var defaultLoaderSize = 32;

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

@@ -245,7 +245,7 @@ declare const _default: {
         thumbContainer: {
             bg: string;
             border: string;
-            maxWidth: number;
+            width: string;
             height: number;
             py: string;
             px: string;

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

@@ -1777,7 +1777,7 @@ declare const _default: {
             thumbContainer: {
                 bg: string;
                 border: string;
-                maxWidth: number;
+                width: string;
                 height: number;
                 py: string;
                 px: string;
@@ -1888,6 +1888,8 @@ declare const _default: {
     };
     lineHeights: {
         body: string;
+        xs: string;
+        sm: string;
         md: string;
     };
     text: {
@@ -1901,9 +1903,10 @@ declare const _default: {
             textOverflow: string;
             overflow: string;
             whiteSpace: string;
+            color: string;
+            lineHeight: string;
             fontSize: string;
             fontWeight: number;
-            color: string;
             fontFamily: string;
         };
         messagesText: {
@@ -1916,6 +1919,11 @@ declare const _default: {
                 };
             };
         };
+        panelHeaderSubtext: {
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+        };
         H1: {
             fontSize: string;
             fontWeight: number;
@@ -4153,14 +4161,6 @@ declare const _default: {
                     border: string;
                 };
             };
-            editIcon: {
-                width: string;
-                height: string;
-            };
-            menuIcon: {
-                width: string;
-                height: string;
-            };
         };
         lisViewItemChart: {
             title: {
@@ -4504,12 +4504,14 @@ declare const _default: {
             container: {
                 bg: string;
                 border: string;
-                minHeight: number;
-                maxHeight: number;
+                pt: string;
+                px: string;
+                pb: string;
             };
             controls: {
+                gap: string;
                 alignSelf: string;
-                pt: string;
+                mr: string;
             };
             wrapper: {
                 mr: string;

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

@@ -44,6 +44,8 @@ var nextGenTheme = {
   fontWeights: _text2.fontWeights,
   lineHeights: {
     body: '1.6',
+    xs: '1.2',
+    sm: '1.4',
     md: '1.75'
   },
   text: _text.text,

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

@@ -92,14 +92,6 @@ export declare const listViewItem: {
             border: string;
         };
     };
-    editIcon: {
-        width: string;
-        height: string;
-    };
-    menuIcon: {
-        width: string;
-        height: string;
-    };
 };
 export declare const listView: {
     container: {

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

@@ -100,14 +100,6 @@ var listViewItem = {
     '&.has-separator.is-last-row': {
       border: 'none'
     }
-  },
-  editIcon: {
-    width: '1.5rem !important',
-    height: '1.5rem !important'
-  },
-  menuIcon: {
-    width: '1.5rem !important',
-    height: '1.5rem !important'
   }
 };
 exports.listViewItem = listViewItem;

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

@@ -2,12 +2,14 @@ declare const _default: {
     container: {
         bg: string;
         border: string;
-        minHeight: number;
-        maxHeight: number;
+        pt: string;
+        px: string;
+        pb: string;
     };
     controls: {
+        gap: string;
         alignSelf: string;
-        pt: string;
+        mr: string;
     };
     wrapper: {
         mr: string;

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

@@ -8,12 +8,14 @@ exports["default"] = void 0;
 var container = {
   bg: 'backgroundBase',
   border: 'none',
-  minHeight: 72,
-  maxHeight: 72
+  pt: 'lg',
+  px: 'lg',
+  pb: 'md'
 };
 var controls = {
+  gap: '12px',
   alignSelf: 'start',
-  pt: 'xs'
+  mr: '0'
 };
 var wrapper = {
   mr: 'md'

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

@@ -14,7 +14,7 @@ export declare const switchable: {
     thumbContainer: {
         bg: string;
         border: string;
-        maxWidth: number;
+        width: string;
         height: number;
         py: string;
         px: string;

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

@@ -9,7 +9,7 @@ var switchable = {
   container: {
     minWidth: '32px',
     color: 'neutral.80',
-    bg: 'backgorund.base',
+    bg: 'background.base',
     border: '1px solid',
     borderColor: 'neutral.80',
     borderRadius: 9999,
@@ -21,7 +21,7 @@ var switchable = {
   thumbContainer: {
     bg: 'transparent',
     border: 'none',
-    maxWidth: 24,
+    width: '32px',
     height: 16,
     py: '3px',
     px: '3px',

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

@@ -9,9 +9,10 @@ export declare const text: {
         textOverflow: string;
         overflow: string;
         whiteSpace: string;
+        color: string;
+        lineHeight: string;
         fontSize: string;
         fontWeight: number;
-        color: string;
         fontFamily: string;
     };
     messagesText: {
@@ -24,6 +25,11 @@ export declare const text: {
             };
         };
     };
+    panelHeaderSubtext: {
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+    };
     H1: {
         fontSize: string;
         fontWeight: number;

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

@@ -183,7 +183,9 @@ var text = _objectSpread(_objectSpread({
   panelHeaderText: _objectSpread(_objectSpread({}, hTags.h4), {}, {
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    color: 'font.base',
+    lineHeight: 'xs'
   }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
@@ -194,6 +196,11 @@ var text = _objectSpread(_objectSpread({
         color: 'gray-700'
       }
     }
+  },
+  panelHeaderSubtext: {
+    fontSize: 'md',
+    lineHeight: 'body',
+    color: 'font.light'
   }
 });
 exports.text = text;

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

@@ -658,14 +658,6 @@ declare const _default: {
                 border: string;
             };
         };
-        editIcon: {
-            width: string;
-            height: string;
-        };
-        menuIcon: {
-            width: string;
-            height: string;
-        };
     };
     lisViewItemChart: {
         title: {
@@ -1009,12 +1001,14 @@ declare const _default: {
         container: {
             bg: string;
             border: string;
-            minHeight: number;
-            maxHeight: number;
+            pt: string;
+            px: string;
+            pb: string;
         };
         controls: {
+            gap: string;
             alignSelf: string;
-            pt: string;
+            mr: string;
         };
         wrapper: {
             mr: string;

package/lib/components/Avatar/Avatar.js

@@ -42,7 +42,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
       sx: _objectSpread({
         size: size,
         width: sizes.avatar[size],
-        height: sizes.avatar[size]
+        height: sizes.avatar[size],
+        borderRadius: isSquare ? '0px' : '100%'
       }, sx)
     }, others));
   }

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

@@ -148,14 +148,6 @@ var expandableRow = {
 var expandIcon = {
   color: 'gray-900'
 };
-var editIcon = {
-  width: '25px !important',
-  height: '25px !important'
-};
-var menuIcon = {
-  width: '25px !important',
-  height: '25px !important'
-};
 export default {
   container: container,
   controls: controls,
@@ -171,7 +163,5 @@ export default {
   expandableItemBody: expandableItemBody,
   expandableStyledListItem: expandableStyledListItem,
   expandableRow: expandableRow,
-  expandIcon: expandIcon,
-  editIcon: editIcon,
-  menuIcon: menuIcon
+  expandIcon: expandIcon
 };

package/lib/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -17,7 +17,7 @@ var ListViewItemEditButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "sm"
   }, ___EmotionJSX(IconButton, props, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    variant: "listViewItem.editIcon"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = iconButtonPropTypes;

package/lib/components/ListViewItem/controls/ListViewItemMenu.js

@@ -26,7 +26,7 @@ var ListViewItemMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, iconButtonProps), ___EmotionJSX(Icon, {
     icon: listViewMenu,
-    variant: "listViewItem.menuIcon",
+    size: "md",
     title: {
       name: 'Menu Icon'
     }

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -38,7 +38,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current2;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -87,14 +87,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     hasFocusWithin = _useState6[0],
     setFocusWithin = _useState6[1];
-  var _useState7 = useState([]),
+  var _useState7 = useState(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    initialItems = _useState8[0],
-    setInitialItems = _useState8[1];
-  var _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    activeDescendant = _useState10[0],
-    setActiveDescendant = _useState10[1];
+    activeDescendant = _useState8[0],
+    setActiveDescendant = _useState8[1];
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
@@ -111,9 +107,6 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputValue: filterString
     }),
     isLoading = _useInputLoader.isLoading;
-  useEffect(function () {
-    setInitialItems(_Array$from(items));
-  }, []);
   var toggleItems = function toggleItems(keys) {
     if (onSelectionChange) onSelectionChange(keys);
   };
@@ -192,10 +185,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    menuWidth = _useState12[0],
-    setMenuWidth = _useState12[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    menuWidth = _useState10[0],
+    setMenuWidth = _useState10[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -260,20 +253,20 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
   var handleBlur = function handleBlur(e) {
-    var _inputWrapperRef$curr, _listBoxRef$current;
+    var _inputWrapperRef$curr, _popoverRef$current;
     var relatedTarget = e.relatedTarget || document.activeElement;
-    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
+    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_popoverRef$current = popoverRef.current) !== null && _popoverRef$current !== void 0 && _popoverRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
       return;
     }
     setFilterString('');
     setIsOpen(false);
   };
-  var _useState13 = useState('Select All'),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectionState = _useState14[0],
-    setSelectionState = _useState14[1];
+  var _useState11 = useState('Select All'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectionState = _useState12[0],
+    setSelectionState = _useState12[1];
   var arrayItems = _Array$from(items);
-  var itemCount = _reduceInstanceProperty(initialItems).call(initialItems, function (count, obj) {
+  var itemCount = _reduceInstanceProperty(arrayItems).call(arrayItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;
@@ -341,7 +334,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
+      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef,
@@ -399,8 +392,8 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: setActiveDescendant
   }, ___EmotionJSX(Box, mergeProps(containerProps, focusWithinProps), ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
-      var _popoverRef$current;
-      var blurIntoPopover = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.contains(e.relatedTarget);
+      var _popoverRef$current2;
+      var blurIntoPopover = (_popoverRef$current2 = popoverRef.current) === null || _popoverRef$current2 === void 0 ? void 0 : _popoverRef$current2.contains(e.relatedTarget);
       if (blurIntoPopover) {
         return;
       }

package/lib/components/PanelHeader/PanelHeader.js

@@ -35,7 +35,7 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     image = data.image,
     subtext = data.subtext,
     text = data.text,
-    avatarDefualtText = data.avatarDefualtText;
+    avatarDefaultText = data.avatarDefaultText;
   var _useGetTheme = useGetTheme(),
     themeState = _useGetTheme.themeState;
   var isOnyx = themeState.isOnyx;
@@ -51,10 +51,12 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }));
   var renderAvatar = ___EmotionJSX(Avatar, _extends({
+    color: "green",
     src: image === null || image === void 0 ? void 0 : image.src,
+    isSquare: !!(image !== null && image !== void 0 && image.src),
     size: "avatar.lg",
-    defaultText: avatarDefualtText,
-    mr: "md"
+    defaultText: avatarDefaultText,
+    mr: "lg"
   }, avatarProps));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
     variant: "panelHeader.iconWrapper"
@@ -88,7 +90,7 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
     variant: text || subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, renderLeftContent(), ___EmotionJSX(Box, headerWrapperPropsSpread, text && ___EmotionJSX(Text, _extends({}, headerPropsSpread, {
+  }, renderLeftContent(), (text || subtext) && ___EmotionJSX(Box, headerWrapperPropsSpread, text && ___EmotionJSX(Text, _extends({}, headerPropsSpread, {
     variant: "panelHeaderText"
   }), text), subtext && ___EmotionJSX(Text, {
     variant: "panelHeaderSubtext"

package/lib/components/PanelHeader/PanelHeader.stories.js

@@ -28,7 +28,7 @@ export var Default = function Default(_ref) {
     data: {
       icon: AccountIcon,
       text: 'Fons Vernall',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }));
 };
@@ -45,7 +45,7 @@ export var WithSubtext = function WithSubtext(_ref2) {
       icon: AccountIcon,
       subtext: 'rad_developer@pingidentity.com',
       text: 'Fons Vernall',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }));
 };
@@ -62,7 +62,7 @@ export var WithControls = function WithControls(_ref3) {
       icon: AccountIcon,
       text: 'Fons Vernall',
       subtext: 'rad_developer@pingidentity.com',
-      avatarDefualtText: 'FV'
+      avatarDefaultText: 'FV'
     }
   }), ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
     key: "enable"
@@ -85,7 +85,7 @@ export var WithImage = function WithImage(args) {
         src: pingImg,
         alt: 'Ping Identity Logo',
         'aria-label': 'Ping Identity Logo',
-        avatarDefualtText: 'FV'
+        avatarDefaultText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -143,7 +143,7 @@ export var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
-      avatarDefualtText: 'FV',
+      avatarDefaultText: 'FV',
       icon: AccountIcon,
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
       subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'

package/lib/components/PanelHeader/PanelHeader.styles.js

@@ -38,7 +38,8 @@ var wrapper = {
   flex: '1 1 0px'
 };
 var rightOfData = {
-  alignSelf: 'center'
+  alignSelf: 'center',
+  mr: 'md'
 };
 var iconWrapper = {
   width: '25px',

package/lib/components/PanelHeader/stories/OnyxDarkPanelHeader.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxDarkTheme } from '../../..';
+import PanelHeaderComponent from './OnyxPanelHeaderComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark Panel Header'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxDarkTheme
+  }, ___EmotionJSX(PanelHeaderComponent, null));
+};

package/lib/components/PanelHeader/stories/OnyxPanelHeader.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxTheme } from '../../..';
+import PanelHeaderComponent from './OnyxPanelHeaderComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Panel Header'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxTheme
+  }, ___EmotionJSX(PanelHeaderComponent, null));
+};

package/lib/components/PanelHeader/stories/OnyxPanelHeaderComponent.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
+import { Box, Breadcrumbs, Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../..';
+import { pingImg } from '../../../utils/devUtils/constants/images';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var PanelHeaderComponent = function PanelHeaderComponent() {
+  var breadcrumbs = ___EmotionJSX(Box, {
+    width: "100%"
+  }, ___EmotionJSX(Breadcrumbs, {
+    icon: ChevronRightIcon
+  }, ___EmotionJSX(Item, {
+    "aria-label": "Lorem Text",
+    href: "https://www.pingidentity.com",
+    key: "Item1Key"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Item, {
+    "aria-label": "Lorem Ut",
+    key: "Item2Key"
+  }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco, laboris nisi ut aliquip ex ea commodo consequat incididunt et dolore.")));
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall',
+      avatarDefaultText: 'FV'
+    }
+  }), ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon,
+      subtext: 'rad_developer@pingidentity.com',
+      text: 'Fons Vernall',
+      avatarDefaultText: 'FV'
+    }
+  }), ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefaultText: 'FV'
+    }
+  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null)), ___EmotionJSX(PanelHeader, {
+    data: {
+      image: {
+        src: pingImg,
+        alt: 'Ping Identity Logo',
+        'aria-label': 'Ping Identity Logo',
+        avatarDefaultText: 'FV'
+      },
+      text: 'Fons Vernall'
+    }
+  }), ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon
+    },
+    slots: {
+      rightOfData: breadcrumbs
+    }
+  }, ___EmotionJSX(PanelHeaderCloseButton, null)), ___EmotionJSX(PanelHeader, {
+    data: {
+      avatarDefaultText: 'FV',
+      icon: AccountIcon,
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+      subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
+    }
+  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null)));
+};
+export default PanelHeaderComponent;

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

@@ -251,5 +251,13 @@ export default {
       border: '1px solid border.separator',
       boxShadow: 'none'
     }
+  },
+  breadcrumb: {
+    link: {
+      color: 'blue-400',
+      '&.is-current': {
+        color: 'text.secondary'
+      }
+    }
   }
 };

package/lib/styles/themes/next-gen/customProperties/customSizes.js

@@ -1,6 +1,6 @@
 var copyButtonSize = 'sm';
 var breadcrumbIconSize = 'sm';
-var breadcrumbIconMargin = 'sm';
+var breadcrumbIconMargin = 'md';
 var accordionItemMarginLeft = 'md';
 var pageHeaderTitleMargin = 'md';
 var defaultLoaderSize = 32;

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

@@ -37,6 +37,8 @@ var nextGenTheme = {
   fontWeights: fontWeights,
   lineHeights: {
     body: '1.6',
+    xs: '1.2',
+    sm: '1.4',
     md: '1.75'
   },
   text: newText,

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

@@ -91,14 +91,6 @@ export var listViewItem = {
     '&.has-separator.is-last-row': {
       border: 'none'
     }
-  },
-  editIcon: {
-    width: '1.5rem !important',
-    height: '1.5rem !important'
-  },
-  menuIcon: {
-    width: '1.5rem !important',
-    height: '1.5rem !important'
   }
 };
 export var listView = {

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

@@ -1,12 +1,14 @@
 var container = {
   bg: 'backgroundBase',
   border: 'none',
-  minHeight: 72,
-  maxHeight: 72
+  pt: 'lg',
+  px: 'lg',
+  pb: 'md'
 };
 var controls = {
+  gap: '12px',
   alignSelf: 'start',
-  pt: 'xs'
+  mr: '0'
 };
 var wrapper = {
   mr: 'md'

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

@@ -2,7 +2,7 @@ export var switchable = {
   container: {
     minWidth: '32px',
     color: 'neutral.80',
-    bg: 'backgorund.base',
+    bg: 'background.base',
     border: '1px solid',
     borderColor: 'neutral.80',
     borderRadius: 9999,
@@ -14,7 +14,7 @@ export var switchable = {
   thumbContainer: {
     bg: 'transparent',
     border: 'none',
-    maxWidth: 24,
+    width: '32px',
     height: 16,
     py: '3px',
     px: '3px',

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

@@ -176,7 +176,9 @@ export var text = _objectSpread(_objectSpread({
   panelHeaderText: _objectSpread(_objectSpread({}, hTags.h4), {}, {
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    color: 'font.base',
+    lineHeight: 'xs'
   }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
@@ -187,5 +189,10 @@ export var text = _objectSpread(_objectSpread({
         color: 'gray-700'
       }
     }
+  },
+  panelHeaderSubtext: {
+    fontSize: 'md',
+    lineHeight: 'body',
+    color: 'font.light'
   }
 });

package/package.json

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