@shopgate/engage 7.12.7-beta.1 → 7.20.0-beta.10

package/components/PickerUtilize/components/Button/index.js

@@ -0,0 +1,5 @@
+import React from'react';import PropTypes from'prop-types';import styles from"./style";/**
+ * The Picker Button component.
+ * @param {Object} props The component props.
+ * @return {JSX}
+ */var Button=function Button(_ref){var disabled=_ref.disabled,label=_ref.label,openList=_ref.openList,value=_ref.value;return React.createElement("button",{className:"".concat(disabled?styles.buttonDisabled:styles.button),onClick:openList,type:"button"},React.createElement("span",{className:styles.label},label),value&&React.createElement("span",{className:styles.value},value));};Button.defaultProps={disabled:false,openList:function openList(){}};export default Button;

package/components/PickerUtilize/components/Button/style.js

@@ -0,0 +1 @@
+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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var buttonDefaults={display:'block',width:'100%',padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),fontFamily:'inherit',textAlign:'left',lineHeight:1.2,outline:'none',background:colors.shade8};var button=css(_extends({},buttonDefaults)).toString();var buttonDisabled=css(_extends({},buttonDefaults,{color:colors.shade4})).toString();var label=css({display:'block',fontWeight:500,':not(:only-child)':{fontWeight:400,fontSize:'0.75rem',marginBottom:4}}).toString();var value=css({display:'block',fontWeight:500}).toString();export default{button:button,buttonDisabled:buttonDisabled,label:label,value:value};

package/components/PickerUtilize/index.js

@@ -0,0 +1,17 @@
+var _excluded=["hasButton","sheetProps"];function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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;}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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import{SheetList,Picker as BasePicker,Sheet}from'@shopgate/engage/components';import{ViewContext}from'@shopgate/engage/components/View';import Button from"./components/Button";import styles from"./style";/**
+ * The template version of the Picker component.
+ * @param {Object} props The same component props as in the base Picker component.
+ */var PickerUtilize=/*#__PURE__*/function(_Component){/**
+   * Constructor
+   * @param {Object} props Props of the component
+   */function PickerUtilize(props){var _this2;_classCallCheck(this,PickerUtilize);_this2=_callSuper(this,PickerUtilize,[props]);/**
+   * Focuses the picker button for screen readers.
+   */_defineProperty(_this2,"onDidOpen",function(){_this2.props.setViewAriaHidden(true);if(_this2.firstSelectableItemRef.current){_this2.firstSelectableItemRef.current.focus();}});/**
+   * Focuses the first selectable item for screen readers.
+   */_defineProperty(_this2,"onClose",function(){_this2.props.setViewAriaHidden(false);if(_this2.pickerRef.current){_this2.pickerRef.current.focus();}});_this2.modalComponent=function(sheetProps){return React.createElement(Sheet,_extends({},_extends({},_this2.props.sheetProps,{},sheetProps),{title:_this2.props.label,onDidOpen:_this2.onDidOpen}));};_this2.pickerRef=React.createRef();_this2.firstSelectableItemRef=React.createRef();_this2.listComponent=function(prps){return React.createElement(SheetList,null,prps.items.map(function(item,index){return React.createElement(SheetList.Item,{key:item.value,title:item.label,onClick:function onClick(){setTimeout(function(){prps.onSelect(item.value);prps.onClose();},_this2.props.clickDelay);},isDisabled:item.disabled,isSelected:index===prps.selectedIndex,rightComponent:item.rightComponent,testId:item.label,ref:index===prps.selectedIndex?_this2.firstSelectableItemRef:null});}));};return _this2;}_inherits(PickerUtilize,_Component);return _createClass(PickerUtilize,[{key:"render",value:/**
+   * Render
+   * @returns {JSX}
+   */function render(){var _this$props=this.props,hasButton=_this$props.hasButton,ignore=_this$props.sheetProps,restProps=_objectWithoutProperties(_this$props,_excluded);return React.createElement(BasePicker,_extends({},restProps,{className:"".concat(hasButton?styles:''," engage__picker-utilize"),modalComponent:this.modalComponent,buttonProps:this.props.buttonProps,buttonComponent:this.props.buttonComponent||Button,listComponent:this.listComponent,onClose:this.onClose,ref:this.pickerRef}));}}]);}(Component);_defineProperty(PickerUtilize,"defaultProps",{buttonComponent:null,buttonProps:{},/**
+     * Time in ms that delays picker interaction in order
+     * to let animations complete first.
+     */clickDelay:150,hasButton:true,sheetProps:{}});export default(function(props){return React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return React.createElement(PickerUtilize,_extends({},props,{setViewAriaHidden:setAriaHidden}));});});

package/components/PickerUtilize/spec.js

@@ -0,0 +1 @@
+import React from'react';import{mount}from'enzyme';import Picker from"./index";jest.mock('@shopgate/engage/components/View');describe('<Picker />',function(){it('should render the picker',function(){var label='Picker label';var wrapper=mount(React.createElement(Picker,{label:label}));expect(wrapper).toMatchSnapshot();});});

package/components/PickerUtilize/style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export default css({display:'flex',marginBottom:variables.gap.small,minHeight:56}).toString();

package/components/QuantityInput/QuantityInput.js

