@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -15,55 +15,56 @@ var react = require('@carbon/react');
 var EditInPlace = require('../EditInPlace/EditInPlace.js');
 var useOverflowString = require('../../global/js/hooks/useOverflowString.js');
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
-
 /**
  *
  * Utility component used by Page Header
  */
 // eslint-disable-next-line react/prop-types
-var PageHeaderTitle = function PageHeaderTitle(_ref) {
-  var blockClass = _ref.blockClass,
-    hasBreadcrumbRow = _ref.hasBreadcrumbRow,
-    title = _ref.title;
-  var titleInnards;
+const PageHeaderTitle = _ref => {
+  let {
+    blockClass,
+    hasBreadcrumbRow,
+    title
+  } = _ref;
+  let titleInnards;
   // eslint-disable-next-line
   // debugger;
 
-  var text = title.text,
-    content = title.content,
-    loading = title.loading,
-    icon = title.icon,
-    asText = title.asText,
-    onChange = title.onChange,
-    onSave = title.onSave,
-    editDescription = title.editDescription,
-    editableLabel = title.editableLabel,
-    cancelDescription = title.cancelDescription,
-    saveDescription = title.saveDescription,
-    _title$tooltipAlignme = title.tooltipAlignment,
-    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(title, _excluded);
-  var titleText;
-  var isEditable = !!onSave;
-  var titleRef = React.useRef();
-  var isEllipsisApplied = useOverflowString.useOverflowStringWidth(titleRef);
+  let {
+    text,
+    content,
+    loading,
+    icon,
+    asText,
+    onChange,
+    onSave,
+    editDescription,
+    editableLabel,
+    cancelDescription,
+    saveDescription,
+    tooltipAlignment = 'bottom',
+    ...rest
+  } = title;
+  let titleText;
+  let isEditable = !!onSave;
+  const titleRef = React.useRef();
+  const isEllipsisApplied = useOverflowString.useOverflowStringWidth(titleRef);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
-    var TitleIcon = icon;
-    var titleContent = /*#__PURE__*/React.createElement("span", {
+    const TitleIcon = icon;
+    const titleContent = /*#__PURE__*/React.createElement("span", {
       ref: titleRef,
-      className: "".concat(blockClass, "__titleText")
+      className: `${blockClass}__titleText`
     }, text);
     titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__title-icon-wrapper")
+      className: `${blockClass}__title-icon-wrapper`
     }, /*#__PURE__*/React.createElement(TitleIcon, {
-      className: "".concat(blockClass, "__title-icon")
+      className: `${blockClass}__title-icon`
     })) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
-      className: "".concat(blockClass, "__title-skeleton")
+      className: `${blockClass}__title-skeleton`
     }) : isEditable ? /*#__PURE__*/React.createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers.extends({
       tooltipAlignment: "bottom",
       value: text,
@@ -79,19 +80,25 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       openOnHover: false,
       align: tooltipAlignment,
       definition: text,
-      className: "".concat(blockClass, "__tooltip")
+      className: `${blockClass}__tooltip`
     }, titleContent) : titleContent);
   } else {
     titleInnards = content;
     titleText = asText;
   }
   return /*#__PURE__*/React.createElement("h1", {
-    className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
+    className: cx(`${blockClass}__title`, {
+      [`${blockClass}__title--editable`]: isEditable
+    }, {
+      [`${blockClass}__title--fades`]: hasBreadcrumbRow
+    }),
     title: titleText
   }, titleInnards);
 };
