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

package/es/components/MultiAddSelect/MultiAddSelect.js

@@ -83,11 +83,11 @@ MultiAddSelect.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.shape({
       avatar: PropTypes.shape({
         alt: PropTypes.string,
-        icon: PropTypes.object,
+        icon: PropTypes.func,
         src: PropTypes.string
       }),
       children: PropTypes.object,
-      icon: PropTypes.object,
+      icon: PropTypes.func,
       id: PropTypes.string.isRequired,
       subtitle: PropTypes.string,
       title: PropTypes.string.isRequired,

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -21,8 +21,8 @@ import { pkg } from '../../settings';
 import { timeAgo } from './utils';
 import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState'; // Carbon and package components we use.
 
-import { Button, Link, Toggle } from 'carbon-components-react';
-import { ErrorFilled16, WarningAltFilled16, CheckmarkFilled16, InformationSquareFilled16, ChevronDown16, Close16, Settings16 } from '@carbon/icons-react';
+import { Button, Link, Toggle, IconButton } from '@carbon/react';
+import { ErrorFilled, WarningAltFilled, CheckmarkFilled, InformationSquareFilled, ChevronDown, Close, Settings } from '@carbon/icons-react';
 import { usePreviousValue } from '../../global/js/hooks'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'NotificationsPanel';
@@ -229,8 +229,12 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React.createElement(Button, {
       kind: "ghost",
-      size: "small",
-      renderIcon: ChevronDown16,
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(ChevronDown, _extends({
+          size: 16
+        }, props));
+      },
       iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
@@ -270,13 +274,17 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
 
         event.which === 13 && notification.onNotificationClick(notification);
       }
-    }, notification.type === 'error' && /*#__PURE__*/React.createElement(ErrorFilled16, {
+    }, notification.type === 'error' && /*#__PURE__*/React.createElement(ErrorFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
-    }), notification.type === 'success' && /*#__PURE__*/React.createElement(CheckmarkFilled16, {
+    }), notification.type === 'success' && /*#__PURE__*/React.createElement(CheckmarkFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
-    }), notification.type === 'warning' && /*#__PURE__*/React.createElement(WarningAltFilled16, {
+    }), notification.type === 'warning' && /*#__PURE__*/React.createElement(WarningAltFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
-    }), notification.type === 'informational' && /*#__PURE__*/React.createElement(InformationSquareFilled16, {
+    }), notification.type === 'informational' && /*#__PURE__*/React.createElement(InformationSquareFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
     }), /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__notification-content")
@@ -301,17 +309,18 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(Link, {
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.text)), /*#__PURE__*/React.createElement(Button, {
+    }, notification.link.text)), /*#__PURE__*/React.createElement(IconButton, {
+      align: "left",
       kind: "ghost",
-      size: "small",
-      renderIcon: Close16,
-      iconDescription: dismissSingleNotificationIconDescription,
-      tooltipPosition: "left",
+      size: "sm",
+      label: dismissSingleNotificationIconDescription,
       className: "".concat(blockClass, "__dismiss-single-button"),
       onClick: function onClick(event) {
         return dismissSingleNotification(event, notification);
       }
-    }));
+    }, /*#__PURE__*/React.createElement(Close, {
+      size: 16
+    })));
   };
 
   var dismissSingleNotification = function dismissSingleNotification(event, notification) {
@@ -336,7 +345,7 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
   }, /*#__PURE__*/React.createElement("h1", {
     className: "".concat(blockClass, "__header")
   }, title), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
+    size: "sm",
     kind: "ghost",
     className: "".concat(blockClass, "__dismiss-button"),
     onClick: function onClick() {
@@ -352,7 +361,8 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
       return onDoNotDisturbChange(event);
     },
     defaultToggled: doNotDisturbDefaultToggled,
-    "aria-label": doNotDisturbLabel
+    "aria-label": doNotDisturbLabel,
+    labelText: doNotDisturbLabel
   })), /*#__PURE__*/React.createElement("div", {
     className: mainSectionClassName
   }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
@@ -381,9 +391,13 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
     }
   }, viewAllLabel(allNotifications.length)), /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
-    size: "small",
+    size: "sm",
     className: "".concat(blockClass, "__settings-button"),
-    renderIcon: Settings16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Settings, _extends({
+        size: 16
+      }, props));
+    },
     iconDescription: settingsIconDescription,
     onClick: function onClick() {
       return onSettingsClick();

package/es/components/OptionsTile/OptionsTile.js

@@ -19,8 +19,8 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Toggle } from 'carbon-components-react';
-import { ChevronDown16, Locked16, WarningAltFilled16, WarningFilled16 } from '@carbon/icons-react';
+import { Toggle } from '@carbon/react';
+import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/icons-react';
 import * as carbonMotion from '@carbon/motion'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--options-tile");
@@ -175,15 +175,15 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var summaryClasses = ["".concat(blockClass, "__summary")];
 
     if (invalid) {
-      Icon = WarningFilled16;
+      Icon = WarningFilled;
       text = invalidText;
       summaryClasses.push("".concat(blockClass, "__summary--invalid"));
     } else if (warn) {
-      Icon = WarningAltFilled16;
+      Icon = WarningAltFilled;
       text = warnText;
       summaryClasses.push("".concat(blockClass, "__summary--warn"));
     } else if (locked) {
-      Icon = Locked16;
+      Icon = Locked;
       summaryClasses.push("".concat(blockClass, "__summary--locked"));
 
       if (!text) {
@@ -206,7 +206,9 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title), text && /*#__PURE__*/React.createElement("span", {
       className: cx(summaryClasses),
       "aria-hidden": summaryHidden
-    }, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
+      size: 16
+    }), /*#__PURE__*/React.createElement("span", {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
   }
@@ -227,21 +229,25 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-labelledby": titleId,
     onToggle: onToggle,
     size: "sm",
-    disabled: isLocked
+    disabled: isLocked,
+    labelText: title
   })), isExpandable ? /*#__PURE__*/React.createElement("details", {
     open: isOpen,
     ref: detailsRef
   }, /*#__PURE__*/React.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
-  }, /*#__PURE__*/React.createElement(ChevronDown16, {
+  }, /*#__PURE__*/React.createElement(ChevronDown, {
+    size: 16,
     className: "".concat(blockClass, "__chevron")
   }), renderTitle()), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
   }, isLocked && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
-  }, /*#__PURE__*/React.createElement(Locked16, null), lockedText), children)) : /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Locked, {
+    size: 16
+  }), lockedText), children)) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__static-content")
   }, renderTitle()));
 }); // Return a placeholder if not released and not enabled by feature flag

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