@pingux/astro 1.29.1-alpha.0 → 1.30.0-alpha.1

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

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = 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"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var IconBadge = function IconBadge(props) {
+  var children = props.children,
+      sx = props.sx,
+      circleColor = props.circleColor,
+      baseSize = props.baseSize,
+      circleSize = props.circleSize,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var _React$Children$toArr = _react["default"].Children.toArray(children),
+      _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
+      firstIcon = _React$Children$toArr2[0],
+      secondIcon = _React$Children$toArr2[1];
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    as: "span",
+    sx: _objectSpread({
+      position: 'relative',
+      height: "".concat(baseSize, "px"),
+      width: "".concat(baseSize, "px"),
+      display: 'flex',
+      alignItems: 'top'
+    }, sx)
+  }, others), firstIcon, (0, _react2.jsx)(_index.Box, {
+    as: "span",
+    sx: {
+      position: 'absolute',
+      bottom: '-5.5px',
+      right: '1px',
+      borderRadius: "".concat(circleSize / 2, "px"),
+      height: "".concat(circleSize, "px"),
+      width: "".concat(circleSize, "px"),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: circleColor
+    }
+  }, secondIcon));
+};
+
+IconBadge.propTypes = {
+  /** JSX styling that is passed into the component. */
+  sx: _propTypes["default"].shape({}),
+
+  /** Color that is applied to the circular background.
+   * Default is white.
+   */
+  circleColor: _propTypes["default"].string,
+
+  /**
+   * The size of the base Icon. When given a number value, it will be converted to pixels.
+   */
+  baseSize: _propTypes["default"].number,
+
+  /**
+   * The size of the Icon within the circle.
+   * When given a number value, it will be converted to pixels.
+   */
+  circleSize: _propTypes["default"].number
+};
+IconBadge.defaultProps = {
+  circleColor: 'white'
+};
+var _default = IconBadge;
+exports["default"] = _default;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowTopRightThickIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightThickIcon"));
+
+var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'IconBadge',
+  component: _["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
+    baseSize: 25,
+    circleSize: 15
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _AccountGroupIcon["default"],
+    size: "25px",
+    color: "accent.40"
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _ArrowTopRightThickIcon["default"],
+    size: "13px",
+    color: "accent.40"
+  })));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _index = require("../../index");
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var ThisIcon = function ThisIcon(args) {
+  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), (0, _react3.jsx)("path", {
+    d: "M12.5 7.28125C14.1979 7.28125 15.6979 7.6875 16.9167 8.21875C18.0417 8.71875 18.75 9.84375 18.75 11.0625V12.75H6.25V11.0729C6.25 9.84375 6.95833 8.71875 8.08333 8.22917C9.30208 7.6875 10.8021 7.28125 12.5 7.28125ZM4.16667 7.54167C5.3125 7.54167 6.25 6.60417 6.25 5.45833C6.25 4.3125 5.3125 3.375 4.16667 3.375C3.02083 3.375 2.08333 4.3125 2.08333 5.45833C2.08333 6.60417 3.02083 7.54167 4.16667 7.54167ZM5.34375 8.6875C4.95833 8.625 4.57292 8.58333 4.16667 8.58333C3.13542 8.58333 2.15625 8.80208 1.27083 9.1875C0.5 9.52083 0 10.2708 0 11.1146V12.75H4.6875V11.0729C4.6875 10.2083 4.92708 9.39583 5.34375 8.6875ZM20.8333 7.54167C21.9792 7.54167 22.9167 6.60417 22.9167 5.45833C22.9167 4.3125 21.9792 3.375 20.8333 3.375C19.6875 3.375 18.75 4.3125 18.75 5.45833C18.75 6.60417 19.6875 7.54167 20.8333 7.54167ZM25 11.1146C25 10.2708 24.5 9.52083 23.7292 9.1875C22.8437 8.80208 21.8646 8.58333 20.8333 8.58333C20.4271 8.58333 20.0417 8.625 19.6563 8.6875C20.0729 9.39583 20.3125 10.2083 20.3125 11.0729V12.75H25V11.1146ZM12.5 0.25C14.2292 0.25 15.625 1.64583 15.625 3.375C15.625 5.10417 14.2292 6.5 12.5 6.5C10.7708 6.5 9.375 5.10417 9.375 3.375C9.375 1.64583 10.7708 0.25 12.5 0.25Z",
+    fill: "currentColor"
+  }));
+};
+
+var ThisSecondIcon = function ThisSecondIcon(args) {
+  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), (0, _react3.jsx)("path", {
+    d: "M1.71875 0.624999L7.96875 0.625L7.96875 6.875L6.09375 6.875L6.09375 3.89375L1.73125 8.125L0.46875 6.85625L4.75 2.5L1.71875 2.5L1.71875 0.624999Z",
+    fill: "currentColor"
+  }));
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_index.IconBadge, (0, _extends2["default"])({}, props, {
+    backgroundColor: "white"
+  }, defaultProps), (0, _react3.jsx)(_index.Icon, {
+    icon: ThisIcon,
+    size: "25px",
+    color: "accent.40"
+  }), (0, _react3.jsx)(_index.Icon, {
+    icon: ThisSecondIcon,
+    size: "9px",
+    color: "accent.40"
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('default iconbadge render', function () {
+  getComponent();
+
+  var iconButton = _react2.screen.getByTestId(testId);
+
+  expect(iconButton).toBeInTheDocument();
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _IconBadge["default"];
+  }
+});
+
+var _IconBadge = _interopRequireDefault(require("./IconBadge"));

package/lib/cjs/index.js

@@ -4,7 +4,7 @@ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70;
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -45,6 +45,7 @@ var _exportNames = {
   FileInputField: true,
   HelpHint: true,
   Icon: true,
+  IconBadge: true,
   IconButton: true,
   IconButtonToggle: true,
   Image: true,
@@ -344,6 +345,13 @@ _Object$defineProperty(exports, "Icon", {
   }
 });
 
+_Object$defineProperty(exports, "IconBadge", {
+  enumerable: true,
+  get: function get() {
+    return _IconBadge["default"];
+  }
+});
+
 _Object$defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function get() {
@@ -1025,9 +1033,24 @@ _forEachInstanceProperty(_context18 = _Object$keys(_Icon)).call(_context18, func
   });
 });
 
