@carbon/ibm-products 1.27.0 → 2.0.0-rc.2

package/lib/components/RemoveModal/RemoveModal.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -87,21 +87,22 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       setUserInput('');
     }
   }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
-    size: "sm"
+    size: "sm",
+    "aria-label": title
   }, _objectSpread({
     open: open,
     ref: ref,
     preventCloseOnClickOutside: preventCloseOnClickOutside,
     onClose: onClose
-  }, (0, _devtools.getDevtoolsProps)(componentName))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }, (0, _devtools.getDevtoolsProps)(componentName))), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     title: title,
     label: label,
     iconDescription: iconDescription
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__body")
-  }, body), textConfirmation && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, body), textConfirmation && /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     id: "".concat(idRef.current, "-confirmation-input"),
     className: "".concat(blockClass, "__input"),
     invalidText: inputInvalidText,
@@ -110,12 +111,12 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onChange: onChangeHandler,
     value: userInput,
     "data-modal-primary-focus": true
-  })), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
     onClick: onClose,
     "data-modal-primary-focus": !textConfirmation
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "submit",
     kind: "danger",
     onClick: onRequestSubmit,

package/lib/components/Saving/Saving.js

@@ -9,17 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Saving = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -58,20 +58,36 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     default: {
       text: defaultText,
       iconDescription: defaultIconDescription,
-      icon: _iconsReact.CheckmarkOutline16
+      icon: function icon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkOutline, (0, _extends2.default)({
+          size: 16
+        }, props));
+      }
     }
   }, (0, _defineProperty2.default)(_statusObj, 'in-progress', {
     text: inProgressText,
     iconDescription: inProgressIconDescription,
-    icon: _carbonComponentsReact.InlineLoading
+    icon: function icon(props) {
+      return /*#__PURE__*/_react.default.createElement(_react2.InlineLoading, (0, _extends2.default)({
+        size: 16
+      }, props));
+    }
   }), (0, _defineProperty2.default)(_statusObj, "success", {
     text: successText,
     iconDescription: successIconDescription,
-    icon: _iconsReact.Save16
+    icon: function icon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Save, (0, _extends2.default)({
+        size: 16
+      }, props));
+    }
   }), (0, _defineProperty2.default)(_statusObj, "fail", {
     text: failText,
     iconDescription: failIconDescription,
-    icon: _iconsReact.ErrorOutline16
+    icon: function icon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorOutline, (0, _extends2.default)({
+        size: 16
+      }, props));
+    }
   }), _statusObj);
   var blockClass = "".concat(_settings.pkg.prefix, "--saving");
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
@@ -81,16 +97,18 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__message")
   }, status === 'fail' && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled16, null)), /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+    size: 16
+  })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__text")
   }, (_statusObj$status = statusObj[status]) === null || _statusObj$status === void 0 ? void 0 : _statusObj$status.text)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__buttons")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     onClick: onRequestCancel,
     kind: "secondary",
     disabled: status !== 'in-progress',
     type: "button"
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     onClick: onRequestSave,
     kind: "primary",
     renderIcon: (_statusObj$status2 = statusObj[status]) === null || _statusObj$status2 === void 0 ? void 0 : _statusObj$status2.icon,

package/lib/components/SidePanel/SidePanel.js

@@ -39,7 +39,7 @@ var _constants = require("./constants");
 
 var _hooks = require("../../global/js/hooks");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -429,22 +429,30 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-without-title"), !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
-    }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
-      size: "small",
+      size: "sm",
       disabled: false,
-      renderIcon: _iconsReact.ArrowLeft20,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowLeft, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
       iconDescription: navigationBackIconDescription,
       className: "".concat(blockClass, "__navigation-back-button"),
       onClick: onNavigationBack
     }), title && title.length && labelText && labelText.length && /*#__PURE__*/_react.default.createElement("p", {
       className: "".concat(blockClass, "__label-text")
-    }, labelText), title && title.length && renderTitle()), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, labelText), title && title.length && renderTitle()), /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": closeIconDescription,
       kind: "ghost",
-      size: "small",
-      renderIcon: _iconsReact.Close20,
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
       iconDescription: closeIconDescription,
       className: "".concat(blockClass, "__close-button"),
       onClick: onRequestClose,
@@ -464,10 +472,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           className = _ref5.className,
           onClick = _ref5.onClick,
           rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+      return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
         key: label,
         kind: kind || 'ghost',
-        size: "small",
+        size: "sm",
         renderIcon: icon,
         iconDescription: label,
         tooltipPosition: "bottom",
@@ -525,7 +533,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, children), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
-    size: size
+    size: size === 'xs' ? 'sm' : size
   })), /*#__PURE__*/_react.default.createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",
@@ -550,7 +558,7 @@ SidePanel.propTypes = {
   actionToolbarButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string,
     leading: _propTypes.default.bool,
-    icon: _propTypes.default.object,
+    icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
     onClick: _propTypes.default.func,
     kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary'])
   })),
