@shopgate/engage 7.29.0-alpha.8 → 7.29.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.0-alpha.8",
+  "version": "7.29.0-alpha.9",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.29.0-alpha.8",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.8",
-    "@shopgate/pwa-core": "7.29.0-alpha.8",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.8",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.8",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.8",
+    "@shopgate/pwa-common": "7.29.0-alpha.9",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.9",
+    "@shopgate/pwa-core": "7.29.0-alpha.9",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.9",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.9",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.9",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -4,4 +4,4 @@ var _excluded=["src","alt","breakpoint"];function _extends(){_extends=Object.ass
  *
  * @param {ResponsiveImageProps} props The component props.
  * @returns {JSX.Element}
- */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,imgProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),breakpoints=_useTheme.breakpoints;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);return React.createElement("picture",null,React.createElement("source",{media:"(width >= ".concat(breakpoints.values[breakpoint],"px)"),srcSet:src2x}),React.createElement("img",_extends({src:src,alt:alt,loading:"lazy"},imgProps)));};ResponsiveWidgetImage.defaultProps={alt:null,breakpoint:'md'};export default ResponsiveWidgetImage;
+ */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,imgProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),breakpoints=_useTheme.breakpoints;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);if(!src){return null;}return React.createElement("picture",null,React.createElement("source",{media:"(width >= ".concat(breakpoints.values[breakpoint],"px)"),srcSet:src2x}),React.createElement("img",_extends({src:src,alt:alt,loading:"lazy"},imgProps)));};ResponsiveWidgetImage.defaultProps={alt:null,breakpoint:'md'};export default ResponsiveWidgetImage;

package/page/components/WidgetHeadline/WidgetHeadline.js

@@ -3,5 +3,5 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {Object} props The component props.
  * @param {Object} props.headline The headline props.
  * @returns {JSX.Element}
- */var WidgetHeadline=function WidgetHeadline(_ref){var headline=_ref.headline,className=_ref.className;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css;var _headline$typography=headline.typography,typography=_headline$typography===void 0?'h3':_headline$typography,text=headline.text,textAlign=headline.textAlign,bold=headline.bold,italic=headline.italic,underline=headline.underline;var styles=useMemo(function(){return _extends({},bold&&{fontWeight:'bold'},{},italic&&{fontStyle:'italic'},{},underline&&{textDecoration:'underline'});},[bold,italic,underline]);if(!text)return null;return React.createElement(Typography,{variant:typography,align:textAlign// && increases the specificity of the styles which guarantees that defaults are overridden
+ */var WidgetHeadline=function WidgetHeadline(_ref){var headline=_ref.headline,className=_ref.className;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css;var _ref2=headline||{},_ref2$typography=_ref2.typography,typography=_ref2$typography===void 0?'h3':_ref2$typography,text=_ref2.text,textAlign=_ref2.textAlign,bold=_ref2.bold,italic=_ref2.italic,underline=_ref2.underline;var styles=useMemo(function(){return _extends({},bold&&{fontWeight:'bold'},{},italic&&{fontStyle:'italic'},{},underline&&{textDecoration:'underline'});},[bold,italic,underline]);if(!text)return null;return React.createElement(Typography,{variant:typography,align:textAlign// && increases the specificity of the styles which guarantees that defaults are overridden
 ,className:cx(css({'&&':_extends({},styles)}),classes.root,className)},text);};WidgetHeadline.defaultProps={className:null};export default WidgetHeadline;

package/page/components/WidgetRichText/WidgetRichText.js

@@ -0,0 +1,6 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme){return{root:{width:'100%','& > :first-child':{marginTop:0},'& > :last-child':{marginBottom:0},'& p':{margin:'0px 0px 1rem 0px',':empty':{minHeight:'1rem'}},'ul, ol':{paddingLeft:'40px'},'ul li':{listStyleType:'disc'},'ol li':{listStyleType:'decimal'},h1:_extends({},theme.typography.h1,{margin:'0px 0px 1rem 0px'}),h2:_extends({},theme.typography.h2,{margin:'0px 0px 1rem 0px'}),h3:_extends({},theme.typography.h3,{margin:'0px 0px 1rem 0px'}),h4:_extends({},theme.typography.h4,{margin:'0px 0px 1rem 0px'}),h5:_extends({},theme.typography.h5,{margin:'0px 0px 1rem 0px'}),h6:_extends({},theme.typography.h6,{margin:'0px 0px 1rem 0px'})}};});/**
+ * @param {Object} props The component props.
+ * @param {string} props.content The rich text content.
+ * @param {string} [props.className] An optional class name.
+ * @returns {JSX.Element}
+ */var WidgetRichText=function WidgetRichText(_ref){var content=_ref.content,className=_ref.className;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;if(!content)return null;return React.createElement(HtmlSanitizer,{processStyles:true,settings:{html:content},className:cx(classes.root,className)},content);};WidgetRichText.defaultProps={content:'',className:null};export default WidgetRichText;

package/page/components/WidgetRichText/index.js

@@ -0,0 +1 @@
+export{default}from"./WidgetRichText";

package/page/components/index.js

@@ -1 +1 @@
-export{default as NotFound}from"./NotFound";export{default as Widgets}from"./Widgets";export{default as ResponsiveWidgetImage}from"./ResponsiveWidgetImage";
+export{default as NotFound}from"./NotFound";export{default as Widgets}from"./Widgets";export{default as ResponsiveWidgetImage}from"./ResponsiveWidgetImage";export{default as WidgetRichText}from"./WidgetRichText";

package/page/widgets/HeroBanner/HeroBanner.js

@@ -0,0 +1,3 @@
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import{ConditionalWrapper,Link}from'@shopgate/engage/components';import{WidgetRichText,ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{makeStyles}from'@shopgate/engage/styles';import{useHeroBannerWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{link:{width:'100%'},content:_defineProperty({width:'100%',position:'relative',display:'flex',alignItems:'center',minHeight:300},theme.breakpoints.up('md'),{minHeight:400}),richText:{position:'relative',zIndex:2,padding:theme.spacing(2)},image:{position:'absolute',width:'100%',height:'100%',top:0,left:0,objectFit:'cover',zIndex:0,pointerEvents:'none'}};});/**
+ * @returns {JSX.Element}
+ */var HeroBanner=function HeroBanner(){var _useHeroBannerWidget=useHeroBannerWidget(),text=_useHeroBannerWidget.text,backgroundImage=_useHeroBannerWidget.backgroundImage,link=_useHeroBannerWidget.link;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement("div",{className:cx(classes.content)},React.createElement(WidgetRichText,{content:text,className:cx(classes.richText)}),React.createElement(ResponsiveWidgetImage,{src:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url,alt:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt,className:cx(classes.image)})));};export default HeroBanner;