+var _IconBadge = _interopRequireWildcard(require("./components/IconBadge"));
+
+_forEachInstanceProperty(_context19 = _Object$keys(_IconBadge)).call(_context19, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _IconBadge[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _IconBadge[key];
+    }
+  });
+});
+
 var _IconButton = _interopRequireWildcard(require("./components/IconButton"));
 
-_forEachInstanceProperty(_context19 = _Object$keys(_IconButton)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_IconButton)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButton[key]) return;
@@ -1042,7 +1065,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_IconButton)).call(_context19
 
 var _IconButtonToggle = _interopRequireWildcard(require("./components/IconButtonToggle"));
 
-_forEachInstanceProperty(_context20 = _Object$keys(_IconButtonToggle)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_IconButtonToggle)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButtonToggle[key]) return;
@@ -1057,7 +1080,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_IconButtonToggle)).call(_con
 
 var _Image = _interopRequireWildcard(require("./components/Image"));
 
-_forEachInstanceProperty(_context21 = _Object$keys(_Image)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_Image)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Image[key]) return;
@@ -1072,7 +1095,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_Image)).call(_context21, fun
 
 var _ImageUploadField = _interopRequireWildcard(require("./components/ImageUploadField"));
 
-_forEachInstanceProperty(_context22 = _Object$keys(_ImageUploadField)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_ImageUploadField)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ImageUploadField[key]) return;
@@ -1087,7 +1110,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_ImageUploadField)).call(_con
 
 var _Input = _interopRequireWildcard(require("./components/Input"));
 
-_forEachInstanceProperty(_context23 = _Object$keys(_Input)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_Input)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Input[key]) return;
@@ -1102,7 +1125,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_Input)).call(_context23, fun
 
 var _NumberField = _interopRequireWildcard(require("./components/NumberField"));
 
-_forEachInstanceProperty(_context24 = _Object$keys(_NumberField)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_NumberField)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _NumberField[key]) return;
@@ -1117,7 +1140,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_NumberField)).call(_context2
 
 var _Label = _interopRequireWildcard(require("./components/Label"));
 
-_forEachInstanceProperty(_context25 = _Object$keys(_Label)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_Label)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Label[key]) return;
@@ -1132,7 +1155,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_Label)).call(_context25, fun
 
 var _Link = _interopRequireWildcard(require("./components/Link"));
 
-_forEachInstanceProperty(_context26 = _Object$keys(_Link)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_Link)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Link[key]) return;
@@ -1147,7 +1170,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_Link)).call(_context26, func
 
 var _LinkSelectField = _interopRequireWildcard(require("./components/LinkSelectField"));
 
-_forEachInstanceProperty(_context27 = _Object$keys(_LinkSelectField)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_LinkSelectField)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LinkSelectField[key]) return;
@@ -1162,7 +1185,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_LinkSelectField)).call(_cont
 
 var _List = _interopRequireWildcard(require("./components/List"));
 
-_forEachInstanceProperty(_context28 = _Object$keys(_List)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_List)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _List[key]) return;
@@ -1177,7 +1200,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_List)).call(_context28, func
 
 var _ListItem = _interopRequireWildcard(require("./components/ListItem"));
 
-_forEachInstanceProperty(_context29 = _Object$keys(_ListItem)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_ListItem)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ListItem[key]) return;
@@ -1192,7 +1215,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_ListItem)).call(_context29,
 
 var _ListView = _interopRequireWildcard(require("./components/ListView"));
 
-_forEachInstanceProperty(_context30 = _Object$keys(_ListView)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_ListView)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ListView[key]) return;
@@ -1207,7 +1230,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_ListView)).call(_context30,
 
 var _ListViewItem = _interopRequireWildcard(require("./components/ListViewItem"));
 
-_forEachInstanceProperty(_context31 = _Object$keys(_ListViewItem)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_ListViewItem)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ListViewItem[key]) return;
@@ -1222,7 +1245,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_ListViewItem)).call(_context
 
 var _Loader = _interopRequireWildcard(require("./components/Loader"));
 
-_forEachInstanceProperty(_context32 = _Object$keys(_Loader)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_Loader)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Loader[key]) return;
@@ -1239,7 +1262,7 @@ var _Menu = _interopRequireDefault(require("./components/Menu"));
 
 var _Messages = _interopRequireWildcard(require("./components/Messages"));
 
