@shopgate/engage 7.29.3 → 7.29.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.3",
+  "version": "7.29.5",
   "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.3",
-    "@shopgate/pwa-common-commerce": "7.29.3",
-    "@shopgate/pwa-core": "7.29.3",
-    "@shopgate/pwa-ui-ios": "7.29.3",
-    "@shopgate/pwa-ui-material": "7.29.3",
-    "@shopgate/pwa-ui-shared": "7.29.3",
+    "@shopgate/pwa-common": "7.29.5",
+    "@shopgate/pwa-common-commerce": "7.29.5",
+    "@shopgate/pwa-core": "7.29.5",
+    "@shopgate/pwa-ui-ios": "7.29.5",
+    "@shopgate/pwa-ui-material": "7.29.5",
+    "@shopgate/pwa-ui-shared": "7.29.5",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,4 +1,7 @@
-var _excluded=["src","alt","breakpoint","className","enableParallax","isBanner","borderRadius"],_excluded2=["src"];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);}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;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo,useState}from'react';import PropTypes from'prop-types';import{makeStyles,useResponsiveValue}from'@shopgate/engage/styles';import{useParallax}from'react-scroll-parallax';import{parseImageUrl}from"../../helpers";/**
+var _excluded=["src","alt","breakpoint","className","enableParallax","isBanner","borderRadius","onLoad","onImageRatioChange"],_excluded2=["src"];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);}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;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo,useState,useEffect}from'react';import PropTypes from'prop-types';import{makeStyles,useResponsiveValue}from'@shopgate/engage/styles';import{useParallax}from'react-scroll-parallax';import{parseImageUrl}from"../../helpers";/**
+ * @callback OnImageRatioChange
+ * @param {string} ratio - The new image ratio, e.g. "1920/1080".
+ */ /**
  * @typedef {Object} CustomResponsiveImageProps
  * @property {boolean} [enableParallax] Whether to enable the parallax effect.
  * @property {number} [borderRadius] The border radius to apply to the image.
@@ -6,17 +9,19 @@ var _excluded=["src","alt","breakpoint","className","enableParallax","isBanner",
  * be loaded.
  * @property {boolean} [isBanner] Whether the image is used as a banner (full width and height of
  * its container).
+ * @property {OnImageRatioChange} [onImageRatioChange] Called when the aspect ratio of the image
+ * changes.
  */ /** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {CustomResponsiveImageProps & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',pointerEvents:'none'},image:{width:'100%'},container:{width:'100%',overflow:'hidden',display:'flex',justifyContent:'center',alignItems:'center'},bannerContainer:{overflow:'hidden',position:'absolute',width:'100%',height:'100%',top:0,left:0,display:'flex',justifyContent:'center',alignItems:'center'},banner:{position:'absolute',width:'100%',height:'100%',objectFit:'cover'}});/**
  * @param {ResponsiveImageProps} props The component props.
  * @returns {JSX.Element}
- */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,className=_ref.className,_ref$enableParallax=_ref.enableParallax,enableParallax=_ref$enableParallax===void 0?false:_ref$enableParallax,_ref$isBanner=_ref.isBanner,isBanner=_ref$isBanner===void 0?false:_ref$isBanner,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?0:_ref$borderRadius,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useState=useState(0),_useState2=_slicedToArray(_useState,2),imageHeight=_useState2[0],setImageHeight=_useState2[1];var _useState3=useState(0),_useState4=_slicedToArray(_useState3,2),imageWidth=_useState4[0],setImageWidth=_useState4[1];// If parallax is to soft, increase this value.
+ */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,className=_ref.className,_ref$enableParallax=_ref.enableParallax,enableParallax=_ref$enableParallax===void 0?false:_ref$enableParallax,_ref$isBanner=_ref.isBanner,isBanner=_ref$isBanner===void 0?false:_ref$isBanner,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?0:_ref$borderRadius,onLoad=_ref.onLoad,onImageRatioChange=_ref.onImageRatioChange,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useState=useState(0),_useState2=_slicedToArray(_useState,2),imageHeight=_useState2[0],setImageHeight=_useState2[1];var _useState3=useState(0),_useState4=_slicedToArray(_useState3,2),imageWidth=_useState4[0],setImageWidth=_useState4[1];// If parallax is to soft, increase this value.
 var parallaxPercent=15;var parallax=useParallax({translateY:["-".concat(parallaxPercent),"".concat(parallaxPercent)],disabled:!enableParallax});/**
    * Handles the image load event
    * We set the aspect ratio of the container based on the image dimensions
    * to prevent white spaces in the layout while the image is moving.
    * The aspect ratio is calculated with the parallaxPercent
-   * @param {Object} event The load event.
-   */var handleImageLoad=function handleImageLoad(event){var width=event.target.clientWidth;var height=event.target.clientHeight;setImageWidth(width);setImageHeight(height);};var containerRatio=useMemo(function(){var heightReduction=enableParallax?imageHeight/100*(parallaxPercent+7):0;return"".concat(imageWidth,"/").concat(imageHeight-heightReduction);},[enableParallax,imageHeight,imageWidth]);var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));return React.createElement("div",{className:cx(_defineProperty(_defineProperty({},classes.bannerContainer,isBanner),classes.container,!isBanner)),style:_extends({borderRadius:"".concat(borderRadius,"px")},!isBanner&&enableParallax?{aspectRatio:containerRatio}:{})},React.createElement("img",_extends({src:imgSrc,ref:parallax.ref,alt:alt,loading:"lazy",className:cx(className,classes.preventSave,classes.image,_defineProperty({},classes.banner,isBanner)),onLoad:handleImageLoad,style:_extends({},enableParallax&&isBanner?{height:"".concat(100+parallaxPercent*2,"%")}:{})},imgProps)));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null,enableParallax:false,isBanner:false,borderRadius:0};/**
+   * @param {React.SyntheticEvent<HTMLImageElement, Event>} event The load event.
+   */var handleImageLoad=function handleImageLoad(event){var width=event.currentTarget.naturalWidth;var height=event.currentTarget.naturalHeight;setImageWidth(width);setImageHeight(height);if(typeof onLoad==='function'){onLoad(event);}};var containerRatio=useMemo(function(){var heightReduction=enableParallax?imageHeight/100*(parallaxPercent+7):0;return"".concat(imageWidth,"/").concat(imageHeight-heightReduction);},[enableParallax,imageHeight,imageWidth]);var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));useEffect(function(){if(typeof onImageRatioChange==='function'){onImageRatioChange(containerRatio);}},[containerRatio,onImageRatioChange]);return React.createElement("div",{className:cx(_defineProperty(_defineProperty({},classes.bannerContainer,isBanner),classes.container,!isBanner)),style:_extends({borderRadius:"".concat(borderRadius,"px")},!isBanner&&enableParallax?{aspectRatio:containerRatio}:{})},React.createElement("img",_extends({src:imgSrc,ref:parallax.ref,alt:alt,loading:"lazy",className:cx(className,classes.preventSave,classes.image,_defineProperty({},classes.banner,isBanner)),onLoad:handleImageLoad,style:_extends({},enableParallax&&isBanner?{height:"".concat(100+parallaxPercent*2,"%")}:{})},imgProps)));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null,enableParallax:false,isBanner:false,borderRadius:0,onLoad:undefined,onImageRatioChange:undefined};/**
  * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
  * It renders a image with higher resolution on larger screens
  * It can apply a parallax effect when scrolling.

package/page/widgets/HeroBanner/HeroBanner.js

@@ -1,3 +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)},imageContainer:{position:'absolute',width:'100%',height:'100%',top:0,left:0}};});/**
+function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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,{useCallback,useState,useMemo}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(_defineProperty({width:'100%',position:'relative',display:'flex',alignItems:'center',minHeight:300},theme.breakpoints.up('md'),{minHeight:400}),"overflow",'hidden'),richText:{position:'relative',zIndex:2,padding:theme.spacing(2)},imageContainer:{position:'absolute',width:'100%',height:'100%',top:0,left:0}};});/**
  * @returns {JSX.Element}
- */var HeroBanner=function HeroBanner(){var _useHeroBannerWidget=useHeroBannerWidget(),text=_useHeroBannerWidget.text,backgroundImage=_useHeroBannerWidget.backgroundImage,link=_useHeroBannerWidget.link,borderRadius=_useHeroBannerWidget.borderRadius,parallax=_useHeroBannerWidget.parallax;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("div",{className:cx(classes.imageContainer)},React.createElement(ResponsiveWidgetImage,{src:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url,alt:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt,borderRadius:borderRadius,enableParallax:parallax,isBanner:true}))));};export default HeroBanner;
+ */var HeroBanner=function HeroBanner(){var _useHeroBannerWidget=useHeroBannerWidget(),text=_useHeroBannerWidget.text,backgroundImage=_useHeroBannerWidget.backgroundImage,link=_useHeroBannerWidget.link,borderRadius=_useHeroBannerWidget.borderRadius,parallax=_useHeroBannerWidget.parallax,_useHeroBannerWidget$=_useHeroBannerWidget.imageFit,imageFit=_useHeroBannerWidget$===void 0?'fillAndCrop':_useHeroBannerWidget$;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),aspectRatio=_useState2[0],setAspectRatio=_useState2[1];var contentStyle=useMemo(function(){if(imageFit!=='showFull'){return null;}return{aspectRatio:aspectRatio,minHeight:'unset'};},[aspectRatio,imageFit]);var handleImageRatioChange=useCallback(function(ratio){setAspectRatio(ratio);},[]);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),style:contentStyle},React.createElement(WidgetRichText,{content:text,className:cx(classes.richText)}),React.createElement("div",{className:cx(classes.imageContainer)},React.createElement(ResponsiveWidgetImage,{src:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url,alt:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt,borderRadius:borderRadius,enableParallax:parallax,isBanner:imageFit==='fillAndCrop',onImageRatioChange:handleImageRatioChange}))));};export default HeroBanner;

