@shopgate/engage 7.30.0-alpha.10 → 7.30.0-alpha.12

package/page/widgets/HeroBanner/HeroBanner.js

@@ -4,6 +4,7 @@ import { WidgetRichText, ResponsiveWidgetImage } from '@shopgate/engage/page/com
 import { makeStyles } from '@shopgate/engage/styles';
 import { useHeroBannerWidget } from "./hooks";
 import WidgetVideo from "../../components/WidgetVideo";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   link: {
     width: '100%'
@@ -63,31 +64,35 @@ const HeroBanner = () => {
   const handleImageRatioChange = useCallback(ratio => {
     setAspectRatio(ratio);
   }, []);
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: !!link,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
+    wrapper: children => /*#__PURE__*/_jsx(Link, {
       href: link,
-      className: classes.link
-    }, children)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.content,
-    style: contentStyle
-  }, /*#__PURE__*/React.createElement(WidgetRichText, {
-    content: text,
-    className: classes.richText
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.imageContainer
-  }, mediaType === 'image' ? /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-    src: mediaUrl,
-    alt: altText,
-    borderRadius: borderRadius,
-    enableParallax: parallax,
-    isBanner: imageFit === 'fillAndCrop',
-    onImageRatioChange: handleImageRatioChange
-  }) : null, mediaType === 'video' ? /*#__PURE__*/React.createElement(WidgetVideo, {
-    isBanner: true,
-    url: mediaUrl,
-    borderRadius: borderRadius
-  }) : null)));
+      className: classes.link,
+      children: children
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.content,
+      style: contentStyle,
+      children: [/*#__PURE__*/_jsx(WidgetRichText, {
+        content: text,
+        className: classes.richText
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classes.imageContainer,
+        children: [mediaType === 'image' ? /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+          src: mediaUrl,
+          alt: altText,
+          borderRadius: borderRadius,
+          enableParallax: parallax,
+          isBanner: imageFit === 'fillAndCrop',
+          onImageRatioChange: handleImageRatioChange
+        }) : null, mediaType === 'video' ? /*#__PURE__*/_jsx(WidgetVideo, {
+          isBanner: true,
+          url: mediaUrl,
+          borderRadius: borderRadius
+        }) : null]
+      })]
+    })
+  });
 };
 export default HeroBanner;

package/page/widgets/Image/Image.js

@@ -3,6 +3,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { Link, ConditionalWrapper } from '@shopgate/engage/components';
 import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
 import { useImageWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   link: {},
   image: {
@@ -26,18 +27,20 @@ const Image = () => {
     parallax
   } = useImageWidget();
   if (!url) return null;
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: !!link,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
+    wrapper: children => /*#__PURE__*/_jsx(Link, {
       href: link,
-      className: cx(classes.link)
-    }, children)
-  }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-    src: url,
-    alt: altText,
-    className: cx(classes.image),
-    borderRadius: borderRadius,
-    enableParallax: parallax
-  }));
+      className: cx(classes.link),
+      children: children
+    }),
+    children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+      src: url,
+      alt: altText,
+      className: cx(classes.image),
+      borderRadius: borderRadius,
+      enableParallax: parallax
+    })
+  });
 };
 export default Image;

package/page/widgets/ImageRow/ImageRow.js

@@ -3,6 +3,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { Link, ConditionalWrapper, Grid } from '@shopgate/engage/components';
 import { useImageRowWidget } from "./hooks";
 import ResponsiveWidgetImage from "../../components/ResponsiveWidgetImage";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
   imageSpacing,
   slidesPerViewCustomLarge,
@@ -82,30 +83,33 @@ const ImageRow = () => {
     slidesPerViewCustomSmall
   });
   if (!images || images.length === 0) return null;
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/_jsx(Grid, {
     className: classes.imageContainer,
-    component: "div"
-  }, images.map(img => /*#__PURE__*/React.createElement(Grid.Item, {
-    key: img.url,
     component: "div",
-    className: cx({
-      [classes.itemContainerDefault]: imageWrapping === 'responsiveDefault',
-      [classes.itemContainerDense]: imageWrapping === 'responsiveDense',
-      [classes.itemContainerNoWrap]: imageWrapping === 'responsiveNoWrap',
-      [classes.imageContainerCustom]: imageWrapping === 'responsiveCustom'
-    })
-  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: !!img.link,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
-      href: img.link,
-      className: classes.image
-    }, children)
-  }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-    src: img.url,
-    alt: img.altText,
-    className: classes.image,
-    borderRadius: borderRadius,
-    enableParallax: parallax
-  })))));
+    children: images.map(img => /*#__PURE__*/_jsx(Grid.Item, {
+      component: "div",
+      className: cx({
+        [classes.itemContainerDefault]: imageWrapping === 'responsiveDefault',
+        [classes.itemContainerDense]: imageWrapping === 'responsiveDense',
+        [classes.itemContainerNoWrap]: imageWrapping === 'responsiveNoWrap',
+        [classes.imageContainerCustom]: imageWrapping === 'responsiveCustom'
+      }),
+      children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+        condition: !!img.link,
+        wrapper: children => /*#__PURE__*/_jsx(Link, {
+          href: img.link,
+          className: classes.image,
+          children: children
+        }),
+        children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+          src: img.url,
+          alt: img.altText,
+          className: classes.image,
+          borderRadius: borderRadius,
+          enableParallax: parallax
+        })
+      })
+    }, img.url))
+  });
 };
 export default ImageRow;

