@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/FullPageError/FullPageError.js

@@ -19,13 +19,12 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 var _span;
-var _excluded = ["children", "className", "description", "label", "kind", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--full-page-error");
-var componentName = 'FullPageError';
+const blockClass = `${settings.pkg.prefix}--full-page-error`;
+const componentName = 'FullPageError';
 // Default values for props
-var defaults = {
+const defaults = {
   kind: 'custom'
 };
 
@@ -33,29 +32,32 @@ var defaults = {
  * Display a full-page error when the requested page is unavailable to the user.
  * This is typically caused by issues with the requested URL or access permissions.
  */
-exports.FullPageError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    description = _ref.description,
-    label = _ref.label,
-    _ref$kind = _ref.kind,
-    kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var errorData = {
+exports.FullPageError = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    children,
+    className,
+    description,
+    label,
+    kind = defaults.kind,
+    title,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const errorData = {
     403: {
       svg: /*#__PURE__*/React.createElement(Error403SVG.Error403SVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__403")
+        className: `${blockClass}__svg ${blockClass}__403`
       })
     },
     404: {
       svg: /*#__PURE__*/React.createElement(Error404SVG.Error404SVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__404")
+        className: `${blockClass}__svg ${blockClass}__404`
       })
     },
     custom: {
       svg: /*#__PURE__*/React.createElement(ErrorGenericSVG.ErrorGenericSVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__custom")
+        className: `${blockClass}__svg ${blockClass}__custom`
       })
     }
   };
@@ -64,30 +66,30 @@ exports.FullPageError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     role: "main"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__container")
+    className: `${blockClass}__container`
   }, /*#__PURE__*/React.createElement(react.Grid, {
-    className: "".concat(blockClass, "__grid")
+    className: `${blockClass}__grid`
   }, /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 3,
     lg: 6,
-    className: "".concat(blockClass, "__column")
+    className: `${blockClass}__column`
   }, /*#__PURE__*/React.createElement("h1", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__label")
+    className: `${blockClass}__label`
   }, _span || (_span = /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true"
   }, "\u21B3 ")), label), /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__description")
+    className: `${blockClass}__description`
   }, description), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, children)), /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 5,
     lg: 10
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__svg-container")
+    className: `${blockClass}__svg-container`
   }, errorData[kind].svg)))));
 });
 

package/lib/components/FullPageError/assets/Error403SVG.js

