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

package/lib/cjs/components/IconBadge/IconBadge.js

@@ -20,6 +20,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "sx", "circleColor", "baseSize", "circleSize"];
@@ -38,6 +39,8 @@ var IconBadge = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
     firstIcon = _React$Children$toArr2[0],
     secondIcon = _React$Children$toArr2[1];
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    iconBadgeCircleColor = _useGetTheme.iconBadgeCircleColor;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     as: "span",
@@ -59,12 +62,9 @@ var IconBadge = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       width: "".concat(circleSize, "px"),
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: circleColor
+      backgroundColor: circleColor || iconBadgeCircleColor
     }
   }, secondIcon));
 });
-IconBadge.defaultProps = {
-  circleColor: 'white'
-};
 var _default = IconBadge;
 exports["default"] = _default;

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

@@ -36,14 +36,14 @@ var Default = function Default(args) {
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _AccountGroupIcon["default"],
     size: "25px",
-    color: "accent.40",
+    color: "badge.iconBadgeFill",
     title: {
       name: 'Group Icon'
     }
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ArrowTopRightThickIcon["default"],
     size: "13px",
-    color: "accent.40",
+    color: "badge.iconBadgeFill",
     title: {
       name: 'Arrow Icon'
     }

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

@@ -222,6 +222,9 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWra
   bg: 'success.bright'
 }), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
   bg: 'warning.bright'
+}), (0, _defineProperty2["default"])(_objectSpread2, '&.is-read-only', {
+  boxShadow: 'inset 0 0 0 100px #e5e9f8',
+  border: 'none'
 }), _objectSpread2));
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'

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

@@ -114,7 +114,7 @@ var actions = {
 var ExpandableChildren = function ExpandableChildren() {
   return (0, _react2.jsx)(_2.Box, {
     sx: {
-      my: 'lg'
+      my: '20px'
     }
   }, (0, _react2.jsx)(_2.SearchField, {
     maxWidth: "400px",
@@ -128,18 +128,32 @@ var ExpandableChildren = function ExpandableChildren() {
   }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus."));
 };
 var ExampleContent = function ExampleContent(contentProps) {
-  var text = contentProps.text;
+  var text = contentProps.text,
+    icon = contentProps.icon;
   return (0, _react2.jsx)(_2.Box, {
     isRow: true,
     sx: {
       alignItems: 'center'
-    }
-  }, (0, _react2.jsx)(_2.Text, {
+    },
+    gap: "md"
+  }, (0, _react2.jsx)(_2.IconWrapper, {
+    icon: icon,
+    size: "sm",
+    title: {
+      name: "".concat(text, "}")
+    },
+    isCircle: true,
+    color: "cyan"
+  }), (0, _react2.jsx)(_2.Text, {
     variant: "itemTitle"
   }, text));
 };
 var Controls = function Controls() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_2.ListViewItemSwitchField, null), (0, _react2.jsx)(_2.ListViewItemMenu, null, (0, _react2.jsx)(_2.Item, {
+  return (0, _react2.jsx)(_2.Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_2.ListViewItemSwitchField, null), (0, _react2.jsx)(_2.ListViewItemMenu, null, (0, _react2.jsx)(_2.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_2.Item, {
     key: "disable"
@@ -162,6 +176,7 @@ var Default = function Default(_ref) {
       iconProps: {
         color: 'text.secondary'
       },
+      "data-id": "test1111",
       iconWrapperProps: item.iconWrapperProps
     }, (0, _react2.jsx)(Controls, null)));
   });
@@ -183,7 +198,8 @@ var WithExpandableItems = function WithExpandableItems(_ref2) {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ExampleContent, {
-      text: item.name
+      text: item.name,
+      icon: item.icon
     }), (0, _react2.jsx)(ExpandableChildren, null));
   });
 };
@@ -223,7 +239,8 @@ var ControlledExpandableItems = function ControlledExpandableItems(_ref3) {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ExampleContent, {
-      text: item.name
+      text: item.name,
+      icon: item.icon
     }), (0, _react2.jsx)(ExpandableChildren, null));
   }));
 };
@@ -288,7 +305,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
             }), new _promise["default"](function (_resolve, reject) {
               return (0, _setTimeout2["default"])(function () {
                 return reject(new Error('timeout'));
-              }, 3000);
+              }, 8000);
             })]);
           case 5:
             res = _context2.sent;