package/page/widgets/ImageSlider/ImageSlider.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { Swiper, Link, ConditionalWrapper } from '@shopgate/engage/components';
 import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
 import { useImageSliderWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   image: {
     width: '100%',
@@ -27,25 +27,29 @@ const ImageSliderWidget = () => {
   if (slides.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Swiper, _extends({
-    indicators: true
-  }, swiperProps), slides.map(slide => {
-    if (!slide.image.url) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(Swiper.Item, {
-      key: slide.image.url
-    }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-      condition: !!slide.link,
-      wrapper: children => /*#__PURE__*/React.createElement(Link, {
-        href: slide.link
-      }, children)
-    }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-      className: classes.image,
-      src: slide.image.url,
-      alt: slide.image.altText || '',
-      borderRadius: borderRadius
-    })));
-  }));
+  return /*#__PURE__*/_jsx(Swiper, {
+    indicators: true,
+    ...swiperProps,
+    children: slides.map(slide => {
+      if (!slide.image.url) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(Swiper.Item, {
+        children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+          condition: !!slide.link,
+          wrapper: children => /*#__PURE__*/_jsx(Link, {
+            href: slide.link,
+            children: children
+          }),
+          children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+            className: classes.image,
+            src: slide.image.url,
+            alt: slide.image.altText || '',
+            borderRadius: borderRadius
+          })
+        })
+      }, slide.image.url);
+    })
+  });
 };
 export default ImageSliderWidget;

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -9,6 +9,7 @@ import { router } from '@virtuous/conductor';
 import CategoryPicker from "./components/Picker";
 import { useNestedCategoryFilterWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors,
   variables
@@ -126,34 +127,38 @@ const NestedCategoryFilter = () => {
       buttonCategoryId: !appendNewPicker ? subcategoryId : null
     });
   }, [maxDepth, state]);
-  const categoryPickers = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, state.pickers.slice(0, maxDepth).map((entry, index) => {
-    const {
-      categoryId,
-      selectedId
-    } = entry;
-    return /*#__PURE__*/React.createElement(CategoryPicker, {
-      key: `${categoryId}-${code}`,
-      categoryId: categoryId,
-      selectedId: selectedId,
-      onSelect: handleSelection,
-      label: labels[`level${index + 1}Label`] || ''
-    });
-  })), [code, handleSelection, labels, maxDepth, state.pickers]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.container
-  }, showHeadline && headline ? /*#__PURE__*/React.createElement(WidgetHeadline, {
-    headline: headline,
-    className: "widget__nested-category-filter__headline"
-  }) : null, categoryPickers, /*#__PURE__*/React.createElement("div", {
-    className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container')
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
-    className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
-    href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
-    disabled: !state.buttonCategoryId,
-    flat: false
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "common.show_products",
-    className: "widget__nested-category-filter__CTA-button__text"
-  }))));
+  const categoryPickers = useMemo(() => /*#__PURE__*/_jsx(_Fragment, {
+    children: state.pickers.slice(0, maxDepth).map((entry, index) => {
+      const {
+        categoryId,
+        selectedId
+      } = entry;
+      return /*#__PURE__*/_jsx(CategoryPicker, {
+        categoryId: categoryId,
+        selectedId: selectedId,
+        onSelect: handleSelection,
+        label: labels[`level${index + 1}Label`] || ''
+      }, `${categoryId}-${code}`);
+    })
+  }), [code, handleSelection, labels, maxDepth, state.pickers]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(classes.container, 'widget__nested-category-filter__container'),
+    children: [showHeadline && headline ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline,
+      className: "widget__nested-category-filter__headline"
+    }) : null, categoryPickers, /*#__PURE__*/_jsx("div", {
+      className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container'),
+      children: /*#__PURE__*/_jsx(ButtonLink, {
+        className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
+        href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
+        disabled: !state.buttonCategoryId,
+        flat: false,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.show_products",
+          className: "widget__nested-category-filter__CTA-button__text"
+        })
+      })
+    })]
+  });
 };
 export default NestedCategoryFilter;