-_forEachInstanceProperty(_context33 = _Object$keys(_Messages)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_Messages)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Messages[key]) return;
@@ -1254,7 +1277,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_Messages)).call(_context33,
 
 var _Modal = _interopRequireWildcard(require("./components/Modal"));
 
-_forEachInstanceProperty(_context34 = _Object$keys(_Modal)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_Modal)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Modal[key]) return;
@@ -1269,7 +1292,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_Modal)).call(_context34, fun
 
 var _CollapsiblePanel = _interopRequireWildcard(require("./components/CollapsiblePanel"));
 
-_forEachInstanceProperty(_context35 = _Object$keys(_CollapsiblePanel)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_CollapsiblePanel)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _CollapsiblePanel[key]) return;
@@ -1284,7 +1307,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_CollapsiblePanel)).call(_con
 
 var _CollapsiblePanelItem = _interopRequireWildcard(require("./components/CollapsiblePanelItem"));
 
-_forEachInstanceProperty(_context36 = _Object$keys(_CollapsiblePanelItem)).call(_context36, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_CollapsiblePanelItem)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _CollapsiblePanelItem[key]) return;
@@ -1299,7 +1322,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_CollapsiblePanelItem)).call(
 
 var _CollapsiblePanelContainer = _interopRequireWildcard(require("./components/CollapsiblePanelContainer"));
 
-_forEachInstanceProperty(_context37 = _Object$keys(_CollapsiblePanelContainer)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_CollapsiblePanelContainer)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _CollapsiblePanelContainer[key]) return;
@@ -1314,7 +1337,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_CollapsiblePanelContainer)).
 
 var _NavBar = _interopRequireWildcard(require("./components/NavBar"));
 