@@ -11,8 +11,10 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
-var Error403SVG = function Error403SVG(_ref) {
-  var className = _ref.className;
+const Error403SVG = _ref => {
+  let {
+    className
+  } = _ref;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 750 570",
     fill: "none",

package/lib/components/FullPageError/assets/Error404SVG.js

@@ -11,8 +11,10 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
-var Error404SVG = function Error404SVG(_ref) {
-  var className = _ref.className;
+const Error404SVG = _ref => {
+  let {
+    className
+  } = _ref;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 751 549",
     fill: "none",

package/lib/components/FullPageError/assets/ErrorGenericSVG.js

@@ -11,8 +11,10 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
-var ErrorGenericSVG = function ErrorGenericSVG(_ref) {
-  var className = _ref.className;
+const ErrorGenericSVG = _ref => {
+  let {
+    className
+  } = _ref;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 750 506",
     fill: "none",

package/lib/components/GetStartedCard/GetStartedCard.js

@@ -14,15 +14,15 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var Card = require('../Card/Card.js');
 
-var componentName = 'GetStartedCard';
+const componentName = 'GetStartedCard';
 /**
  * GetStartedCard a card with icon, number, and media variants
  */
-exports.GetStartedCard = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
-    ref: ref,
+exports.GetStartedCard = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, props, {
+    ref,
     getStarted: true
-  }), devtools.getDevtoolsProps(componentName)));
+  }, devtools.getDevtoolsProps(componentName)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/Guidebanner/Guidebanner.js

@@ -21,12 +21,11 @@ var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 var _CaretLeft, _CaretRight, _Close;
-var _excluded = ["children", "className", "collapsible", "onClose", "withLeftGutter", "closeIconDescription", "collapseButtonLabel", "expandButtonLabel", "nextIconDescription", "previousIconDescription", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--guidebanner");
-var componentName = 'Guidebanner';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--guidebanner`;
+const componentName = 'Guidebanner';
+const defaults = {
   collapsible: false,
   withLeftGutter: false,
   // Labels
@@ -41,58 +40,43 @@ var defaults = {
  * The guide banner sits at the top of a page, or page-level tab,
  * to introduce foundational concepts related to the page's content.
  */
-exports.Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$collapsible = _ref.collapsible,
-    collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
-    onClose = _ref.onClose,
-    _ref$withLeftGutter = _ref.withLeftGutter,
-    withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
-    _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
-    _ref$collapseButtonLa = _ref.collapseButtonLabel,
-    collapseButtonLabel = _ref$collapseButtonLa === void 0 ? defaults.collapseButtonLabel : _ref$collapseButtonLa,
-    _ref$expandButtonLabe = _ref.expandButtonLabel,
-    expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
-    _ref$nextIconDescript = _ref.nextIconDescription,
-    nextIconDescription = _ref$nextIconDescript === void 0 ? defaults.nextIconDescription : _ref$nextIconDescript,
-    _ref$previousIconDesc = _ref.previousIconDescription,
-    previousIconDescription = _ref$previousIconDesc === void 0 ? defaults.previousIconDescription : _ref$previousIconDesc,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var scrollRef = React.useRef(null);
-  var toggleRef = React.useRef(null);
-  var _useState = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    scrollPosition = _useState2[0],
-    setScrollPosition = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    showNavigation = _useState4[0],
-    setShowNavigation = _useState4[1];
-  var _useState5 = React.useState(collapsible ? true : false),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    isCollapsed = _useState6[0],
-    setIsCollapsed = _useState6[1];
-  var handleClickToggle = function handleClickToggle() {
-    setIsCollapsed(function (prevState) {
-      return !prevState;
-    });
+exports.Guidebanner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    collapsible = defaults.collapsible,
+    onClose,
+    withLeftGutter = defaults.withLeftGutter,
+    // Labels
+    closeIconDescription = defaults.closeIconDescription,
+    collapseButtonLabel = defaults.collapseButtonLabel,
+    expandButtonLabel = defaults.expandButtonLabel,
+    nextIconDescription = defaults.nextIconDescription,
+    previousIconDescription = defaults.previousIconDescription,
+    title,
+    ...rest
+  } = _ref;
+  const scrollRef = React.useRef(null);
+  const toggleRef = React.useRef(null);
+  const [scrollPosition, setScrollPosition] = React.useState(0);
+  const [showNavigation, setShowNavigation] = React.useState(false);
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsible ? true : false);
+  const handleClickToggle = () => {
+    setIsCollapsed(prevState => !prevState);
   };
-  var carouselContentId = "".concat(uuidv4.default(), "--carousel-content-id");
+  const carouselContentId = `${uuidv4.default()}--carousel-content-id`;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-owns": !isCollapsed ? carouselContentId : undefined,
-    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
+    className: cx(blockClass, className, collapsible && `${blockClass}__collapsible`, isCollapsed && `${blockClass}__collapsible-collapsed`, withLeftGutter && `${blockClass}__with-left-gutter`),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(icons.Idea, {
     size: 20,
-    className: "".concat(blockClass, "__icon-idea")
+    className: `${blockClass}__icon-idea`
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, title), /*#__PURE__*/React.createElement(Carousel.Carousel, {
     id: carouselContentId,
-    className: "".concat(blockClass, "__carousel")
+    className: `${blockClass}__carousel`
     // These colors are to match the Carousel's faded edges
     // against the Guidebanner's gradient background.
     ,
@@ -101,50 +85,50 @@ exports.Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       right: index$1.purple70
     },
     ref: scrollRef,
-    onChangeIsScrollable: function onChangeIsScrollable(value) {
+    onChangeIsScrollable: value => {
       setShowNavigation(value);
     },
-    onScroll: function onScroll(scrollPercent) {
+    onScroll: scrollPercent => {
       setScrollPosition(scrollPercent);
     }
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: cx([collapsible || showNavigation ? "".concat(blockClass, "__navigation") : null])
+    className: cx([collapsible || showNavigation ? `${blockClass}__navigation` : null])
   }, collapsible && /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "md",
-    className: "".concat(blockClass, "__toggle-button"),
+    className: `${blockClass}__toggle-button`,
     onClick: handleClickToggle,
     ref: toggleRef,
     "aria-controls": !isCollapsed ? carouselContentId : undefined,
     "aria-expanded": !isCollapsed
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
+    className: cx(`${blockClass}__back-button`, [scrollPosition === 0 ? `${blockClass}__back-button--disabled` : null])
   }, /*#__PURE__*/React.createElement(react.IconButton, {
     align: "top",
     disabled: scrollPosition === 0,
     kind: "ghost",
     label: previousIconDescription,
-    onClick: function onClick() {
+    onClick: () => {
       scrollRef.current.scrollPrev();
     },
     size: "md"
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(icons.CaretLeft, {
     size: 16
   })))), /*#__PURE__*/React.createElement("span", {
-    className: cx("".concat(blockClass, "__next-button"), [scrollPosition === 1 ? "".concat(blockClass, "__next-button--disabled") : null])
+    className: cx(`${blockClass}__next-button`, [scrollPosition === 1 ? `${blockClass}__next-button--disabled` : null])
   }, /*#__PURE__*/React.createElement(react.IconButton, {
     align: "top-right",
     disabled: scrollPosition === 1,
     kind: "ghost",
     label: nextIconDescription,
-    onClick: function onClick() {
+    onClick: () => {
       scrollRef.current.scrollNext();
     },
     size: "md"
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React.createElement(icons.CaretRight, {
     size: 16
   })))))), onClose && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__close-button")
+    className: `${blockClass}__close-button`
   }, /*#__PURE__*/React.createElement(react.IconButton, {
     align: "bottom-end",
     kind: "ghost",
@@ -171,20 +155,19 @@ exports.Guidebanner.propTypes = {
    * Provide the contents of the Guidebanner.
    * One or more GuidebannerElement components are required.
    */
-  children: function children(props, propName) {
-    var error;
-    var prop = props[propName];
+  children: (props, propName) => {
+    let error;
+    const prop = props[propName];
     if (!prop) {
       error = new Error('`Guidebanner` requires one or more children of type `GuidebannerElement`.');
     }
-    React.Children.forEach(prop, function (child) {
+    React.Children.forEach(prop, child => {
       if (child.type.displayName !== 'GuidebannerElement') {
-        var _child$type, _child$type2;
         // If child element is not `GuidebannerElement`, then show:
         // Carbon Products component's `displayName` (child.type.displayName) or
         // React component's `name` (child.type.name) or
         // HTML element's tag name (child.type).
-        error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
+        error = new Error(`\`Guidebanner\` only accepts children of type \`GuidebannerElement\`, found \`${child.type?.displayName || child.type?.name || child.type}\` instead.`);
       }
     });
     return error;

