@carbon/ibm-products 1.25.1 → 2.0.0-rc.0

package/es/components/PageHeader/PageHeader.js

@@ -16,10 +16,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 //
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { layout05, baseFontSize } from '@carbon/layout';
+import { spacing10, baseFontSize } from '@carbon/layout';
 import cx from 'classnames';
 import { useResizeDetector } from 'react-resize-detector';
-import { Grid, Column, Row, Button, Tag } from 'carbon-components-react';
+import { FlexGrid, Column, Row, Button, Tag } from '@carbon/react';
 import { breakpoints } from '@carbon/layout';
 import { useWindowResize, useNearestScroll } from '../../global/js/hooks';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
@@ -29,7 +29,7 @@ import { ActionBar } from '../ActionBar/';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
 import { TagSet, string_required_if_more_than_10_tags } from '../TagSet/TagSet';
 import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow';
-import { ChevronUp16 } from '@carbon/icons-react';
+import { ChevronUp } from '@carbon/icons-react';
 var componentName = 'PageHeader';
 import { blockClass, utilCheckUpdateVerticalSpace, utilGetBreadcrumbItemForTitle, utilSetCollapsed } from './PageHeaderUtils';
 import { PageHeaderTitle } from './PageHeaderTitle'; // Default values for props
@@ -311,7 +311,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var result = withoutBackground ? 0 : 1;
 
     if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
-      var startAddingAt = parseFloat(layout05, 10) * parseInt(baseFontSize);
+      var startAddingAt = parseFloat(spacing10, 10) * parseInt(baseFontSize);
       var scrollRemaining = metrics.headerHeight - scrollYValue;
       /* don't know how to test resize */
 
@@ -367,7 +367,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref6 = {}, _defineProperty(_ref6, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref6, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
     style: pageHeaderStyles,
     ref: headerRef
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Grid, {
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',
     narrow: narrowGrid,
     className: cx(_defineProperty({}, "".concat(blockClass, "--width--xl"), fullWidthGrid === 'xl'))
@@ -424,7 +424,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Column, {
     className: cx("".concat(blockClass, "__navigation-tags"), _defineProperty({}, "".concat(blockClass, "__navigation-tags--tags-only"), !navigation))
   }, /*#__PURE__*/React.createElement(TagSet, {
-    overflowAlign: "start",
+    overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
@@ -439,7 +439,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, navigation), tags ? /*#__PURE__*/React.createElement(Column, {
     className: cx("".concat(blockClass, "__navigation-tags"), _defineProperty({}, "".concat(blockClass, "__navigation-tags--tags-only"), !navigation))
   }, /*#__PURE__*/React.createElement(TagSet, {
-    overflowAlign: "end",
+    overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
@@ -454,8 +454,12 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
     kind: "ghost",
     onClick: handleCollapseToggle,
-    renderIcon: ChevronUp16,
-    size: "field",
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(ChevronUp, _extends({
+        size: 16
+      }, props));
+    },
+    size: "md",
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"

package/es/components/PageHeader/PageHeaderTitle.js

@@ -5,7 +5,7 @@ var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "on
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { SkeletonText } from 'carbon-components-react';
+import { SkeletonText } from '@carbon/react';
 import { InlineEdit } from '../';
 /**
  *

package/es/components/PageHeader/PageHeaderUtils.js

@@ -14,7 +14,7 @@ import React from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings';
 import { scrollableAncestor } from '../../global/js/utils/scrollableAncestor';
-import { SkeletonText } from 'carbon-components-react';
+import { SkeletonText } from '@carbon/react';
 export var blockClass = "".concat(pkg.prefix, "--page-header");
 /**
  * Assesses the vertical height of various elements and calls setMetrics with update

package/es/components/ProductiveCard/ProductiveCard.js

@@ -102,6 +102,11 @@ ProductiveCard.propTypes = {
     onKeyDown: PropTypes.func
   })),
 
+  /**
+   * Aria label prop required for OverflowMenu
+   */
+  overflowAriaLabel: PropTypes.string,
+
   /**
    * Optionally specify an href for your Button to become an <a> element
    */

package/es/components/RemoveModal/RemoveModal.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 //
 import React, { useState, useRef, forwardRef, useEffect } from 'react';
 import cx from 'classnames';
-import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput } from 'carbon-components-react';
+import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput } from '@carbon/react';
 import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -69,7 +69,8 @@ export var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
   return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass, className),
-    size: "sm"
+    size: "sm",
+    "aria-label": title
   }, _objectSpread({
     open: open,
     ref: ref,

package/es/components/Saving/Saving.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["secondaryButtonText", "className", "defaultIconDescription", "defaultText", "failIconDescription", "failText", "inProgressIconDescription", "inProgressText", "onRequestCancel", "onRequestSave", "status", "successIconDescription", "successText", "type"];
 
@@ -11,8 +11,8 @@ var _excluded = ["secondaryButtonText", "className", "defaultIconDescription", "
  */
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { Button, InlineLoading } from 'carbon-components-react';
-import { Save16, CheckmarkOutline16, ErrorOutline16, ErrorFilled16 } from '@carbon/icons-react';
+import { Button, InlineLoading } from '@carbon/react';
+import { Save, CheckmarkOutline, ErrorOutline, ErrorFilled } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
@@ -40,20 +40,36 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
     default: {
       text: defaultText,
       iconDescription: defaultIconDescription,
-      icon: CheckmarkOutline16
+      icon: function icon(props) {
+        return /*#__PURE__*/React.createElement(CheckmarkOutline, _extends({
+          size: 16
+        }, props));
+      }
     }
   }, _defineProperty(_statusObj, 'in-progress', {
     text: inProgressText,
     iconDescription: inProgressIconDescription,
-    icon: InlineLoading
+    icon: function icon(props) {
+      return /*#__PURE__*/React.createElement(InlineLoading, _extends({
+        size: 16
+      }, props));
+    }
   }), _defineProperty(_statusObj, "success", {
     text: successText,
     iconDescription: successIconDescription,
-    icon: Save16
+    icon: function icon(props) {
+      return /*#__PURE__*/React.createElement(Save, _extends({
+        size: 16
+      }, props));
+    }
   }), _defineProperty(_statusObj, "fail", {
     text: failText,
     iconDescription: failIconDescription,
-    icon: ErrorOutline16
+    icon: function icon(props) {
+      return /*#__PURE__*/React.createElement(ErrorOutline, _extends({
+        size: 16
+      }, props));
+    }
   }), _statusObj);
   var blockClass = "".concat(pkg.prefix, "--saving");
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
@@ -63,7 +79,9 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__message")
   }, status === 'fail' && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/React.createElement(ErrorFilled16, null)), /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement(ErrorFilled, {
+    size: 16
+  })), /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__text")
   }, (_statusObj$status = statusObj[status]) === null || _statusObj$status === void 0 ? void 0 : _statusObj$status.text)) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__buttons")