package/page/widgets/HeroBanner/hooks.js

@@ -8,6 +8,7 @@ var _excluded=["borderRadius","borderRadiusCustom"];function _extends(){_extends
  * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * @property {boolean} parallax Whether to apply a parallax effect to the image
+ * @property {"fillAndCrop"|"showFull"} imageFit How the image should be displayed
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<HeroBanner> >} UseWidgetReturnType

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{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%'}};});/**
+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,slidesPerViewCustomLarge=_ref.slidesPerViewCustomLarge,slidesPerViewCustomMedium=_ref.slidesPerViewCustomMedium,slidesPerViewCustomSmall=_ref.slidesPerViewCustomSmall;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%'},imageContainerCustom:_defineProperty(_defineProperty(_defineProperty({},theme.breakpoints.up('lg'),{flex:"1 1 calc(".concat(100/slidesPerViewCustomLarge,"% - ").concat(imageSpacing,"px)")}),theme.breakpoints.between('sm','lg'),{flex:"1 1 calc(".concat(100/slidesPerViewCustomMedium,"% - ").concat(imageSpacing,"px)")}),theme.breakpoints.down('sm'),{flex:"1 1 calc(".concat(100/slidesPerViewCustomSmall,"% - ").concat(imageSpacing,"px)")})};});/**
  * The ImageRowWidget is used to display images in one or more rows.
  * @returns {JSX.Element}
- */var ImageRow=function ImageRow(){var _useImageRowWidget=useImageRowWidget(),images=_useImageRowWidget.images,imageWrapping=_useImageRowWidget.imageWrapping,imageSpacing=_useImageRowWidget.imageSpacing,borderRadius=_useImageRowWidget.borderRadius,parallax=_useImageRowWidget.parallax;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),borderRadius:borderRadius,enableParallax:parallax})));}));};export default ImageRow;
+ */var ImageRow=function ImageRow(){var _useImageRowWidget=useImageRowWidget(),images=_useImageRowWidget.images,_useImageRowWidget$im=_useImageRowWidget.imageWrapping,imageWrapping=_useImageRowWidget$im===void 0?'responsiveDefault':_useImageRowWidget$im,imageSpacing=_useImageRowWidget.imageSpacing,borderRadius=_useImageRowWidget.borderRadius,parallax=_useImageRowWidget.parallax,slidesPerViewCustomLarge=_useImageRowWidget.slidesPerViewCustomLarge,slidesPerViewCustomMedium=_useImageRowWidget.slidesPerViewCustomMedium,slidesPerViewCustomSmall=_useImageRowWidget.slidesPerViewCustomSmall;var _useStyles=useStyles({imageSpacing:imageSpacing,slidesPerViewCustomLarge:slidesPerViewCustomLarge,slidesPerViewCustomMedium:slidesPerViewCustomMedium,slidesPerViewCustomSmall:slidesPerViewCustomSmall}),cx=_useStyles.cx,classes=_useStyles.classes;if(!images||images.length===0)return null;return React.createElement(Grid,{className:classes.imageContainer,component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'),classes.imageContainerCustom,imageWrapping==='responsiveCustom'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:classes.image},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:classes.image,borderRadius:borderRadius,enableParallax:parallax})));}));};export default ImageRow;

package/page/widgets/ImageRow/hooks.js

@@ -8,6 +8,12 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';im
  * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * @property {boolean} [parallax] Whether to apply a parallax effect to the image.
+ * @property {number} [slidesPerViewCustomLarge] Number of slides to show on large screens
+ * (only for 'responsiveCustom' wrapping).
+ * @property {number} [slidesPerViewCustomMedium] Number of slides to show on medium screens
+ * (only for 'responsiveCustom' wrapping).
+ * @property {number} [slidesPerViewCustomSmall] Number of slides to show on small screens
+ * (only for 'responsiveCustom' wrapping).
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageRowWidgetConfig> >} UseWidgetReturnType
@@ -15,4 +21,4 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';im
 /**
  * Hook to access the Image row widget configuration and data.
  * Handles responsive image URLs and alt texts.
- */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,_ref$imageSpacing=_ref.imageSpacing,imageSpacing=_ref$imageSpacing===void 0?0:_ref$imageSpacing,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,parallax=_ref.parallax;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});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,borderRadius:borderRadiusResolved,parallax:parallax};};
+ */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,_ref$imageSpacing=_ref.imageSpacing,imageSpacing=_ref$imageSpacing===void 0?0:_ref$imageSpacing,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,parallax=_ref.parallax,slidesPerViewCustomLarge=_ref.slidesPerViewCustomLarge,slidesPerViewCustomMedium=_ref.slidesPerViewCustomMedium,slidesPerViewCustomSmall=_ref.slidesPerViewCustomSmall;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});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,borderRadius:borderRadiusResolved,parallax:parallax,slidesPerViewCustomLarge:slidesPerViewCustomLarge,slidesPerViewCustomMedium:slidesPerViewCustomMedium,slidesPerViewCustomSmall:slidesPerViewCustomSmall};};