@@ -1,8 +1,9 @@
-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 _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,{useRef,useState,useCallback,useLayoutEffect,useEffect,forwardRef}from'react';import PropTypes from'prop-types';import{isIOs}from'@shopgate/pwa-core';import{parseFloatString,formatFloat}from"./helper";/**
+var _excluded=["className","onChange","onFocus","onBlur","value","maxDecimals","unit","minValue","maxValue","onKeyDown"];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 _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,{useRef,useState,useCallback,useLayoutEffect,useEffect,forwardRef}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import{isIOs}from'@shopgate/pwa-core';import{parseFloatString,formatFloat}from"./helper";/**
  * A Quantity Input with unit support.
  * @returns {JSX}
- */var QuantityInput=forwardRef(function(_ref,outerInputRef){var className=_ref.className,onChange=_ref.onChange,customOnFocus=_ref.onFocus,customOnBlur=_ref.onBlur,value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,minValue=_ref.minValue,maxValue=_ref.maxValue,inputProps=_objectWithoutProperties(_ref,["className","onChange","onFocus","onBlur","value","maxDecimals","unit","minValue","maxValue"]);var inputRef=outerInputRef||useRef();var _useState=useState(formatFloat(value,maxDecimals)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1];var onFocus=useCallback(function(event){customOnFocus(event);setIsFocused(true);},[customOnFocus]);var onBlur=useCallback(function(event){var newValue=parseFloatString(inputValue,maxDecimals);setIsFocused(false);// If invalid switch to old value.
-if(Number.isNaN(parseFloat(inputValue))){setInputValue(formatFloat(value,maxDecimals));return;}if(newValue!==value){onChange(newValue);}customOnBlur(event,newValue);},[customOnBlur,inputValue,maxDecimals,onChange,value]);var handleChange=useCallback(function(event){var newValue=event.target.value;if(newValue!==''){if(minValue&&newValue<minValue){newValue="".concat(minValue);}if(maxValue&&newValue>maxValue){newValue="".concat(maxValue);}}setInputValue(newValue);},[maxValue,minValue]);// Select the current input value after focus.
+ */var QuantityInput=forwardRef(function(_ref,outerInputRef){var className=_ref.className,onChange=_ref.onChange,customOnFocus=_ref.onFocus,customOnBlur=_ref.onBlur,value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,minValue=_ref.minValue,maxValue=_ref.maxValue,onKeyDown=_ref.onKeyDown,inputProps=_objectWithoutProperties(_ref,_excluded);var inputRef=outerInputRef||useRef();var _useState=useState(formatFloat(value,maxDecimals)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1];var onFocus=useCallback(function(event){customOnFocus(event);setIsFocused(true);},[customOnFocus]);var onBlur=useCallback(function(event){var newValue=parseFloatString(inputValue,maxDecimals);setIsFocused(false);// If invalid switch to old value.
+if(Number.isNaN(parseFloat(inputValue))){setInputValue(formatFloat(value,maxDecimals));return;}if(minValue&&newValue<minValue){newValue=minValue;}if(maxValue&&newValue>maxValue){newValue=maxValue;}setInputValue("".concat(newValue));if(newValue!==value){onChange(newValue);}customOnBlur(event,newValue);},[customOnBlur,inputValue,maxDecimals,maxValue,minValue,onChange,value]);var handleChange=useCallback(function(event){var newValue=event.target.value;setInputValue(newValue);},[]);var handleKeyDown=useCallback(function(event){if(event.key==='Enter'){// Prevents false positive validation error when enter key is pressed inside input
+event.preventDefault();if(inputRef.current){inputRef.current.blur();}}if(typeof onKeyDown==='function'){onKeyDown(event);}},[inputRef,onKeyDown]);// Select the current input value after focus.
 useLayoutEffect(function(){if(isFocused&&isIOs){inputRef.current.select();}},[inputRef,isFocused]);// Sync actual float value with displayed content.
 useEffect(function(){setInputValue(formatFloat(value,maxDecimals));},[maxDecimals,value]);// Stop the context menu from opening.
-useLayoutEffect(function(){inputRef.current.addEventListener('contextmenu',function(event){event.preventDefault();event.stopPropagation();return false;});},[inputRef]);var displayedValue=!isFocused&&unit?"".concat(inputValue," ").concat(unit):inputValue;return React.createElement("input",_extends({ref:inputRef},inputProps,{inputMode:maxDecimals>0?'decimal':'numeric'/* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,pattern:maxDecimals>0?'[0-9.,]*':'[0–9]*',onFocus:onFocus,onBlur:onBlur,className:className,value:displayedValue,onChange:handleChange,onClick:function onClick(event){event.preventDefault();event.stopPropagation();if(inputRef.current){inputRef.current.focus();}}}));});QuantityInput.defaultProps={className:'',maxDecimals:2,unit:null,minValue:null,maxValue:null,onFocus:function onFocus(){},onChange:function onChange(){},onBlur:function onBlur(){}};export default QuantityInput;
+useLayoutEffect(function(){inputRef.current.addEventListener('contextmenu',function(event){event.preventDefault();event.stopPropagation();return false;});},[inputRef]);var displayedValue=!isFocused&&unit?"".concat(inputValue," ").concat(unit):inputValue;return React.createElement("input",_extends({ref:inputRef},inputProps,{inputMode:maxDecimals>0?'decimal':'numeric'/* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,pattern:maxDecimals>0?'[0-9.,]*':'[0–9]*',onFocus:onFocus,onBlur:onBlur,className:className,value:displayedValue,onChange:handleChange,onKeyDown:handleKeyDown,onClick:function onClick(event){event.preventDefault();event.stopPropagation();if(inputRef.current){inputRef.current.focus();}}}));});QuantityInput.defaultProps={className:'',maxDecimals:2,unit:null,minValue:null,maxValue:null,onFocus:noop,onChange:noop,onBlur:noop,onKeyDown:noop};export default QuantityInput;

package/components/Radio/Radio.js

@@ -2,4 +2,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * The Radio component
  * @param {Object} props The component props
  * @returns {JSX}
- */var Radio=function Radio(_ref){var _classNames;var classes=_ref.classes,nameProp=_ref.name,onChangeProp=_ref.onChange,checkedProp=_ref.checked,disabledProp=_ref.disabled,valueProp=_ref.value,attributes=_ref.attributes;var radioGroup=useRadioGroup();var name=nameProp;var checked=checkedProp;var onChange=onChangeProp;if(radioGroup){if(checked===null){checked=radioGroup.value===valueProp;}if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.onChange!=='undefined'){onChange=radioGroup.onChange;}}return React.createElement("span",{className:classNames(styles.root,classes.root)},React.createElement(Ripple,{className:styles.ripple,color:"var(--color-primary)"},React.createElement("input",_extends({className:styles.input,type:"radio",name:name,value:valueProp,checked:checked,onChange:onChange,disabled:disabledProp,id:"".concat(name,"_").concat(valueProp)},attributes)),React.createElement("div",{className:classNames(styles.radioContainer,(_classNames={},_defineProperty(_classNames,styles.radioDisabled,disabledProp),_defineProperty(_classNames,classes.disabled,disabledProp),_classNames))},checked&&React.createElement(CheckedIcon,{className:classNames(styles.radio,styles.radioChecked,classes.radioChecked,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(styles.radio,classes.radioUnchecked,'uncheckedIcon')}))));};Radio.defaultProps={classes:{},checked:null,disabled:false,onChange:null,name:null,value:null,attributes:null};export default hot(Radio);
+ */var Radio=function Radio(_ref){var classes=_ref.classes,nameProp=_ref.name,onChangeProp=_ref.onChange,checkedProp=_ref.checked,disabledProp=_ref.disabled,valueProp=_ref.value,attributes=_ref.attributes;var radioGroup=useRadioGroup();var name=nameProp;var checked=checkedProp;var onChange=onChangeProp;if(radioGroup){if(checked===null){checked=radioGroup.value===valueProp;}if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.onChange!=='undefined'){onChange=radioGroup.onChange;}}return React.createElement("span",{className:classNames(styles.root,classes.root)},React.createElement(Ripple,{className:styles.ripple,color:"var(--color-primary)"},React.createElement("input",_extends({className:styles.input,type:"radio",name:name,value:valueProp,checked:checked,onChange:onChange,disabled:disabledProp,id:"".concat(name,"_").concat(valueProp)},attributes)),React.createElement("div",{className:classNames(styles.radioContainer,_defineProperty(_defineProperty({},styles.radioDisabled,disabledProp),classes.disabled,disabledProp))},checked&&React.createElement(CheckedIcon,{className:classNames(styles.radio,styles.radioChecked,classes.radioChecked,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(styles.radio,classes.radioUnchecked,'uncheckedIcon')}))));};Radio.defaultProps={classes:{},checked:null,disabled:false,onChange:null,name:null,value:null,attributes:null};export default hot(Radio);

package/components/RadioCard/RadioCard.js

@@ -6,4 +6,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * The RadioCard component
  * @param {Object} props The component props
  * @returns {JSX}
- */var RadioCard=function RadioCard(_ref2){var _classNames;var children=_ref2.children,nameProp=_ref2.name,onChange=_ref2.onChange,checked=_ref2.checked,disabledProp=_ref2.disabled,value=_ref2.value,attributes=_ref2.attributes,classes=_ref2.classes,RenderCard=_ref2.renderCard;var radioGroup=useRadioGroup();var name=nameProp;var disabled=disabledProp;if(radioGroup){if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.disabled!=='undefined'){disabled=radioGroup.disabled;}}return React.createElement(RenderCard,{className:classes.root},React.createElement(Radio,{name:name,value:value,onChange:onChange,disabled:disabled,checked:checked,attributes:attributes,classes:{root:styles.radio}}),React.createElement("label",{htmlFor:"".concat(name,"_").concat(value),className:classNames(styles.content,(_classNames={},_defineProperty(_classNames,styles.contentDisabled,disabled),_defineProperty(_classNames,classes.disabled,disabled),_classNames))},children));};RadioCard.defaultProps={children:null,checked:null,classes:{},disabled:false,onChange:null,name:null,value:null,attributes:null,renderCard:CardComponent};export default hot(RadioCard);
+ */var RadioCard=function RadioCard(_ref2){var children=_ref2.children,nameProp=_ref2.name,onChange=_ref2.onChange,checked=_ref2.checked,disabledProp=_ref2.disabled,value=_ref2.value,attributes=_ref2.attributes,classes=_ref2.classes,RenderCard=_ref2.renderCard;var radioGroup=useRadioGroup();var name=nameProp;var disabled=disabledProp;if(radioGroup){if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.disabled!=='undefined'){disabled=radioGroup.disabled;}}return React.createElement(RenderCard,{className:classes.root},React.createElement(Radio,{name:name,value:value,onChange:onChange,disabled:disabled,checked:checked,attributes:attributes,classes:{root:styles.radio}}),React.createElement("label",{htmlFor:"".concat(name,"_").concat(value),className:classNames(styles.content,_defineProperty(_defineProperty({},styles.contentDisabled,disabled),classes.disabled,disabled))},children));};RadioCard.defaultProps={children:null,checked:null,classes:{},disabled:false,onChange:null,name:null,value:null,attributes:null,renderCard:CardComponent};export default hot(RadioCard);

package/components/RangeSlider/components/Handle/index.js

@@ -6,4 +6,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {Function} props.onTouchStart The touch start event callback.
  * @param {Object} props.classNames (Optional) An additional style classes for the handle.
  * @returns {JSX}
- */var RangeSliderHandle=function RangeSliderHandle(props){var active=props.active,index=props.index,onTouchStart=props.onTouchStart,classNames=props.classNames,useMouseEvents=props.useMouseEvents;var style={zIndex:Number(active)||0};var eventHandler=_defineProperty({},useMouseEvents?'onMouseDown':'onTouchStart',function(event){return onTouchStart(event,index);});return React.createElement("div",_extends({className:cxs(classNames.handleOuter,styles),style:style},eventHandler),React.createElement("div",{className:classNames.handleInner}));};RangeSliderHandle.defaultProps={active:false,classNames:{handleOuter:null,handleInner:null}};export default RangeSliderHandle;
+ */var RangeSliderHandle=function RangeSliderHandle(props){var active=props.active,index=props.index,onTouchStart=props.onTouchStart,classNames=props.classNames,useMouseEvents=props.useMouseEvents;var style={zIndex:Number(active)||0};var eventHandler=_defineProperty({},useMouseEvents?'onMouseDown':'onTouchStart',function(event){return onTouchStart(event,index);});return React.createElement("div",_extends({className:cxs(classNames.handleOuter,styles,'engage__range-slider__handle'),style:style},eventHandler),React.createElement("div",{className:classNames.handleInner}));};RangeSliderHandle.defaultProps={active:false,classNames:{handleOuter:null,handleInner:null}};export default RangeSliderHandle;

package/components/RangeSlider/index.js

@@ -1,42 +1,54 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{PureComponent}from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";import Handle from"./components/Handle";import{isTouchDevice}from"../../core";import{generateLinearEasingCallback,generateExponentialEasingCallback,getRangeStyle,getTouchPositionX,getAbsoluteValue,getRelativeValue}from"./helper";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{PureComponent}from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";import Handle from"./components/Handle";import{isTouchDevice}from"../../core";import{generateLinearEasingCallback,generateExponentialEasingCallback,getRangeStyle,getTouchPositionX,getAbsoluteValue,getRelativeValue}from"./helper";/**
  * The range slider component.
- */var RangeSlider=/*#__PURE__*/function(_PureComponent){_inherits(RangeSlider,_PureComponent);/**
+ */var RangeSlider=/*#__PURE__*/function(_PureComponent){/**
    * Constructor
    * @param {Object} props The component properties
-   */function RangeSlider(props){var _this;_classCallCheck(this,RangeSlider);_this=_possibleConstructorReturn(this,_getPrototypeOf(RangeSlider).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleTouchStart",function(event,index){_this.addEventListeners();_this.draggedHandle=index;// Calculate the relative offset to the handles center
+   */function RangeSlider(props){var _this2;_classCallCheck(this,RangeSlider);_this2=_callSuper(this,RangeSlider,[props]);/**
+   * Processes touch start events on handles.
+   * @param {Object} event The touch event
+   * @param {number} index The index of the touched handle.
+   */_defineProperty(_this2,"handleTouchStart",function(event,index){_this2.addEventListeners();_this2.draggedHandle=index;// Calculate the relative offset to the handles center
 var handleDOMElement=event.target;// Get the handles bounding rectangle ...
 var handleRect=handleDOMElement.getBoundingClientRect();// ... and calculate its absolute center.
 var handleCenterX=handleRect.left+handleDOMElement.offsetWidth/2;// Store the signed distanced between the current touch offset and the handle center.
-_this.touchOffset=getTouchPositionX(event)-handleCenterX;});_defineProperty(_assertThisInitialized(_this),"handleTouchMove",function(event){if(_this.props.min===_this.props.max){return;}if(_this.draggedHandle===null){return;}var _this$domElement$curr=_this.domElement.current.getBoundingClientRect(),offsetWidth=_this$domElement$curr.width,offsetLeft=_this$domElement$curr.left;// Calculate the absolute offset where the element was touched...
-var deltaX=getTouchPositionX(event)-offsetLeft-_this.touchOffset;// ...and convert it into a relative value between [0...1].
-deltaX=Math.max(0,Math.min(1,deltaX/offsetWidth));var stateUpdate={};if(_this.draggedHandle===1){// Right handle dragged
-if(_this.state.rangeMin<deltaX){stateUpdate.rangeMax=Math.min(1,deltaX);_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this.state.rangeMax);}else{// Not in valid range, swap handles
-_this.draggedHandle=0;stateUpdate.rangeMax=_this.state.rangeMin;stateUpdate.rangeMin=deltaX;_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this.state.rangeMin);}}else if(_this.draggedHandle===0){// Left handle dragged
-if(_this.state.rangeMax>deltaX){stateUpdate.rangeMin=Math.max(0,deltaX);_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this.state.rangeMin);}else{// Not in valid range, swap handles
-_this.draggedHandle=1;stateUpdate.rangeMin=_this.state.rangeMax;stateUpdate.rangeMax=deltaX;_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this.state.rangeMax);}}_this.draggedHandlePixelOffset*=offsetWidth;_this.setState(stateUpdate,_this.triggerChangeCallback);});_defineProperty(_assertThisInitialized(_this),"handleTouchEnd",function(){_this.removeEventListeners();_this.touchOffset=0;_this.draggedHandle=null;});_defineProperty(_assertThisInitialized(_this),"handleRangeTouch",function(event){var _this$domElement$curr2=_this.domElement.current.getBoundingClientRect(),offsetWidth=_this$domElement$curr2.width,offsetLeft=_this$domElement$curr2.left;var dx=(getTouchPositionX(event)-offsetLeft)/offsetWidth;var d0=Math.abs(_this.state.rangeMin-dx);var d1=Math.abs(_this.state.rangeMax-dx);if(d0<d1){_this.draggedHandle=0;}else{_this.draggedHandle=1;}_this.handleTouchMove(event);});_defineProperty(_assertThisInitialized(_this),"handleInputChange",function(event){var max=_this.props.max;var _event$target=event.target,value=_event$target.value,id=_event$target.id;var delta=Math.max(0,Math.min(1,value/(max/100)));var state=id==='price_from'?{rangeMin:delta}:{rangeMax:delta};_this.setState(state);});_this.draggedHandle=null;// 0 for left handle, 1 for right handle or null
-_this.domElement=React.createRef();_this.touchOffset=0;_this.draggedHandlePixelOffset=0;// The absolute pixel delta of the last handle move event.
-_this.state=_this.getRange(props);_this.useMouseEvents=!isTouchDevice();return _this;}/**
+_this2.touchOffset=getTouchPositionX(event)-handleCenterX;});/**
+   * Processes move events on handles.
+   * @param {Object} event The touch event
+   */_defineProperty(_this2,"handleTouchMove",function(event){if(_this2.props.min===_this2.props.max){return;}if(_this2.draggedHandle===null){return;}var _this2$domElement$cur=_this2.domElement.current.getBoundingClientRect(),offsetWidth=_this2$domElement$cur.width,offsetLeft=_this2$domElement$cur.left;// Calculate the absolute offset where the element was touched...
+var deltaX=getTouchPositionX(event)-offsetLeft-_this2.touchOffset;// ...and convert it into a relative value between [0...1].
+deltaX=Math.max(0,Math.min(1,deltaX/offsetWidth));var stateUpdate={};if(_this2.draggedHandle===1){// Right handle dragged
+if(_this2.state.rangeMin<deltaX){stateUpdate.rangeMax=Math.min(1,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}else{// Not in valid range, swap handles
+_this2.draggedHandle=0;stateUpdate.rangeMax=_this2.state.rangeMin;stateUpdate.rangeMin=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}}else if(_this2.draggedHandle===0){// Left handle dragged
+if(_this2.state.rangeMax>deltaX){stateUpdate.rangeMin=Math.max(0,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}else{// Not in valid range, swap handles
+_this2.draggedHandle=1;stateUpdate.rangeMin=_this2.state.rangeMax;stateUpdate.rangeMax=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}}_this2.draggedHandlePixelOffset*=offsetWidth;_this2.setState(stateUpdate,_this2.triggerChangeCallback);});/**
+   * Processes global touch end events for handles.
+   * @param {Object} e The touch event
+   */_defineProperty(_this2,"handleTouchEnd",function(){_this2.removeEventListeners();_this2.touchOffset=0;_this2.draggedHandle=null;});/**
+   * Processes outer range touch end events.
+   * @param {Object} event The touch event
+   */_defineProperty(_this2,"handleRangeTouch",function(event){var _this2$domElement$cur2=_this2.domElement.current.getBoundingClientRect(),offsetWidth=_this2$domElement$cur2.width,offsetLeft=_this2$domElement$cur2.left;var dx=(getTouchPositionX(event)-offsetLeft)/offsetWidth;var d0=Math.abs(_this2.state.rangeMin-dx);var d1=Math.abs(_this2.state.rangeMax-dx);if(d0<d1){_this2.draggedHandle=0;}else{_this2.draggedHandle=1;}_this2.handleTouchMove(event);});/**
+   * Processes the input field values.
+   * @param {Object} event The change event.
+   */_defineProperty(_this2,"handleInputChange",function(event){var max=_this2.props.max;var _event$target=event.target,value=_event$target.value,id=_event$target.id;var delta=Math.max(0,Math.min(1,value/(max/100)));var state=id==='price_from'?{rangeMin:delta}:{rangeMax:delta};_this2.setState(state);});_this2.draggedHandle=null;// 0 for left handle, 1 for right handle or null
+_this2.domElement=React.createRef();_this2.touchOffset=0;_this2.draggedHandlePixelOffset=0;// The absolute pixel delta of the last handle move event.
+_this2.state=_this2.getRange(props);_this2.useMouseEvents=!isTouchDevice();return _this2;}/**
    * Updates the component properties.
    * @param {Object} newProps The new component properties.
-   */_createClass(RangeSlider,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(newProps){this.setState(this.getRange(newProps));}/**
+   */_inherits(RangeSlider,_PureComponent);return _createClass(RangeSlider,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(newProps){this.setState(this.getRange(newProps));}/**
    * Get the easing function.
-   */},{key:"addEventListeners",/**
+   */},{key:"ease",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(this.props.factor)}[this.props.easing];}/**
+   * Get the function to invert an eased value to it's original value.
+   */},{key:"invertedEase",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(1/this.props.factor)}[this.props.easing];}/**
    * Adds event listeners
-   */value:function addEventListeners(){if(this.useMouseEvents){document.addEventListener('mouseup',this.handleTouchEnd);document.addEventListener('mousemove',this.handleTouchMove);}else{document.addEventListener('touchend',this.handleTouchEnd);document.addEventListener('touchmove',this.handleTouchMove);}}/**
+   */},{key:"addEventListeners",value:function addEventListeners(){if(this.useMouseEvents){document.addEventListener('mouseup',this.handleTouchEnd);document.addEventListener('mousemove',this.handleTouchMove);}else{document.addEventListener('touchend',this.handleTouchEnd);document.addEventListener('touchmove',this.handleTouchMove);}}/**
    * Removes event listeners
    */},{key:"removeEventListeners",value:function removeEventListeners(){if(this.useMouseEvents){document.removeEventListener('mouseup',this.handleTouchEnd);document.removeEventListener('mousemove',this.handleTouchMove);}else{document.removeEventListener('touchend',this.handleTouchEnd);document.removeEventListener('touchmove',this.handleTouchMove);}}/**
    * Get range min and max from props.
    * @param {Object} props The component props.
    * @returns {Object} The new state
-   */},{key:"getRange",value:function getRange(props){var value=props.value,min=props.min,max=props.max;return{rangeMin:this.invertedEase(getRelativeValue(value[0],min,max)),rangeMax:this.invertedEase(getRelativeValue(value[1],min,max))};}/**
-   * Processes touch start events on handles.
-   * @param {Object} event The touch event
-   * @param {number} index The index of the touched handle.
-   */},{key:"triggerChangeCallback",/**
+   */},{key:"getRange",value:function getRange(props){var value=props.value,min=props.min,max=props.max;return{rangeMin:this.invertedEase(getRelativeValue(value[0],min,max)),rangeMax:this.invertedEase(getRelativeValue(value[1],min,max))};}},{key:"triggerChangeCallback",value:/**
    * Calls the change callback in case of a state update.
-   */value:function triggerChangeCallback(){var _this$props=this.props,value=_this$props.value,onChange=_this$props.onChange,min=_this$props.min,max=_this$props.max;if(!onChange){return;}var newRange=[getAbsoluteValue(this.ease(this.state.rangeMin),min,max,true),getAbsoluteValue(this.ease(this.state.rangeMax),min,max,true)];if(newRange!==value){onChange(newRange);}}/**
+   */function triggerChangeCallback(){var _this$props=this.props,value=_this$props.value,onChange=_this$props.onChange,min=_this$props.min,max=_this$props.max;if(!onChange){return;}var newRange=[getAbsoluteValue(this.ease(this.state.rangeMin),min,max,true),getAbsoluteValue(this.ease(this.state.rangeMax),min,max,true)];if(newRange!==value){onChange(newRange);}}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this$props2=this.props,classNames=_this$props2.classNames,animationSpeed=_this$props2.animationSpeed;var speed=Math.round(1000/animationSpeed*this.draggedHandlePixelOffset);var rangeStyle=getRangeStyle(this.state.rangeMin,this.state.rangeMax,speed>10?speed:0);return React.createElement("div",{className:cxs(classNames.container),onMouseDown:this.handleRangeTouch,"aria-hidden":true},React.createElement("div",{className:cxs(classNames.outerRange,styles.outerRange),ref:this.domElement},React.createElement("div",{className:cxs(classNames.range,styles.range),style:rangeStyle},React.createElement(Handle,{index:0,onTouchStart:this.handleTouchStart,active:this.draggedHandle===0,classNames:classNames,useMouseEvents:this.useMouseEvents}),React.createElement(Handle,{index:1,onTouchStart:this.handleTouchStart,active:this.draggedHandle===1,classNames:classNames,useMouseEvents:this.useMouseEvents}))));}},{key:"ease",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(this.props.factor)}[this.props.easing];}/**
-   * Get the function to invert an eased value to it's original value.
-   */},{key:"invertedEase",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(1/this.props.factor)}[this.props.easing];}}]);return RangeSlider;}(PureComponent);_defineProperty(RangeSlider,"defaultProps",{animationSpeed:500,classNames:{},easing:'linear',factor:2,max:100,min:0,resolution:1,value:[0,100],onChange:null});export default RangeSlider;
+   */},{key:"render",value:function render(){var _this$props2=this.props,classNames=_this$props2.classNames,animationSpeed=_this$props2.animationSpeed;var speed=Math.round(1000/animationSpeed*this.draggedHandlePixelOffset);var rangeStyle=getRangeStyle(this.state.rangeMin,this.state.rangeMax,speed>10?speed:0);return React.createElement("div",{className:cxs(classNames.container,'engage__range-slider'),onMouseDown:this.handleRangeTouch,"aria-hidden":true},React.createElement("div",{className:cxs(classNames.outerRange,styles.outerRange),ref:this.domElement},React.createElement("div",{className:cxs(classNames.range,styles.range),style:rangeStyle},React.createElement(Handle,{index:0,onTouchStart:this.handleTouchStart,active:this.draggedHandle===0,classNames:classNames,useMouseEvents:this.useMouseEvents}),React.createElement(Handle,{index:1,onTouchStart:this.handleTouchStart,active:this.draggedHandle===1,classNames:classNames,useMouseEvents:this.useMouseEvents}))));}}]);}(PureComponent);_defineProperty(RangeSlider,"defaultProps",{animationSpeed:500,classNames:{},easing:'linear',factor:2,max:100,min:0,resolution:1,value:[0,100],onChange:null});export default RangeSlider;