-_forEachInstanceProperty(_context38 = _Object$keys(_NavBar)).call(_context38, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_NavBar)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _NavBar[key]) return;
@@ -1329,7 +1352,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_NavBar)).call(_context38, fu
 
 var _NavBarSection = _interopRequireWildcard(require("./components/NavBarSection"));
 
-_forEachInstanceProperty(_context39 = _Object$keys(_NavBarSection)).call(_context39, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_NavBarSection)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _NavBarSection[key]) return;
@@ -1346,7 +1369,7 @@ var _MultivaluesField = _interopRequireDefault(require("./components/Multivalues
 
 var _OverlayPanel = _interopRequireWildcard(require("./components/OverlayPanel"));
 
-_forEachInstanceProperty(_context40 = _Object$keys(_OverlayPanel)).call(_context40, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_OverlayPanel)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _OverlayPanel[key]) return;
@@ -1361,7 +1384,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_OverlayPanel)).call(_context
 
 var _PageHeader = _interopRequireWildcard(require("./components/PageHeader"));
 
-_forEachInstanceProperty(_context41 = _Object$keys(_PageHeader)).call(_context41, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_PageHeader)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PageHeader[key]) return;
@@ -1376,7 +1399,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_PageHeader)).call(_context41
 
 var _PasswordField = _interopRequireWildcard(require("./components/PasswordField"));
 
-_forEachInstanceProperty(_context42 = _Object$keys(_PasswordField)).call(_context42, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_PasswordField)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PasswordField[key]) return;
@@ -1391,7 +1414,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_PasswordField)).call(_contex
 
 var _PopoverContainer = _interopRequireWildcard(require("./components/PopoverContainer"));
 
-_forEachInstanceProperty(_context43 = _Object$keys(_PopoverContainer)).call(_context43, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_PopoverContainer)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PopoverContainer[key]) return;
@@ -1408,7 +1431,7 @@ var _PopoverMenu = _interopRequireDefault(require("./components/PopoverMenu"));
 
 var _Radio = _interopRequireWildcard(require("./components/Radio"));
 