@@ -298,7 +315,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
             json = _context2.sent;
             _context2.next = 11;
             return new _promise["default"](function (resolve) {
-              return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+              return (0, _setTimeout2["default"])(resolve, cursor ? 8000 : 8000);
             });
           case 11:
             return _context2.abrupt("return", {
@@ -354,7 +371,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     }
   }, (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, actions, {
     items: list.items,
-    loadingState: list.loadingState,
+    loadingState: "loadingMore",
     onLoadMore: list.loadMore
   }), function (item) {
     return (0, _react2.jsx)(_2.Item, {

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

@@ -89,7 +89,7 @@ var ListViewItem = function ListViewItem(props) {
       hasInsetSeparator: hasInsetSeparator,
       isPressed: isPressed,
       isFirstItem: item.index === 0,
-      isLastItem: item.index === state.collection.size - 1
+      isLastItem: item.index === state.collection.size - 1 && !state.isLoading
     }),
     classNames = _useStatusClasses.classNames;
 

package/lib/cjs/components/Loader/Loader.js

@@ -1,26 +1,92 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _useCircularLoader2 = _interopRequireDefault(require("../../hooks/useCircularLoader/useCircularLoader"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "dotProps"];
+var _excluded = ["dotProps", "progress", "strokeColor", "strokeBaseColor"];
 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var size = props.size,
-    dotProps = props.dotProps,
+  var dotProps = props.dotProps,
+    _props$progress = props.progress,
+    progress = _props$progress === void 0 ? 75 : _props$progress,
+    strokeColor = props.strokeColor,
+    strokeBaseColor = props.strokeBaseColor,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    activeColor = _useGetTheme.activeColor,
+    backgroundBaseColor = _useGetTheme.backgroundBaseColor,
+    themeState = _useGetTheme.themeState,
+    defaultLoaderSize = _useGetTheme.defaultLoaderSize;
+  var _useCircularLoader = (0, _useCircularLoader2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+      defaultLoaderSize: defaultLoaderSize,
+      isAstro: themeState.isAstro
+    })),
+    center = _useCircularLoader.center,
+    radius = _useCircularLoader.radius,
+    strokeWidth = _useCircularLoader.strokeWidth,
+    dashLength = _useCircularLoader.dashLength,
+    gapLength = _useCircularLoader.gapLength,
+    size = _useCircularLoader.size,
+    isCircle = _useCircularLoader.isCircle;
+  if (isCircle) {
+    var _context, _context2, _context3;
+    return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+      ref: ref,
+      variant: "loader.circleContainer",
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": "Loading in progress"
+    }, others), (0, _react2.jsx)(_Box["default"], {
+      variant: "loader.circleSpinner",
+      p: strokeWidth
+    }, (0, _react2.jsx)("svg", {
+      width: size,
+      height: size,
+      viewBox: (0, _concat["default"])(_context = "0 0 ".concat(size, " ")).call(_context, size)
+    }, (0, _react2.jsx)("circle", {
+      cx: center,
+      cy: center,
+      r: radius,
+      fill: "none",
+      stroke: strokeBaseColor || backgroundBaseColor,
+      strokeWidth: strokeWidth
+    }), (0, _react2.jsx)("circle", {
+      cx: center,
+      cy: center,
+      r: radius,
+      fill: "none",
+      stroke: strokeColor || activeColor,
+      strokeWidth: strokeWidth,
+      strokeDasharray: (0, _concat["default"])(_context2 = "".concat(dashLength, " ")).call(_context2, gapLength),
+      strokeLinecap: "round" // For rounded corners
+      ,
+      transform: (0, _concat["default"])(_context3 = "rotate(-90 ".concat(center, " ")).call(_context3, center, ")")
+    }))));
+  }
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     isRow: true,

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = exports.CustomSize = exports.CustomColor = void 0;
+exports["default"] = exports.Default = exports.CustomSize = exports.CustomColor = exports.CustomCircular = exports.Circular = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -80,4 +80,19 @@ var CustomSize = function CustomSize(args) {
     size: 32
   }));
 };
-exports.CustomSize = CustomSize;
+exports.CustomSize = CustomSize;
+var Circular = function Circular(args) {
+  return (0, _react2.jsx)(_index.Loader, (0, _extends2["default"])({}, args, {
+    size: 120,
+    isCircle: true
+  }));
+};
+exports.Circular = Circular;
+var CustomCircular = function CustomCircular(args) {
+  return (0, _react2.jsx)(_index.Loader, (0, _extends2["default"])({}, args, {
+    size: "lg",
+    isCircle: true,
+    strokeColor: "magenta"
+  }));
+};
+exports.CustomCircular = CustomCircular;

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