package/components/ResponsiveContainer/ResponsiveContainer.js

@@ -1,10 +1,6 @@
-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{useMemo,useEffect,useState}from'react';import PropTypes from'prop-types';import{addListener}from"./listener";import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
+import PropTypes from'prop-types';import{useResponsiveValue}from"./hooks";/**
  * Renders a responsive container that allows to render based on width.
  * @param {Object} props Component props.
  * @returns {React.Node}
- */var ResponsiveContainer=function ResponsiveContainer(_ref){var breakpoint=_ref.breakpoint,webOnly=_ref.webOnly,webAlways=_ref.webAlways,appOnly=_ref.appOnly,appAlways=_ref.appAlways,children=_ref.children;// Active breakpoint used for triggering rerenders on resize.
-var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeBreakpoint=_useState2[0],setActiveBreakpoint=_useState2[1];// Calculate if should render due to visibility.
-/* eslint-disable react-hooks/exhaustive-deps */var breakpointSafe=useMemo(function(){var parsed=parser(comparators,breakpoint,{breakpoint:breakpoint,webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});return parsed;},[activeBreakpoint,breakpoint]);/* eslint-enable react-hooks/exhaustive-deps */ // Watch for resize changes.
-useEffect(function(){return addListener(function(newBreakpoint){setActiveBreakpoint(newBreakpoint);});},[]);// Ignore rendering if one of given condition applies.
-if(!breakpointSafe){return null;}return children;};ResponsiveContainer.propTypes={appAlways:PropTypes.bool,appOnly:PropTypes.bool,breakpoint:PropTypes.string,// eslint-disable-next-line react/forbid-prop-types
+ */var ResponsiveContainer=function ResponsiveContainer(_ref){var breakpoint=_ref.breakpoint,webOnly=_ref.webOnly,webAlways=_ref.webAlways,appOnly=_ref.appOnly,appAlways=_ref.appAlways,children=_ref.children;var render=useResponsiveValue(breakpoint,{webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});if(!render){return null;}return children;};ResponsiveContainer.propTypes={appAlways:PropTypes.bool,appOnly:PropTypes.bool,breakpoint:PropTypes.string,// eslint-disable-next-line react/forbid-prop-types
 children:PropTypes.any,webAlways:PropTypes.bool,webOnly:PropTypes.bool};ResponsiveContainer.defaultProps={children:null,breakpoint:'>=xs',appAlways:false,webAlways:false,webOnly:false,appOnly:false};export default ResponsiveContainer;

package/components/ResponsiveContainer/breakpoints.js

@@ -1,4 +1,5 @@
-import{hasWebBridge,isIOSTheme}from'@shopgate/engage/core';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
+// Ugly imports to avoid breaking tests due to circular dependencies
+import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
  * Generates a media query for different breakpoints and platform.
  * @param {Object} comparators Comparators.
  * @param {string} breakpoint Breakpoint rule.

package/components/ResponsiveContainer/hooks.js

@@ -0,0 +1,20 @@
+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 _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{useState,useMemo,useEffect}from'react';import{addListener}from"./listener";import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
+ * Custom hook to determine the visibility or value based on the current active breakpoint
+ * and provided conditions.
+ * It listens for changes in the viewport or platform breakpoints and returns a value.
+ *
+ * @param {string} [breakpoint=">=xs"] - The breakpoint condition to match (e.g., '>=md', '<lg').
+ * @param {Object} [options={}] - Additional options for customizing behavior.
+ * @param {*} [options.valueMatch=true] - Return value when the provided conditions match.
+ * @param {*} [options.valueMiss=false] - Return value when the provided conditions do not match.
+ * @param {boolean} [options.webOnly=false] If true, the hook will only match in PWA website mode.
+ * @param {boolean} [options.webAlways=false] If true, the hook will always match in PWA website
+ * mode regardless of the breakpoint.
+ * @param {boolean} [options.appOnly=false] If true, the hook will only match in PWA app mode.
+ * @param {boolean} [options.appAlways=false] If true, the hook will always match in PWA app mode,
+ * regardless of the breakpoint.
+ * @returns {boolean}
+ */export var useResponsiveValue=function useResponsiveValue(){var breakpoint=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'>=xs';var options=arguments.length>1?arguments[1]:undefined;var _valueMatch$valueMiss=_extends({valueMatch:true,valueMiss:false,appAlways:false,appOnly:false,webAlways:false,webOnly:false},options),webOnly=_valueMatch$valueMiss.webOnly,webAlways=_valueMatch$valueMiss.webAlways,appOnly=_valueMatch$valueMiss.appOnly,appAlways=_valueMatch$valueMiss.appAlways,valueMiss=_valueMatch$valueMiss.valueMiss,valueMatch=_valueMatch$valueMiss.valueMatch;// Active breakpoint used for triggering rerenders on resize.
+var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeBreakpoint=_useState2[0],setActiveBreakpoint=_useState2[1];// Calculate if we have a match for the conditions
+/* eslint-disable react-hooks/exhaustive-deps */var isMatch=useMemo(function(){var parsed=parser(comparators,breakpoint,{breakpoint:breakpoint,webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});return parsed;},[activeBreakpoint,breakpoint]);/* eslint-enable react-hooks/exhaustive-deps */ // Watch for resize changes.
+useEffect(function(){return addListener(function(newBreakpoint){setActiveBreakpoint(newBreakpoint);});},[]);return isMatch?valueMatch:valueMiss;};

package/components/ScrollHeader/index.js

@@ -1,5 +1,5 @@
-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,{useState,useContext,useRef,useCallback,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import get from'lodash/get';import{useScroll,hasWebBridge}from'@shopgate/engage/core';import{header,hidden}from"./style";import{ViewContext}from"../View";/**
+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;}import React,{useState,useCallback,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{viewScroll$}from'@shopgate/engage/core/streams';import{root,scrolledIn,scrolledOut,transition}from"./style";/**
  * Scroll Header component
  * @param {Object} props props
  * @returns {JSX}
- */function ScrollHeader(_ref){var className=_ref.className,children=_ref.children;var ref=useRef();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];var _useContext=useContext(ViewContext),contentRef=_useContext.contentRef;var _useState3=useState(0),_useState4=_slicedToArray(_useState3,2),offset=_useState4[0],setOffset=_useState4[1];var _useState5=useState(0),_useState6=_slicedToArray(_useState5,2),offsetTop=_useState6[0],setOffsetTop=_useState6[1];var onScroll=useCallback(function(callbackData){var previousScrollTop=callbackData.previousScrollTop,currentScrollTop=callbackData.currentScrollTop;if(previousScrollTop!==currentScrollTop){var isScrolledDown=previousScrollTop<currentScrollTop;var box=ref.current.getBoundingClientRect();var stickHeader=currentScrollTop>=offset+100;if(!previousScrollTop){setOffset(currentScrollTop+box.top);}setShouldHideHeader(isScrolledDown&&stickHeader);}},[offset]);useScroll(onScroll,contentRef===null||contentRef===void 0?void 0:contentRef.current);useEffect(function(){if(!hasWebBridge()){var currentOffset=get(ref,'current.offsetTop');setOffsetTop(currentOffset);}},[]);return React.createElement("div",{ref:ref,className:classNames(header,shouldHideHeader&&hidden,className),style:offsetTop?{top:offsetTop}:{}},children);}ScrollHeader.defaultProps={className:null};export default ScrollHeader;
+ */function ScrollHeader(_ref){var className=_ref.className,children=_ref.children,hideOnScroll=_ref.hideOnScroll,scrollOffset=_ref.scrollOffset;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];var onScroll=useCallback(function(scrollEvent){var scrollTop=scrollEvent.scrollTop,scrolled=scrollEvent.scrolled,scrollOut=scrollEvent.scrollOut,scrollIn=scrollEvent.scrollIn;if(!scrolled){return;}if(!shouldHideHeader&&scrollOut&&scrollTop>=scrollOffset){setShouldHideHeader(true);}if(shouldHideHeader&&scrollIn){setShouldHideHeader(false);}},[scrollOffset,shouldHideHeader]);useEffect(function(){if(hideOnScroll){var subscription=viewScroll$.subscribe(onScroll);return function(){return subscription.unsubscribe();};}return undefined;});return React.createElement("div",{className:classNames(root,transition,className,_defineProperty(_defineProperty({},scrolledIn,!shouldHideHeader),scrolledOut,shouldHideHeader))},children);}ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100};export default ScrollHeader;