-_forEachInstanceProperty(_context44 = _Object$keys(_Radio)).call(_context44, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_Radio)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Radio[key]) return;
@@ -1423,7 +1446,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_Radio)).call(_context44, fun
 
 var _RadioField = _interopRequireWildcard(require("./components/RadioField"));
 
-_forEachInstanceProperty(_context45 = _Object$keys(_RadioField)).call(_context45, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_RadioField)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadioField[key]) return;
@@ -1438,7 +1461,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_RadioField)).call(_context45
 
 var _RadioGroupField = _interopRequireWildcard(require("./components/RadioGroupField"));
 
-_forEachInstanceProperty(_context46 = _Object$keys(_RadioGroupField)).call(_context46, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_RadioGroupField)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadioGroupField[key]) return;
@@ -1453,7 +1476,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_RadioGroupField)).call(_cont
 
 var _RequirementsList = _interopRequireWildcard(require("./components/RequirementsList"));
 
-_forEachInstanceProperty(_context47 = _Object$keys(_RequirementsList)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_RequirementsList)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RequirementsList[key]) return;
@@ -1468,7 +1491,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_RequirementsList)).call(_con
 
 var _RockerButton = _interopRequireWildcard(require("./components/RockerButton"));
 
-_forEachInstanceProperty(_context48 = _Object$keys(_RockerButton)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_RockerButton)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RockerButton[key]) return;
@@ -1483,7 +1506,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_RockerButton)).call(_context
 
 var _RockerButtonGroup = _interopRequireWildcard(require("./components/RockerButtonGroup"));
 
-_forEachInstanceProperty(_context49 = _Object$keys(_RockerButtonGroup)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_RockerButtonGroup)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RockerButtonGroup[key]) return;
@@ -1498,7 +1521,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_RockerButtonGroup)).call(_co
 
 var _ScrollBox = _interopRequireWildcard(require("./components/ScrollBox"));
 
-_forEachInstanceProperty(_context50 = _Object$keys(_ScrollBox)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_ScrollBox)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScrollBox[key]) return;
@@ -1513,7 +1536,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_ScrollBox)).call(_context50,
 
 var _SearchField = _interopRequireWildcard(require("./components/SearchField"));
 
-_forEachInstanceProperty(_context51 = _Object$keys(_SearchField)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_SearchField)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SearchField[key]) return;
@@ -1528,7 +1551,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_SearchField)).call(_context5
 
 var _SelectField = _interopRequireWildcard(require("./components/SelectField"));
 
-_forEachInstanceProperty(_context52 = _Object$keys(_SelectField)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_SelectField)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SelectField[key]) return;
@@ -1543,7 +1566,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_SelectField)).call(_context5
 
 var _Separator = _interopRequireWildcard(require("./components/Separator"));
 
-_forEachInstanceProperty(_context53 = _Object$keys(_Separator)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_Separator)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Separator[key]) return;
@@ -1558,7 +1581,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_Separator)).call(_context53,
 
 var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
 
-_forEachInstanceProperty(_context54 = _Object$keys(_Stepper)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_Stepper)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Stepper[key]) return;
@@ -1573,7 +1596,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_Stepper)).call(_context54, f
 
 var _Switch = _interopRequireWildcard(require("./components/Switch"));
 
-_forEachInstanceProperty(_context55 = _Object$keys(_Switch)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_Switch)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Switch[key]) return;
@@ -1588,7 +1611,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_Switch)).call(_context55, fu
 
 var _SwitchField = _interopRequireWildcard(require("./components/SwitchField"));
 
-_forEachInstanceProperty(_context56 = _Object$keys(_SwitchField)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_SwitchField)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SwitchField[key]) return;
@@ -1603,7 +1626,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_SwitchField)).call(_context5
 
 var _Tab = _interopRequireWildcard(require("./components/Tab"));
 
-_forEachInstanceProperty(_context57 = _Object$keys(_Tab)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_Tab)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tab[key]) return;
@@ -1618,7 +1641,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_Tab)).call(_context57, funct
 
 var _Table = _interopRequireWildcard(require("./components/Table"));
 
-_forEachInstanceProperty(_context58 = _Object$keys(_Table)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_Table)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Table[key]) return;
@@ -1633,7 +1656,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_Table)).call(_context58, fun
 
 var _TableBody = _interopRequireWildcard(require("./components/TableBody"));
 
-_forEachInstanceProperty(_context59 = _Object$keys(_TableBody)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_TableBody)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableBody[key]) return;
@@ -1648,7 +1671,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_TableBody)).call(_context59,
 
 var _TableCell = _interopRequireWildcard(require("./components/TableCell"));
 
-_forEachInstanceProperty(_context60 = _Object$keys(_TableCell)).call(_context60, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_TableCell)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableCell[key]) return;
@@ -1663,7 +1686,7 @@ _forEachInstanceProperty(_context60 = _Object$keys(_TableCell)).call(_context60,
 
 var _TableHead = _interopRequireWildcard(require("./components/TableHead"));
 
-_forEachInstanceProperty(_context61 = _Object$keys(_TableHead)).call(_context61, function (key) {
+_forEachInstanceProperty(_context62 = _Object$keys(_TableHead)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableHead[key]) return;
@@ -1678,7 +1701,7 @@ _forEachInstanceProperty(_context61 = _Object$keys(_TableHead)).call(_context61,
 
 var _TableRow = _interopRequireWildcard(require("./components/TableRow"));
 
-_forEachInstanceProperty(_context62 = _Object$keys(_TableRow)).call(_context62, function (key) {
+_forEachInstanceProperty(_context63 = _Object$keys(_TableRow)).call(_context63, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableRow[key]) return;
@@ -1693,7 +1716,7 @@ _forEachInstanceProperty(_context62 = _Object$keys(_TableRow)).call(_context62,
 
 var _Tabs = _interopRequireWildcard(require("./components/Tabs"));
 
-_forEachInstanceProperty(_context63 = _Object$keys(_Tabs)).call(_context63, function (key) {
+_forEachInstanceProperty(_context64 = _Object$keys(_Tabs)).call(_context64, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tabs[key]) return;
@@ -1708,7 +1731,7 @@ _forEachInstanceProperty(_context63 = _Object$keys(_Tabs)).call(_context63, func
 
 var _Text = _interopRequireWildcard(require("./components/Text"));
 
-_forEachInstanceProperty(_context64 = _Object$keys(_Text)).call(_context64, function (key) {
+_forEachInstanceProperty(_context65 = _Object$keys(_Text)).call(_context65, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Text[key]) return;
@@ -1723,7 +1746,7 @@ _forEachInstanceProperty(_context64 = _Object$keys(_Text)).call(_context64, func
 
 var _TextField = _interopRequireWildcard(require("./components/TextField"));
 
-_forEachInstanceProperty(_context65 = _Object$keys(_TextField)).call(_context65, function (key) {
+_forEachInstanceProperty(_context66 = _Object$keys(_TextField)).call(_context66, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextField[key]) return;
@@ -1738,7 +1761,7 @@ _forEachInstanceProperty(_context65 = _Object$keys(_TextField)).call(_context65,
 
 var _TextArea = _interopRequireWildcard(require("./components/TextArea"));
 
-_forEachInstanceProperty(_context66 = _Object$keys(_TextArea)).call(_context66, function (key) {
+_forEachInstanceProperty(_context67 = _Object$keys(_TextArea)).call(_context67, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextArea[key]) return;
@@ -1753,7 +1776,7 @@ _forEachInstanceProperty(_context66 = _Object$keys(_TextArea)).call(_context66,
 
 var _TextAreaField = _interopRequireWildcard(require("./components/TextAreaField"));
 
-_forEachInstanceProperty(_context67 = _Object$keys(_TextAreaField)).call(_context67, function (key) {
+_forEachInstanceProperty(_context68 = _Object$keys(_TextAreaField)).call(_context68, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextAreaField[key]) return;
@@ -1770,7 +1793,7 @@ var _TimeZonePicker = _interopRequireDefault(require("./components/TimeZonePicke
 
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
 
-_forEachInstanceProperty(_context68 = _Object$keys(_TooltipTrigger)).call(_context68, function (key) {
+_forEachInstanceProperty(_context69 = _Object$keys(_TooltipTrigger)).call(_context69, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TooltipTrigger[key]) return;
@@ -1791,7 +1814,7 @@ var _overlays2 = require("@react-stately/overlays");
 
 var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
 
-_forEachInstanceProperty(_context69 = _Object$keys(_DataTable)).call(_context69, function (key) {
+_forEachInstanceProperty(_context70 = _Object$keys(_DataTable)).call(_context70, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DataTable[key]) return;

package/lib/components/IconBadge/IconBadge.js

@@ -0,0 +1,85 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+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 from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconBadge = function IconBadge(props) {
+  var children = props.children,
+      sx = props.sx,
+      circleColor = props.circleColor,
+      baseSize = props.baseSize,
+      circleSize = props.circleSize,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _React$Children$toArr = React.Children.toArray(children),
+      _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
+      firstIcon = _React$Children$toArr2[0],
+      secondIcon = _React$Children$toArr2[1];
+
+  return ___EmotionJSX(Box, _extends({
+    as: "span",
+    sx: _objectSpread({
+      position: 'relative',
+      height: "".concat(baseSize, "px"),
+      width: "".concat(baseSize, "px"),
+      display: 'flex',
+      alignItems: 'top'
+    }, sx)
+  }, others), firstIcon, ___EmotionJSX(Box, {
+    as: "span",
+    sx: {
+      position: 'absolute',
+      bottom: '-5.5px',
+      right: '1px',
+      borderRadius: "".concat(circleSize / 2, "px"),
+      height: "".concat(circleSize, "px"),
+      width: "".concat(circleSize, "px"),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: circleColor
+    }
+  }, secondIcon));
+};
+
+IconBadge.propTypes = {
+  /** JSX styling that is passed into the component. */
+  sx: PropTypes.shape({}),
+
+  /** Color that is applied to the circular background.
+   * Default is white.
+   */
+  circleColor: PropTypes.string,
+
+  /**
+   * The size of the base Icon. When given a number value, it will be converted to pixels.
+   */
+  baseSize: PropTypes.number,
+
+  /**
+   * The size of the Icon within the circle.
+   * When given a number value, it will be converted to pixels.
+   */
+  circleSize: PropTypes.number
+};
+IconBadge.defaultProps = {
+  circleColor: 'white'
+};
+export default IconBadge;

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import ArrowIcon from 'mdi-react/ArrowTopRightThickIcon';
+import GroupIcon from 'mdi-react/AccountGroupIcon';
+import IconBadge from '.';
+import { Icon, Box } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'IconBadge',
+  component: IconBadge,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(IconBadge, _extends({}, args, {
+    baseSize: 25,
+    circleSize: 15
+  }), ___EmotionJSX(Icon, {
+    icon: GroupIcon,
+    size: "25px",
+    color: "accent.40"
+  }), ___EmotionJSX(Icon, {
+    icon: ArrowIcon,
+    size: "13px",
+    color: "accent.40"
+  })));
+};

package/lib/components/IconBadge/IconBadge.test.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IconBadge, Icon } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var ThisIcon = function ThisIcon(args) {
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), ___EmotionJSX("path", {
+    d: "M12.5 7.28125C14.1979 7.28125 15.6979 7.6875 16.9167 8.21875C18.0417 8.71875 18.75 9.84375 18.75 11.0625V12.75H6.25V11.0729C6.25 9.84375 6.95833 8.71875 8.08333 8.22917C9.30208 7.6875 10.8021 7.28125 12.5 7.28125ZM4.16667 7.54167C5.3125 7.54167 6.25 6.60417 6.25 5.45833C6.25 4.3125 5.3125 3.375 4.16667 3.375C3.02083 3.375 2.08333 4.3125 2.08333 5.45833C2.08333 6.60417 3.02083 7.54167 4.16667 7.54167ZM5.34375 8.6875C4.95833 8.625 4.57292 8.58333 4.16667 8.58333C3.13542 8.58333 2.15625 8.80208 1.27083 9.1875C0.5 9.52083 0 10.2708 0 11.1146V12.75H4.6875V11.0729C4.6875 10.2083 4.92708 9.39583 5.34375 8.6875ZM20.8333 7.54167C21.9792 7.54167 22.9167 6.60417 22.9167 5.45833C22.9167 4.3125 21.9792 3.375 20.8333 3.375C19.6875 3.375 18.75 4.3125 18.75 5.45833C18.75 6.60417 19.6875 7.54167 20.8333 7.54167ZM25 11.1146C25 10.2708 24.5 9.52083 23.7292 9.1875C22.8437 8.80208 21.8646 8.58333 20.8333 8.58333C20.4271 8.58333 20.0417 8.625 19.6563 8.6875C20.0729 9.39583 20.3125 10.2083 20.3125 11.0729V12.75H25V11.1146ZM12.5 0.25C14.2292 0.25 15.625 1.64583 15.625 3.375C15.625 5.10417 14.2292 6.5 12.5 6.5C10.7708 6.5 9.375 5.10417 9.375 3.375C9.375 1.64583 10.7708 0.25 12.5 0.25Z",
+    fill: "currentColor"
+  }));
+};
+
+var ThisSecondIcon = function ThisSecondIcon(args) {
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), ___EmotionJSX("path", {
+    d: "M1.71875 0.624999L7.96875 0.625L7.96875 6.875L6.09375 6.875L6.09375 3.89375L1.73125 8.125L0.46875 6.85625L4.75 2.5L1.71875 2.5L1.71875 0.624999Z",
+    fill: "currentColor"
+  }));
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(IconBadge, _extends({}, props, {
+    backgroundColor: "white"
+  }, defaultProps), ___EmotionJSX(Icon, {
+    icon: ThisIcon,
+    size: "25px",
+    color: "accent.40"
+  }), ___EmotionJSX(Icon, {
+    icon: ThisSecondIcon,
+    size: "9px",
+    color: "accent.40"
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default iconbadge render', function () {
+  getComponent();
+  var iconButton = screen.getByTestId(testId);
+  expect(iconButton).toBeInTheDocument();
+});

package/lib/components/IconBadge/index.js

@@ -0,0 +1 @@
+export { default } from './IconBadge';

package/lib/index.js

@@ -43,6 +43,8 @@ export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
+export { default as IconBadge } from './components/IconBadge';
+export * from './components/IconBadge';
 export { default as IconButton } from './components/IconButton';
 export * from './components/IconButton';
 export { default as IconButtonToggle } from './components/IconButtonToggle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.29.1-alpha.0",
+  "version": "1.30.0-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",