package/page/widgets/HeroBanner/hooks.js

@@ -0,0 +1,14 @@
+import{useWidget}from'@shopgate/engage/page/hooks';/**
+ * @typedef {Object} HeroBanner
+ * @property {string} text Banner text content
+ * @property {Object} backgroundImage Banner background image
+ * @property {string} backgroundImage.url Banner background image URL
+ * @property {string} backgroundImage.alt Banner background image alt text
+ * @property {string} link Optional banner link
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ *   .useWidget<HeroBanner> >} UseWidgetReturnType
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the Image widget configuration and data.
+ */export var useHeroBannerWidget=function useHeroBannerWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;return config;};

package/page/widgets/HeroBanner/index.js

@@ -0,0 +1 @@
+export{default}from"./HeroBanner";

package/page/widgets/ImageRow/ImageRow.js

@@ -1,4 +1,4 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper,Grid}from'@shopgate/engage/components';import{useImageWidget}from"./hooks";import ResponsiveWidgetImage from"../../components/ResponsiveWidgetImage";var useStyles=makeStyles()(function(theme){return{imageContainer:{width:'100%',display:'flex',overflowX:'hidden',alignItems:'flex-start',flexWrap:'wrap'},image:{maxWidth:'100%',height:'auto',flexShrink:1,display:'block',width:'100%',objectFit:'contain'},itemContainerDense:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:'1 1 33%'}),theme.breakpoints.up('md'),{flex:'1 1 16%'}),itemContainerDefault:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:'1 1 50%'}),theme.breakpoints.up('md'),{flex:'1 1 25%'}),itemContainerNoWrap:{flex:' 1 1 0%'}};});/**
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper,Grid}from'@shopgate/engage/components';import{useImageRowWidget}from"./hooks";import ResponsiveWidgetImage from"../../components/ResponsiveWidgetImage";var useStyles=makeStyles()(function(theme,_ref){var imageSpacing=_ref.imageSpacing;return{imageContainer:{width:'100%',display:'flex',overflowX:'hidden',alignItems:'flex-start',flexWrap:'wrap',gap:"".concat(imageSpacing,"px")},image:{maxWidth:'100%',height:'auto',flexShrink:1,display:'block',width:'100%',objectFit:'contain'},itemContainerDense:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:"1 1 calc(33% - ".concat(imageSpacing,"px)")}),theme.breakpoints.up('md'),{flex:"1 1 calc(16% - ".concat(imageSpacing,"px)")}),itemContainerDefault:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:"1 1 calc(50% - ".concat(imageSpacing,"px)")}),theme.breakpoints.up('md'),{flex:"1 1 calc(25% - ".concat(imageSpacing,"px)")}),itemContainerNoWrap:{flex:' 1 1 0%'}};});/**
  * The ImageRowWidget is used to display images in one or more rows.
  * @returns {JSX.Element}
- */var ImageRow=function ImageRow(){var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;var _useImageWidget=useImageWidget(),images=_useImageWidget.images,imageWrapping=_useImageWidget.imageWrapping;if(images.length===0)return null;return React.createElement(Grid,{className:cx(classes.imageContainer),component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:cx(classes.image)},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:cx(classes.image)})));}));};export default ImageRow;
+ */var ImageRow=function ImageRow(){var _useImageRowWidget=useImageRowWidget(),images=_useImageRowWidget.images,imageWrapping=_useImageRowWidget.imageWrapping,imageSpacing=_useImageRowWidget.imageSpacing;var _useStyles=useStyles({imageSpacing:imageSpacing}),cx=_useStyles.cx,classes=_useStyles.classes;if(images.length===0)return null;return React.createElement(Grid,{className:cx(classes.imageContainer),component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:cx(classes.image)},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:cx(classes.image)})));}));};export default ImageRow;

