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

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useCallback } from 'react';
 import { mergeProps, useBreadcrumbs } from 'react-aria';
-import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { Box, Icon } from '../../index';
 import BreadcrumbItem from './BreadcrumbItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -16,6 +16,9 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     iconProps = props.iconProps,
     onAction = props.onAction,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    breadcrumbIconSize = _useGetTheme.breadcrumbIconSize,
+    breadcrumbIconMargin = _useGetTheme.breadcrumbIconMargin;
 
   // the following filters undefined values passed as a child
   var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
@@ -36,12 +39,13 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       onAction: onAction
     }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       "aria-hidden": "true",
-      mx: 5,
-      size: "xs",
+      mx: breadcrumbIconMargin,
+      size: breadcrumbIconSize,
       title: {
         name: 'Breadcrumb Separator'
       }
     }, iconProps, {
+      color: "text.primary",
       icon: icon
     })));
   }, [_Array$isArray(children) && children.length, filteredChildren, icon, iconProps, onAction]);

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

@@ -13,10 +13,10 @@ var _excluded = ["isConfigured"];
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
-import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Box, Button, Icon, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import ButtonReadme from './Button.mdx';
@@ -159,6 +159,9 @@ export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
     props = _objectWithoutProperties(args, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var CreateIcon = icons.CreateIcon;
   return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({
     mb: "sm"
   }, props, {

package/lib/components/Button/Buttons.styles.js

@@ -174,6 +174,7 @@ export var link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+var listBoxLink = _objectSpread({}, link);
 var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   border: '1px solid',
@@ -298,6 +299,7 @@ export default {
   inlinePrimaryWithIcon: inlinePrimaryWithIcon,
   inlineWithIcon: inlineWithIcon,
   link: link,
+  listBoxLink: listBoxLink,
   paginationMenu: paginationMenu,
   primary: primary,
   primaryWithIcon: primaryWithIcon,

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
@@ -37,7 +38,10 @@ export default {
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(CollapsiblePanel, args);
+  return ___EmotionJSX(CollapsiblePanel, _extends({}, args, {
+    listTitle: "Panel Title",
+    selectedFilterCount: 1000
+  }));
 };
 Default.parameters = {
   design: {

package/lib/components/CopyText/CopyButton.js

@@ -3,19 +3,22 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["iconProps"];
 import React, { forwardRef } from 'react';
 import ContentCopy from '@pingux/mdi-react/ContentCopyIcon';
+import { useGetTheme } from '../../hooks';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var iconProps = props.iconProps,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    copyButtonSize = _useGetTheme.copyButtonSize;
   return ___EmotionJSX(IconButton, _extends({
     ref: ref,
     "aria-label": "copy to clipboard",
     variant: "copyButton"
   }, others), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
-    size: "xs",
+    size: copyButtonSize,
     color: "text.secondary",
     title: {
       name: 'Content Copy Icon'

package/lib/components/CopyText/CopyText.js

@@ -136,7 +136,8 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     isRow: true,
     variant: "copyText.copy"
   }, others, {
-    role: "presentation"
+    role: "presentation",
+    gap: "sm"
   }), mode !== 'rightText' && content, ___EmotionJSX(CopyButton, _extends({
     onPress: copyToClipboard
   }, focusProps, iconButtonProps)), mode === 'rightText' && content)));

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

@@ -93,7 +93,6 @@ var ExampleComponent = function ExampleComponent(_ref) {
     variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: MinusIcon,
-    size: "md",
     title: {
       name: 'Dots Vertical Icon'
     }

package/lib/components/Icon/Icon.js

@@ -32,6 +32,7 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
       sizes: theme.tShirtSizes
     }),
     sizeProps = _useTShirtSize.sizeProps;
+  var defaultIconColor = theme.defaultIconColor;
   var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
   } : '';
@@ -43,7 +44,7 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: variant,
     size: sizeProps.size,
     sx: _objectSpread({
-      fill: color,
+      fill: color || defaultIconColor,
       minWidth: sizeProps.size
     }, sx)
   }, others));