@@ -1,4 +1,11 @@
 declare const _default: {
+    circleContainer: {
+        justifyContent: string;
+        alignItems: string;
+    };
+    circleSpinner: {
+        animation: string;
+    };
     dotLeft: {
         animation: string;
         borderRadius: string;

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

@@ -17,7 +17,7 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _context, _context2, _context3, _context4, _context5;
+var _templateObject, _templateObject2, _context, _context2, _context3, _context4, _context5, _templateObject3;
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var container = {
@@ -63,7 +63,17 @@ var dotCenter = _objectSpread(_objectSpread({}, dot), {}, {
 var dotRight = _objectSpread(_objectSpread({}, dot), {}, {
   animation: (0, _concat["default"])(_context4 = (0, _concat["default"])(_context5 = "".concat(wait, " 0.4s, ")).call(_context5, pulse, " ")).call(_context4, animationSettings, " 0.4s")
 });
+var spin = (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+var circleContainer = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+var circleSpinner = {
+  animation: "".concat(spin, " .75s linear infinite")
+};
 var _default = {
+  circleContainer: circleContainer,
+  circleSpinner: circleSpinner,
   dotLeft: dotLeft,
   dotCenter: dotCenter,
   dotRight: dotRight,

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

@@ -27,8 +27,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
-var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
 var _i18n = require("@react-aria/i18n");
 var _interactions = require("@react-aria/interactions");
 var _utils = require("@react-aria/utils");
@@ -112,6 +110,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var inputWrapperRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var _useFocusWithin = (0, _interactions.useFocusWithin)({
       onFocusWithinChange: setFocusWithin
     }),
@@ -314,7 +316,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var listbox = (0, _react2.jsx)(_reactAria.FocusScope, null, filterString === '' && !hasNoSelectAll && (0, _react2.jsx)(_.Button, {
     onPress: handleSelection,
     ref: buttonRef,
-    variant: "link",
+    variant: "listBoxLink",
     mt: "sm",
     ml: "14px",
     sx: {
@@ -400,7 +402,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       border: 'none'
     }
   }, (0, _react2.jsx)(_.Icon, {
-    icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
+    icon: isOpen ? MenuUp : MenuDown,
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }

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

@@ -112,6 +112,9 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
     activeDescendant = _useState10[0],
     setActiveDescendant = _useState10[1];
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   (0, _react.useEffect)(function () {
     if (mode !== 'non-restrictive') {
       setItems(initialItems);
@@ -346,6 +349,15 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       inputRef.current.focus();
     }
   };
+  var readOnlyFieldBadge = function readOnlyFieldBadge(key, name) {
+    return (0, _react2.jsx)(_.Badge, {
+      key: key,
+      label: name,
+      variant: "readOnlyFieldBadge",
+      bg: "gray-700",
+      tabIndex: 0
+    });
+  };
   var readOnlyTextItem = function readOnlyTextItem(key, name) {
     return (0, _react2.jsx)(_.Text, {
       key: key,
@@ -374,6 +386,12 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   }) : (0, _map["default"])(initialItems).call(initialItems, function (item) {
     return readOnlyTextItem(item.key, item.name);
   }));
+  var onyxReadOnlyInputEntry = isReadOnly && (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    gap: "xs"
+  }, (0, _map["default"])(initialItems).call(initialItems, function (item) {
+    return readOnlyFieldBadge(item.key, item.name);
+  }));
   var readOnlyItems = !isReadOnly && (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
     var item = (0, _find["default"])(initialItems).call(initialItems, function (el) {
       return el.key === key;
@@ -383,13 +401,6 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
         key: item.key,
         label: item.name,
         variant: "readOnlyBadge",
-        bg: "white",
-        textProps: {
-          sx: {
-            color: 'text.primary',
-            tabIndex: '-1'
-          }
-        },
         as: "li",
         tabIndex: 0
       });
@@ -421,7 +432,6 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       "aria-describedby": "selectedKeysState"
     }, item.buttonProps), (0, _react2.jsx)(_.Icon, {
       icon: _CloseIcon["default"],
-      color: "white",
       size: 14,
       title: {
         name: 'Clear Icon'
@@ -480,6 +490,9 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     if (!hasCustomValue) setFilterString('');
   };
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
+    containerProps: _objectSpread(_objectSpread({}, containerProps), {}, {
+      variant: 'forms.input.multivaluesFieldContainer'
+    }),
     controlProps: {
       'aria-activedescendant': activeDescendant,
       'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
@@ -496,11 +509,7 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     placeholder: placeholder,
     wrapperProps: {
       ref: inputWrapperRef,
-      variant: 'forms.input.multivaluesWrapper',
-      sx: isReadOnly && {
-        boxShadow: 'inset 0 0 0 100px #e5e9f8',
-        border: 'none'
-      }
+      variant: 'forms.input.multivaluesWrapper'
     },
     status: status
   });
@@ -514,7 +523,9 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   }));
   return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
     value: setActiveDescendant
-  }, (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, containerProps, {
+    id: "cont"
+  }), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: handleBlur,
     onChange: function onChange(e) {
       if (!isOpen) setIsOpen(true);
@@ -548,7 +559,7 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
           p: 0,
           flexWrap: 'wrap'
         }
-      }, selectedItems), readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
+      }, selectedItems), isOnyx ? onyxReadOnlyInputEntry : readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
     } // eslint-disable-line
     ,
     value: filterString,

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -14,6 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["buttonProps", "children", "title"];
@@ -29,6 +30,8 @@ var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       fontSize: 'sm'
     }
   };
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    pageHeaderTitleMargin = _useGetTheme.pageHeaderTitleMargin;
   var renderButton = buttonProps && (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
     "aria-label": "icon button",
     ml: "sm",
@@ -41,12 +44,12 @@ var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: ref
   }, other), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    mb: "xs"