package/lib/components/Guidebanner/GuidebannerElement.js

@@ -14,30 +14,30 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["button", "className", "description", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element");
-var componentName = 'GuidebannerElement';
+const blockClass = `${settings.pkg.prefix}--guidebanner__element`;
+const componentName = 'GuidebannerElement';
 /**
  * The GuidebannerElement is a required child component of the Guidebanner,
  * and acts as a container for a CarouselItem.
  */
-exports.GuidebannerElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var button = _ref.button,
-    className = _ref.className,
-    description = _ref.description,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.GuidebannerElement = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    button,
+    className,
+    description,
+    title,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), title && /*#__PURE__*/React.createElement("h2", {
-    className: "".concat(blockClass, "-title")
+    className: `${blockClass}-title`
   }, title), description && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "-content")
+    className: `${blockClass}-content`
   }, description), button && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-buttons")
+    className: `${blockClass}-buttons`
   }, button));
 });
 

package/lib/components/Guidebanner/GuidebannerElementButton.js

@@ -17,36 +17,34 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 var _Crossroads;
-var _excluded = ["children", "className", "iconDescription", "type"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element-button");
-var componentName = 'GuidebannerElementButton';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--guidebanner__element-button`;
+const componentName = 'GuidebannerElementButton';
+const defaults = {
   iconDescription: 'Crossroads'
 };
 
 /**
  * One of two buttons styled specifically for the GuidebannerElement.
  */
-exports.GuidebannerElementButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$iconDescription = _ref.iconDescription,
-    iconDescription = _ref$iconDescription === void 0 ? defaults.iconDescription : _ref$iconDescription,
-    type = _ref.type,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.GuidebannerElementButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    iconDescription = defaults.iconDescription,
+    type,
+    ...rest
+  } = _ref;
   if (type === 'primary') {
     return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({}, rest, {
       className: cx(blockClass, className),
       iconDescription: iconDescription,
       kind: "tertiary",
       ref: ref,
-      renderIcon: function renderIcon() {
-        return _Crossroads || (_Crossroads = /*#__PURE__*/React.createElement(icons.Crossroads, {
-          size: 16
-        }));
-      },
+      renderIcon: () => _Crossroads || (_Crossroads = /*#__PURE__*/React.createElement(icons.Crossroads, {
+        size: 16
+      })),
       role: "button",
       size: "md"
     }, devtools.getDevtoolsProps(componentName)), children);

package/lib/components/Guidebanner/GuidebannerElementLink.js

@@ -15,18 +15,18 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["children", "className"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element-link");
-var componentName = 'GuidebannerElementLink';
+const blockClass = `${settings.pkg.prefix}--guidebanner__element-link`;
+const componentName = 'GuidebannerElementLink';
 /**
  * A link styled specifically for the GuidebannerElement.
  */
-exports.GuidebannerElementLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.GuidebannerElementLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(react.Link, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     kind: "ghost",

package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -16,33 +16,33 @@ var HTTPErrorContent = require('../HTTPErrorContent.js');
 var devtools = require('../../../global/js/utils/devtools.js');
 var settings = require('../../../settings.js');
 
-var _excluded = ["className", "description", "errorCodeLabel", "links", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--http-errors");
-var componentName = 'HTTPError403';
+const blockClass = `${settings.pkg.prefix}--http-errors`;
+const componentName = 'HTTPError403';
 /**
  * HTTP errors are used in an attempt to access something that isn’t available or
 the user doesn’t have permission for. This HTTPError component is generic so you
 can use it when you receive an error code that isn't provided.
  */
-exports.HTTPError403 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    description = _ref.description,
-    errorCodeLabel = _ref.errorCodeLabel,
-    links = _ref.links,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.HTTPError403 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    description,
+    errorCodeLabel,
+    links,
+    title,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(HTTPErrorContent.HTTPErrorContent, {
-    description: description,
-    errorCodeLabel: errorCodeLabel,
-    title: title,
-    links: links
+    description,
+    errorCodeLabel,
+    title,
+    links
   }), /*#__PURE__*/React.createElement(HTTPErrorSvg403.HTTPErrorSvg403, {
-    className: "".concat(blockClass, "__image"),
+    className: `${blockClass}__image`,
     title: title
   }));
 });
@@ -50,7 +50,7 @@ exports.HTTPError403 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 /**@ts-ignore*/
 exports.HTTPError403.deprecated = {
   level: 'warn',
-  details: "".concat(componentName, " is deprecated. Please migrate to FullPageError by running npx @carbon/upgrade migrate ibm-products-update-http-errors --write")
+  details: `${componentName} is deprecated. Please migrate to FullPageError by running npx @carbon/upgrade migrate ibm-products-update-http-errors --write`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -16,33 +16,33 @@ var HTTPErrorContent = require('../HTTPErrorContent.js');
 var devtools = require('../../../global/js/utils/devtools.js');
 var settings = require('../../../settings.js');
 
-var _excluded = ["className", "description", "errorCodeLabel", "links", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--http-errors");
-var componentName = 'HTTPError404';
+const blockClass = `${settings.pkg.prefix}--http-errors`;
+const componentName = 'HTTPError404';
 /**
  * HTTP errors are used in an attempt to access something that isn’t available or
 the user doesn’t have permission for. This HTTPError component is generic so you
 can use it when you receive an error code that isn't provided.
  */
-exports.HTTPError404 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    description = _ref.description,
-    errorCodeLabel = _ref.errorCodeLabel,
-    links = _ref.links,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.HTTPError404 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    description,
+    errorCodeLabel,
+    links,
+    title,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(HTTPErrorContent.HTTPErrorContent, {
-    description: description,
-    errorCodeLabel: errorCodeLabel,
-    title: title,
-    links: links
+    description,
+    errorCodeLabel,
+    title,
+    links
   }), /*#__PURE__*/React.createElement(HTTPErrorSvg404.HTTPErrorSvg404, {
-    className: "".concat(blockClass, "__image"),
+    className: `${blockClass}__image`,
     title: title
   }));
 });
@@ -50,7 +50,7 @@ exports.HTTPError404 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 /**@ts-ignore*/
 exports.HTTPError404.deprecated = {
   level: 'warn',
-  details: "".concat(componentName, " is deprecated. Please migrate to FullPageError by running npx @carbon/upgrade migrate ibm-products-update-http-errors --write")
+  details: `${componentName} is deprecated. Please migrate to FullPageError by running npx @carbon/upgrade migrate ibm-products-update-http-errors --write`
 };
 
 // Return a placeholder if not released and not enabled by feature flag