package/page/widgets/NestedCategoryFilter/components/Picker/components/Sheet/index.js

@@ -1,8 +1,16 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SheetDrawer, SheetList } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import Item from "../SheetItem";
-
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  sheetList: {
+    '& li': {
+      margin: 0
+    }
+  }
+});
 /**
  * The CategorySheet component.
  * @param {Object} props The component props.
@@ -22,22 +30,26 @@ const CategorySheet = ({
   selectedId,
   onSelect
 }) => {
+  const {
+    classes
+  } = useStyles();
   const handleItemClick = useCallback(event => {
     event.stopPropagation();
     onSelect(event.target.value);
   }, [onSelect]);
-  return /*#__PURE__*/React.createElement(SheetDrawer, {
+  return /*#__PURE__*/_jsx(SheetDrawer, {
     title: label,
     isOpen: open,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(SheetList, {
-    className: "widget__nested-category-filter__sheet-list"
-  }, items.map(item => /*#__PURE__*/React.createElement(Item, {
-    item: item,
-    key: item.id,
-    onClick: handleItemClick,
-    isSelected: item.id === selectedId
-  }))));
+    onClose: onClose,
+    children: /*#__PURE__*/_jsx(SheetList, {
+      className: `widget__nested-category-filter__sheet-list ${classes.sheetList}`,
+      children: items.map(item => /*#__PURE__*/_jsx(Item, {
+        item: item,
+        onClick: handleItemClick,
+        isSelected: item.id === selectedId
+      }, item.id))
+    })
+  });
 };
 CategorySheet.defaultProps = {
   onClose: () => {},

package/page/widgets/NestedCategoryFilter/components/Picker/components/SheetItem/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/engage';
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors,
   variables
@@ -11,7 +12,7 @@ const boxShadowOffset = variables.gap.bigger;
 const useStyles = makeStyles()({
   button: {
     outline: 0,
-    padding: '16px 16px 16px 0',
+    padding: 16,
     textAlign: 'left',
     width: '100%',
     color: 'var(--color-text-high-emphasis)'
@@ -42,14 +43,15 @@ const SheetItem = ({
     classes,
     cx
   } = useStyles();
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_jsx("button", {
     className: cx(classes.button, {
       [classes.buttonSelected]: isSelected
     }, isSelected ? 'engage__nested-category-filter__sheet-item__selected' : 'engage__nested-category-filter__sheet-item'),
     value: item.id,
     onClick: onClick,
-    type: "button"
-  }, item.name);
+    type: "button",
+    children: item.name
+  });
 };
 SheetItem.defaultProps = {
   onClick() {},

package/page/widgets/NestedCategoryFilter/components/Picker/index.js

@@ -7,6 +7,7 @@ import { themeConfig } from '@shopgate/engage';
 import { i18n } from '@shopgate/engage/core/helpers';
 import Sheet from "./components/Sheet";
 import { getCategoriesById } from "../../../CategoryList/selectors";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -92,23 +93,28 @@ const CategoryPicker = ({
     onSelect(categoryId, subcategory);
     closeSheet();
   }, [categoryId, closeSheet, onSelect, subcategories]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    onClick: handlePickerClick,
-    className: cx(classes.button, {
-      [classes.buttonDisabled]: disabled
-    }, 'widget__nested-category-filter__category-picker')
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: classes.label
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: classes.selection
-  }, buttonLabel)), /*#__PURE__*/React.createElement(Sheet, {
-    items: subcategories || [],
-    onSelect: handleSheetSelect,
-    onClose: closeSheet,
-    open: sheetIsOpen,
-    selectedId: selectedId,
-    label: label
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      onClick: handlePickerClick,
+      className: cx(classes.button, {
+        [classes.buttonDisabled]: disabled
+      }, 'widget__nested-category-filter__category-picker'),
+      children: [label && /*#__PURE__*/_jsx("div", {
+        className: classes.label,
+        children: label
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.selection,
+        children: buttonLabel
+      })]
+    }), /*#__PURE__*/_jsx(Sheet, {
+      items: subcategories || [],
+      onSelect: handleSheetSelect,
+      onClose: closeSheet,
+      open: sheetIsOpen,
+      selectedId: selectedId,
+      label: label
+    })]
+  });
 };
 CategoryPicker.defaultProps = {
   categoryId: null,

package/page/widgets/Placeholder/Placeholder.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { usePlaceholderWidget } from "./hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: theme.spacing(2),
@@ -36,17 +37,20 @@ const PlaceholderWidget = () => {
     layout,
     visibility
   } = usePlaceholderWidget();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.name
-  }, name), /*#__PURE__*/React.createElement("pre", {
-    className: classes.pre
-  }, JSON.stringify({
-    code,
-    config,
-    layout,
-    visibility
-  }, null, 2)));
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.name,
+      children: name
+    }), /*#__PURE__*/_jsx("pre", {
+      className: classes.pre,
+      children: JSON.stringify({
+        code,
+        config,
+        layout,
+        visibility
+      }, null, 2)
+    })]
+  });
 };
 export default PlaceholderWidget;