package/page/widgets/ImageSlider/ImageSlider.js

@@ -1,4 +1,4 @@
-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{makeStyles}from'@shopgate/engage/styles';import{Swiper,Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{width:'100%'}});/**
+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{makeStyles}from'@shopgate/engage/styles';import{Swiper,Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{width:'100%',minHeight:1}});/**
  * The ImageSliderWidget is used to display an image slider.
  * @returns {JSX.Element}
  */var ImageSliderWidget=function ImageSliderWidget(){var _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps,borderRadius=_useImageSliderWidget.borderRadius;var _useStyles=useStyles(),classes=_useStyles.classes;if(slides.length===0){return null;}return React.createElement(Swiper,_extends({indicators:true},swiperProps),slides.map(function(slide){if(!slide.image.url){return null;}return React.createElement(Swiper.Item,{key:slide.image.url},React.createElement(ConditionalWrapper,{condition:!!slide.link,wrapper:function wrapper(children){return React.createElement(Link,{href:slide.link},children);}},React.createElement(ResponsiveWidgetImage,{className:classes.image,src:slide.image.url,alt:slide.image.altText||'',borderRadius:borderRadius})));}));};export default ImageSliderWidget;

package/page/widgets/Video/Video.js

@@ -1,7 +1,9 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious,useAppEventOnReturnFromBackground}from'@shopgate/engage/core/hooks';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{root:{width:'100%',display:'flex',overflow:'hidden',borderRadius:borderRadius},video:{// Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
-width:'calc(100% + 4px)'}};});/**
+function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious,useAppEventOnReturnFromBackground}from'@shopgate/engage/core/hooks';import{ConditionalWrapper,Link}from'@shopgate/engage/components';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{root:{width:'100%',display:'flex',overflow:'hidden',borderRadius:borderRadius},video:{// Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
+width:'calc(100% + 3px)',display:'flex'}};});/**
  * The VideoWidget is used to display a video.
  * @returns {JSX.Element}
- */var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url]);// Resume video playback when app returned from background
-useAppEventOnReturnFromBackground(function(){if(!videoRef.current||reduceMotion||!autoplay){return;}videoRef.current.play();});useEffect(function(){if(!videoRef.current||reduceMotion){return;}if(autoplay){videoRef.current.play();}else{videoRef.current.pause();videoRef.current.currentTime=0;}},[autoplay,reduceMotion]);useEffect(function(){if(!url||url!==prevUrl){setHasError(false);}},[hasError,prevUrl,url]);if(!url||hasError||!isValidUrl)return null;return React.createElement("div",{className:classes.root},React.createElement("video",{ref:videoRef// Set play position to 0.001s to guarantee that there is always a frame shown
-,src:"".concat(url,"#t=0.001"),muted:muted,controls:!autoplay||reduceMotion?true:controls,autoPlay:reduceMotion?false:autoplay,className:classes.video,preload:"auto",playsInline:true,loop:loop,"aria-hidden":true,onError:function onError(){setHasError(true);}},React.createElement("track",{kind:"captions",src:"",srcLang:"de",label:"Deutsch"})));};export default Video;
+ */var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius,link=_useVideoWidget.link;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url]);var showControls=useMemo(function(){if(link){// When a link is set we never show controls to avoid side effects due to two clickable areas.
+return false;}return!autoplay||reduceMotion?true:controls;},[autoplay,controls,link,reduceMotion]);// Resume video playback when app returned from background
+useAppEventOnReturnFromBackground(function(){if(!videoRef.current||reduceMotion||!autoplay){return;}videoRef.current.play();});useEffect(function(){if(!videoRef.current){return;}if(reduceMotion){// Pause playback when reduced motion settings changed after video was rendered
+videoRef.current.pause();return;}if(autoplay){videoRef.current.play();}else{videoRef.current.pause();videoRef.current.currentTime=0;}},[autoplay,reduceMotion]);useEffect(function(){if(!url||url!==prevUrl){setHasError(false);}},[hasError,prevUrl,url]);if(!url||hasError||!isValidUrl)return null;return React.createElement("div",{className:classes.root},React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link},children);}},React.createElement("video",{ref:videoRef// Set play position to 0.001s to guarantee that there is always a frame shown
+,src:"".concat(url,"#t=0.001"),muted:muted,controls:showControls,autoPlay:reduceMotion?false:autoplay,className:classes.video,preload:"auto",playsInline:true,loop:loop,"aria-hidden":true,onError:function onError(){setHasError(true);}},React.createElement("track",{kind:"captions",src:"",srcLang:"de",label:"Deutsch"}))));};export default Video;