package/es/components/SidePanel/SidePanel.js

@@ -29,8 +29,8 @@ import { pkg } from '../../settings';
 import { SIDE_PANEL_SIZES } from './constants';
 import { usePreviousValue } from '../../global/js/hooks'; // Carbon and package components we use.
 
-import { Button } from 'carbon-components-react';
-import { Close20, ArrowLeft20 } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
+import { Close, ArrowLeft } from '@carbon/icons-react';
 import { ActionSet } from '../ActionSet';
 var blockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -408,9 +408,13 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
-      size: "small",
+      size: "sm",
       disabled: false,
-      renderIcon: ArrowLeft20,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(ArrowLeft, _extends({
+          size: 20
+        }, props));
+      },
       iconDescription: navigationBackIconDescription,
       className: "".concat(blockClass, "__navigation-back-button"),
       onClick: onNavigationBack
@@ -419,8 +423,12 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, labelText), title && title.length && renderTitle()), /*#__PURE__*/React.createElement(Button, {
       "aria-label": closeIconDescription,
       kind: "ghost",
-      size: "small",
-      renderIcon: Close20,
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(Close, _extends({
+          size: 20
+        }, props));
+      },
       iconDescription: closeIconDescription,
       className: "".concat(blockClass, "__close-button"),
       onClick: onRequestClose,
@@ -444,7 +452,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
         key: label,
         kind: kind || 'ghost',
-        size: "small",
+        size: "sm",
         renderIcon: icon,
         iconDescription: label,
         tooltipPosition: "bottom",
@@ -502,7 +510,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children), /*#__PURE__*/React.createElement(ActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
-    size: size
+    size: size === 'xs' ? 'sm' : size
   })), /*#__PURE__*/React.createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",
@@ -525,7 +533,7 @@ SidePanel.propTypes = {
   actionToolbarButtons: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     leading: PropTypes.bool,
-    icon: PropTypes.object,
+    icon: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     onClick: PropTypes.func,
     kind: PropTypes.oneOf(['ghost', 'tertiary', 'secondary', 'primary'])
   })),