package/components/ScrollHeader/style.js

@@ -1 +1 @@
-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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var header=css(_defineProperty({position:'sticky',left:0,backgroundColor:'#fff',transform:'translateY(0)',transition:'transform 0.3s ease'},responsiveMediaQuery('<=xs',{appAlways:true}),{boxShadow:'rgba(0, 0, 0, 0.118) 0px 1px 6px, rgba(0, 0, 0, 0.118) 0px 1px 4px'})).toString();export var hidden=css({transform:'translateY(-250%)'}).toString();
+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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var root=css(_defineProperty({position:'sticky',left:0,backgroundColor:'#fff'},responsiveMediaQuery('<=xs',{appAlways:true}),{boxShadow:'rgba(0, 0, 0, 0.118) 0px 1px 6px, rgba(0, 0, 0, 0.118) 0px 1px 4px'}));export var scrolledIn=css({'&&':{transform:'translateY(0%)'}});export var scrolledOut=css({'&&':{transform:'translateY(-250%)'}});export var transition=css({transition:'transform 0.2s ease,transform 0.2s'});

package/components/SheetList/components/Item/index.js

@@ -1,17 +1,17 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core';import Grid from'@shopgate/pwa-common/components/Grid';import Link from'@shopgate/pwa-common/components/Link';import Glow from'@shopgate/pwa-ui-shared/Glow';import styles from"./style";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core';import Grid from'@shopgate/pwa-common/components/Grid';import Link from'@shopgate/pwa-common/components/Link';import Glow from'@shopgate/pwa-ui-shared/Glow';import styles from"./style";/**
  * The list item component.
- */var Item=/*#__PURE__*/function(_Component){_inherits(Item,_Component);function Item(){_classCallCheck(this,Item);return _possibleConstructorReturn(this,_getPrototypeOf(Item).apply(this,arguments));}_createClass(Item,[{key:"shouldComponentUpdate",/**
+ */var Item=/*#__PURE__*/function(_Component){function Item(){_classCallCheck(this,Item);return _callSuper(this,Item,arguments);}_inherits(Item,_Component);return _createClass(Item,[{key:"shouldComponentUpdate",value:/**
    * Should only update what the `selected` or `disabled` props change.
    * @param {Object} nextProps The next set of component props.
    * @returns {JSX}
-   */value:function shouldComponentUpdate(nextProps){return this.props.isSelected!==nextProps.isSelected||this.props.isDisabled!==nextProps.isDisabled;}/**
+   */function shouldComponentUpdate(nextProps){return this.props.isSelected!==nextProps.isSelected||this.props.isDisabled!==nextProps.isDisabled;}/**
    * Renders the bulk of the content.
    * @param {boolean} [isNested=true] Tells if the content is rendered nested.
    * @returns {JSX}
-   */},{key:"renderContent",value:function renderContent(){var _gridStyles,_titleStyles;var isNested=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var _this$props=this.props,isDisabled=_this$props.isDisabled,isSelected=_this$props.isSelected,title=_this$props.title,image=_this$props.image,rightComponent=_this$props.rightComponent,forwardedRef=_this$props.forwardedRef,description=_this$props.description;var gridStyles=(_gridStyles={},_defineProperty(_gridStyles,styles.grid,true),_defineProperty(_gridStyles,styles.selected,isSelected),_gridStyles);var titleStyles=(_titleStyles={},_defineProperty(_titleStyles,styles.title,true),_defineProperty(_titleStyles,styles.disabled,isDisabled),_titleStyles);var ref=isNested?null:forwardedRef;return React.createElement("div",{"data-test-id":this.props.testId,ref:ref},React.createElement(Grid,{className:classNames(gridStyles),component:"div"},image!==null&&React.createElement("div",{className:styles.image},image),React.createElement(Grid.Item,{className:classNames(titleStyles),component:"div",grow:1},React.createElement("div",null,title),description&&React.createElement("div",{className:styles.description,dangerouslySetInnerHTML:{__html:description}})),rightComponent!==null&&React.createElement(Grid.Item,{component:"div",grow:1},rightComponent)));}/**
+   */},{key:"renderContent",value:function renderContent(){var isNested=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var _this$props=this.props,isDisabled=_this$props.isDisabled,isSelected=_this$props.isSelected,title=_this$props.title,image=_this$props.image,rightComponent=_this$props.rightComponent,forwardedRef=_this$props.forwardedRef,description=_this$props.description;var gridStyles=_defineProperty(_defineProperty({},styles.grid,true),styles.selected,isSelected);var titleStyles=_defineProperty(_defineProperty({},styles.title,true),styles.disabled,isDisabled);var ref=isNested?null:forwardedRef;return React.createElement("div",{"data-test-id":this.props.testId,ref:ref,className:"engage__sheet-list__item"},React.createElement(Grid,{className:classNames(gridStyles),component:"div"},image!==null&&React.createElement("div",{className:styles.image},image),React.createElement(Grid.Item,{className:classNames(titleStyles),component:"div",grow:1},React.createElement("div",null,title),description&&React.createElement("div",{className:styles.description,dangerouslySetInnerHTML:{__html:description}})),rightComponent!==null&&React.createElement(Grid.Item,{component:"div",grow:1},rightComponent)));}/**
    * @returns {JSX}
    */},{key:"render",value:function render(){var _this$props2=this.props,link=_this$props2.link,linkState=_this$props2.linkState,LinkComponent=_this$props2.linkComponent,onClick=_this$props2.onClick,className=_this$props2.className,isDisabled=_this$props2.isDisabled,testId=_this$props2.testId,forwardedRef=_this$props2.forwardedRef,isSelected=_this$props2.isSelected;/**
      * If this item is disabled, selected or doesn't have a valid
      * link or click handler then wrap the content with other components.
      */if(isDisabled||!link&&!onClick){return this.renderContent(false);}// Wrap with a <Link> if the `link` prop is set.
-if(link){return React.createElement(Glow,{ref:forwardedRef,className:className,styles:{hover:styles.glowHover}},React.createElement(LinkComponent,{href:link,onClick:onClick,state:linkState,tabIndex:0},this.renderContent()));}return React.createElement("div",{onKeyPress:function onKeyPress(){},onClick:onClick,"data-test-id":testId,ref:forwardedRef,tabIndex:0,role:"option","aria-selected":isSelected},React.createElement(Glow,{className:className,styles:{hover:styles.glowHover}},this.renderContent()));}}]);return Item;}(Component);_defineProperty(Item,"defaultProps",{className:null,description:null,forwardedRef:null,image:null,isDisabled:false,isSelected:false,link:null,linkState:null,onClick:null,rightComponent:null,linkComponent:Link,testId:null});export default withForwardedRef(Item);
+if(link){return React.createElement(Glow,{ref:forwardedRef,className:className,styles:{hover:styles.glowHover}},React.createElement(LinkComponent,{href:link,onClick:onClick,state:linkState,tabIndex:0},this.renderContent()));}return React.createElement("div",{onKeyPress:function onKeyPress(){},onClick:onClick,"data-test-id":testId,ref:forwardedRef,tabIndex:0,role:"option","aria-selected":isSelected},React.createElement(Glow,{className:className,styles:{hover:styles.glowHover}},this.renderContent()));}}]);}(Component);_defineProperty(Item,"defaultProps",{className:null,description:null,forwardedRef:null,image:null,isDisabled:false,isSelected:false,link:null,linkState:null,onClick:null,rightComponent:null,linkComponent:Link,testId:null});export default withForwardedRef(Item);