package/lib/components/Icon/Icon.stories.js

@@ -94,7 +94,7 @@ export var SVGIcons = function SVGIcons(args) {
   };
   return ___EmotionJSX(Icon, _extends({}, args, {
     icon: SVGComponent,
-    color: "active",
+    color: "magenta !important",
     size: "sm"
   }));
 };

package/lib/components/IconBadge/IconBadge.js

@@ -14,6 +14,7 @@ var _excluded = ["children", "sx", "circleColor", "baseSize", "circleSize"];
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
+import { useGetTheme } from '../../hooks';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconBadge = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -27,6 +28,8 @@ var IconBadge = /*#__PURE__*/forwardRef(function (props, ref) {
     _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
     firstIcon = _React$Children$toArr2[0],
     secondIcon = _React$Children$toArr2[1];
+  var _useGetTheme = useGetTheme(),
+    iconBadgeCircleColor = _useGetTheme.iconBadgeCircleColor;
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     as: "span",
@@ -48,11 +51,8 @@ var IconBadge = /*#__PURE__*/forwardRef(function (props, ref) {
       width: "".concat(circleSize, "px"),
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: circleColor
+      backgroundColor: circleColor || iconBadgeCircleColor
     }
   }, secondIcon));
 });
-IconBadge.defaultProps = {
-  circleColor: 'white'
-};
 export default IconBadge;

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

@@ -27,14 +27,14 @@ export var Default = function Default(args) {
   }), ___EmotionJSX(Icon, {
     icon: GroupIcon,
     size: "25px",
-    color: "accent.40",
+    color: "badge.iconBadgeFill",
     title: {
       name: 'Group Icon'
     }
   }), ___EmotionJSX(Icon, {
     icon: ArrowIcon,
     size: "13px",
-    color: "accent.40",
+    color: "badge.iconBadgeFill",
     title: {
       name: 'Arrow Icon'
     }

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

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

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

@@ -37,7 +37,7 @@ import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Button, Item, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Text } from '../..';
+import { Box, Button, IconWrapper, Item, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Text } from '../..';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import animals from '../../utils/devUtils/constants/animals';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
@@ -101,7 +101,7 @@ var actions = {
 var ExpandableChildren = function ExpandableChildren() {
   return ___EmotionJSX(Box, {
     sx: {
-      my: 'lg'
+      my: '20px'
     }
   }, ___EmotionJSX(SearchField, {
     maxWidth: "400px",
@@ -115,18 +115,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 ___EmotionJSX(Box, {
     isRow: true,
     sx: {
       alignItems: 'center'
-    }
-  }, ___EmotionJSX(Text, {
+    },
+    gap: "md"
+  }, ___EmotionJSX(IconWrapper, {
+    icon: icon,
+    size: "sm",
+    title: {
+      name: "".concat(text, "}")
+    },
+    isCircle: true,
+    color: "cyan"
+  }), ___EmotionJSX(Text, {
     variant: "itemTitle"
   }, text));
 };
 var Controls = function Controls() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
     key: "disable"
@@ -149,6 +163,7 @@ export var Default = function Default(_ref) {
       iconProps: {
         color: 'text.secondary'
       },
+      "data-id": "test1111",
       iconWrapperProps: item.iconWrapperProps
     }, ___EmotionJSX(Controls, null)));
   });
@@ -169,7 +184,8 @@ export var WithExpandableItems = function WithExpandableItems(_ref2) {
       key: item.name,
       textValue: item.name
     }, ___EmotionJSX(ExampleContent, {
-      text: item.name
+      text: item.name,
+      icon: item.icon
     }), ___EmotionJSX(ExpandableChildren, null));
   });
 };