-var editInPlaceRequired = function editInPlaceRequired(_ref2) {
-  var onSave = _ref2.onSave;
+const editInPlaceRequired = _ref2 => {
+  let {
+    onSave
+  } = _ref2;
   return !!onSave;
 };
 PageHeaderTitle.propTypes = {

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
 var settings = require('../../settings.js');
@@ -15,7 +14,7 @@ var scrollableAncestor = require('../../global/js/utils/scrollableAncestor.js');
 var react = require('@carbon/react');
 
 var _SkeletonText;
-var blockClass = "".concat(settings.pkg.prefix, "--page-header");
+const blockClass = `${settings.pkg.prefix}--page-header`;
 
 /**
  * Assesses the vertical height of various elements and calls setMetrics with update
@@ -27,9 +26,9 @@ var blockClass = "".concat(settings.pkg.prefix, "--page-header");
  * @param {boolean} widthIsNarrow
  * @param {()} setMetrics
  */
-var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics) {
-  var dynamicRefs = {};
-  var getDynamicRef = function getDynamicRef(selector) {
+const utilCheckUpdateVerticalSpace = (headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics) => {
+  const dynamicRefs = {};
+  const getDynamicRef = selector => {
     // would love to do this differently but digging in the dom seems easier
     // than getting a ref to a conditionally rendered item
     /* don't know how to test resize */
@@ -37,7 +36,7 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     if (!headerRef.current) {
       return undefined;
     } else {
-      var dRef = dynamicRefs[selector];
+      let dRef = dynamicRefs[selector];
       /* istanbul ignore else */
       if (!dRef || /* istanbul ignore next */dRef.parentNode === null) {
         dynamicRefs[selector] = headerRef.current.querySelector(selector);
@@ -45,16 +44,16 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     }
     return dynamicRefs[selector];
   };
-  setMetrics(function (previous) {
+  setMetrics(previous => {
     // Utility function that checks the heights of various elements which are used to determine layout
-    var update = {};
-    var breadcrumbTitleEl = getDynamicRef(".".concat(blockClass, "__breadcrumb-title"));
-    var breadcrumbRowEl = getDynamicRef(".".concat(blockClass, "__breadcrumb-row"));
-    var titleRowEl = getDynamicRef(".".concat(blockClass, "__title-row"));
-    var subtitleRowEl = getDynamicRef(".".concat(blockClass, "__subtitle-row"));
-    var availableRowEl = getDynamicRef(".".concat(blockClass, "__available-row"));
-    var navigationRowEl = getDynamicRef(".".concat(blockClass, "__navigation-row"));
-    var pageActionsEl = getDynamicRef(".".concat(blockClass, "__page-actions"));
+    const update = {};
+    const breadcrumbTitleEl = getDynamicRef(`.${blockClass}__breadcrumb-title`);
+    const breadcrumbRowEl = getDynamicRef(`.${blockClass}__breadcrumb-row`);
+    const titleRowEl = getDynamicRef(`.${blockClass}__title-row`);
+    const subtitleRowEl = getDynamicRef(`.${blockClass}__subtitle-row`);
+    const availableRowEl = getDynamicRef(`.${blockClass}__available-row`);
+    const navigationRowEl = getDynamicRef(`.${blockClass}__navigation-row`);
+    const pageActionsEl = getDynamicRef(`.${blockClass}__page-actions`);
 
     /* istanbul ignore next */
     update.headerHeight = headerRef.current ? headerRef.current.clientHeight : 0;
@@ -64,13 +63,13 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     // The header offset is the vertical distance from the top of the document to
     // the page header, which we obtain using getBoundingClientRect() for robust
     // behavior. We use this offset as the scroll/fixed threshold.
-    var scrollableContainer = scrollableAncestor.scrollableAncestor(headerRef.current);
+    const scrollableContainer = scrollableAncestor.scrollableAncestor(headerRef.current);
 
     /* istanbul ignore next */
-    var scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
+    const scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
 
     /* istanbul ignore next */
-    var offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0;
+    const offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0;
 
     // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
     // top and the measuring ref top, or the difference between.
@@ -110,7 +109,7 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     }
 
     // if (window) {
-    var val;
+    let val;
     /* don't know how to test resize */
     /* istanbul ignore if */
     if (breadcrumbRowEl) {
@@ -131,15 +130,18 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
       // adjust headerTopValue when there are no page actions or action bar items (margin above title row)
       update.headerTopValue -= update.titleRowSpaceAbove;
     }
-    return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, previous), update);
+    return {
+      ...previous,
+      ...update
+    };
   });
 };
 
 // Trigger a window scroll, if necessary, to set the collapsed state.
-var utilSetCollapsed = function utilSetCollapsed(collapse, headerRef, headerOffset, headerTopValue) {
+const utilSetCollapsed = (collapse, headerRef, headerOffset, headerTopValue) => {
   /* don't know how to test resize */
   /* istanbul ignore else */
-  var scrollableTarget = scrollableAncestor.scrollableAncestor(headerRef.current);
+  let scrollableTarget = scrollableAncestor.scrollableAncestor(headerRef.current);
   if (collapse) {
     scrollableTarget.scrollTo({
       top: headerOffset - headerTopValue,
@@ -152,8 +154,8 @@ var utilSetCollapsed = function utilSetCollapsed(collapse, headerRef, headerOffs
     });
   }
 };
-var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(blockClass, collapseTitle, title) {
-  var breadcrumbTitle;
+const utilGetBreadcrumbItemForTitle = (blockClass, collapseTitle, title) => {
+  let breadcrumbTitle;
   if (title) {
     if (title.text !== undefined) {
       // Shape title provided
@@ -162,22 +164,23 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
         title: title.text
       };
     } else if (title.content !== undefined) {
-      var _ref, _title$breadcrumbCont;
       // user defined content
       breadcrumbTitle = {
-        label: (_ref = (_title$breadcrumbCont = title.breadcrumbContent) !== null && _title$breadcrumbCont !== void 0 ? _title$breadcrumbCont : title.content) !== null && _ref !== void 0 ? _ref : title.asText,
+        label: title.breadcrumbContent ?? title.content ?? title.asText,
         title: title.asText
       };
     } else {
       breadcrumbTitle = {
         label: title,
-        title: title
+        title
       };
     }
     if (breadcrumbTitle) {
       breadcrumbTitle.key = 'breadcrumb-title';
       breadcrumbTitle.isCurrentPage = true;
-      breadcrumbTitle.className = cx(["".concat(blockClass, "__breadcrumb-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
+      breadcrumbTitle.className = cx([`${blockClass}__breadcrumb-title`, {
+        [`${blockClass}__breadcrumb-title--pre-collapsed`]: collapseTitle
+      }]);
     }
     if (title.shortTitle) {
       breadcrumbTitle.shortTitle = title.shortTitle;

package/lib/components/ProductiveCard/ProductiveCard.d.ts

@@ -1,13 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-type ActionIcon = {
-    id?: string;
-    icon?: CarbonIconType;
-    onClick?: (event: MouseEvent) => void;
-    onKeydown?: (event: KeyboardEvent) => void;
-    iconDescription?: string;
-    href?: string;
-};
+import { ActionIcon } from '../Card/Card';
 type overflowAction = {
     id?: string;
     itemText?: string;
@@ -18,7 +11,7 @@ type PlacementType = 'top' | 'bottom';
 type ClickZoneType = 'one' | 'two' | 'three';
 export interface ProductiveCardProps extends PropsWithChildren {
     /**
-     * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+     * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
      */
     actionIcons?: ActionIcon[];
     /**
@@ -29,14 +22,10 @@ export interface ProductiveCardProps extends PropsWithChildren {
      * Determines if the action icons are on the top or bottom of the card
      */
     actionsPlacement?: PlacementType;
-    /**
-     * Content that shows in the body of the card
-     */
     /**
      * Optional user provided class
      */
     className?: string;
-    children: ReactNode;
     /**
      * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
      */

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -15,25 +15,25 @@ var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var Card = require('../Card/Card.js');
 
-var _excluded = ["actionsPlacement"];
-var componentName = 'ProductiveCard';
-exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$actionsPlacement = _ref.actionsPlacement,
-    actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
-  return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
-    actionsPlacement: actionsPlacement,
-    ref: ref,
+const componentName = 'ProductiveCard';
+exports.ProductiveCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    actionsPlacement = 'top',
+    ...rest
+  } = _ref;
+  const validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
+  return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, validProps, {
+    actionsPlacement,
+    ref,
     productive: true
-  }), devtools.getDevtoolsProps(componentName)));
+  }, devtools.getDevtoolsProps(componentName)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.ProductiveCard = settings.pkg.checkComponentEnabled(exports.ProductiveCard, componentName);
 exports.ProductiveCard.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
    */
   /**@ts-ignore */
   actionIcons: index.default.arrayOf(index.default.shape({
@@ -42,7 +42,13 @@ exports.ProductiveCard.propTypes = {
     onKeyDown: index.default.func,
     onClick: index.default.func,
     iconDescription: index.default.string,
-    href: index.default.string
+    /**
+     * @deprecated please use the `link.href` instead
+     */
+    href: index.default.string,
+    link: index.default.shape({
+      href: index.default.string.isRequired
+    })
   })),
   /**
    * Determines if the action icons are on the top or bottom of the card

package/lib/components/RemoveModal/RemoveModal.js

@@ -18,8 +18,7 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
-var componentName = 'RemoveModal';
+const componentName = 'RemoveModal';
 
 /**
 The `RemoveModal` covers what is known as high impact and medium impact deleting.
@@ -27,40 +26,39 @@ Enabling `textConfirmation` enables what would be considered the high impact sta
 For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
  */
 
-exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var body = _ref.body,
-    className = _ref.className,
-    iconDescription = _ref.iconDescription,
-    inputInvalidText = _ref.inputInvalidText,
-    inputLabelText = _ref.inputLabelText,
-    inputPlaceholderText = _ref.inputPlaceholderText,
-    label = _ref.label,
-    onClose = _ref.onClose,
-    onRequestSubmit = _ref.onRequestSubmit,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
-    primaryButtonDisabled = _ref.primaryButtonDisabled,
-    primaryButtonText = _ref.primaryButtonText,
-    primaryDangerDescription = _ref.primaryDangerDescription,
-    resourceName = _ref.resourceName,
-    secondaryButtonText = _ref.secondaryButtonText,
-    textConfirmation = _ref.textConfirmation,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var previousState = usePreviousValue.usePreviousValue({
-    open: open
+exports.RemoveModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    body,
+    className,
+    iconDescription,
+    inputInvalidText,
+    inputLabelText,
+    inputPlaceholderText,
+    label,
+    onClose,
+    onRequestSubmit,
+    open,
+    portalTarget: portalTargetIn,
+    preventCloseOnClickOutside,
+    primaryButtonDisabled,
+    primaryButtonText,
+    primaryDangerDescription,
+    resourceName,
+    secondaryButtonText,
+    textConfirmation,
+    title,
+    ...rest
+  } = _ref;
+  const previousState = usePreviousValue.usePreviousValue({
+    open
   });
-  var _useState = React.useState(''),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    userInput = _useState2[0],
-    setUserInput = _useState2[1];
-  var idRef = React.useRef(uuidv4.default());
-  var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
-  var onChangeHandler = function onChangeHandler(e) {
+  const [userInput, setUserInput] = React.useState('');
+  const idRef = React.useRef(uuidv4.default());
+  const renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  const onChangeHandler = e => {
     setUserInput(e.target.value);
   };
-  var checkPrimaryButtonDisabled = function checkPrimaryButtonDisabled() {
+  const checkPrimaryButtonDisabled = () => {
     // user control should be used primarily
     if (primaryButtonDisabled) {
       return true;
@@ -69,35 +67,34 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     return false;
   };
-  var primaryButtonStatus = checkPrimaryButtonDisabled();
-  var blockClass = "".concat(settings.pkg.prefix, "--remove-modal");
+  const primaryButtonStatus = checkPrimaryButtonDisabled();
+  const blockClass = `${settings.pkg.prefix}--remove-modal`;
 
   // Clear the user input this way so that if the onRequestSubmit handler fails for some reason
   // the value of the input will still remain: we only want to empty the input value
   // when open actually changes to false.
-  React.useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open) {
+  React.useEffect(() => {
+    if (!open && previousState?.open) {
       setUserInput('');
     }
-  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
+  }, [open, previousState?.open]);
   return renderPortalUse(/*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     size: "sm",
-    "aria-label": title
-  }, _rollupPluginBabelHelpers.objectSpread2({
-    open: open,
-    ref: ref,
-    preventCloseOnClickOutside: preventCloseOnClickOutside,
-    onClose: onClose
-  }, devtools.getDevtoolsProps(componentName))), /*#__PURE__*/React.createElement(react.ModalHeader, {
+    "aria-label": title,
+    open,
+    ref,
+    preventCloseOnClickOutside,
+    onClose
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.ModalHeader, {
     title: title,
     label: label,
     iconDescription: iconDescription
   }), /*#__PURE__*/React.createElement(react.ModalBody, null, typeof body === 'string' ? /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, body) : body, textConfirmation && /*#__PURE__*/React.createElement(react.TextInput, {
-    id: "".concat(idRef.current, "-confirmation-input"),
-    className: "".concat(blockClass, "__input"),
+    id: `${idRef.current}-confirmation-input`,
+    className: `${blockClass}__input`,
     invalidText: inputInvalidText,
     labelText: inputLabelText,
     placeholder: inputPlaceholderText,

package/lib/components/Saving/Saving.js

@@ -17,74 +17,69 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 var _ErrorFilled;
-var _excluded = ["secondaryButtonText", "className", "defaultIconDescription", "defaultText", "failIconDescription", "failText", "inProgressIconDescription", "inProgressText", "onRequestCancel", "onRequestSave", "status", "successIconDescription", "successText", "type"];
-var componentName = 'Saving';
-exports.Saving = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _statusObj$status, _statusObj$status2, _statusObj$status3, _statusObj$status4;
-  var secondaryButtonText = _ref.secondaryButtonText,
-    className = _ref.className,
-    defaultIconDescription = _ref.defaultIconDescription,
-    defaultText = _ref.defaultText,
-    failIconDescription = _ref.failIconDescription,
-    failText = _ref.failText,
-    inProgressIconDescription = _ref.inProgressIconDescription,
-    inProgressText = _ref.inProgressText,
-    onRequestCancel = _ref.onRequestCancel,
-    onRequestSave = _ref.onRequestSave,
-    status = _ref.status,
-    successIconDescription = _ref.successIconDescription,
-    successText = _ref.successText,
-    type = _ref.type,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var statusObj = _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+const componentName = 'Saving';
+exports.Saving = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    secondaryButtonText,
+    className,
+    defaultIconDescription,
+    defaultText,
+    failIconDescription,
+    failText,
+    inProgressIconDescription,
+    inProgressText,
+    onRequestCancel,
+    onRequestSave,
+    status,
+    successIconDescription,
+    successText,
+    type,
+    ...rest
+  } = _ref;
+  const statusObj = {
     default: {
       text: defaultText,
       iconDescription: defaultIconDescription,
-      icon: function icon(props) {
-        return /*#__PURE__*/React.createElement(icons.Save, _rollupPluginBabelHelpers.extends({
-          size: 16
-        }, props));
-      }
-    }
-  }, 'in-progress', {
-    text: inProgressText,
-    iconDescription: inProgressIconDescription,
-    icon: function icon(props) {
-      return /*#__PURE__*/React.createElement(react.InlineLoading, _rollupPluginBabelHelpers.extends({
+      icon: props => /*#__PURE__*/React.createElement(icons.Save, _rollupPluginBabelHelpers.extends({
         size: 16
-      }, props));
-    }
-  }), "success", {
-    text: successText,
-    iconDescription: successIconDescription,
-    icon: function icon(props) {
-      return /*#__PURE__*/React.createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers.extends({
+      }, props))
+    },
+    ['in-progress']: {
+      text: inProgressText,
+      iconDescription: inProgressIconDescription,
+      icon: props => /*#__PURE__*/React.createElement(react.InlineLoading, _rollupPluginBabelHelpers.extends({
         size: 16
-      }, props));
-    }
-  }), "fail", {
-    text: failText,
-    iconDescription: failIconDescription,
-    icon: function icon(props) {
-      return /*#__PURE__*/React.createElement(icons.ErrorOutline, _rollupPluginBabelHelpers.extends({
+      }, props))
+    },
+    success: {
+      text: successText,
+      iconDescription: successIconDescription,
+      icon: props => /*#__PURE__*/React.createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers.extends({
+        size: 16
+      }, props))
+    },
+    fail: {
+      text: failText,
+      iconDescription: failIconDescription,
+      icon: props => /*#__PURE__*/React.createElement(icons.ErrorOutline, _rollupPluginBabelHelpers.extends({
         size: 16
-      }, props));
+      }, props))
     }
-  });
-  var blockClass = "".concat(settings.pkg.prefix, "--saving");
+  };
+  const blockClass = `${settings.pkg.prefix}--saving`;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref,
     className: cx(blockClass, className)
   }, devtools.getDevtoolsProps(componentName)), type === 'auto' ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__message")
+    className: `${blockClass}__message`
   }, status === 'fail' && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__error-icon")
+    className: `${blockClass}__error-icon`
   }, _ErrorFilled || (_ErrorFilled = /*#__PURE__*/React.createElement(icons.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")
+    className: `${blockClass}__text`
+  }, statusObj[status]?.text)) : /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__buttons`
   }, /*#__PURE__*/React.createElement(react.Button, {
     onClick: onRequestCancel,
     kind: "secondary",
@@ -93,11 +88,11 @@ exports.Saving = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React.createElement(react.Button, {
     onClick: onRequestSave,
     kind: "primary",
-    renderIcon: (_statusObj$status2 = statusObj[status]) === null || _statusObj$status2 === void 0 ? void 0 : _statusObj$status2.icon,
-    iconDescription: (_statusObj$status3 = statusObj[status]) === null || _statusObj$status3 === void 0 ? void 0 : _statusObj$status3.iconDescription,
+    renderIcon: statusObj[status]?.icon,
+    iconDescription: statusObj[status]?.iconDescription,
     disabled: status === 'in-progress',
     type: "button"
-  }, (_statusObj$status4 = statusObj[status]) === null || _statusObj$status4 === void 0 ? void 0 : _statusObj$status4.text)));
+  }, statusObj[status]?.text)));
 });
 exports.Saving = settings.pkg.checkComponentEnabled(exports.Saving, componentName);
 exports.Saving.propTypes = {