package/components/SheetList/index.js

@@ -1,9 +1,9 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import List from'@shopgate/pwa-common/components/List';import Item from"./components/Item";import styles from"./style";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import List from'@shopgate/pwa-common/components/List';import Item from"./components/Item";import styles from"./style";/**
  * The SheetList component.
  * Styled sheet for List component
- */var SheetList=/*#__PURE__*/function(_Component){_inherits(SheetList,_Component);function SheetList(){_classCallCheck(this,SheetList);return _possibleConstructorReturn(this,_getPrototypeOf(SheetList).apply(this,arguments));}_createClass(SheetList,[{key:"render",/**
+ */var SheetList=/*#__PURE__*/function(_Component){function SheetList(){_classCallCheck(this,SheetList);return _callSuper(this,SheetList,arguments);}_inherits(SheetList,_Component);return _createClass(SheetList,[{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */value:function render(){var _itemClasses;var _this$props=this.props,children=_this$props.children,className=_this$props.className,hasImages=_this$props.hasImages,testId=_this$props.testId;if(!React.Children.count(children)){return null;}var itemClasses=(_itemClasses={},_defineProperty(_itemClasses,styles.item,true),_defineProperty(_itemClasses,styles.itemWithImage,hasImages),_itemClasses);return React.createElement(List,{className:className,role:"listbox"},React.Children.map(children,function(child,index){var _childClasses;if(!React.isValidElement(child)){return null;}// The key for each child.
+   */function render(){var _this$props=this.props,children=_this$props.children,className=_this$props.className,hasImages=_this$props.hasImages,testId=_this$props.testId;if(!React.Children.count(children)){return null;}var itemClasses=_defineProperty(_defineProperty({},styles.item,true),styles.itemWithImage,hasImages);return React.createElement(List,{className:"".concat(className," engage__sheet-list"),role:"listbox"},React.Children.map(children,function(child,index){if(!React.isValidElement(child)){return null;}// The key for each child.
 var key="child-".concat(index);// Selected state for the child.
-var isSelected=child.props.isSelected;var childClasses=(_childClasses={},_defineProperty(_childClasses,styles.itemSelected,isSelected),_defineProperty(_childClasses,styles.itemNotLast,!isSelected),_childClasses);return React.createElement(List.Item,{className:classNames(itemClasses,childClasses),isSelected:isSelected,key:key,tabIndex:0},React.createElement("div",{className:styles.innerContainer,"data-test-id":testId},child));}));}}]);return SheetList;}(Component);_defineProperty(SheetList,"Item",Item);_defineProperty(SheetList,"defaultProps",{children:null,className:null,hasImages:false,testId:null});export default SheetList;
+var isSelected=child.props.isSelected;var childClasses=_defineProperty(_defineProperty({},styles.itemSelected,isSelected),styles.itemNotLast,!isSelected);return React.createElement(List.Item,{className:classNames(itemClasses,childClasses),isSelected:isSelected,key:key,tabIndex:0},React.createElement("div",{className:styles.innerContainer,"data-test-id":testId},child));}));}}]);}(Component);_defineProperty(SheetList,"Item",Item);_defineProperty(SheetList,"defaultProps",{children:null,className:null,hasImages:false,testId:null});export default SheetList;