package/page/widgets/Video/hooks.js

@@ -5,10 +5,12 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{resolveBorderRadiusFro
  * @property {boolean} [loop] Whether the video should loop.
  * @property {boolean} [controls] Whether the video should display controls.
  * @property {boolean} [autoplay] Whether the video should autoplay.
+ * @property {string} [borderRadius] The border radius preset.
+ * @property {string} [link] The link URL.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<VideoWidgetConfig> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Video widget configuration and data.
- */export var useVideoWidget=function useVideoWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},url=_ref.url,muted=_ref.muted,loop=_ref.loop,controls=_ref.controls,autoplay=_ref.autoplay,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return{url:url,muted:muted,loop:loop,controls:controls,autoplay:autoplay,borderRadius:borderRadiusResolved};};
+ */export var useVideoWidget=function useVideoWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},url=_ref.url,muted=_ref.muted,loop=_ref.loop,controls=_ref.controls,autoplay=_ref.autoplay,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,link=_ref.link;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return{url:url,muted:muted,loop:loop,controls:controls,autoplay:autoplay,borderRadius:borderRadiusResolved,link:link};};

package/styles/theme/createTheme/createBreakpoints.js

@@ -16,7 +16,7 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * console.log(sorted); // { xs: 0, sm: 600, md: 960 }
  */var sortBreakpointsValues=function sortBreakpointsValues(values){var breakpointsAsArray=Object.keys(values).map(function(key){return{key:key,val:values[key]};})||[];breakpointsAsArray.sort(function(breakpoint1,breakpoint2){return breakpoint1.val-breakpoint2.val;});return breakpointsAsArray.reduce(function(acc,obj){return _extends({},acc,_defineProperty({},obj.key,obj.val));},{});};var unit='px';var step=5;/**
  * Creates a set of media query functions based on the provided breakpoints.
- */var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values]} */var values={// Extra small – all mobile phones
+ */var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values']} */var values={// Extra small – all mobile phones
 xs:0,// Small – large phones in landscape
 sm:480,// Medium – tablets
 md:768,// Large – small laptops