package/page/widgets/ImageRow/hooks.js

@@ -1,14 +1,15 @@
 import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';/**
- * @typedef {Object} ImageWidgetConfig
+ * @typedef {Object} ImageRowWidgetConfig
  * @property {Array} images The images array.
  * @property {string} imageWrapping The imageWrapping setting,
  * one of: responsiveDefault | responsiveDense | responsiveNoWrap.
  * @property {string} [link] The optional link URL.
+ * @property {number} [imageSpacing] An optional gap between images (in pixels).
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
+ *   .useWidget<ImageRowWidgetConfig> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
- * Hook to access the Image widget configuration and data.
+ * Hook to access the Image row widget configuration and data.
  * Handles responsive image URLs and alt texts.
- */export var useImageWidget=function useImageWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},_ref$images=_ref.images,images=_ref$images===void 0?[]:_ref$images,imageWrapping=_ref.imageWrapping;var mappedImages=useMemo(function(){return images.map(function(_ref2){var image=_ref2.image,link=_ref2.link;var _ref3=image||{},url=_ref3.url,altText=_ref3.altText;return{url:url,altText:altText,link:link};}).filter(function(img){return img.url;});},[images]);return{images:mappedImages,imageWrapping:imageWrapping};};
+ */export var useImageRowWidget=function useImageRowWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},_ref$images=_ref.images,images=_ref$images===void 0?[]:_ref$images,imageWrapping=_ref.imageWrapping,imageSpacing=_ref.imageSpacing;var mappedImages=useMemo(function(){return images.map(function(_ref2){var image=_ref2.image,link=_ref2.link;var _ref3=image||{},url=_ref3.url,altText=_ref3.altText;return{url:url,altText:altText,link:link};}).filter(function(img){return img.url;});},[images]);return{images:mappedImages,imageWrapping:imageWrapping,imageSpacing:imageSpacing};};

package/page/widgets/ImageSlider/hooks.js

@@ -18,15 +18,16 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {number} slidesPerViewCustomSmall Slides per view for small screens.
  * @property {number} slidesPerViewCustomMedium Slides per view for medium screens.
  * @property {number} slidesPerViewCustomLarge Slides per view for large screens.