package/components/SideNavigation/SideNavigationCategories.connector.js

@@ -1,8 +1,8 @@
-import{connect}from'react-redux';import _fetchCategory from'@shopgate/pwa-common-commerce/category/actions/getCategory';import{makeGetAreRootCategoriesFetching,makeGetSubcategoriesByCategoryId}from"./selectors";/**
+import{connect}from'react-redux';import{fetchCategoryOrRootCategories}from'@shopgate/engage/category';import{makeGetAreRootCategoriesFetching,makeGetSubcategoriesByCategoryId}from"./selectors";/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
  */var makeMapStateToProps=function makeMapStateToProps(){var getAreRootCategoriesFetching=makeGetAreRootCategoriesFetching();var getSubcategoriesByCategoryId=makeGetSubcategoriesByCategoryId();return function(state,_ref){var categoryId=_ref.categoryId;return{rootCategoriesFetching:getAreRootCategoriesFetching(state),subcategories:getSubcategoriesByCategoryId(state,{categoryId:categoryId})};};};/**
  * Maps the contents of the state to the component props.
  * @param  {Function} dispatch The redux dispatch function.
  * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchCategory:function fetchCategory(id){return dispatch(_fetchCategory(id));}};};export default connect(makeMapStateToProps,mapDispatchToProps);
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchCategory:function fetchCategory(id){return dispatch(fetchCategoryOrRootCategories(id));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/components/SnackBarContainer/index.js

@@ -0,0 +1,5 @@
+import React from'react';import{createPortal}from'react-dom';import{SnackBar}from'@shopgate/pwa-ui-material';/**
+ * The SnackBarContainer component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */function SnackBarContainer(props){if(!props.toasts.length){return null;}return createPortal(React.createElement(SnackBar,props),document.getElementById('portals'));}export default SnackBarContainer;