@@ -568,12 +576,12 @@ SidePanel.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: _propTypes.default.string,
     loading: _propTypes.default.bool,
     // we duplicate this Button prop to improve the DocGen here
-    onClick: _carbonComponentsReact.Button.propTypes.onClick
+    onClick: _react2.Button.propTypes.onClick
   })))]),
 
   /**
@@ -671,7 +679,7 @@ SidePanel.propTypes = {
   /**
    * Sets the size of the side panel
    */
-  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
 
   /**
    * Determines if this panel slides in

package/lib/components/StatusIcon/StatusIcon.js

@@ -2,18 +2,20 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StatusIcon = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -26,78 +28,14 @@ var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 
 var _excluded = ["kind", "theme", "size", "className", "iconDescription"];
-var icons = {
-  fatal: {
-    sm: _iconsReact.Misuse16,
-    md: _iconsReact.Misuse20,
-    lg: _iconsReact.Misuse24,
-    xlg: _iconsReact.Misuse32
-  },
-  critical: {
-    sm: _iconsReact.ErrorFilled16,
-    md: _iconsReact.ErrorFilled20,
-    lg: _iconsReact.ErrorFilled24,
-    xlg: _iconsReact.ErrorFilled32
-  },
-  'major-warning': {
-    sm: _iconsReact.WarningAltInvertedFilled16,
-    md: _iconsReact.WarningAltInvertedFilled20,
-    lg: _iconsReact.WarningAltInvertedFilled24,
-    xlg: _iconsReact.WarningAltInvertedFilled32
-  },
-  'minor-warning': {
-    sm: _iconsReact.WarningAltFilled16,
-    md: _iconsReact.WarningAltFilled20,
-    lg: _iconsReact.WarningAltFilled24,
-    xlg: _iconsReact.WarningAltFilled32
-  },
-  undefined: {
-    sm: _iconsReact.UndefinedFilled16,
-    md: _iconsReact.UndefinedFilled20,
-    lg: _iconsReact.UndefinedFilled24,
-    xlg: _iconsReact.UndefinedFilled32
-  },
-  unknown: {
-    sm: _iconsReact.UnknownFilled16,
-    md: _iconsReact.UnknownFilled20,
-    lg: _iconsReact.UnknownFilled24,
-    xlg: _iconsReact.UnknownFilled32
-  },
-  normal: {
-    sm: _iconsReact.CheckmarkFilled16,
-    md: _iconsReact.CheckmarkFilled20,
-    lg: _iconsReact.CheckmarkFilled24,
-    xlg: _iconsReact.CheckmarkFilled32
-  },
-  info: {
-    sm: _iconsReact.InformationSquareFilled16,
-    md: _iconsReact.InformationSquareFilled20,
-    lg: _iconsReact.InformationSquareFilled24,
-    xlg: _iconsReact.InformationSquareFilled32
-  },
-  'in-progress': {
-    sm: _iconsReact.Renew16,
-    md: _iconsReact.Renew20,
-    lg: _iconsReact.Renew24,
-    xlg: _iconsReact.Renew32
-  },
-  running: {
-    sm: _iconsReact.Renew16,
-    md: _iconsReact.Renew20,
-    lg: _iconsReact.Renew24,
-    xlg: _iconsReact.Renew32
-  },
-  pending: {
-    sm: _iconsReact.Time16,
-    md: _iconsReact.Time20,
-    lg: _iconsReact.Time24,
-    xlg: _iconsReact.Time32
-  }
-};
+
+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; }
+
 var blockClass = "".concat(_settings.pkg.prefix, "--status-icon");
 var componentName = 'StatusIcon';
-
-var StatusIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _icons$kind;
 
   var kind = _ref.kind,
@@ -106,6 +44,294 @@ var StatusIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className = _ref.className,
       iconDescription = _ref.iconDescription,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var icons = {
+    fatal: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    critical: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'major-warning': {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'minor-warning': {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    undefined: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    unknown: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    normal: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    info: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'in-progress': {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    running: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    pending: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    }
+  };
   var IconComponent = (_icons$kind = icons[kind]) === null || _icons$kind === void 0 ? void 0 : _icons$kind[size];
   var classNames = (0, _classnames.default)(className, blockClass, "".concat(blockClass, "--").concat(theme), (0, _defineProperty2.default)({}, "".concat(blockClass, "--").concat(theme, "-").concat(kind), kind));
   return IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, (0, _extends2.default)({}, rest, {
@@ -113,7 +339,6 @@ var StatusIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("title", null, iconDescription));
 });
-
 exports.StatusIcon = StatusIcon;
 exports.StatusIcon = StatusIcon = _settings.pkg.checkComponentEnabled(StatusIcon, componentName);
 StatusIcon.displayName = componentName;
@@ -136,7 +361,7 @@ StatusIcon.propTypes = {
   /**
    * A required prop that displays the size of the icon associate with the status
    */
-  size: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xlg']).isRequired,
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']).isRequired,
 
   /**
    * A required prop that displays the theme of the icon associated with the status