@@ -208,7 +224,8 @@ export var ControlledExpandableItems = function ControlledExpandableItems(_ref3)
       key: item.name,
       textValue: item.name
     }, ___EmotionJSX(ExampleContent, {
-      text: item.name
+      text: item.name,
+      icon: item.icon
     }), ___EmotionJSX(ExpandableChildren, null));
   }));
 };
@@ -272,7 +289,7 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
             }), new _Promise(function (_resolve, reject) {
               return _setTimeout(function () {
                 return reject(new Error('timeout'));
-              }, 3000);
+              }, 8000);
             })]);
           case 5:
             res = _context2.sent;
@@ -282,7 +299,7 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
             json = _context2.sent;
             _context2.next = 11;
             return new _Promise(function (resolve) {
-              return _setTimeout(resolve, cursor ? 2000 : 3000);
+              return _setTimeout(resolve, cursor ? 8000 : 8000);
             });
           case 11:
             return _context2.abrupt("return", {
@@ -338,7 +355,7 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
     }
   }, ___EmotionJSX(ListView, _extends({}, actions, {
     items: list.items,
-    loadingState: list.loadingState,
+    loadingState: "loadingMore",
     onLoadMore: list.loadMore
   }), function (item) {
     return ___EmotionJSX(Item, {

package/lib/components/ListView/ListViewItem.js

@@ -77,7 +77,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/components/Loader/Loader.js

@@ -1,13 +1,81 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["size", "dotProps"];
+var _excluded = ["dotProps", "progress", "strokeColor", "strokeBaseColor"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+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) { _defineProperty(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; }
 import React, { forwardRef } from 'react';
+import { useGetTheme } from '../../hooks';
+import useCircularLoader from '../../hooks/useCircularLoader/useCircularLoader';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Loader = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    activeColor = _useGetTheme.activeColor,
+    backgroundBaseColor = _useGetTheme.backgroundBaseColor,
+    themeState = _useGetTheme.themeState,
+    defaultLoaderSize = _useGetTheme.defaultLoaderSize;
+  var _useCircularLoader = useCircularLoader(_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 ___EmotionJSX(Box, _extends({
+      ref: ref,
+      variant: "loader.circleContainer",
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": "Loading in progress"
+    }, others), ___EmotionJSX(Box, {
+      variant: "loader.circleSpinner",
+      p: strokeWidth
+    }, ___EmotionJSX("svg", {
+      width: size,
+      height: size,
+      viewBox: _concatInstanceProperty(_context = "0 0 ".concat(size, " ")).call(_context, size)
+    }, ___EmotionJSX("circle", {
+      cx: center,
+      cy: center,
+      r: radius,
+      fill: "none",
+      stroke: strokeBaseColor || backgroundBaseColor,
+      strokeWidth: strokeWidth
+    }), ___EmotionJSX("circle", {
+      cx: center,
+      cy: center,
+      r: radius,
+      fill: "none",
+      stroke: strokeColor || activeColor,
+      strokeWidth: strokeWidth,
+      strokeDasharray: _concatInstanceProperty(_context2 = "".concat(dashLength, " ")).call(_context2, gapLength),
+      strokeLinecap: "round" // For rounded corners
+      ,
+      transform: _concatInstanceProperty(_context3 = "rotate(-90 ".concat(center, " ")).call(_context3, center, ")")
+    }))));
+  }
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,

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

@@ -69,4 +69,17 @@ export var CustomSize = function CustomSize(args) {
   return ___EmotionJSX(Loader, _extends({}, args, {
     size: 32
   }));
+};
+export var Circular = function Circular(args) {
+  return ___EmotionJSX(Loader, _extends({}, args, {
+    size: 120,
+    isCircle: true
+  }));
+};
+export var CustomCircular = function CustomCircular(args) {
+  return ___EmotionJSX(Loader, _extends({}, args, {
+    size: "lg",
+    isCircle: true,
+    strokeColor: "magenta"
+  }));
 };

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

@@ -8,7 +8,7 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _context, _context2, _context3, _context4, _context5;
+var _templateObject, _templateObject2, _context, _context2, _context3, _context4, _context5, _templateObject3;
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -56,7 +56,17 @@ var dotCenter = _objectSpread(_objectSpread({}, dot), {}, {
 var dotRight = _objectSpread(_objectSpread({}, dot), {}, {
   animation: _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(wait, " 0.4s, ")).call(_context5, pulse, " ")).call(_context4, animationSettings, " 0.4s")
 });
+var spin = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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")
+};
 export default {
+  circleContainer: circleContainer,
+  circleSpinner: circleSpinner,
   dotLeft: dotLeft,
   dotCenter: dotCenter,
   dotRight: dotRight,

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -20,8 +20,6 @@ import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _flatMapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat-map";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { DismissButton, FocusScope, mergeProps, useOverlayPosition } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useFilter } from '@react-aria/i18n';
 import { useFocusWithin } from '@react-aria/interactions';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
@@ -30,7 +28,7 @@ import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { Box, Button, Icon, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { useInputLoader, usePropWarning } from '../../hooks';
+import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -100,6 +98,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var _useFocusWithin = useFocusWithin({
       onFocusWithinChange: setFocusWithin
     }),
@@ -302,7 +304,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var listbox = ___EmotionJSX(FocusScope, null, filterString === '' && !hasNoSelectAll && ___EmotionJSX(Button, {
     onPress: handleSelection,
     ref: buttonRef,
-    variant: "link",
+    variant: "listBoxLink",
     mt: "sm",
     ml: "14px",
     sx: {

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -32,7 +32,7 @@ import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { Badge, Box, Icon, IconButton, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { useInputLoader, usePropWarning } from '../../hooks';
+import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -100,6 +100,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     activeDescendant = _useState10[0],
     setActiveDescendant = _useState10[1];
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   useEffect(function () {
     if (mode !== 'non-restrictive') {
       setItems(initialItems);
@@ -334,6 +337,15 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputRef.current.focus();
     }
   };
+  var readOnlyFieldBadge = function readOnlyFieldBadge(key, name) {
+    return ___EmotionJSX(Badge, {
+      key: key,
+      label: name,
+      variant: "readOnlyFieldBadge",
+      bg: "gray-700",
+      tabIndex: 0
+    });
+  };
   var readOnlyTextItem = function readOnlyTextItem(key, name) {
     return ___EmotionJSX(Text, {
       key: key,
@@ -362,6 +374,12 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }) : _mapInstanceProperty(initialItems).call(initialItems, function (item) {
     return readOnlyTextItem(item.key, item.name);
   }));
+  var onyxReadOnlyInputEntry = isReadOnly && ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "xs"
+  }, _mapInstanceProperty(initialItems).call(initialItems, function (item) {
+    return readOnlyFieldBadge(item.key, item.name);
+  }));
   var readOnlyItems = !isReadOnly && _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
     var item = _findInstanceProperty(initialItems).call(initialItems, function (el) {
       return el.key === key;
@@ -371,13 +389,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         key: item.key,
         label: item.name,
         variant: "readOnlyBadge",
-        bg: "white",
-        textProps: {
-          sx: {
-            color: 'text.primary',
-            tabIndex: '-1'
-          }
-        },
         as: "li",
         tabIndex: 0
       });
@@ -409,7 +420,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       "aria-describedby": "selectedKeysState"
     }, item.buttonProps), ___EmotionJSX(Icon, {
       icon: Clear,
-      color: "white",
       size: 14,
       title: {
         name: 'Clear Icon'
@@ -468,6 +478,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     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,
@@ -484,11 +497,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     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
   });
@@ -502,7 +511,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
-  }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
+  }, ___EmotionJSX(Box, _extends({}, containerProps, {
+    id: "cont"
+  }), ___EmotionJSX(TextField, _extends({
     onBlur: handleBlur,
     onChange: function onChange(e) {
       if (!isOpen) setIsOpen(true);
@@ -536,7 +547,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           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,