package/components/Switch/index.js

@@ -0,0 +1,12 @@
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{VisuallyHidden}from'@shopgate/engage/a11y/components';import styles from"./style";/**
+ * The Switch component.
+ * @param {Object} props The component props.
+ * @param {React.ReactNode} [children=null] Component children are rendered as the checkbox label
+ * @param {boolean} [props.checked=false] Whether the checkbox is checked
+ * @param {boolean} [props.disabled=false] Whether the checkbox is disabled
+ * @param {Function} [props.onChange] Callback invoked when the checkbox changes
+ * @param {string} [props.a11yFallbackText=null] Optional text to be presented to screen readers
+ * when issues with the regular label are expected e.g. due to problematic layout.
+ * @param {string} [props.id=null] Optional custom id for checkbox input and label
+ * @returns {JSX.Element}
+ */var Switch=function Switch(_ref){var disabled=_ref.disabled,checked=_ref.checked,onChange=_ref.onChange,id=_ref.id,a11yFallbackText=_ref.a11yFallbackText,children=_ref.children;var switchId=useMemo(function(){return id||Math.random();},[id]);return React.createElement("div",{className:styles.container},React.createElement("input",{type:"checkbox",disabled:disabled,checked:checked,onChange:onChange,className:styles.input,id:switchId}),children&&React.createElement("label",{htmlFor:switchId},React.createElement("span",{"aria-hidden":!!a11yFallbackText},children),a11yFallbackText&&React.createElement(VisuallyHidden,null,a11yFallbackText)));};Switch.defaultProps={children:null,disabled:false,a11yFallbackText:null,checked:false,onChange:null,id:null};export default Switch;

package/components/Switch/style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',flex:1,textAlign:'left',justifyContent:'space-between',flexDirection:'row-reverse',gap:'32px'});var input=css({display:'flex',flexShrink:0,appearance:'none',width:'40px',height:'20px',backgroundColor:'#ccc',borderRadius:'10px',position:'relative',cursor:'pointer',':before':{content:'""',position:'absolute',top:'2px',left:'2px',width:'16px',height:'16px',backgroundColor:'white',borderRadius:'50%',transition:'transform 0.3s'},':checked':{backgroundColor:themeConfig.colors.accent},':checked::before':{transform:'translateX(20px)'},':disabled':{backgroundColor:themeConfig.colors.shade7,cursor:'not-allowed'}});export default{container:container,input:input};

package/components/Tabs/components/TabIndicator.js

@@ -1,5 +1,5 @@
-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 _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*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{root}from"./TabIndicator.style";/**
+var _excluded=["className"];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 _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*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{root}from"./TabIndicator.style";/**
  * Tab indicator component
  * @param {Object} props props
  * @returns {JSX}
- */var TabIndicator=function TabIndicator(_ref){var className=_ref.className,other=_objectWithoutProperties(_ref,["className"]);return React.createElement("span",_extends({className:classNames(root,className)},other));};TabIndicator.defaultProps={className:null};export default TabIndicator;
+ */var TabIndicator=function TabIndicator(_ref){var className=_ref.className,other=_objectWithoutProperties(_ref,_excluded);return React.createElement("span",_extends({className:classNames(root,className)},other));};TabIndicator.defaultProps={className:null};export default TabIndicator;

package/components/Tabs/components/Tabs.js

@@ -6,6 +6,6 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
    * Get Tabs Meta
    * @returns {Object}
    */var getTabsMeta=function getTabsMeta(){var tabsNode=tabsRef.current;var tabsMeta;if(tabsNode){var rect=tabsNode.getBoundingClientRect();// create a new object with ClientRect class props + scrollLeft
-tabsMeta={clientWidth:tabsNode.clientWidth,top:rect.top,bottom:rect.bottom,left:rect.left,right:rect.right};}var tabMeta;if(tabsNode&&value!==false){var _children=tabListRef.current.children;if(_children.length>0){var tab=_children[valueToIndex.get(value)];tabMeta=tab?tab.getBoundingClientRect():null;}}return{tabsMeta:tabsMeta,tabMeta:tabMeta};};var updateIndicatorState=useEventCallback(function(){var _newIndicatorStyle;var _getTabsMeta=getTabsMeta(),tabsMeta=_getTabsMeta.tabsMeta,tabMeta=_getTabsMeta.tabMeta;var startValue=0;if(tabMeta&&tabsMeta){startValue=tabMeta.left-tabsMeta.left;}var newIndicatorStyle=(_newIndicatorStyle={},_defineProperty(_newIndicatorStyle,start,startValue),_defineProperty(_newIndicatorStyle,size,tabMeta?tabMeta[size]:0),_newIndicatorStyle);// IE 11 support, replace with Number.isNaN
+tabsMeta={clientWidth:tabsNode.clientWidth,top:rect.top,bottom:rect.bottom,left:rect.left,right:rect.right};}var tabMeta;if(tabsNode&&value!==false){var _children=tabListRef.current.children;if(_children.length>0){var tab=_children[valueToIndex.get(value)];tabMeta=tab?tab.getBoundingClientRect():null;}}return{tabsMeta:tabsMeta,tabMeta:tabMeta};};var updateIndicatorState=useEventCallback(function(){var _getTabsMeta=getTabsMeta(),tabsMeta=_getTabsMeta.tabsMeta,tabMeta=_getTabsMeta.tabMeta;var startValue=0;if(tabMeta&&tabsMeta){startValue=tabMeta.left-tabsMeta.left;}var newIndicatorStyle=_defineProperty(_defineProperty({},start,startValue),size,tabMeta?tabMeta[size]:0);// IE 11 support, replace with Number.isNaN
 // eslint-disable-next-line no-restricted-globals
 if(isNaN(indicatorStyle[start])||isNaN(indicatorStyle[size])){setIndicatorStyle(newIndicatorStyle);}else{var dStart=Math.abs(indicatorStyle[start]-newIndicatorStyle[start]);var dSize=Math.abs(indicatorStyle[size]-newIndicatorStyle[size]);if(dStart>=1||dSize>=1){setIndicatorStyle(newIndicatorStyle);}}});React.useEffect(function(){var handleResize=debounce(function(){updateIndicatorState();});var win=ownerWindow(tabsRef.current);win.addEventListener('resize',handleResize);return function(){handleResize.clear();win.removeEventListener('resize',handleResize);};},[updateIndicatorState]);React.useEffect(function(){setMounted(true);},[]);React.useEffect(function(){updateIndicatorState();});var indicator=React.createElement(TabIndicator,{style:indicatorStyle});var childIndex=0;var children=React.Children.map(childrenProp,function(child){if(!React.isValidElement(child)){return null;}var childValue=child.props.value===undefined?childIndex:child.props.value;valueToIndex.set(childValue,childIndex);var selected=childValue===value;childIndex+=1;return React.cloneElement(child,{indicator:selected&&!mounted&&indicator,selected:selected,onChange:onChange,value:childValue});});return React.createElement("div",{className:classNames(root,className)},React.createElement("div",{className:classNames(fixed),ref:tabsRef},React.createElement("div",{className:classNames(flexContainer),ref:tabListRef,role:"tablist"},children),mounted&&indicator));};Tabs.defaultProps={className:null};export default Tabs;

package/components/TimeBoundary/index.js

