@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.19

package/reviews/components/Reviews/components/List/spec.js

@@ -1 +1 @@
-import React from'react';import{mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import List from"./index";describe('<List />',function(){var list=null;var reviews=[{id:'a',author:'',date:'2017-09-06T12:38:51.000Z',rate:100,title:'',review:'No Name and Title Lorem ipsum dolor sit amet, con… takimata sanctus est Lorem ipsum dolor sit amet.'},{id:'b',author:'username123',date:'2017-09-06T12:37:40.000Z',rate:40,title:'Test review 2 ',review:'Lorem ipsum dolor sit amet, consetetur sadipscing … takimata sanctus est Lorem ipsum dolor sit amet.'},{id:'c',author:'Carina Hoffmann',date:'2017-09-06T12:30:23.000Z',rate:60,title:'',review:'Test review'},{id:'d',author:'',date:'2017-09-06T12:30:23.000Z',rate:20,title:'',review:''}];beforeEach(function(){list=mount(/*#__PURE__*/React.createElement(List,{reviews:[]}),mockRenderOptions);});it('should not render when no reviews given',function(){expect(list).toMatchSnapshot();expect(list.find('Review').exists()).toBe(false);});it('should render list with reviews',function(){list.setProps({reviews:reviews});expect(list).toMatchSnapshot();expect(list.find('List > ul').exists()).toBe(true);list.find('Review').forEach(function(node,i){var ratingNode=node.find('Rating');expect(ratingNode.prop('rate')).toEqual(reviews[i].rate);expect(ratingNode.find('RatingStars').prop('value')).toEqual(reviews[i].rate);expect(node.find('Info').prop('review').date).toEqual(reviews[i].date);if(reviews[i].author){expect(node.find('Info').prop('review').author).toEqual(reviews[i].author);}if(reviews[i].title){expect(node.find('Title').prop('title')).toEqual(reviews[i].title);}if(reviews[i].review){expect(node.find('Text').prop('review')).toEqual(reviews[i].review);}});});});
+import React from'react';import{mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import List from"./index";jest.mock('@shopgate/engage/components');describe('<List />',function(){var list=null;var reviews=[{id:'a',author:'',date:'2017-09-06T12:38:51.000Z',rate:100,title:'',review:'No Name and Title Lorem ipsum dolor sit amet, con… takimata sanctus est Lorem ipsum dolor sit amet.'},{id:'b',author:'username123',date:'2017-09-06T12:37:40.000Z',rate:40,title:'Test review 2 ',review:'Lorem ipsum dolor sit amet, consetetur sadipscing … takimata sanctus est Lorem ipsum dolor sit amet.'},{id:'c',author:'Carina Hoffmann',date:'2017-09-06T12:30:23.000Z',rate:60,title:'',review:'Test review'},{id:'d',author:'',date:'2017-09-06T12:30:23.000Z',rate:20,title:'',review:''}];beforeEach(function(){list=mount(React.createElement(List,{reviews:[]}),mockRenderOptions);});it('should not render when no reviews given',function(){expect(list).toMatchSnapshot();expect(list.find('Review').exists()).toBe(false);});it('should render list with reviews',function(){list.setProps({reviews:reviews});expect(list).toMatchSnapshot();expect(list.find('List > ul').exists()).toBe(true);list.find('Review').forEach(function(node,i){var ratingNode=node.find('Rating');expect(ratingNode.prop('rate')).toEqual(reviews[i].rate);expect(ratingNode.find('RatingStars').prop('value')).toEqual(reviews[i].rate);expect(node.find('Info').prop('review').date).toEqual(reviews[i].date);if(reviews[i].author){expect(node.find('Info').prop('review').author).toEqual(reviews[i].author);}if(reviews[i].title){expect(node.find('Title').prop('title')).toEqual(reviews[i].title);}if(reviews[i].review){expect(node.find('Text').prop('review')).toEqual(reviews[i].review);}});});});

package/reviews/components/Reviews/components/RatingCount/index.js

@@ -1,4 +1,4 @@
 function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import{greyStyle,prominentStyle}from"./style";/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var RatingCount=function RatingCount(props){var _classNames;if(!props.count){return null;}return/*#__PURE__*/React.createElement(I18n.Text,{string:"reviews.review_count",params:props,className:classNames((_classNames={},_defineProperty(_classNames,greyStyle,true),_defineProperty(_classNames,prominentStyle,props.prominent),_classNames),'engage__reviews__rating-count')});};RatingCount.defaultProps={count:null,prominent:false};export default RatingCount;
+ */var RatingCount=function RatingCount(props){if(!props.count){return null;}return React.createElement(I18n.Text,{string:"reviews.review_count",params:props,className:classNames(_defineProperty(_defineProperty({},greyStyle,true),prominentStyle,props.prominent),'engage__reviews__rating-count')});};RatingCount.defaultProps={count:null,prominent:false};export default RatingCount;

package/reviews/components/Reviews/components/RatingCount/spec.js

@@ -1 +1 @@
-import React from'react';import{mount}from'enzyme';import RatingCount from"./index";describe('<RatingCount>',function(){it('should render nothing when count is 0',function(){var rating=mount(/*#__PURE__*/React.createElement(RatingCount,{count:0}));expect(rating.find('span').exists()).toBe(false);});it('should render text when count is more than 0',function(){var rating=mount(/*#__PURE__*/React.createElement(RatingCount,{count:1}));expect(rating.find('span').exists()).toBe(true);});});
+import React from'react';import{mount}from'enzyme';import RatingCount from"./index";describe('<RatingCount>',function(){it('should render nothing when count is 0',function(){var rating=mount(React.createElement(RatingCount,{count:0}));expect(rating.find('span').exists()).toBe(false);});it('should render text when count is more than 0',function(){var rating=mount(React.createElement(RatingCount,{count:1}));expect(rating.find('span').exists()).toBe(true);});});

package/reviews/components/Reviews/components/RatingCount/style.js

@@ -1 +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;var main={fontSize:12,margin:'0 0.5em',lineHeight:'2em'};var greyStyle=css(_extends({},main,{color:colors.shade3,fontSize:12})).toString();var prominentStyle=css(_extends({},main,{color:colors.primary})).toString();export{greyStyle,prominentStyle};
+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;var main={fontSize:12,margin:'0 0.5em',lineHeight:'2em'};var greyStyle=css(_extends({},main,{color:colors.shade3,fontSize:12})).toString();var prominentStyle=css(_extends({},main,{color:"var(--color-primary, ".concat(colors.primary,")")})).toString();export{greyStyle,prominentStyle};

package/reviews/components/Reviews/components/ReviewsInfo/index.js

@@ -1,5 +1,4 @@
-import React from'react';import{css}from'glamor';import classNames from'classnames';import appConfig from'@shopgate/pwa-common/helpers/config';import{Link}from'@shopgate/engage/components';var styles={root:css({textAlign:'center',marginTop:8,fontSize:'.875rem',fontWeight:300,lineHeight:1.5,padding:'0 1rem 1rem'}).toString(),link:css({textAlign:'center',fontWeight:600,marginTop:8}).toString()};var _appConfig$reviewsInf=appConfig.reviewsInfo;_appConfig$reviewsInf=_appConfig$reviewsInf===void 0?{}:_appConfig$reviewsInf;var text=_appConfig$reviewsInf.text,linkText=_appConfig$reviewsInf.linkText,linkUrl=_appConfig$reviewsInf.linkUrl;/**
+import React from'react';import{css}from'glamor';import classNames from'classnames';import appConfig from'@shopgate/pwa-common/helpers/config';import{Link}from'@shopgate/engage/components';var styles={root:css({textAlign:'center',marginTop:8,fontSize:'.875rem',fontWeight:300,lineHeight:1.5,padding:'0 1rem 1rem'}).toString(),link:css({textAlign:'center',fontWeight:600,marginTop:8}).toString()};var _appConfig$reviewsInf=appConfig.reviewsInfo,_appConfig$reviewsInf2=_appConfig$reviewsInf===void 0?{}:_appConfig$reviewsInf,text=_appConfig$reviewsInf2.text,linkText=_appConfig$reviewsInf2.linkText,linkUrl=_appConfig$reviewsInf2.linkUrl;/**
  * The ReviewsInfo component
- * @param {Object} props The component props
- * @returns {JSX}
- */var ReviewsInfo=function ReviewsInfo(){if(!text){return null;}return/*#__PURE__*/React.createElement("div",{className:classNames(styles.root,'engage__reviews__review_info_text')},/*#__PURE__*/React.createElement("div",null,text,linkText&&linkUrl&&/*#__PURE__*/React.createElement(Link,{href:linkUrl,className:styles.link},linkText)));};export default ReviewsInfo;
+ * @returns {JSX.Element}
+ */var ReviewsInfo=function ReviewsInfo(){if(!text){return null;}return React.createElement("div",{className:classNames(styles.root,'engage__reviews__review_info_text')},React.createElement("div",null,text,linkText&&linkUrl&&React.createElement(Link,{href:linkUrl,className:styles.link},linkText)));};export default ReviewsInfo;

package/reviews/components/Reviews/connector.js

@@ -1,10 +1,6 @@
-import{connect}from'react-redux';import isEqual from'lodash/isEqual';import{getProductReviewsExcerpt}from'@shopgate/pwa-common-commerce/reviews/selectors';/**
+import{connect}from'react-redux';import{getProductReviewsExcerpt}from'@shopgate/pwa-common-commerce/reviews/selectors';import{makeIsBaseProductActive}from'@shopgate/engage/product';/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @param {Object} props The component props.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{reviews:getProductReviewsExcerpt(state,props)};};/**
- * @param {Object} next The next component props.
- * @param {Object} prev The previous component props.
- * @returns {boolean}
- */var areStatePropsEqual=function areStatePropsEqual(next,prev){if(!prev.reviews&&next.reviews){return false;}if(!isEqual(prev.reviews,next.reviews)){return false;}return true;};export default connect(mapStateToProps,null,null,{areStatePropsEqual:areStatePropsEqual});
+ */var makeMapStateToProps=function makeMapStateToProps(){var isBaseProductActive=makeIsBaseProductActive();return function(state,props){return{reviews:getProductReviewsExcerpt(state,props),productActive:isBaseProductActive(state,props)};};};export default connect(makeMapStateToProps);

package/reviews/components/Reviews/index.js

@@ -3,4 +3,4 @@ import React from'react';import PropTypes from'prop-types';import appConfig from
  * @param {Object} props.productId The id of the product, the review belongs to.
  * @param {Array} props.reviews Reviews which should be shown in the product page.
  * @returns {JSX}
- */function Reviews(_ref){var productId=_ref.productId,reviews=_ref.reviews;return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_REVIEWS,portalProps:{productId:productId}},appConfig.hasReviews&&/*#__PURE__*/React.createElement("div",{className:"".concat(styles.container," engage__reviews__reviews"),"data-test-id":"reviewSection"},/*#__PURE__*/React.createElement(Header,{productId:productId}),/*#__PURE__*/React.createElement(List,{productId:productId,reviews:reviews}),/*#__PURE__*/React.createElement(AllReviewsLink,{productId:productId}),/*#__PURE__*/React.createElement(ReviewsInfo,null)));}Reviews.defaultProps={productId:null,reviews:null};export default connect(Reviews);
+ */function Reviews(_ref){var productId=_ref.productId,productActive=_ref.productActive,reviews=_ref.reviews;return React.createElement(SurroundPortals,{portalName:PRODUCT_REVIEWS,portalProps:{productId:productId}},appConfig.hasReviews&&productActive&&React.createElement("div",{className:"".concat(styles.container," engage__reviews__reviews"),"data-test-id":"reviewSection"},React.createElement(Header,{productId:productId}),React.createElement(List,{productId:productId,reviews:reviews}),React.createElement(AllReviewsLink,{productId:productId}),React.createElement(ReviewsInfo,null)));}Reviews.defaultProps={productId:null,productActive:true,reviews:null};export default connect(Reviews);