+    mb: pageHeaderTitleMargin
   }, (0, _react2.jsx)(_index.Text, {
     as: "h1",
     variant: "H1"
   }, title), renderButton), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak",
+    variant: "pageHeaderBody",
     sx: linkStyles
   }, children));
 });

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

@@ -21,10 +21,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _listViewItemAttributes = require("../ListViewItem/listViewItemAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "data", "slots"];
+var _excluded = ["avatarProps", "children", "className", "data", "headerProps", "headerWrapperProps", "slots", "subtextProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -33,15 +34,23 @@ var PANEL_HEADER_ICON = '-panel-header-icon';
 exports.PANEL_HEADER_ICON = PANEL_HEADER_ICON;
 var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _context;
-  var children = _ref.children,
+  var avatarProps = _ref.avatarProps,
+    children = _ref.children,
     className = _ref.className,
     data = _ref.data,
+    headerProps = _ref.headerProps,
+    headerWrapperProps = _ref.headerWrapperProps,
     slots = _ref.slots,
+    subtextProps = _ref.subtextProps,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var icon = data.icon,
     image = data.image,
     subtext = data.subtext,
-    text = data.text;
+    text = data.text,
+    avatarDefualtText = data.avatarDefualtText;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var renderIcon = (0, _react2.jsx)(_index.Box, {
     width: "25px",
     mx: "md"
@@ -53,23 +62,47 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderAvatar = (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({
+    src: image === null || image === void 0 ? void 0 : image.src,
+    size: "avatar.lg",
+    defaultText: avatarDefualtText,
+    mr: "md"
+  }, avatarProps));
   var renderImage = !icon && image && (0, _react2.jsx)(_index.Box, {
-    width: "35px",
-    mx: "sm"
+    variant: "panelHeader.iconWrapper"
   }, (0, _react2.jsx)(_index.Image, {
     src: image.src,
     alt: image.alt,
     "aria-label": image['aria-label']
   }));
+  var renderLeftContent = function renderLeftContent() {
+    if (slots !== null && slots !== void 0 && slots.leftOfData) {
+      return slots.leftOfData;
+    }
+    if (isOnyx) {
+      return renderAvatar;
+    }
+    if (icon) {
+      return renderIcon;
+    }
+    return renderImage;
+  };
+  var headerPropsSpread = _objectSpread(_objectSpread({}, headerProps), isOnyx && {
+    variant: 'H4',
+    as: 'h4'
+  });
+  var headerWrapperPropsSpread = _objectSpread(_objectSpread({}, headerWrapperProps), {}, {
+    variant: 'panelHeader.wrapper',
+    py: 'sm'
+  }, isOnyx && {
+    gap: 'xs'
+  });
   var renderData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
     variant: text || subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, slots !== null && slots !== void 0 && slots.leftOfData || icon ? renderIcon : renderImage, (0, _react2.jsx)(_index.Box, {
-    variant: "panelHeader.wrapper",
-    py: "sm"
-  }, text && (0, _react2.jsx)(_index.Text, {
+  }, renderLeftContent(), (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, {
+  }), text), subtext && (0, _react2.jsx)(_index.Text, {
     variant: "panelHeaderSubtext"
   }, subtext)));
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({

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

@@ -36,7 +36,8 @@ var Default = function Default(_ref) {
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
       icon: _AccountIcon["default"],
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -53,7 +54,8 @@ var WithSubtext = function WithSubtext(_ref2) {
     data: {
       icon: _AccountIcon["default"],
       subtext: 'rad_developer@pingidentity.com',
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -70,7 +72,8 @@ var WithControls = function WithControls(_ref3) {
     data: {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall',
-      subtext: 'rad_developer@pingidentity.com'
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefualtText: 'FV'
     }
   }), (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_index.Item, {
     key: "enable"
@@ -93,7 +96,8 @@ var WithImage = function WithImage(args) {
       image: {
         src: _images.pingImg,
         alt: 'Ping Identity Logo',
-        'aria-label': 'Ping Identity Logo'
+        'aria-label': 'Ping Identity Logo',
+        avatarDefualtText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -154,6 +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',
       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'