package/page/widgets/ProductList/ProductList.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.regexp.flags.js";
 import React, { useCallback } from 'react';
 import { ActionButton, I18n } from '@shopgate/engage/components';
@@ -7,6 +6,7 @@ import { useWidgetProducts } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProductListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     // Prevent that the ActionButton margin messes with the layout of the sibling widgets
@@ -56,24 +56,28 @@ const ProductListWidget = () => {
     }
     fetchNext();
   }, [fetchNext, isPreview]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, showHeadline && headline && results.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
-    headline: headline
-  }) : null, /*#__PURE__*/React.createElement(ProductGrid, {
-    products: results,
-    flags: flags,
-    scope: "widgets",
-    infiniteLoad: false,
-    className: classes.grid
-  }), hasNext && showLoadMore && /*#__PURE__*/React.createElement(ActionButton, _extends({
-    loading: isFetching,
-    onClick: handleFetchNext
-    // Disable click delay in preview mode to enable stopping of propagation.
-  }, isPreview && {
-    disableClickDelay: true
-  }), /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "common.load_more"
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.root,
+    children: [showHeadline && headline && results.length ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline
+    }) : null, /*#__PURE__*/_jsx(ProductGrid, {
+      products: results,
+      flags: flags,
+      scope: "widgets",
+      infiniteLoad: false,
+      className: classes.grid
+    }), hasNext && showLoadMore && /*#__PURE__*/_jsx(ActionButton, {
+      loading: isFetching,
+      onClick: handleFetchNext
+      // Disable click delay in preview mode to enable stopping of propagation.
+      ,
+      ...(isPreview && {
+        disableClickDelay: true
+      }),
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "common.load_more"
+      })
+    })]
+  });
 };
 export default ProductListWidget;

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { ProductSlider } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
@@ -10,6 +9,7 @@ import WidgetHeadline from "../../components/WidgetHeadline";
  * The ProductSliderWidget is used to display a product slider.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ProductSliderWidget = () => {
   const {
     productsSearchType,
@@ -35,28 +35,32 @@ const ProductSliderWidget = () => {
   if (!productIds || !productIds.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHeadline && headline && productIds.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
-    headline: headline
-  }) : null, /*#__PURE__*/React.createElement(ProductSlider, _extends({
-    productIds: productIds,
-    scope: "widgets",
-    productItemProps: productItemProps,
-    slidesPerView: 2.3
-    // Improves interaction with the slider in the CMS preview iframe
-  }, isPreview ? {
-    touchStartPreventDefault: true
-  } : {}, {
-    breakpoints: {
-      [theme.breakpoints.values.sm]: {
-        slidesPerView: 3.3
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showHeadline && headline && productIds.length ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline
+    }) : null, /*#__PURE__*/_jsx(ProductSlider, {
+      productIds: productIds,
+      scope: "widgets",
+      productItemProps: productItemProps,
+      slidesPerView: 2.3
+      // Improves interaction with the slider in the CMS preview iframe
+      ,
+      ...(isPreview ? {
+        touchStartPreventDefault: true
+      } : {}),
+      breakpoints: {
+        [theme.breakpoints.values.sm]: {
+          slidesPerView: 3.3
+        },
+        [theme.breakpoints.values.md]: {
+          slidesPerView: 4.3
+        },
+        [theme.breakpoints.values.lg]: {
+          slidesPerView: 5.3
+        }
       },
-      [theme.breakpoints.values.md]: {
-        slidesPerView: 4.3
-      },
-      [theme.breakpoints.values.lg]: {
-        slidesPerView: 5.3
-      }
-    }
-  }, swiperProps)));
+      ...swiperProps
+    })]
+  });
 };
 export default ProductSliderWidget;

package/page/widgets/RichText/RichText.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { WidgetRichText } from '@shopgate/engage/page/components';
 import { useRichTextWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: theme.spacing(1)
@@ -20,7 +21,7 @@ const RichText = () => {
     classes
   } = useStyles();
   if (!richText) return null;
-  return /*#__PURE__*/React.createElement(WidgetRichText, {
+  return /*#__PURE__*/_jsx(WidgetRichText, {
     content: richText,
     className: cx(classes.root)
   });