+ * @property {number} imageSpacing Optional gap between image slides (in pixels).
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the ImageSlider widget configuration and data.
- */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge;/**
+ */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing;/**
    * @type {SwiperCmpProps}
-   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints},isPreview?{// Improves interaction with the slider in the CMS preview iframe
+   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,spaceBetween:imageSpacing},isPreview?{// Improves interaction with the slider in the CMS preview iframe
 touchStartPreventDefault:true,// Create a component key from breakpoint settings to force remount on breakpoint change.
 // This fixes issues with the Swiper when breakpoint settings change during runtime.
-key:JSON.stringify(_extends({slidesPerView:slidesPerView},breakpoints))}:{});},[isPreview,slidesPerView,slideAutomatic,sliderSpeed,endlessSlider,theme.breakpoints.values,slidesPerViewCustomMedium,slidesPerViewCustomLarge,slidesPerViewCustomSmall]);return{slides:images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;}),swiperProps:swiperProps};};
+key:JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing},breakpoints))}:{});},[isPreview,slidesPerView,slideAutomatic,sliderSpeed,endlessSlider,theme.breakpoints.values,slidesPerViewCustomMedium,slidesPerViewCustomLarge,slidesPerViewCustomSmall,imageSpacing]);return{slides:images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;}),swiperProps:swiperProps};};

package/page/widgets/RichText/RichText.js

@@ -1,3 +1,3 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';import{useRichTextWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(1)},html:{'& > p:first-child':{marginTop:0},'& p':{margin:'0px 0px 1rem 0px'},'ul, ol':{paddingLeft:'40px'},'ul li':{listStyleType:'disc'},'ol li':{listStyleType:'decimal'},h1:_extends({},theme.typography.h1,{margin:'0px 0px 1rem 0px'}),h2:_extends({},theme.typography.h2,{margin:'0px 0px 1rem 0px'}),h3:_extends({},theme.typography.h3,{margin:'0px 0px 1rem 0px'}),h4:_extends({},theme.typography.h4,{margin:'0px 0px 1rem 0px'}),h5:_extends({},theme.typography.h5,{margin:'0px 0px 1rem 0px'}),h6:_extends({},theme.typography.h6,{margin:'0px 0px 1rem 0px'})}};});/**
+import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{WidgetRichText}from'@shopgate/engage/page/components';import{useRichTextWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(1)}};});/**
  * @returns {JSX.Element}
- */var RichText=function RichText(){var _useRichTextWidget=useRichTextWidget(),richText=_useRichTextWidget.richText;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;if(!richText)return null;return React.createElement("div",{className:cx(classes.root)},React.createElement(HtmlSanitizer,{processStyles:true,settings:{html:richText},className:cx(classes.html)},richText));};export default RichText;
+ */var RichText=function RichText(){var _useRichTextWidget=useRichTextWidget(),richText=_useRichTextWidget.richText;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;if(!richText)return null;return React.createElement(WidgetRichText,{content:richText,className:cx(classes.root)});};export default RichText;

package/page/widgets/index.js

@@ -1 +1 @@
-export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";export{default as ImageRowWidget}from"./ImageRow";export{default as ImageSliderWidget}from"./ImageSlider";export{default as RichTextWidget}from"./RichText";
+export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";export{default as ImageRowWidget}from"./ImageRow";export{default as ImageSliderWidget}from"./ImageSlider";export{default as RichTextWidget}from"./RichText";export{default as HeroBannerWidget}from"./HeroBanner";

package/page/widgets/widgets.json

@@ -26,6 +26,9 @@
   "@shopgate/widgets/richTextWidget": {
     "path": "@shopgate/engage/page/widgets/RichText"
   },
+  "@shopgate/widgets/heroBannerWidget": {
+    "path": "@shopgate/engage/page/widgets/HeroBanner"
+  },
   "@shopgate/widgetsInternal/Placeholder": {
     "path": "@shopgate/engage/page/widgets/Placeholder"
   }

package/page/widgets/Headline/hooks.js

@@ -1,8 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{useWidget}from'@shopgate/engage/page/hooks';/**
- * @typedef {Object} HeadlineWidgetConfig
- * @property {Object} [headline] - The headline configuration object.
- * @property {string} [headline.text] - The text to display as the headline.
- */ // eslint-disable-next-line valid-jsdoc
-/**
- * Custom hook to retrieve the headline widget configuration.
- */export var useHeadlineWidget=function useHeadlineWidget(){var _useWidget=useWidget(),config=_useWidget.config;var _config$headline=config.headline,bold=_config$headline.bold,italic=_config$headline.italic,text=_config$headline.text,underline=_config$headline.underline,textAlign=_config$headline.textAlign,typography=_config$headline.typography;var styles=_extends({},bold&&{fontWeight:'bold'},{},italic&&{fontStyle:'italic'},{},underline&&{textDecoration:'underline'});return{headline:text,variant:typography!==null&&typography!==void 0?typography:'h3',align:textAlign,styles:styles};};