@@ -1,4 +1,4 @@
-import _isEqual from"lodash/isEqual";function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component,Fragment}from'react';import PropTypes from'prop-types';import{isBefore,isAfter,isBetween}from'@shopgate/pwa-common/helpers/date';import{second$}from'@shopgate/pwa-common/streams/interval';/**
+import _isEqual from"lodash/isEqual";function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component,Fragment}from'react';import PropTypes from'prop-types';import{isBefore,isAfter,isBetween}from'@shopgate/pwa-common/helpers/date';import{second$}from'@shopgate/pwa-common/streams/interval';/**
  * The TimeBoundary component.
  * @example
  *    <TimeBoundary
@@ -9,13 +9,15 @@ import _isEqual from"lodash/isEqual";function _typeof(obj){if(typeof Symbol==="f
            {between && <div>Content is inside time boundary</div>}
         )}
  *     </TimeBoundary>
- */var TimeBoundary=/*#__PURE__*/function(_Component){_inherits(TimeBoundary,_Component);function TimeBoundary(props){var _this;_classCallCheck(this,TimeBoundary);_this=_possibleConstructorReturn(this,_getPrototypeOf(TimeBoundary).call(this,props));_defineProperty(_assertThisInitialized(_this),"clear",function(){if(_this.intervalSubscription){_this.intervalSubscription.unsubscribe();}});_defineProperty(_assertThisInitialized(_this),"checkBoundary",function(){var now=new Date(Date.now());var newState={before:isBefore(now,_this.props.start),between:isBetween(now,_this.props.start,_this.props.end),after:isAfter(now,_this.props.end)};if(_isEqual(newState,_this.state)){return;}_this.setState(newState);if(newState.after){// already after, stop timer
-_this.clear();}});_this.state={before:false,between:false,after:false};return _this;}/**
+ */var TimeBoundary=/*#__PURE__*/function(_Component){function TimeBoundary(props){var _this2;_classCallCheck(this,TimeBoundary);_this2=_callSuper(this,TimeBoundary,[props]);/** Clear interval if valid */_defineProperty(_this2,"clear",function(){if(_this2.intervalSubscription){_this2.intervalSubscription.unsubscribe();}});/**
+   * Check time boundary.
+   */_defineProperty(_this2,"checkBoundary",function(){var now=new Date(Date.now());var newState={before:isBefore(now,_this2.props.start),between:isBetween(now,_this2.props.start,_this2.props.end),after:isAfter(now,_this2.props.end)};if(_isEqual(newState,_this2.state)){return;}_this2.setState(newState);if(newState.after){// already after, stop timer
+_this2.clear();}});_this2.state={before:false,between:false,after:false};return _this2;}/**
    * @inheritDoc
-   */_createClass(TimeBoundary,[{key:"componentDidMount",value:function componentDidMount(){this.intervalSubscription=second$.subscribe(this.checkBoundary);this.checkBoundary();}/**
+   */_inherits(TimeBoundary,_Component);return _createClass(TimeBoundary,[{key:"componentDidMount",value:function componentDidMount(){this.intervalSubscription=second$.subscribe(this.checkBoundary);this.checkBoundary();}/**
    * @inheritDoc
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){this.clear();}/** Clear interval if valid */},{key:"render",/**
+   */},{key:"componentWillUnmount",value:function componentWillUnmount(){this.clear();}},{key:"render",value:/**
    * @returns {JSX}
-   */value:function render(){return React.createElement(Fragment,null,this.props.children(this.state));}}]);return TimeBoundary;}(Component);_defineProperty(TimeBoundary,"defaultProps",{end:null,start:null/**
+   */function render(){return React.createElement(Fragment,null,this.props.children(this.state));}}]);}(Component);_defineProperty(TimeBoundary,"defaultProps",{end:null,start:null/**
    * @inheritDoc
    */});export default TimeBoundary;

package/components/VideoPlayer/index.js

@@ -1,14 +1,17 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{PureComponent}from'react';import ReactPlayer from'react-player';import{UIEvents}from'@shopgate/pwa-core';import{UI_VISIBILITY_CHANGE}from'@shopgate/pwa-common/constants/ui';/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{PureComponent}from'react';import ReactPlayer from'react-player';import{UIEvents}from'@shopgate/pwa-core';import{UI_VISIBILITY_CHANGE}from'@shopgate/pwa-common/constants/ui';/**
  * Video player component
  * @param {Object} props props
  * @returns {JSX}
- */var VideoPlayer=/*#__PURE__*/function(_PureComponent){_inherits(VideoPlayer,_PureComponent);function VideoPlayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,VideoPlayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(VideoPlayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this),"state",{ready:false,playing:_this.props.playing,userPaused:false/**
+ */var VideoPlayer=/*#__PURE__*/function(_PureComponent){function VideoPlayer(){var _this2;_classCallCheck(this,VideoPlayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,VideoPlayer,[].concat(args));_defineProperty(_this2,"state",{ready:false,playing:_this2.props.playing,userPaused:false/**
    * @inheritDoc
-   */});_defineProperty(_assertThisInitialized(_this),"getPlayingState",function(){return _this.state.ready&&!_this.state.userPaused&&_this.state.playing;});_defineProperty(_assertThisInitialized(_this),"handleReady",function(){_this.setState({ready:true});});_defineProperty(_assertThisInitialized(_this),"handleError",function(error){if(error&&error.name==='NotAllowedError'){_this.setState({playing:false});}});_defineProperty(_assertThisInitialized(_this),"handlePause",function(){// Check if was not paused programmatically
-if(_this.state.playing){_this.setState({userPaused:true,playing:false});}});_defineProperty(_assertThisInitialized(_this),"handlePlay",function(){if(!_this.state.playing){_this.setState({userPaused:false,playing:true});}});_defineProperty(_assertThisInitialized(_this),"handleVisibilityChange",function(){_this.setState({playing:false});});return _this;}_createClass(VideoPlayer,[{key:"componentDidMount",value:function componentDidMount(){UIEvents.addListener(UI_VISIBILITY_CHANGE,this.handleVisibilityChange);}/**
+   */});/** @returns {boolean} */_defineProperty(_this2,"getPlayingState",function(){return _this2.state.ready&&!_this2.state.userPaused&&_this2.state.playing;});/** @returns {void} */_defineProperty(_this2,"handleReady",function(){_this2.setState({ready:true});});/**
+   * Not allowed autoplay error (User gesture permission)
+   * @param {Object} error error
+   */_defineProperty(_this2,"handleError",function(error){if(error&&error.name==='NotAllowedError'){_this2.setState({playing:false});}});/** @returns {undefined} */_defineProperty(_this2,"handlePause",function(){// Check if was not paused programmatically
+if(_this2.state.playing){_this2.setState({userPaused:true,playing:false});}});/** @returns {undefined} */_defineProperty(_this2,"handlePlay",function(){if(!_this2.state.playing){_this2.setState({userPaused:false,playing:true});}});/** @returns {undefined} */_defineProperty(_this2,"handleVisibilityChange",function(){_this2.setState({playing:false});});return _this2;}_inherits(VideoPlayer,_PureComponent);return _createClass(VideoPlayer,[{key:"componentDidMount",value:function componentDidMount(){UIEvents.addListener(UI_VISIBILITY_CHANGE,this.handleVisibilityChange);}/**
    * @inheritDoc
    */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){var nextState={playing:nextProps.playing};if(this.props.url!==nextProps.url){nextState.ready=false;}this.setState(nextState);}/**
    * @inheritDoc
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(UI_VISIBILITY_CHANGE,this.handleVisibilityChange);}/** @returns {boolean} */},{key:"render",/**
+   */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(UI_VISIBILITY_CHANGE,this.handleVisibilityChange);}},{key:"render",value:/**
    * @returns {JSX}
-   */value:function render(){return React.createElement(ReactPlayer,_extends({playsinline:true},this.props,{playing:this.getPlayingState(),onReady:this.handleReady,onPause:this.handlePause,onPlay:this.handlePlay,onError:this.handleError}));}}]);return VideoPlayer;}(PureComponent);_defineProperty(VideoPlayer,"defaultProps",ReactPlayer.defaultProps);export default VideoPlayer;
+   */function render(){return React.createElement(ReactPlayer,_extends({playsinline:true},this.props,{playing:this.getPlayingState(),onReady:this.handleReady,onPause:this.handlePause,onPlay:this.handlePlay,onError:this.handleError}));}}]);}(PureComponent);_defineProperty(VideoPlayer,"defaultProps",ReactPlayer.defaultProps);export default VideoPlayer;

package/components/View/components/Above/index.js

@@ -1,3 +1,3 @@
 import React from'react';import{ViewContext}from"../../context";/**
  * @returns {JSX}
- */function ViewAbove(){return React.createElement(ViewContext.Consumer,null,function(_ref){var top=_ref.top;if(!top){return null;}var styles={flexShrink:0,height:"calc(".concat(top,"px + var(--safe-area-inset-top))")};return React.createElement("div",{"aria-hidden":true,style:styles});});}export default ViewAbove;
+ */function ViewAbove(){return React.createElement(ViewContext.Consumer,null,function(_ref){var top=_ref.top;if(!top){return null;}var styles={flexShrink:0,height:"calc(".concat(top,"px + var(--safe-area-inset-top))")};return React.createElement("div",{"aria-hidden":true,style:styles,className:"engage__view__above"});});}export default ViewAbove;