@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -18,11 +18,9 @@ var InterstitialScreenHeader = require('./InterstitialScreenHeader.js');
 var InterstitialScreenBody = require('./InterstitialScreenBody.js');
 var InterstitialScreenFooter = require('./InterstitialScreenFooter.js');
 
-var _excluded = ["children", "className", "interstitialAriaLabel", "isFullScreen", "isOpen", "onClose"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
-var componentName = 'InterstitialScreen';
+const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
+const componentName = 'InterstitialScreen';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -37,7 +35,7 @@ var componentName = 'InterstitialScreen';
 
 // Define the type for InterstitialScreen, extending it to include Header
 
-var InterstitialScreenContext = /*#__PURE__*/React.createContext({
+const InterstitialScreenContext = /*#__PURE__*/React.createContext({
   progStep: 0,
   stepCount: 0
 });
@@ -47,84 +45,66 @@ var InterstitialScreenContext = /*#__PURE__*/React.createContext({
  * (e.g. upon first login or first time opening a page where a
  * newly purchased capability is presented).
  */
-exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    _props$interstitialAr = props.interstitialAriaLabel,
-    interstitialAriaLabel = _props$interstitialAr === void 0 ? 'Interstitial screen' : _props$interstitialAr,
-    _props$isFullScreen = props.isFullScreen,
-    isFullScreen = _props$isFullScreen === void 0 ? false : _props$isFullScreen,
-    _props$isOpen = props.isOpen,
-    isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
-    onClose = props.onClose,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var backupRef = React.useRef(null);
-  var _forwardedRef = ref || backupRef;
-  var scrollRef = React.useRef(undefined);
-  var startButtonRef = React.useRef(undefined);
-  var nextButtonRef = React.useRef(undefined);
-  var _useState = React.useState(null),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isVisibleClass = _useState2[0],
-    setIsVisibleClass = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    progStep = _useState4[0],
-    setProgStep = _useState4[1];
-  var bodyScrollRef = React.useRef(null);
-  var _useState5 = React.useState(0),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    stepCount = _useState6[0],
-    setStepCount = _useState6[1];
-  var _useState7 = React.useState({
-      skip: false,
-      back: false,
-      next: false,
-      start: false
-    }),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    disableButtonConfig = _useState8[0],
-    setDisableButtonConfig = _useState8[1];
-  var variantClass = isFullScreen ? "".concat(blockClass, "--full-screen") : "".concat(blockClass, "--modal");
-  var _useState9 = React.useState(null),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    bodyChildrenData = _useState10[0],
-    setBodyChildrenData = _useState10[1];
-  var handleClose = React.useCallback(function (actionName) {
+exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    interstitialAriaLabel = 'Interstitial screen',
+    isFullScreen = false,
+    isOpen = false,
+    onClose,
+    ...rest
+  } = props;
+  const backupRef = React.useRef(null);
+  const _forwardedRef = ref || backupRef;
+  const scrollRef = React.useRef(undefined);
+  const startButtonRef = React.useRef(undefined);
+  const nextButtonRef = React.useRef(undefined);
+  const [isVisibleClass, setIsVisibleClass] = React.useState(null);
+  const [progStep, setProgStep] = React.useState(0);
+  const bodyScrollRef = React.useRef(null);
+  const [stepCount, setStepCount] = React.useState(0);
+  const [disableButtonConfig, setDisableButtonConfig] = React.useState({
+    skip: false,
+    back: false,
+    next: false,
+    start: false
+  });
+  const variantClass = isFullScreen ? `${blockClass}--full-screen` : `${blockClass}--modal`;
+  const [bodyChildrenData, setBodyChildrenData] = React.useState(null);
+  const handleClose = React.useCallback(actionName => {
     setProgStep(0);
-    onClose === null || onClose === void 0 || onClose(actionName !== null && actionName !== void 0 ? actionName : 'close');
+    onClose?.(actionName ?? 'close');
   }, [onClose]);
-  React.useEffect(function () {
-    var _startButtonRef$curre;
+  React.useEffect(() => {
     if (!isOpen) {
       setProgStep(0);
     }
-    (_startButtonRef$curre = startButtonRef.current) === null || _startButtonRef$curre === void 0 || _startButtonRef$curre.focus();
+    startButtonRef.current?.focus();
   }, [isOpen, progStep, onClose]);
-  React.useEffect(function () {
-    var _nextButtonRef$curren;
+  React.useEffect(() => {
     // for modal only, "is-visible" triggers animation
     setIsVisibleClass(!isFullScreen && isOpen ? 'is-visible' : null);
-    nextButtonRef === null || nextButtonRef === void 0 || (_nextButtonRef$curren = nextButtonRef.current) === null || _nextButtonRef$curren === void 0 || _nextButtonRef$curren.focus();
+    nextButtonRef?.current?.focus();
   }, [isFullScreen, isOpen]);
 
   // hitting escape key also closes this component
-  React.useEffect(function () {
-    var close = function close(e) {
-      var key = e.key;
+  React.useEffect(() => {
+    const close = e => {
+      const {
+        key
+      } = e;
       if (key === 'Escape') {
         handleClose('close');
       }
     };
     window.addEventListener('keydown', close);
-    return function () {
-      return window.removeEventListener('keydown', close);
-    };
+    return () => window.removeEventListener('keydown', close);
   }, [handleClose]);
   if (!isOpen) {
     return null;
   }
-  var renderModal = function renderModal() {
+  const renderModal = () => {
     return /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       preventCloseOnClickOutside: true,
       className: cx(blockClass,
@@ -138,7 +118,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
       "aria-label": interstitialAriaLabel
     }, devtools.getDevtoolsProps(componentName)), children);
   };
-  var renderFullScreen = function renderFullScreen() {
+  const renderFullScreen = () => {
     return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
       className: cx(blockClass,
       // Apply the block class to the main HTML element
@@ -149,36 +129,35 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
       "aria-label": interstitialAriaLabel,
       ref: ref
     }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--container")
+      className: `${blockClass}--container`
     }, children));
   };
-  var handleGotoStep = function handleGotoStep(targetStep) {
+  const handleGotoStep = targetStep => {
     setProgStep(targetStep);
     scrollRef.current.scrollToView(targetStep);
     scrollBodyToTop();
   };
-  var scrollBodyToTop = function scrollBodyToTop() {
-    var _bodyScrollRef$curren, _bodyScrollRef$curren2;
-    (_bodyScrollRef$curren = bodyScrollRef.current) === null || _bodyScrollRef$curren === void 0 || (_bodyScrollRef$curren2 = _bodyScrollRef$curren.scroll) === null || _bodyScrollRef$curren2 === void 0 || _bodyScrollRef$curren2.call(_bodyScrollRef$curren, {
+  const scrollBodyToTop = () => {
+    bodyScrollRef.current?.scroll?.({
       top: 0,
       behavior: 'smooth'
     });
   };
   return /*#__PURE__*/React.createElement(InterstitialScreenContext.Provider, {
     value: {
-      bodyChildrenData: bodyChildrenData,
-      setBodyChildrenData: setBodyChildrenData,
-      isFullScreen: isFullScreen,
-      handleClose: handleClose,
-      progStep: progStep,
-      setProgStep: setProgStep,
-      bodyScrollRef: bodyScrollRef,
-      scrollRef: scrollRef,
-      handleGotoStep: handleGotoStep,
-      stepCount: stepCount,
-      setStepCount: setStepCount,
-      disableButtonConfig: disableButtonConfig,
-      setDisableButtonConfig: setDisableButtonConfig
+      bodyChildrenData,
+      setBodyChildrenData,
+      isFullScreen,
+      handleClose,
+      progStep,
+      setProgStep,
+      bodyScrollRef,
+      scrollRef,
+      handleGotoStep,
+      stepCount,
+      setStepCount,
+      disableButtonConfig,
+      setDisableButtonConfig
     }
   }, isFullScreen ? renderFullScreen() : renderModal());
 });

package/lib/components/InterstitialScreen/InterstitialScreenBody.js

@@ -18,83 +18,77 @@ var settings = require('../../settings.js');
 var Carousel = require('../Carousel/Carousel.js');
 require('../Carousel/CarouselItem.js');
 
-var _excluded = ["className", "contentRenderer"];
-var InterstitialScreenBody = /*#__PURE__*/React.forwardRef(function (props) {
-  var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    contentRenderer = props.contentRenderer,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
-  var bodyBlockClass = "".concat(blockClass, "--internal-body");
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isMultiStep = _useState2[0],
-    setIsMultiStep = _useState2[1];
-  var _useContext = React.useContext(InterstitialScreen.InterstitialScreenContext),
-    setBodyChildrenData = _useContext.setBodyChildrenData,
-    bodyChildrenData = _useContext.bodyChildrenData,
-    isFullScreen = _useContext.isFullScreen,
-    setProgStep = _useContext.setProgStep,
-    bodyScrollRef = _useContext.bodyScrollRef,
-    scrollRef = _useContext.scrollRef,
-    handleGotoStep = _useContext.handleGotoStep,
-    progStep = _useContext.progStep,
-    setStepCount = _useContext.setStepCount,
-    disableButtonConfig = _useContext.disableButtonConfig,
-    setDisableButtonConfig = _useContext.setDisableButtonConfig;
-  var _useState3 = React.useState(-1),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    scrollPercent = _useState4[0],
-    setScrollPercent = _useState4[1];
-  React.useEffect(function () {
-    var _bodyContent = contentRenderer({
-      handleGotoStep: handleGotoStep,
-      progStep: progStep,
-      disableActionButton: disableActionButton
+const InterstitialScreenBody = /*#__PURE__*/React.forwardRef(props => {
+  const {
+    className = '',
+    contentRenderer,
+    ...rest
+  } = props;
+  const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
+  const bodyBlockClass = `${blockClass}--internal-body`;
+  const [isMultiStep, setIsMultiStep] = React.useState(false);
+  const {
+    setBodyChildrenData,
+    bodyChildrenData,
+    isFullScreen,
+    setProgStep,
+    bodyScrollRef,
+    scrollRef,
+    handleGotoStep,
+    progStep,
+    setStepCount,
+    disableButtonConfig,
+    setDisableButtonConfig
+  } = React.useContext(InterstitialScreen.InterstitialScreenContext);
+  const [scrollPercent, setScrollPercent] = React.useState(-1);
+  React.useEffect(() => {
+    const _bodyContent = contentRenderer({
+      handleGotoStep,
+      progStep,
+      disableActionButton
     });
-    var isElement = /*#__PURE__*/React.isValidElement(_bodyContent);
-    var children = isElement ? _bodyContent.props.children : _bodyContent;
+    const isElement = /*#__PURE__*/React.isValidElement(_bodyContent);
+    const children = isElement ? _bodyContent.props.children : _bodyContent;
 
     // Set body children data
-    setBodyChildrenData === null || setBodyChildrenData === void 0 || setBodyChildrenData(children);
+    setBodyChildrenData?.(children);
 
     // If the children is an array, treat it as a multiStep
     if (isElement && Array.isArray(children)) {
-      var stepLength = children.length;
+      const stepLength = children.length;
       setIsMultiStep(!!stepLength);
-      setStepCount === null || setStepCount === void 0 || setStepCount(stepLength);
+      setStepCount?.(stepLength);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [progStep]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (scrollPercent !== -1) {
-      var stepSize = bodyChildrenData && bodyChildrenData.length > 1 ? parseFloat((1 / (bodyChildrenData.length - 1)).toFixed(2)) : 0;
-      var currentStep = scrollPercent / stepSize;
-      setProgStep === null || setProgStep === void 0 || setProgStep(Math.ceil(currentStep));
+      const stepSize = bodyChildrenData && bodyChildrenData.length > 1 ? parseFloat((1 / (bodyChildrenData.length - 1)).toFixed(2)) : 0;
+      const currentStep = scrollPercent / stepSize;
+      setProgStep?.(Math.ceil(currentStep));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrollPercent]);
-  var disableActionButton = function disableActionButton(config) {
-    setDisableButtonConfig === null || setDisableButtonConfig === void 0 || setDisableButtonConfig(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, disableButtonConfig), config));
-  };
-  var onScrollHandler = function onScrollHandler(scrollPercent) {
-    return setScrollPercent(scrollPercent);
-  };
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-      className: "".concat(blockClass, "--body ").concat(className),
-      ref: bodyScrollRef
-    }, rest), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--content")
-    }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__carousel")
-    }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
-      disableArrowScroll: true,
-      ref: scrollRef,
-      onScroll: onScrollHandler
-    }, bodyChildrenData)) : bodyChildrenData));
+  const disableActionButton = config => {
+    setDisableButtonConfig?.({
+      ...disableButtonConfig,
+      ...config
+    });
   };
+  const onScrollHandler = scrollPercent => setScrollPercent(scrollPercent);
+  const renderBody = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: `${blockClass}--body ${className}`,
+    ref: bodyScrollRef
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--content`
+  }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__carousel`
+  }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
+    disableArrowScroll: true,
+    ref: scrollRef,
+    onScroll: onScrollHandler
+  }, bodyChildrenData)) : bodyChildrenData));
   return isFullScreen ? renderBody() : /*#__PURE__*/React.createElement(react.ModalBody, {
     className: bodyBlockClass
   }, renderBody());

package/lib/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -19,84 +19,55 @@ var clamp = require('../../global/js/utils/clamp.js');
 var icons = require('@carbon/react/icons');
 
 var _InlineLoading, _InlineLoading2, _InlineLoading3, _InlineLoading4;
-var InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(function (props) {
-  var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$skipButtonLabe = props.skipButtonLabel,
-    skipButtonLabel = _props$skipButtonLabe === void 0 ? 'Skip' : _props$skipButtonLabe,
-    _props$previousButton = props.previousButtonLabel,
-    previousButtonLabel = _props$previousButton === void 0 ? 'Back' : _props$previousButton,
-    _props$nextButtonLabe = props.nextButtonLabel,
-    nextButtonLabel = _props$nextButtonLabe === void 0 ? 'Next' : _props$nextButtonLabe,
-    _props$startButtonLab = props.startButtonLabel,
-    startButtonLabel = _props$startButtonLab === void 0 ? 'Get Started' : _props$startButtonLab,
-    actionButtonRenderer = props.actionButtonRenderer,
-    onAction = props.onAction;
-  var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
-  var _useContext = React.useContext(InterstitialScreen.InterstitialScreenContext),
-    handleClose = _useContext.handleClose,
-    progStep = _useContext.progStep,
-    handleGotoStep = _useContext.handleGotoStep,
-    stepCount = _useContext.stepCount,
-    disableButtonConfig = _useContext.disableButtonConfig,
-    isFullScreen = _useContext.isFullScreen;
-  var startButtonRef = React.useRef(undefined);
-  var nextButtonRef = React.useRef(undefined);
-  var _useState = React.useState(''),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    loadingAction = _useState2[0],
-    setLoadingAction = _useState2[1];
-  var isMultiStep = !!stepCount;
-  var progStepFloor = 0;
-  var progStepCeil = stepCount - 1;
-  var handleAction = /*#__PURE__*/function () {
-    var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(actionType) {
-      var stepDelta, targetStep;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setLoadingAction(actionType);
-            _context.next = 3;
-            return onAction === null || onAction === void 0 ? void 0 : onAction(actionType, {
-              handleGotoStep: handleGotoStep,
-              progStep: progStep,
-              stepCount: stepCount,
-              disableButtonConfig: disableButtonConfig
-            });
-          case 3:
-            setLoadingAction('');
-            if (actionType === 'next' || actionType === 'back') {
-              stepDelta = actionType === 'next' ? 1 : -1;
-              targetStep = clamp.clamp(progStep + stepDelta, progStepFloor, progStepCeil);
-              handleGotoStep === null || handleGotoStep === void 0 || handleGotoStep(targetStep);
-            } else {
-              handleClose === null || handleClose === void 0 || handleClose(actionType);
-            }
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function handleAction(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(props => {
+  const {
+    className = '',
+    skipButtonLabel = 'Skip',
+    previousButtonLabel = 'Back',
+    nextButtonLabel = 'Next',
+    startButtonLabel = 'Get Started',
+    actionButtonRenderer,
+    onAction
+  } = props;
+  const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
+  const {
+    handleClose,
+    progStep,
+    handleGotoStep,
+    stepCount,
+    disableButtonConfig,
+    isFullScreen
+  } = React.useContext(InterstitialScreen.InterstitialScreenContext);
+  const startButtonRef = React.useRef(undefined);
+  const nextButtonRef = React.useRef(undefined);
+  const [loadingAction, setLoadingAction] = React.useState('');
+  const isMultiStep = !!stepCount;
+  const progStepFloor = 0;
+  const progStepCeil = stepCount - 1;
+  const handleAction = async actionType => {
+    setLoadingAction(actionType);
+    await onAction?.(actionType, {
+      handleGotoStep,
+      progStep,
+      stepCount,
+      disableButtonConfig
+    });
+    setLoadingAction('');
+    if (actionType === 'next' || actionType === 'back') {
+      const stepDelta = actionType === 'next' ? 1 : -1;
+      const targetStep = clamp.clamp(progStep + stepDelta, progStepFloor, progStepCeil);
+      handleGotoStep?.(targetStep);
+    } else {
+      handleClose?.(actionType);
+    }
+  };
 
   // Usage
-  var handleStart = function handleStart() {
-    return handleAction('start');
-  };
-  var handleSkip = function handleSkip() {
-    return handleAction('skip');
-  };
-  var handleClickNext = function handleClickNext() {
-    return handleAction('next');
-  };
-  var handleClickPrev = function handleClickPrev() {
-    return handleAction('back');
-  };
-  var getRenderIcon = React.useMemo(function () {
+  const handleStart = () => handleAction('start');
+  const handleSkip = () => handleAction('skip');
+  const handleClickNext = () => handleAction('next');
+  const handleClickPrev = () => handleAction('back');
+  const getRenderIcon = React.useMemo(() => {
     if (loadingAction !== 'start' && isMultiStep && progStep === progStepCeil) {
       return {
         renderIcon: icons.ArrowRight
@@ -104,50 +75,48 @@ var InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(function (props) {
     }
     return {};
   }, [loadingAction, isMultiStep, progStep, progStepCeil]);
-  var getFooterContent = function getFooterContent() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--footer ").concat(className)
-    }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--skip-btn"),
-      kind: "ghost",
-      size: "lg",
-      title: skipButtonLabel,
-      onClick: handleSkip,
-      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.skip
-    }, skipButtonLabel, loadingAction === 'skip' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--footer-controls")
-    }, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--prev-btn"),
-      kind: "secondary",
-      size: "lg",
-      title: previousButtonLabel,
-      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.back,
-      onClick: handleClickPrev
-    }, previousButtonLabel, loadingAction === 'back' && (_InlineLoading2 || (_InlineLoading2 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--next-btn"),
-      renderIcon: loadingAction !== 'next' ? icons.ArrowRight : null,
-      ref: nextButtonRef,
-      size: "lg",
-      title: nextButtonLabel,
-      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.next,
-      onClick: handleClickNext
-    }, nextButtonLabel, loadingAction === 'next' && (_InlineLoading3 || (_InlineLoading3 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), (isMultiStep && progStep === progStepCeil || !isMultiStep) && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
-      className: "".concat(blockClass, "--start-btn"),
-      ref: startButtonRef,
-      size: "lg",
-      title: startButtonLabel,
-      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.start,
-      onClick: handleStart
-    }, getRenderIcon), startButtonLabel, loadingAction === 'start' && (_InlineLoading4 || (_InlineLoading4 = /*#__PURE__*/React.createElement(react.InlineLoading, null))))));
-  };
+  const getFooterContent = () => /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--footer ${className}`
+  }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
+    className: `${blockClass}--skip-btn`,
+    kind: "ghost",
+    size: "lg",
+    title: skipButtonLabel,
+    onClick: handleSkip,
+    disabled: disableButtonConfig?.skip
+  }, skipButtonLabel, loadingAction === 'skip' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--footer-controls`
+  }, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
+    className: `${blockClass}--prev-btn`,
+    kind: "secondary",
+    size: "lg",
+    title: previousButtonLabel,
+    disabled: disableButtonConfig?.back,
+    onClick: handleClickPrev
+  }, previousButtonLabel, loadingAction === 'back' && (_InlineLoading2 || (_InlineLoading2 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React.createElement(react.Button, {
+    className: `${blockClass}--next-btn`,
+    renderIcon: loadingAction !== 'next' ? icons.ArrowRight : null,
+    ref: nextButtonRef,
+    size: "lg",
+    title: nextButtonLabel,
+    disabled: disableButtonConfig?.next,
+    onClick: handleClickNext
+  }, nextButtonLabel, loadingAction === 'next' && (_InlineLoading3 || (_InlineLoading3 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), (isMultiStep && progStep === progStepCeil || !isMultiStep) && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
+    className: `${blockClass}--start-btn`,
+    ref: startButtonRef,
+    size: "lg",
+    title: startButtonLabel,
+    disabled: disableButtonConfig?.start,
+    onClick: handleStart
+  }, getRenderIcon), startButtonLabel, loadingAction === 'start' && (_InlineLoading4 || (_InlineLoading4 = /*#__PURE__*/React.createElement(react.InlineLoading, null))))));
   if (actionButtonRenderer) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--footer")
+      className: `${blockClass}--footer`
     }, actionButtonRenderer({
-      handleGotoStep: handleGotoStep,
-      progStep: progStep,
-      stepCount: stepCount,
-      disableButtonConfig: disableButtonConfig
+      handleGotoStep,
+      progStep,
+      stepCount,
+      disableButtonConfig
     }));
   }
   return isFullScreen ? getFooterContent() : /*#__PURE__*/React.createElement(react.ModalFooter, null, getFooterContent());