package/reviews/components/Reviews/mock.js

@@ -1,4 +1,4 @@
-import{themeConfig as mockedConfig}from'@shopgate/pwa-common/helpers/config/mock';var mockedProduct={productId:'foo',rating:{average:0,count:0}};var mockedProductWithRating={productId:'foo',rating:{average:50,count:4}};/**
+var mockedProduct={productId:'foo',rating:{average:0,count:0}};var mockedProductWithRating={productId:'foo',rating:{average:50,count:4}};/**
  * Creates mocked review object.
  * @param {string|number} id Anything that can be an id.
  * @return {Object}
@@ -15,8 +15,4 @@ var mockedState=JSON.parse(JSON.stringify(mockedStateWithAll));mockedState.revie
  */export var mockedStateWithoutReview={product:{productsById:{foo:{productData:mockedProduct}}},reviews:{reviewsById:{},reviewsByProductId:{}}};/**
  * Mocked state without data.
  * @type {{product: {productsById: {}}}}
- */export var mockedStateProductEmpty={product:{productsById:{}}};/**
- * Sets up mocks.
- * @param {bool} mockReviewsAvailable A feature flag "hasReviews" value.
- * @type {Function}
- */export var setMocks=function setMocks(){var mockReviewsAvailable=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;jest.doMock('@shopgate/pwa-common/helpers/config',function(){return{get hasReviews(){return mockReviewsAvailable;},get showWriteReview(){return true;},themeConfig:mockedConfig};});};
+ */export var mockedStateProductEmpty={product:{productsById:{}}};

