@pingux/astro 2.150.0 → 2.151.0-alpha.4

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

@@ -26,7 +26,7 @@ var _styledSystem = require("styled-system");
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["as", "flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx"];
+var _excluded = ["as", "flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx", "variant"];
 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; }
@@ -36,7 +36,7 @@ var ExtendedBox = /*#__PURE__*/(0, _base["default"])(_themeUi.Box, process.env.N
 } : {
   target: "ejf9h0h0",
   label: "ExtendedBox"
-})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNvQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBCb3ggYXMgVGhlbWVVSUJveCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBCb3hQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuY29uc3QgRXh0ZW5kZWRCb3ggPSBzdHlsZWQoVGhlbWVVSUJveCkoXG4gIGxheW91dCxcbiAgZmxleGJveCxcbiAgdHlwb2dyYXBoeSxcbik7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEJveFByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgYXMgPSAnZGl2JyxcbiAgICBmbGV4RGlyZWN0aW9uLFxuICAgIGdhcCxcbiAgICBpc1JvdyA9IGZhbHNlLFxuICAgIGlzRGlzYWJsZWQgPSBmYWxzZSxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcbiAgY29uc3QgZmQgPSBmbGV4RGlyZWN0aW9uIHx8IGlzUm93ID8gJ3JvdycgOiAnY29sdW1uJztcbiAgY29uc3QgY3VzdG9tID0geyAuLi5zeCB9O1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHsgaXNEaXNhYmxlZCB9KTtcbiAgdXNlUHJvcFdhcm5pbmcocHJvcHMsICdkaXNhYmxlZCcsICdpc0Rpc2FibGVkJyk7XG5cbiAgaWYgKGdhcCkge1xuICAgIGN1c3RvbVsnJiA+ICogKyAqOm5vdCg6Zmlyc3Qtb2YtdHlwZTpub3Qoc3R5bGUpOm5vdCg6Zmlyc3Qtb2YtdHlwZSB+ICopKSddID0ge1xuICAgICAgW2ZkID09PSAncm93JyA/ICdtYXJnaW5MZWZ0JyA6ICdtYXJnaW5Ub3AnXTogZ2FwLFxuICAgIH07XG4gIH1cblxuICBjb25zdCBjdXN0b21Gb250U2l6ZSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGNvbnN0IG51bWVyaWNhbEZvbnRTaXplID0gdG9OdW1iZXIoZm9udFNpemUpO1xuICAgIGlmIChOdW1iZXIuaXNOYU4obnVtZXJpY2FsRm9udFNpemUpKSB7XG4gICAgICByZXR1cm4gZm9udFNpemU7XG4gICAgfVxuICAgIHJldHVybiBudW1lcmljYWxGb250U2l6ZTtcbiAgfSwgW2ZvbnRTaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRCb3hcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17ZmR9XG4gICAgICB2YXJpYW50PVwiYm94LmJhc2VcIlxuICAgICAgZm9udFNpemU9e2N1c3RvbUZvbnRTaXplfVxuICAgICAgYXM9e2FzfVxuICAgICAgey4uLm90aGVyc31cbiAgICAgIHN4PXtjdXN0b219XG4gICAgLz5cbiAgKTtcbn0pO1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNvQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBCb3ggYXMgVGhlbWVVSUJveCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBCb3hQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuY29uc3QgRXh0ZW5kZWRCb3ggPSBzdHlsZWQoVGhlbWVVSUJveCkoXG4gIGxheW91dCxcbiAgZmxleGJveCxcbiAgdHlwb2dyYXBoeSxcbik7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEJveFByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgYXMgPSAnZGl2JyxcbiAgICBmbGV4RGlyZWN0aW9uLFxuICAgIGdhcCxcbiAgICBpc1JvdyA9IGZhbHNlLFxuICAgIGlzRGlzYWJsZWQgPSBmYWxzZSxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsXG4gICAgdmFyaWFudCA9ICdib3guYmFzZScsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcbiAgY29uc3QgZmQgPSBmbGV4RGlyZWN0aW9uIHx8IGlzUm93ID8gJ3JvdycgOiAnY29sdW1uJztcbiAgY29uc3QgY3VzdG9tID0geyAuLi5zeCB9O1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHsgaXNEaXNhYmxlZCB9KTtcbiAgdXNlUHJvcFdhcm5pbmcocHJvcHMsICdkaXNhYmxlZCcsICdpc0Rpc2FibGVkJyk7XG5cbiAgaWYgKGdhcCkge1xuICAgIGN1c3RvbVsnJiA+ICogKyAqOm5vdCg6Zmlyc3Qtb2YtdHlwZTpub3Qoc3R5bGUpOm5vdCg6Zmlyc3Qtb2YtdHlwZSB+ICopKSddID0ge1xuICAgICAgW2ZkID09PSAncm93JyA/ICdtYXJnaW5MZWZ0JyA6ICdtYXJnaW5Ub3AnXTogZ2FwLFxuICAgIH07XG4gIH1cblxuICBjb25zdCBjdXN0b21Gb250U2l6ZSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGNvbnN0IG51bWVyaWNhbEZvbnRTaXplID0gdG9OdW1iZXIoZm9udFNpemUpO1xuICAgIGlmIChOdW1iZXIuaXNOYU4obnVtZXJpY2FsRm9udFNpemUpKSB7XG4gICAgICByZXR1cm4gZm9udFNpemU7XG4gICAgfVxuICAgIHJldHVybiBudW1lcmljYWxGb250U2l6ZTtcbiAgfSwgW2ZvbnRTaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRCb3hcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17ZmR9XG4gICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgZm9udFNpemU9e2N1c3RvbUZvbnRTaXplfVxuICAgICAgYXM9e2FzfVxuICAgICAgey4uLm90aGVyc31cbiAgICAgIHN4PXtjdXN0b219XG4gICAgLz5cbiAgKTtcbn0pO1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$as = props.as,
     as = _props$as === void 0 ? 'div' : _props$as,