@@ -646,7 +654,7 @@ SidePanel.propTypes = {
   /**
    * Sets the size of the side panel
    */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
 
   /**
    * Determines if this panel slides in

package/es/components/StatusIcon/StatusIcon.js

@@ -1,91 +1,23 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["kind", "theme", "size", "className", "iconDescription"];
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Misuse16, Misuse20, Misuse24, Misuse32, ErrorFilled16, ErrorFilled20, ErrorFilled24, ErrorFilled32, WarningAltInvertedFilled16, WarningAltInvertedFilled20, WarningAltInvertedFilled24, WarningAltInvertedFilled32, WarningAltFilled16, WarningAltFilled20, WarningAltFilled24, WarningAltFilled32, UndefinedFilled16, UndefinedFilled20, UndefinedFilled24, UndefinedFilled32, UnknownFilled16, UnknownFilled20, UnknownFilled24, UnknownFilled32, CheckmarkFilled16, CheckmarkFilled20, CheckmarkFilled24, CheckmarkFilled32, InformationSquareFilled16, InformationSquareFilled20, InformationSquareFilled24, InformationSquareFilled32, Renew16, Renew20, Renew24, Renew32, Time16, Time20, Time24, Time32 } from '@carbon/icons-react';
+import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, Renew, Time } from '@carbon/icons-react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
-var icons = {
-  fatal: {
-    sm: Misuse16,
-    md: Misuse20,
-    lg: Misuse24,
-    xlg: Misuse32
-  },
-  critical: {
-    sm: ErrorFilled16,
-    md: ErrorFilled20,
-    lg: ErrorFilled24,
-    xlg: ErrorFilled32
-  },
-  'major-warning': {
-    sm: WarningAltInvertedFilled16,
-    md: WarningAltInvertedFilled20,
-    lg: WarningAltInvertedFilled24,
-    xlg: WarningAltInvertedFilled32
-  },
-  'minor-warning': {
-    sm: WarningAltFilled16,
-    md: WarningAltFilled20,
-    lg: WarningAltFilled24,
-    xlg: WarningAltFilled32
-  },
-  undefined: {
-    sm: UndefinedFilled16,
-    md: UndefinedFilled20,
-    lg: UndefinedFilled24,
-    xlg: UndefinedFilled32
-  },
-  unknown: {
-    sm: UnknownFilled16,
-    md: UnknownFilled20,
-    lg: UnknownFilled24,
-    xlg: UnknownFilled32
-  },
-  normal: {
-    sm: CheckmarkFilled16,
-    md: CheckmarkFilled20,
-    lg: CheckmarkFilled24,
-    xlg: CheckmarkFilled32
-  },
-  info: {
-    sm: InformationSquareFilled16,
-    md: InformationSquareFilled20,
-    lg: InformationSquareFilled24,
-    xlg: InformationSquareFilled32
-  },
-  'in-progress': {
-    sm: Renew16,
-    md: Renew20,
-    lg: Renew24,
-    xlg: Renew32
-  },
-  running: {
-    sm: Renew16,
-    md: Renew20,
-    lg: Renew24,
-    xlg: Renew32
-  },
-  pending: {
-    sm: Time16,
-    md: Time20,
-    lg: Time24,
-    xlg: Time32
-  }
-};
 var blockClass = "".concat(pkg.prefix, "--status-icon");
 var componentName = 'StatusIcon';
-export var StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+export var StatusIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _icons$kind;
 
   var kind = _ref.kind,
@@ -95,6 +27,294 @@ export var StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       iconDescription = _ref.iconDescription,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var icons = {
+    fatal: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    critical: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'major-warning': {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'minor-warning': {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    undefined: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    unknown: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    normal: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    info: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'in-progress': {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    running: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    pending: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    }
+  };
   var IconComponent = (_icons$kind = icons[kind]) === null || _icons$kind === void 0 ? void 0 : _icons$kind[size];
   var classNames = cx(className, blockClass, "".concat(blockClass, "--").concat(theme), _defineProperty({}, "".concat(blockClass, "--").concat(theme, "-").concat(kind), kind));
   return IconComponent && /*#__PURE__*/React.createElement(IconComponent, _extends({}, rest, {
@@ -123,7 +343,7 @@ StatusIcon.propTypes = {
   /**
    * A required prop that displays the size of the icon associate with the status
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xlg']).isRequired,
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']).isRequired,
 
   /**
    * A required prop that displays the theme of the icon associated with the status