package/reviews/components/Reviews/spec.js

@@ -1,7 +1,8 @@
-import React from'react';import{Provider}from'react-redux';import configureStore from'redux-mock-store';import{mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{mockedStateWithAll,mockedStateWithoutReview,mockedStateWithTwoReviews,setMocks}from'@shopgate/pwa-common-commerce/reviews/mock';var mockedStore=configureStore();/**
+import React from'react';import{Provider}from'react-redux';import configureStore from'redux-mock-store';import{mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{mockedStateWithAll,mockedStateWithoutReview,mockedStateWithTwoReviews}from'@shopgate/pwa-common-commerce/reviews/mock';import appConfig from'@shopgate/pwa-common/helpers/config';import Reviews from"./index";var mockedStore=configureStore();/**
  * @returns {JSX}
- */var Header=function Header(){return/*#__PURE__*/React.createElement("div",null);};var mock=Header;jest.mock("./components/Header",function(){return mock;});beforeEach(function(){jest.resetModules();});/**
+ */jest.mock("./components/Header",function(){return function Header(){return React.createElement("div",null);};});jest.mock('@shopgate/engage/product',function(){return{PRODUCT_REVIEWS:'product.reviews',makeIsBaseProductActive:jest.fn(function(){return function(){return true;};})};});jest.mock('@shopgate/engage/components');// Mock the getter of the hasReviews key inside the app config, so that we can turn it off later
+jest.resetModules();var hasReviewsGetter=jest.fn().mockReturnValue(true);Object.defineProperty(appConfig,'hasReviews',{get:hasReviewsGetter});/**
  * Creates component with provided store state.
  * @param {Object} mockedState Mocked stage.
  * @return {ReactWrapper}
- */var createComponent=function createComponent(mockedState){/* eslint-disable global-require */var Reviews=require("./index")["default"];/* eslint-enable global-require */return mount(/*#__PURE__*/React.createElement(Provider,{store:mockedStore(mockedState)},/*#__PURE__*/React.createElement(Reviews,{productId:"foo"})),mockRenderOptions);};describe('<Reviews />',function(){var component=null;it('should render when no reviews and rating given',function(){setMocks();component=createComponent(mockedStateWithoutReview);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(true);expect(component.find('List').exists()).toBe(true);expect(component.find('AllReviewsLink').exists()).toBe(true);});it('should render reviews, header and all reviews link',function(){setMocks();component=createComponent(mockedStateWithAll);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(true);expect(component.find('List').exists()).toBe(true);expect(component.find('AllReviewsLink').find('div').exists()).toBe(true);});it('should render reviews, header, but no all reviews link',function(){setMocks();component=createComponent(mockedStateWithTwoReviews);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(true);expect(component.find('List').exists()).toBe(true);expect(component.find('AllReviewsLink').find('div').exists()).toBe(false);});it('should not render when feature flag is off',function(){setMocks(false);component=createComponent(mockedStateWithAll);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(false);expect(component.find('List').exists()).toBe(false);expect(component.find('AllReviewsLink').exists()).toBe(false);});});
+ */var createComponent=function createComponent(mockedState){return mount(React.createElement(Provider,{store:mockedStore(mockedState)},React.createElement(Reviews,{productId:"foo"})),mockRenderOptions);};describe('<Reviews />',function(){var component=null;it('should render when no reviews and rating given',function(){component=createComponent(mockedStateWithoutReview);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(true);expect(component.find('List').exists()).toBe(true);expect(component.find('AllReviewsLink').exists()).toBe(true);});it('should render reviews, header and all reviews link',function(){component=createComponent(mockedStateWithAll);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(true);expect(component.find('List').exists()).toBe(true);expect(component.find('AllReviewsLink').find('div').exists()).toBe(true);});it('should render reviews, header, but no all reviews link',function(){component=createComponent(mockedStateWithTwoReviews);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(true);expect(component.find('List').exists()).toBe(true);expect(component.find('AllReviewsLink').find('div').exists()).toBe(false);});it('should not render when feature flag is off',function(){hasReviewsGetter.mockReturnValueOnce(false);component=createComponent(mockedStateWithAll);expect(component).toMatchSnapshot();expect(component.find('Header').exists()).toBe(false);expect(component.find('List').exists()).toBe(false);expect(component.find('AllReviewsLink').exists()).toBe(false);});});

package/reviews/components/index.js

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

package/reviews/constants/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/reviews/constants/index';export*from'@shopgate/pwa-common-commerce/reviews/constants/Pipelines';export*from'@shopgate/pwa-common-commerce/reviews/constants/Portals';

package/reviews/index.js

@@ -1,6 +1,3 @@
-/** @module reviews */ // ACTIONS
-export{default as fetchProductReviews}from'@shopgate/pwa-common-commerce/reviews/actions/fetchProductReviews';export{default as fetchReviews}from'@shopgate/pwa-common-commerce/reviews/actions/fetchReviews';export{default as fetchUserReview}from'@shopgate/pwa-common-commerce/reviews/actions/fetchUserReview';export{default as flushUserReview}from'@shopgate/pwa-common-commerce/reviews/actions/flushUserReview';export{default as submitReview}from'@shopgate/pwa-common-commerce/reviews/actions/submitReview';// CONSTANTS
-export*from'@shopgate/pwa-common-commerce/reviews/constants/index';export*from'@shopgate/pwa-common-commerce/reviews/constants/Pipelines';export*from'@shopgate/pwa-common-commerce/reviews/constants/Portals';// SELECTORS
-export*from'@shopgate/pwa-common-commerce/reviews/selectors';// STREAMS
-export*from'@shopgate/pwa-common-commerce/reviews/streams';// COMPONENTS
-export{default as Reviews}from"./components/Reviews";
+/** @module reviews */ // Not moved into a "mocks" folder with index.js, since folders with "*mocks*" are deleted during
+// release before upload to github, which will cause errors because auf in invalid import.
+export*from'@shopgate/pwa-common-commerce/reviews/mock';/* eslint-disable import/export */export*from"./actions";export*from"./components";export*from"./constants";export*from"./selectors";export*from"./streams";/* eslint-enable import/export */

package/reviews/selectors/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/reviews/selectors';

package/reviews/streams/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/reviews/streams';

package/scanner/action-creators/index.js

@@ -0,0 +1 @@
+export{default as startScanner}from'@shopgate/pwa-common-commerce/scanner/action-creators/startScanner';export{default as successHandleScanner}from'@shopgate/pwa-common-commerce/scanner/action-creators/successHandleScanner';export{default as errorHandleScanner}from'@shopgate/pwa-common-commerce/scanner/action-creators/errorHandleScanner';

package/scanner/actions/index.js

@@ -0,0 +1 @@
+export{default as handleBarCode}from'@shopgate/pwa-common-commerce/scanner/actions/handleBarCode';export{default as handleQrCode}from'@shopgate/pwa-common-commerce/scanner/actions/handleQrCode';export{default as handleSearch}from'@shopgate/pwa-common-commerce/scanner/actions/handleSearch';export{default as handleNoResults}from'@shopgate/pwa-common-commerce/scanner/actions/handleNoResults';

package/scanner/classes/index.js

@@ -0,0 +1 @@
+export{default as scanner}from'@shopgate/pwa-core/classes/Scanner';

package/scanner/constants/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/scanner/constants';export*from'@shopgate/pwa-common-commerce/scanner/constants/Portals';export*from'@shopgate/pwa-core/constants/Scanner';

package/scanner/helpers/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/scanner/helpers';

package/scanner/index.js

@@ -1,6 +1 @@
-/** @module scanner */ // ACTION-CREATORS
-export{default as startScanner}from'@shopgate/pwa-common-commerce/scanner/action-creators/startScanner';export{default as successHandleScanner}from'@shopgate/pwa-common-commerce/scanner/action-creators/successHandleScanner';export{default as errorHandleScanner}from'@shopgate/pwa-common-commerce/scanner/action-creators/errorHandleScanner';// ACTIONS
-export{default as handleBarCode}from'@shopgate/pwa-common-commerce/scanner/actions/handleBarCode';export{default as handleQrCode}from'@shopgate/pwa-common-commerce/scanner/actions/handleQrCode';export{default as handleSearch}from'@shopgate/pwa-common-commerce/scanner/actions/handleSearch';export{default as handleNoResults}from'@shopgate/pwa-common-commerce/scanner/actions/handleNoResults';export{default as scanner}from'@shopgate/pwa-core/classes/Scanner';// CONSTANTS
-export*from'@shopgate/pwa-common-commerce/scanner/constants';export*from'@shopgate/pwa-common-commerce/scanner/constants/Portals';export*from'@shopgate/pwa-core/constants/Scanner';// HELPERS
-export*from'@shopgate/pwa-common-commerce/scanner/helpers';// STREAMS
-export*from'@shopgate/pwa-common-commerce/scanner/streams';
+/** @module scanner */ /* eslint-disable import/export */export*from"./actions";export*from"./action-creators";export*from"./classes";export*from"./constants";export*from"./helpers";export*from"./streams";/* eslint-enable import/export */

package/scanner/streams/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/scanner/streams';

package/search/actions/index.js

@@ -0,0 +1 @@
+export{default as fetchSearchResults}from'@shopgate/pwa-common-commerce/search/actions/fetchSearchResults';export{default as fetchSearchSuggestions}from'@shopgate/pwa-common-commerce/search/actions/fetchSearchSuggestions';

package/search/constants/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/search/constants/index';export*from'@shopgate/pwa-common-commerce/search/constants/Pipelines';export*from'@shopgate/pwa-common-commerce/search/constants/Portals';

package/search/helpers/index.js

@@ -0,0 +1 @@
+export{default as removeHighlightingPlaceholers}from'@shopgate/pwa-common-commerce/search/helpers/removeHighlightingPlaceholders';export{default as removeHighlightingPlaceholders}from'@shopgate/pwa-common-commerce/search/helpers/removeHighlightingPlaceholders';export*from'@shopgate/pwa-common-commerce/search/helpers';

package/search/index.js

@@ -1,6 +1 @@
-/** @module search */ // ACTIONS
-export{default as fetchSearchResults}from'@shopgate/pwa-common-commerce/search/actions/fetchSearchResults';export{default as fetchSearchSuggestions}from'@shopgate/pwa-common-commerce/search/actions/fetchSearchSuggestions';// CONSTANTS
-export*from'@shopgate/pwa-common-commerce/search/constants/index';export*from'@shopgate/pwa-common-commerce/search/constants/Pipelines';export*from'@shopgate/pwa-common-commerce/search/constants/Portals';// HELPERS
-export{default as removeHighlightingPlaceholers}from'@shopgate/pwa-common-commerce/search/helpers/removeHighlightingPlaceholders';export*from'@shopgate/pwa-common-commerce/search/helpers';// SELECTORS
-export*from'@shopgate/pwa-common-commerce/search/selectors';// STREAMS
-export*from'@shopgate/pwa-common-commerce/search/streams';
+/** @module search */ /* eslint-disable import/export */export*from"./actions";export*from"./constants";export*from"./helpers";export*from"./selectors";export*from"./streams";/* eslint-enable import/export */

package/search/selectors/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/search/selectors';

package/search/streams/index.js

@@ -0,0 +1 @@
+export*from'@shopgate/pwa-common-commerce/search/streams';

package/styles/helpers/color.js

@@ -0,0 +1,23 @@
+// Import the Color constructor from the color.js package
+import Color from'color';/**
+ * Converts any valid input color to an RGBA CSS string.
+ * If the input color already contains an alpha channel (< 1), that alpha is preserved.
+ * Otherwise, the provided `opacity` is applied.
+ *
+ * @param {string} inputColor any CSS‐valid color string (hex, rgb(), hsl(), etc.)
+ * @param {number} [opacity=1] fallback alpha (0–1) to use if `inputColor` has no alpha
+ * @returns {string} "rgba(r, g, b, a)" string
+ *
+ * @example
+ * toRgba('#ff0000')            // → "rgba(255, 0, 0, 1)"
+ * toRgba('#ff0000', 0.5)       // → "rgba(255, 0, 0, 0.5)"
+ * toRgba('rgba(10,20,30,0.2)', 0.9) // → "rgba(10, 20, 30, 0.2)"
+ * toRgba('hsl(120, 100%, 50%)') // → "rgba(0, 255, 0, 1)"
+ * toRgba('blue', 0.3)          // → "rgba(0, 0, 255, 0.3)"
+ */export function colorToRgba(inputColor){var opacity=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;// Parse the input into a Color instance
+var parsed=Color(inputColor);// Extract the alpha channel from the parsed color (default is 1 if none was provided)
+var inputAlpha=parsed.alpha();// Determine which alpha to use:
+// - If the parsed color already had alpha < 1, keep that.
+// - Otherwise, use the provided opacity value.
+var finalAlpha=inputAlpha<1?inputAlpha:opacity;// Set the computed alpha and return as "rgba(r, g, b, a)" string
+return parsed.alpha(finalAlpha).rgb().string();}

package/styles/helpers/cssCustomProperties.js

@@ -0,0 +1,16 @@
+/**
+ * Pass in an element and its CSS Custom Property that you want the value of.
+ * Optionally, you can determine what datatype you get back.
+ *
+ * @param {string} key The key of the custom property
+ * @param {HTMLElement} [element=document.documentElement] The target HTML element
+ * @param {string} [castAs='string'] Type for optional casting
+ * @returns {*}
+ */export var getCSSCustomProp=function getCSSCustomProp(key){var element=arguments.length>1&&arguments[1]!==undefined?arguments[1]:document.documentElement;var castAs=arguments.length>2&&arguments[2]!==undefined?arguments[2]:'string';var response=getComputedStyle(element).getPropertyValue(key);// Tidy up the string if there's something to work with
+if(response.length){response=response.replace(/'|"/g,'').trim();}// Convert the response into a whatever type we wanted
+switch(castAs){case'number':case'int':return parseInt(response,10);case'float':return parseFloat(response,10);case'boolean':case'bool':return response==='true'||response==='1';default:return response;}};/**
+ * Sets the value of an CSS custom property.
+ * @param {string} key The key of the custom property
+ * @param {string} value The new value of the custom property
+ * @param {HTMLElement} [element=document.documentElement] The target HTML element
+ */export var setCSSCustomProp=function setCSSCustomProp(key,value){var element=arguments.length>2&&arguments[2]!==undefined?arguments[2]:document.documentElement;var style=element.style;if(style.getPropertyValue(key)!==value){style.setProperty(key,value);}};

package/styles/helpers/index.js

@@ -0,0 +1 @@
+export{getCSSCustomProp,setCSSCustomProp}from"./cssCustomProperties";export{updatePageInsets}from"./updatePageInsets";export{setPageBackgroundColor}from"./setPageBackgroundColor";export{setPageContentWidth}from"./setPageContentWidth";export{setViewportHeight}from"./setViewportHeight";export{toggleBodyScroll}from"./toggleBodyScroll";export{initCSSCustomProps,initCSSCustomPropsFallback}from"./initCSSCustomProperties";export{loadCustomStyles}from"./loadCustomStyles";export*from"./color";export{responsiveMediaQuery}from"../../components/ResponsiveContainer/mediaQuery";export{responsiveCondition}from"../../components/ResponsiveContainer/condition";

package/styles/helpers/initCSSCustomProperties.js

@@ -0,0 +1,10 @@
+import Color from'color';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{hasWebBridge,hasNewServices}from'@shopgate/engage/core/helpers';import{getCSSCustomProp,setCSSCustomProp}from"./cssCustomProperties";var colors=themeConfig.colors;/**
+ * Calculates a contrast color for a color
+ * @param {string} color A color
+ * @returns {string}
+ */var getContrastColor=function getContrastColor(color){var perceivedLuminosity=Color(color).luminosity();return perceivedLuminosity>=0.74?colors.dark:colors.light;};/**
+ * Initializes the CSS custom properties after they where loaded from a CSS file.
+ * When the CSS file doesn't contain contrast colors, they will be calculated automatically.
+ */export var initCSSCustomProps=function initCSSCustomProps(){var primary=getCSSCustomProp('--color-primary');var primaryContrast=getCSSCustomProp('--color-primary-contrast');var secondary=getCSSCustomProp('--color-secondary');var secondaryContrast=getCSSCustomProp('--color-secondary-contrast');if(primary&&!primaryContrast){setCSSCustomProp('--color-primary-contrast',getContrastColor(primary));}if(secondary&&!secondaryContrast){setCSSCustomProp('--color-secondary-contrast',getContrastColor(secondary));}if(hasWebBridge()){setCSSCustomProp('--page-background-color','#fff');}var sideNavigationBackground=Color(getCSSCustomProp('--color-primary')||colors.primary).alpha(0.08);setCSSCustomProp('--color-side-navigation-active-background',sideNavigationBackground);setCSSCustomProp('--color-button-cta','var(--color-primary)');setCSSCustomProp('--color-button-cta-contrast','var(--color-primary-contrast)');if(!getCSSCustomProp('--color-button-dialog-ios')){setCSSCustomProp('--color-button-dialog-ios','#1a73e8');}};/**
+ * Initializes fallback CSS custom properties from the theme colors.
+ */export var initCSSCustomPropsFallback=function initCSSCustomPropsFallback(){setCSSCustomProp('--color-primary',colors.primary);setCSSCustomProp('--color-primary-contrast',getContrastColor(colors.primary));setCSSCustomProp('--color-secondary',colors.accent);setCSSCustomProp('--color-secondary-contrast',getContrastColor(colors.accent));if(!hasNewServices()){setCSSCustomProp('--color-button-cta',colors.cta);setCSSCustomProp('--color-button-cta-contrast',colors.ctaContrast);}else{setCSSCustomProp('--color-button-cta','var(--color-primary)');setCSSCustomProp('--color-button-cta-contrast','var(--color-primary-contrast)');}if(!getCSSCustomProp('--color-button-dialog-ios')){setCSSCustomProp('--color-button-dialog-ios','#1a73e8');}setCSSCustomProp('--color-text-high-emphasis','#212121');setCSSCustomProp('--color-text-medium-emphasis','#666666');setCSSCustomProp('--color-text-low-emphasis','#9e9e9e');setCSSCustomProp('--color-background-accent','#f7f7f7');setCSSCustomProp('--color-state-alert',colors.error);setCSSCustomProp('--color-state-warning',colors.warning);setCSSCustomProp('--color-state-ok',colors.success);var sideNavigationBackground=Color(getCSSCustomProp('--color-primary')||colors.primary).fade(0.9);setCSSCustomProp('--color-side-navigation-active-background',sideNavigationBackground);if(hasWebBridge()){setCSSCustomProp('--page-background-color','#fff');}};

package/styles/helpers/loadCustomStyles.js

@@ -0,0 +1,6 @@
+import appConfig from'@shopgate/pwa-common/helpers/config';import{initCSSCustomProps,initCSSCustomPropsFallback}from"./initCSSCustomProperties";/**
+ * Loads external CSS with custom properties
+ * @returns {void}
+ */export var loadCustomStyles=function loadCustomStyles(){var id='external-css';var href=appConfig.customStyleUrl;var linkTag=document.querySelector("#".concat(id));/**
+   * Error handler
+   */var onError=function onError(){initCSSCustomPropsFallback();};if(!href){onError();}if(href&&!linkTag){linkTag=document.createElement('link');linkTag.setAttribute('rel','stylesheet');linkTag.setAttribute('type','text/css');linkTag.setAttribute('href',href);linkTag.setAttribute('id',id);linkTag.onload=initCSSCustomProps;linkTag.onerror=onError;document.querySelector('head').appendChild(linkTag);}};

package/styles/helpers/setPageBackgroundColor.js

@@ -0,0 +1,5 @@
+import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{hasWebBridge}from'@shopgate/engage/core/helpers';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{setCSSCustomProp}from"./cssCustomProperties";var defaultBackgroundColor=themeConfig.colors.light;/**
+ * Updates the page background color.
+ * @param {string} color The new background color.
+ */export var setPageBackgroundColor=function setPageBackgroundColor(){var color=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultBackgroundColor;// Curbside website changes never its background color
+if(!hasWebBridge()||IS_PAGE_PREVIEW_ACTIVE){setCSSCustomProp('--page-background-color',color);}};

package/styles/helpers/setPageContentWidth.js

@@ -0,0 +1,5 @@
+import{setCSSCustomProp}from"./cssCustomProperties";/**
+ * Updates the page background color.
+ * @param {number} width Sets the page content width.
+ * @param {string} [unit='px'] Optional width unit
+ */export var setPageContentWidth=function setPageContentWidth(width){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:'px';setCSSCustomProp('--page-content-width',"".concat(width).concat(unit));};

package/styles/helpers/setViewportHeight.js

@@ -0,0 +1,3 @@
+import{setCSSCustomProp}from"./cssCustomProperties";/**
+ * Sets the current (real) viewport height to the --vh custom property.
+ */export var setViewportHeight=function setViewportHeight(){var vh=window.innerHeight*0.01;setCSSCustomProp('--vh',"".concat(vh,"px"));setCSSCustomProp('--vh-80','calc(var(--vh) * 80)');setCSSCustomProp('--vh-90','calc(var(--vh) * 90)');setCSSCustomProp('--vh-100','calc(var(--vh) * 100)');};

package/styles/helpers/toggleBodyScroll.js

@@ -0,0 +1,5 @@
+import MobileDetect from'mobile-detect';import{logger}from'@shopgate/engage/core/helpers';var md=new MobileDetect(navigator.userAgent);var SELECTOR_BODY='html, body';var SELECTOR_CONTENT='#AppContent';var currentRef=null;/**
+ * Toggles the body scroll on mobile phones
+ * @param {boolean} locked The lock state
+ * @param {*} ref A reference parameter to take care that only the locker can unlock
+ */export var toggleBodyScroll=function toggleBodyScroll(){var locked=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;if(!ref){logger.error('No caller reference provided');}if(!md.phone()){return;}/* eslint-disable no-param-reassign */if(locked){currentRef=ref;var offsetY=window.pageYOffset;document.querySelectorAll(SELECTOR_BODY).forEach(function(el){el.style.height='100%';el.style.position='fixed';el.style.overflow='hidden';});var content=document.querySelector(SELECTOR_CONTENT);if(content){content.style.top="".concat(offsetY*-1,"px");}}else{if(currentRef!==ref){return;}document.querySelectorAll(SELECTOR_BODY).forEach(function(el){el.style.removeProperty('height');el.style.removeProperty('position');el.style.removeProperty('overflow');});var _content=document.querySelector(SELECTOR_CONTENT);if(_content){window.scrollTo(0,Math.abs(parseInt(_content.style.top||0,10)));_content.style.removeProperty('top');}}/* eslint-enable no-param-reassign */};

package/styles/helpers/updatePageInsets.js

@@ -0,0 +1,15 @@
+/**
+ * Updates the page inset css variables
+ * @param {Object} pageInsets A page insets object
+ */export var updatePageInsets=function updatePageInsets(pageInsets){var safeAreaInsetTop=pageInsets.safeAreaInsetTop,safeAreaInsetBottom=pageInsets.safeAreaInsetBottom;/**
+   * Try to use environment variables for the insets. On Android those variables are not available,
+   * on iOS devices without notch their value is 0px. To cover these different environments,
+   * we need to provide two different strategies with the help of media queries.
+   *
+   * Android doesn't support the max() function, but we can just use the insets from the params
+   * (they will always be 0px anyway). On iOS the page insets from the params will always contain
+   * values > 0px, but on notch devices the required insets might need to be bigger.
+   * Since all iOS versions which are shipped with notch iPhones support max(), we can use it to
+   * determine the appropriate value for the css variables which can be used in the Engage css
+   * when insets need to be considered.
+   */var id='safe-area-insets';var styleBlock=document.querySelector("#".concat(id));if(!styleBlock){styleBlock=document.createElement('style');styleBlock.setAttribute('type','text/css');styleBlock.setAttribute('id',id);document.querySelector('head').appendChild(styleBlock);}styleBlock.innerHTML="\n    @supports not (padding: max(0px)) {\n      :root {\n        --safe-area-inset-top: ".concat(safeAreaInsetTop,"px;\n        --safe-area-inset-bottom: ").concat(safeAreaInsetBottom,"px;\n        --safe-area-inset-left: 0px;\n        --safe-area-inset-right: 0px;\n      }\n    }\n\n    @supports(padding: max(0px)) {\n      :root {\n        --safe-area-inset-top: max(").concat(safeAreaInsetTop,"px, env(safe-area-inset-top));\n        --safe-area-inset-bottom: max(").concat(safeAreaInsetBottom,"px, env(safe-area-inset-bottom));\n        --safe-area-inset-left: max(0px, env(safe-area-inset-left));\n        --safe-area-inset-right: max(0px, env(safe-area-inset-right));\n      }\n    }\n  ");};

package/styles/index.d.ts

@@ -0,0 +1,17 @@
+export * from './helpers';
+export {
+  ThemeProvider,
+  createTheme,
+  useActiveBreakpoint,
+  useMediaQuery,
+  useResponsiveValue,
+  useTheme,
+  Theme,
+} from './theme';
+export {
+  makeStyles,
+  withStyles,
+  tss,
+  GlobalStyles,
+  keyframes,
+} from './tss';

package/styles/index.js

@@ -0,0 +1 @@
+export*from"./helpers";export{ThemeProvider,createTheme,useActiveBreakpoint,useMediaQuery,useResponsiveValue,useTheme}from"./theme";export{makeStyles,withStyles,tss,GlobalStyles,keyframes}from"./tss";

package/styles/reset/form.js

@@ -0,0 +1,8 @@
+import{css}from'glamor';/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ */css.global('button, html [type="button"], [type="reset"], [type="submit"]',{WebkitAppearance:'button'});/**
+ * 1. Change font properties to `inherit` in Safari.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */css.global('::-webkit-file-upload-button',{font:'inherit',WebkitAppearance:'button'});/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
+ */css.global('::-webkit-search-cancel-button, ::-webkit-search-decoration',{WebkitAppearance:'none'});css.global('button, input, select, textarea',{background:'transparent',border:0,fontSize:'1em',margin:0});css.global('input, select, textarea',{fontFamily:'inherit'});css.global('button, textarea',{fontFamily:'inherit',lineHeight:'inherit'});css.global('button',{borderRadius:0});css.global('button, label, [type="checkbox"], [type="radio"]',{cursor:'pointer'});css.global('label',{display:'inline-block'});css.global('textarea',{minHeight:'5em',maxWidth:'100%',resize:'none'});css.global('[type="search"]',{WebkitAppearance:'textfield'});

package/styles/reset/index.js

@@ -0,0 +1 @@
+import"./root";import"./typography";import"./media";import"./form";import"./table";

package/styles/reset/media.js

@@ -0,0 +1 @@
+import{css}from'glamor';css.global('audio:not([controls])',{display:'none',height:0});css.global('figure',{margin:0});css.global('iframe',{border:0,display:'block',width:'100%'});css.global('img, svg',{display:'block',maxWidth:'100%'});css.global('progress',{verticalAlign:'baseline'});

package/styles/reset/root.js

@@ -0,0 +1,3 @@
+var _typography$family;import{css}from'glamor';import{useScrollContainer,hasWebBridge,isIOSTheme,isWindows,isDev}from'@shopgate/engage/core/helpers';import{themeConfig}from'@shopgate/engage';var typography=themeConfig.typography;var iosThemeActive=isIOSTheme();css.global('*, *:before, *:after',{boxSizing:'border-box'});css.global('*',{touchAction:'manipulation'});css.global('::-moz-focus-inner',{border:0});css.global('html, body',{WebkitTapHighlightColor:'transparent',width:'100%',height:'100%'});css.global('html',{overflow:useScrollContainer()?'hidden':'inherit',MozOsxFontSmoothing:'grayscale',WebkitFontSmoothing:'antialiased',MsTextSizeAdjust:'100%',WebkitTextSizeAdjust:'100%',minHeight:'100%'});// Include Roboto font on Windows in dev mode on iOS theme, so that developers see nice fonts.
+var fontSuffix=isDev&&iosThemeActive&&isWindows&&!((_typography$family=typography.family)!==null&&_typography$family!==void 0?_typography$family:'').includes('Roboto')?', Roboto':'';css.global('body',{font:"".concat(typography.rootSize,"px/").concat(typography.lineHeight," ").concat(typography.family).concat(fontSuffix),overflow:'auto',margin:0,WebkitOverflowScrolling:'touch',WebkitUserSelect:hasWebBridge()?'inherit':'none',userSelect:hasWebBridge()?'inherit':'none',color:'var(--color-text-high-emphasis)'});css.global('[data-pattern]',{height:'100% !important'});css.global('html, body',{backgroundColor:'var(--page-background-color)'});if(hasWebBridge()&&!iosThemeActive){css.insert("@media(min-width: 600px) {\n    html, body {\n      background-color: var(--color-background-gutter-body, var(--page-background-color))\n    }\n  }");}// since iOS 15 button has a default color of blue rgb(0, 122, 255);
+css.global('button',{color:'inherit'});

package/styles/reset/table.js

@@ -0,0 +1 @@
+import{css}from'glamor';css.global('table',{borderCollapse:'collapse',minWidth:'100%'});css.global('td, th',{verticalAlign:'top'});

package/styles/reset/typography.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{rem}from'@shopgate/pwa-common/helpers/style';css.global('a',{color:'inherit',textDecoration:'none',WebkitTextDecorationSkip:'objects'});css.global('a:hover, a:focus, a:active, [tabindex]',{outline:0});css.global('ol, ul',{listStyle:'none',margin:0,paddingLeft:0});css.global('b, strong',{fontWeight:700});css.global('small',{fontSize:rem(13)});css.global('sub, sup',{lineHeight:0});

package/styles/theme/createTheme/createBreakpoints.d.ts

@@ -0,0 +1,114 @@
+export type Breakpoint =  'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const keys: Breakpoint[];
+
+export interface Breakpoints {
+  keys: Breakpoint[];
+  /**
+   * Each breakpoint (a key) matches with a fixed screen width (a value).
+   * @default
+   * {
+   *    // extra-small
+   *    xs: 0,
+   *    // small
+   *    sm: 600,
+   *    // medium
+   *    md: 900,
+   *    // large
+   *    lg: 1200,
+   *    // extra-large
+   *    xl: 1536,
+   * }
+   */
+  values: { [key in Breakpoint]: number };
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "md" and above
+   *     [theme.breakpoints.up('md')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  up: (key: Breakpoint | number) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths less than the screen size given by the breakpoint key (exclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "xs" and "sm"
+   *     [theme.breakpoints.down('md')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  down: (key: Breakpoint | number) => string;
+  /**
+   * @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths greater than
+   *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "sm" and "md"
+   *     [theme.breakpoints.between('sm', 'lg')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  between: (start: Breakpoint | number, end: Breakpoint | number) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string which matches screen widths starting from
+   *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "sm"
+   *     [theme.breakpoints.only('sm')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  only: (key: Breakpoint) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.).
+   * @returns A media query string which matches screen widths stopping at
+   *          the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
+   * @example
+   * ```js
+   * const styles = (theme) => ({
+   *   root: {
+   *     backgroundColor: 'blue',
+   *     // Matches "xs", "md", "lg", and "xl"
+   *     [theme.breakpoints.not('sm')]: {
+   *         backgroundColor: 'red',
+   *     }
+   *   }
+   * })
+   * ```
+   */
+  not: (key: Breakpoint) => string;
+}
+
+export default function createBreakpoints(): Breakpoints;

package/styles/theme/createTheme/createBreakpoints.js

@@ -0,0 +1,41 @@
+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 _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);}/* eslint-disable valid-jsdoc */ // Possible breakpoints for responsive design
+/** @type {import('./createBreakpoints').Breakpoint[]} */export var breakpointKeys=['xs','sm','md','lg','xl'];/**
+ * Sorts an object of breakpoints by their numeric values in ascending order.
+ *
+ * This is useful in responsive design systems to ensure breakpoints
+ * are applied in the correct order.
+ *
+ * @param {Object.<string, number>} values - An object where keys are breakpoint names
+ * (e.g., 'xs', 'sm', 'md') and values are numeric pixel values.
+ * @returns {Object.<string, number>} A new object with the same key-value pairs, sorted by
+ * ascending numeric values.
+ *
+ * @example
+ * const breakpoints = { md: 960, xs: 0, sm: 600 };
+ * const sorted = sortBreakpointsValues(breakpoints);
+ * console.log(sorted); // { xs: 0, sm: 600, md: 960 }
+ */var sortBreakpointsValues=function sortBreakpointsValues(values){var breakpointsAsArray=Object.keys(values).map(function(key){return{key:key,val:values[key]};})||[];breakpointsAsArray.sort(function(breakpoint1,breakpoint2){return breakpoint1.val-breakpoint2.val;});return breakpointsAsArray.reduce(function(acc,obj){return _extends({},acc,_defineProperty({},obj.key,obj.val));},{});};var unit='px';var step=5;/**
+ * Creates a set of media query functions based on the provided breakpoints.
+ */var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values]} */var values={// Extra small – all mobile phones
+xs:0,// Small – large phones in landscape
+sm:480,// Medium – tablets
+md:768,// Large – small laptops
+lg:1024,// Extra large – desktops
+xl:1280};var sortedValues=sortBreakpointsValues(values);var keys=Object.keys(sortedValues);/**
+   * @param {import('./createBreakpoints').Breakpoint | number} key Breakpoint key or pixel value
+   * @returns {string} A media query string for the specified breakpoint
+   */function up(key){var value=typeof values[key]==='number'?values[key]:key;return"@media (min-width:".concat(value).concat(unit,")");}/**
+   * @param {import('./createBreakpoints').Breakpoint | number} key Breakpoint key or pixel value
+   * @returns {string} A media query string for the specified breakpoint
+   */function down(key){/** @type {number} */var value=typeof values[key]==='number'?values[key]:key;return"@media (max-width:".concat(value-step/100).concat(unit,")");}/**
+   * @param {import('./createBreakpoints').Breakpoint | number} start Breakpoint key or pixel value
+   * @param {import('./createBreakpoints').Breakpoint | number} end Breakpoint key or pixel value
+   * @returns {string} A media query string for the specified breakpoint
+   */function between(start,end){var endIndex=keys.indexOf(end);return"@media (min-width:".concat(typeof values[start]==='number'?values[start]:start).concat(unit,") and ")+"(max-width:".concat((endIndex!==-1&&typeof values[keys[endIndex]]==='number'?values[keys[endIndex]]:end)-step/100).concat(unit,")");}/**
+   * @param {import('./createBreakpoints').Breakpoint} key Breakpoint key or pixel value
+   * @returns {string} A media query string for the specified breakpoint
+   */function only(key){if(keys.indexOf(key)+1<keys.length){return between(key,keys[keys.indexOf(key)+1]);}return up(key);}/**
+   * @param {import('./createBreakpoints').Breakpoint} key Breakpoint key or pixel value
+   * @returns {string} A media query string for the specified breakpoint
+   */function not(key){// handle first and last key separately, for better readability
+var keyIndex=keys.indexOf(key);if(keyIndex===0){return up(keys[1]);}if(keyIndex===keys.length-1){return down(keys[keyIndex]);}return between(key,keys[keys.indexOf(key)+1]).replace('@media','@media not all and');}return{keys:keys,values:sortedValues,up:up,down:down,between:between,only:only,not:not};};export default createBreakpoints;/* eslint-enable valid-jsdoc */

package/styles/theme/createTheme/createSpacing.d.ts

@@ -0,0 +1,23 @@
+/* tslint:disable:unified-signatures */
+
+export type SpacingArgument = number | string;
+
+export interface Spacing {
+  /**
+   * The spacing helper can be used to create consistent spacing between UI element.
+   *
+   * It accepts 0 to 4 spacing arguments, which can be numbers or strings like `auto`,
+   */
+  (): number;
+  (value: number): number;
+  (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
+  (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
+  (
+    top: SpacingArgument,
+    right: SpacingArgument,
+    bottom: SpacingArgument,
+    left: SpacingArgument
+  ): string;
+}
+
+export default function createSpacing(): Spacing;

package/styles/theme/createTheme/createSpacing.js

@@ -0,0 +1,14 @@
+import{isDev}from'@shopgate/engage/core/helpers';var spacingUnit=8;/**
+ * Create the spacing function of the theme
+ * @returns {function(...(number | string)): string} A function that takes one or more spacing
+ * arguments
+ */var createSpacing=function createSpacing(){/**
+   *
+   * @param {number|string} input The input
+   * @returns {string|number} The result
+   */var transform=function transform(input){if(typeof input==='number'){return input*spacingUnit;}return input;};/**
+   * @param {...(number | string)} args - 0 to 4 spacing arguments, which can be numbers
+   * or strings like 'auto',
+   * @returns {string} A space-separated string of pixel values or other transformed values
+   */var spacing=function spacing(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}if(isDev){if(!(args.length<=4)){// eslint-disable-next-line no-console
+console.error("Too many arguments passed. Expected between 0 and 4 arguments, got ".concat(args.length,"."));}}if(args.length===0){return transform(1);}if(args.length===1){return transform(args[0]);}return args.slice(0,4).map(function(argument){var output=transform(argument);return typeof output==='number'?"".concat(output,"px"):output;}).join(' ');};return spacing;};export default createSpacing;