@@ -49,6 +49,8 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className = props.className,
     fontSize = props.fontSize,
     sx = props.sx,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'box.base' : _props$variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var fd = flexDirection || isRow ? 'row' : 'column';
   var custom = _objectSpread({}, sx);
@@ -72,7 +74,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     display: "flex",
     flexDirection: fd,
-    variant: "box.base",
+    variant: variant,
     fontSize: customFontSize,
     as: as
   }, others, {

package/lib/cjs/components/IconButtonToggle/IconButtonToggle.js

@@ -24,7 +24,8 @@ var IconButtonToggle = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     iconProps = props.iconProps,
     isToggled = props.isToggled,
     onToggle = props.onToggle,
-    title = props.title;
+    title = props.title,
+    variant = props.variant;
   var conditionalRenderProps = {
     ComponentToRenderIfTrue: toggledIcon,
     ComponentToRenderIfFalse: defaultIcon,
@@ -37,7 +38,8 @@ var IconButtonToggle = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     onPress: handleConditionChange,
     ref: ref,
-    title: title
+    title: title,
+    variant: variant
   }, buttonProps), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: RenderedComponent
   }, iconProps)));

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/Modal/Modal.mdx

@@ -55,4 +55,8 @@ These keys provide additional functionality to the component.
 This component uses the following attributes to assist screen readers:
 - The button uses the **`aria-label`** attribute to provide an accessible name.
 - The **`aria-labelledby`** attribute is supplied with label ID.
-- The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.
+- The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.
+
+#### Note
+
+AutoFocus is not enabled by default. To ensure accessibility and expected keyboard navigation support set the `hasAutoFocus` prop to true.

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

@@ -97,7 +97,8 @@ var _default = {
     }
   },
   args: {
-    hasCloseButton: true
+    hasCloseButton: true,
+    hasAutoFocus: true
   }
 };
 exports["default"] = _default;
@@ -192,7 +193,8 @@ var WithInputField = function WithInputField() {
     "aria-label": "Open modal"
   }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
     isOpen: state.isOpen,
-    onClose: state.close
+    onClose: state.close,
+    hasAutoFocus: true
   }, (0, _react2.jsx)(_index.Box, {
     gap: "lg"
   }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet consectetur"), (0, _react2.jsx)(_index.SelectField, {

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

@@ -28,7 +28,7 @@ var astroBlacklistStory = {
   Loader: ['Circular', 'Custom Circular']
 };
 exports.astroBlacklistStory = astroBlacklistStory;
-var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
+var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 exports.nextGenOnlyComponents = nextGenOnlyComponents;
 var _default = nextGenConvertedComponents;
 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;