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

package/product/components/ProductGrid/components/Item/components/ItemFavoritesButton/index.js

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{useSelector}from'react-redux';import{SurroundPortals,FavoritesButton}from'@shopgate/engage/components';import{PRODUCT_ITEM_FAVORITES_BUTTON}from'@shopgate/engage/category';import{isRelativeProductOnList}from'@shopgate/engage/favorites';import{getLoadWishlistOnAppStartEnabled}from'@shopgate/engage/core';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{position:'absolute',top:0,right:16,left:'auto',transform:'translate3d(0, -50%, 0)'}});/**
+ * The item favorites button component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var ItemFavoritesButton=function ItemFavoritesButton(_ref){var productId=_ref.productId;var _useStyles=useStyles(),classes=_useStyles.classes;var loadWishlistOnAppStartEnabled=useSelector(getLoadWishlistOnAppStartEnabled);var isOnWishlist=useSelector(function(state){return isRelativeProductOnList(state,{productId:productId});});var isFavorite=useMemo(function(){return!loadWishlistOnAppStartEnabled?false:isOnWishlist;},[isOnWishlist,loadWishlistOnAppStartEnabled]);var portalProps=useMemo(function(){return{productId:productId};},[productId]);return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_FAVORITES_BUTTON,portalProps:portalProps},React.createElement("div",{className:classes.root,"data-test-id":"favorites"},React.createElement(FavoritesButton,{active:isFavorite,productId:productId,noShadow:true,removeWithRelatives:true})));};export default memo(ItemFavoritesButton);

package/product/components/ProductGrid/components/Item/components/ItemFavoritesButton/spec.js

@@ -0,0 +1 @@
+import React from'react';import{shallow}from'enzyme';import{combineReducers}from'redux';import{Provider}from'react-redux';import{createMockStore}from'@shopgate/pwa-common/store';import favorites from'@shopgate/pwa-common-commerce/favorites/reducers';import ItemFavoritesButton from"./index";jest.mock('@shopgate/engage/components');var store=createMockStore(combineReducers({favorites:favorites}));describe('<ItemFavoritesButton />',function(){it('should not render when its not a favorite',function(){var wrapper=shallow(React.createElement(Provider,{store:store},React.createElement(ItemFavoritesButton,{productId:"1234"})));expect(wrapper).toMatchSnapshot();});it('should render if its a favorite',function(){var wrapper=shallow(React.createElement(Provider,{store:store},React.createElement(ItemFavoritesButton,{productId:"1234",isFavorite:true})));expect(wrapper).toMatchSnapshot();});});

package/product/components/ProductGrid/components/Item/components/ItemImage/index.js

@@ -0,0 +1,5 @@
+import React,{useMemo,memo}from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_ITEM_IMAGE}from'@shopgate/engage/category/constants';import{getProductImageSettings,ProductImage}from'@shopgate/engage/product';var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;/**
+ * The item image component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var ItemImage=function ItemImage(_ref){var productId=_ref.productId,name=_ref.name,imageUrl=_ref.imageUrl;var portalProps=useMemo(function(){return{productId:productId};},[productId]);return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_IMAGE,portalProps:portalProps},React.createElement(ProductImage,{alt:name,src:imageUrl,resolutions:gridResolutions,itemProp:"image"}));};ItemImage.defaultProps={imageUrl:null,name:null};export default memo(ItemImage);

package/product/components/ProductGrid/components/Item/components/ItemImage/spec.js

@@ -0,0 +1 @@
+import React from'react';import{shallow}from'enzyme';import ItemImage from"./index";jest.mock('@shopgate/engage/components',function(){return{ProductImage:function ProductImage(){return null;}};});describe('<ItemImage />',function(){it('should render',function(){var wrapper=shallow(React.createElement(ItemImage,{productId:"1234",imageUrl:"http://www.google.com",name:"FooBar"}));expect(wrapper).toMatchSnapshot();});});

package/product/components/ProductGrid/components/Item/components/ItemName/index.js

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{PRODUCT_ITEM_NAME,PRODUCT_ITEM_NAME_BEFORE,PRODUCT_ITEM_NAME_AFTER}from'@shopgate/engage/category/constants';import{Portal}from'@shopgate/engage/components';import{ProductName}from'@shopgate/engage/product';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{fontWeight:'500',lineHeight:1.15,marginTop:1,wordBreak:['keep-all','break-word'],hyphens:'auto'}});/**
+ * The item name component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element|null}
+ */var ItemName=function ItemName(_ref){var display=_ref.display,productId=_ref.productId,name=_ref.name;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var portalProps=useMemo(function(){return{productId:productId,display:display};},[display,productId]);if(display&&!display.name){return React.createElement(React.Fragment,null,React.createElement(Portal,{name:PRODUCT_ITEM_NAME_BEFORE,props:portalProps}),React.createElement(Portal,{name:PRODUCT_ITEM_NAME_AFTER,props:portalProps}));}return React.createElement(ProductName,{name:name,className:cx(classes.root,'theme__product-grid__item__item-name'),portalName:PRODUCT_ITEM_NAME,portalProps:portalProps,testId:"Productname: ".concat(name)});};ItemName.defaultProps={display:null,name:null};export default memo(ItemName);

package/product/components/ProductGrid/components/Item/components/ItemName/spec.js

@@ -0,0 +1 @@
+import React from'react';import{shallow}from'enzyme';import ItemName from"./index";jest.mock('@shopgate/engage/product',function(){return{ProductName:function ProductName(){return null;}};});var props={productId:'1234',name:'Foo'};describe('<ItemName />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(ItemName,props));expect(wrapper).toMatchSnapshot();});});

package/product/components/ProductGrid/components/Item/components/ItemPrice/index.js

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_ITEM_PRICE}from'@shopgate/engage/category';import{ProductGridPrice}from'@shopgate/engage/product';/**
+ * The item price component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element|null}
+ */var ItemPrice=function ItemPrice(_ref){var display=_ref.display,product=_ref.product;var productId=product.id;var portalProps=useMemo(function(){return{productId:productId,location:'productGrid'};},[productId]);if(display&&!display.price){return null;}return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_PRICE,portalProps:portalProps},React.createElement(ProductGridPrice,{product:product}));};ItemPrice.defaultProps={display:null};export default memo(ItemPrice);

package/product/components/ProductGrid/components/Item/components/ItemPrice/spec.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 React from'react';import{shallow}from'enzyme';import ItemPrice from"./index";jest.mock('@shopgate/engage/product',function(){return{ProductGridPrice:function ProductGridPrice(){return null;}};});jest.mock('@shopgate/engage/components',function(){return{Portal:function Portal(_ref){var children=_ref.children;return children;}};});jest.mock('@shopgate/engage/category',function(){return{PRODUCT_ITEM_PRICE:'PRODUCT_ITEM_PRICE',PRODUCT_ITEM_PRICE_AFTER:'PRODUCT_ITEM_PRICE_AFTER',PRODUCT_ITEM_PRICE_BEFORE:'PRODUCT_ITEM_PRICE_BEFORE'};});var props={product:{id:'1234',price:{}}};var display={price:false};describe('<ItemPrice />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(ItemPrice,props));expect(wrapper).toMatchSnapshot();});it('should not render with display props set',function(){var wrapper=shallow(React.createElement(ItemPrice,_extends({},props,{display:display})));expect(wrapper).toBeEmptyRender();});});

package/product/components/ProductGrid/components/Item/index.js

@@ -0,0 +1,7 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{memo}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import{getProductRoute,FeaturedMedia,ProductBadges}from'@shopgate/engage/product';import{Link}from'@shopgate/engage/components';import{useProductListType}from'@shopgate/engage/product/hooks';import{themeConfig}from'@shopgate/engage';import{makeStyles}from'@shopgate/engage/styles';import ItemImage from"./components/ItemImage";import ItemDiscount from"./components/ItemDiscount";import ItemFavoritesButton from"./components/ItemFavoritesButton";import ItemDetails from"./components/ItemDetails";var colors=themeConfig.colors;var useStyles=makeStyles()(function(theme,_ref){var display=_ref.display;return{root:{position:'relative',display:'flex',flexDirection:'column',background:colors.light,height:'100%'},itemDetails:_extends({position:'relative'},display&&!display.name&&!display.price&&!display.reviews&&{paddingBottom:30})};});/**
+ * The Product Grid Item component.
+ * @param {Object} props The component props.
+ * @param {Object} props.product The product.
+ * @param {Object} props.display The display object.
+ * @return {JSX.Element}
+ */var Item=function Item(_ref2){var product=_ref2.product,display=_ref2.display;var _useStyles=useStyles({display:display}),classes=_useStyles.classes,cx=_useStyles.cx;var _useProductListType=useProductListType(),meta=_useProductListType.meta;return React.createElement("div",{className:cx(classes.root,'theme__product-grid__item')},React.createElement(Link,{role:"none",href:getProductRoute(product.id),state:_extends({title:product.name},meta)},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url}):React.createElement(ItemImage,{productId:product.id,name:product.name,imageUrl:product.featuredImageBaseUrl})),React.createElement(ProductBadges,{location:"productGrid",productId:product.id},React.createElement(ItemDiscount,{productId:product.id,discount:product.price.discount||null})),React.createElement("div",{className:classes.itemDetails},React.createElement(ItemDetails,{product:product,display:display,productListTypeMeta:meta}),React.createElement(ItemFavoritesButton,{productId:product.id})));};Item.defaultProps={display:null};export default memo(Item);

package/product/components/ProductGrid/components/Iterator/index.js

@@ -0,0 +1,5 @@
+import React from'react';import PropTypes from'prop-types';import{Grid,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_ITEM}from'@shopgate/engage/category';import{ProductListEntryProvider}from'@shopgate/engage/product';import Item from"../Item";/**
+ * The Product Grid Iterator component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var Iterator=function Iterator(props){var portalProps={productId:props.id};var id=props.id,display=props.display;return React.createElement(Grid.Item,{key:id,"data-test-id":props.name,className:"theme__product-grid__item__container"},React.createElement(ProductListEntryProvider,{productId:props.id},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM,portalProps:portalProps},React.createElement(Item,{product:props,display:display}))));};Iterator.defaultProps={display:null,name:null};export default Iterator;

package/product/components/ProductGrid/components/Layout/index.js

@@ -0,0 +1,5 @@
+import React from'react';import PropTypes from'prop-types';import{Grid}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme,_ref){var columns=_ref.columns;return{root:{padding:'0 16px',':not(:empty)':{marginTop:16},display:'grid',gridGap:'0 16px',gridTemplateColumns:"repeat(".concat(columns,", 1fr)")}};});/**
+ * The product grid layout component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var Layout=function Layout(_ref2){var children=_ref2.children,columns=_ref2.columns,className=_ref2.className;var _useStyles=useStyles({columns:columns}),classes=_useStyles.classes,cx=_useStyles.cx;return React.createElement(Grid,{wrap:true,className:cx(classes.root,className,'theme__product-grid'),"data-test-id":"productGrid"},children);};Layout.defaultProps={className:null,children:null};export default Layout;

package/product/components/ProductGrid/index.js

@@ -0,0 +1,22 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useContext}from'react';import PropTypes from'prop-types';import{ViewContext,InfiniteContainer,LoadingIndicator}from'@shopgate/engage/components';import{ProductListTypeProvider}from'@shopgate/engage/product';import{ITEMS_PER_LOAD}from'@shopgate/engage/core/constants';import{useResponsiveValue}from'@shopgate/engage/styles';import Iterator from"./components/Iterator";import Layout from"./components/Layout";export var WIDGET_ID='@shopgate/engage/product/ProductGrid';/**
+ * The Product Grid component.
+ * @param {Object} props The component props.
+ * @param {Array} props.products The list of products to display.
+ * @param {string} props.scope Optional scope of the component. Will be used as subType property of
+ * the ProductListTypeContext and is intended as a description in which "context" the component is
+ * used.
+ * @param {Object} props.meta Optional metadata for the product list type context.
+ * @param {Object} props.flags The flags object.
+ * @param {boolean} props.flags.name Whether to display product names.
+ * @param {boolean} props.flags.price Whether to display product prices.
+ * @param {boolean} props.flags.reviews Whether to display rating stars.
+ * @param {boolean} props.infiniteLoad Whether the grid should support infinite loading.
+ * @param {Function} props.handleGetProducts Callback function that's invoked to load more products
+ * when infinite loading is enabled.
+ * @param {number} props.totalProductCount The total number of products. Needed when infinite
+ * loading is enabled.
+ * @param {string} props.requestHash The hash for the current request. Needed when infinite loading
+ * is enabled
+ * @param {string} props.className Optional class name for the grid container
+ * @returns {JSX.Element}
+ */var ProductGrid=function ProductGrid(_ref){var flags=_ref.flags,infiniteLoad=_ref.infiniteLoad,handleGetProducts=_ref.handleGetProducts,products=_ref.products,totalProductCount=_ref.totalProductCount,requestHash=_ref.requestHash,scope=_ref.scope,meta=_ref.meta,className=_ref.className;var _useContext=useContext(ViewContext),getContentRef=_useContext.getContentRef;var columns=useResponsiveValue({xs:2,md:4});if(!infiniteLoad){return React.createElement(Layout,{columns:columns,className:className},React.createElement(ProductListTypeProvider,{type:"productGrid",subType:scope,meta:meta},products.map(function(product){return React.createElement(Iterator,_extends({display:flags,id:product.id,key:product.id},product));})));}return React.createElement(ProductListTypeProvider,{type:"productGrid",subType:scope,meta:meta},React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:function wrapper(props){return React.createElement(Layout,_extends({columns:columns,className:className},props));},iterator:Iterator,loader:handleGetProducts,items:products,columns:columns,loadingIndicator:React.createElement(LoadingIndicator,null),totalItems:totalProductCount,initialLimit:ITEMS_PER_LOAD,limit:ITEMS_PER_LOAD,requestHash:requestHash,enablePromiseBasedLoading:true}));};ProductGrid.defaultProps={flags:null,handleGetProducts:function handleGetProducts(){},infiniteLoad:true,products:null,requestHash:null,totalProductCount:null,scope:null,meta:null,className:null};export default ProductGrid;

package/product/components/ProductGrid/spec.js

@@ -0,0 +1 @@
+import React from'react';import{mount}from'enzyme';import ProductGrid from'.';global.console.error=jest.fn();jest.mock('@shopgate/engage/core',function(){return{hasWebBridge:jest.fn(function(){return false;}),isIOSTheme:jest.fn(function(){return false;}),withForwardedRef:jest.fn(),withCurrentProduct:jest.fn(),useWidgetSettings:jest.fn().mockReturnValue({})};});jest.mock('@shopgate/engage/components',function(){var _jest$requireActual=jest.requireActual('@shopgate/engage/components/View/context'),ViewContext=_jest$requireActual.ViewContext;return{ViewContext:ViewContext,InfiniteContainer:function InfiniteContainer(){return null;},Grid:function Grid(){return null;}};});jest.mock("./components/Iterator",function(){return function Iterator(){return null;};});jest.mock('@shopgate/engage/product',function(){return{ProductListTypeProvider:function ProductListTypeProvider(_ref){var children=_ref.children;return children;},ProductListEntryProvider:function ProductListEntryProvider(_ref2){var children=_ref2.children;return children;}};});describe('<ProductGrid />',function(){it('should render with the InfiniteContainer',function(){var wrapper=mount(React.createElement(ProductGrid,{products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(true);expect(wrapper.find('Layout').exists()).toBe(false);});it('should render the original layout',function(){var wrapper=mount(React.createElement(ProductGrid,{infiniteLoad:false,products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(false);expect(wrapper.find('Layout').exists()).toBe(true);});});

package/product/components/ProductGridPrice/index.js

@@ -2,5 +2,5 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import{Grid
  * The ProductGridPrice component is supposed to be used to display prices at product grids. It
  * renders a row with the current price and a strike price when present. As same as the price info.
  * @param {Object} product A product entity.
- * @return {JSX}
+ * @return {JSX.Element}
  */var ProductGridPrice=function ProductGridPrice(_ref){var product=_ref.product;var price=product.price;return React.createElement(Fragment,null,React.createElement(Grid,{className:"".concat(styles.priceWrapper," engage__product__product-grid-price"),wrap:true},React.createElement(Grid.Item,{grow:1},React.createElement(Price,{currency:price.currency,discounted:!!price.discount,unitPrice:price.unitPrice,unitPriceMin:price.unitPriceMin})),price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.msrp,currency:price.currency})),!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),React.createElement(PriceInfo,{product:product,className:styles.basicPrice,wrapper:function wrapper(children){return React.createElement(Grid,null,React.createElement(Grid.Item,null,children));}}));};export default withPriceCalculation(ProductGridPrice);

package/product/components/ProductSlider/index.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);}import React from'react';import PropTypes from'prop-types';import{useWidgetSettings}from'@shopgate/engage/core';import{useThemeComponents}from'@shopgate/engage/core/hooks';import{Swiper}from'@shopgate/engage/components';import{ProductListTypeProvider,ProductListEntryProvider}from'@shopgate/engage/product/providers';import{container,items}from"./style";export var WIDGET_ID='@shopgate/engage/product/ProductSlider';/**
+var _excluded=["autoplay","className","delay","productIds","snap","scope","meta","productItemProps","item"];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 React from'react';import PropTypes from'prop-types';import{useWidgetSettings}from'@shopgate/engage/core';import{useThemeComponents}from'@shopgate/engage/core/hooks';import{Swiper}from'@shopgate/engage/components';import{ProductListTypeProvider,ProductListEntryProvider}from'@shopgate/engage/product/providers';import{container,items}from"./style";export var WIDGET_ID='@shopgate/engage/product/ProductSlider';/**
  * @param {Object} props The component props.
- * @returns {JSX}
- */function ProductSlider(props){var autoplay=props.autoplay,className=props.className,delay=props.delay,productIds=props.productIds,snap=props.snap,scope=props.scope,meta=props.meta;var widgetSettings=useWidgetSettings(WIDGET_ID)||{};var _ref=props.slidesPerView?props:widgetSettings,_ref$slidesPerView=_ref.slidesPerView,slidesPerView=_ref$slidesPerView===void 0?2.3:_ref$slidesPerView;// ProductSlider items are rendered with the ProductCard component provided by the theme.
-var _useThemeComponents=useThemeComponents(),ProductCard=_useThemeComponents.ProductCard;var Item=props.item||ProductCard;return React.createElement(ProductListTypeProvider,{type:"productSlider",subType:scope,meta:meta},React.createElement(Swiper,_extends({},autoplay&&{autoplay:{delay:delay}},{className:"".concat(className," engage__product__product-slider"),controls:false,indicators:false,loop:false,freeMode:!snap,slidesPerView:slidesPerView}),productIds.map(function(id){return React.createElement(Swiper.Item,{key:id,className:container},React.createElement(ProductListEntryProvider,{productId:id},React.createElement(Item,{productId:id,style:items})));})));}ProductSlider.WIDGET_ID=WIDGET_ID;ProductSlider.defaultProps={autoplay:false,className:null,delay:10,item:null,slidesPerView:null,snap:false,scope:null,meta:null};export default ProductSlider;
+ * @returns {JSX.Element}
+ */function ProductSlider(props){var autoplay=props.autoplay,className=props.className,delay=props.delay,productIds=props.productIds,snap=props.snap,scope=props.scope,meta=props.meta,productItemProps=props.productItemProps,item=props.item,swiperProps=_objectWithoutProperties(props,_excluded);var widgetSettings=useWidgetSettings(WIDGET_ID)||{};var _ref=props.slidesPerView?props:widgetSettings,_ref$slidesPerView=_ref.slidesPerView,slidesPerView=_ref$slidesPerView===void 0?2.3:_ref$slidesPerView;// ProductSlider items are rendered with the ProductCard component provided by the theme.
+var _useThemeComponents=useThemeComponents(),ProductCard=_useThemeComponents.ProductCard;var Item=item||ProductCard;return React.createElement(ProductListTypeProvider,{type:"productSlider",subType:scope,meta:meta},React.createElement(Swiper,_extends({},autoplay&&{autoplay:{delay:delay}},{className:"".concat(className," engage__product__product-slider"),controls:false,indicators:false,freeMode:!snap},swiperProps,{slidesPerView:slidesPerView}),productIds.map(function(id){return React.createElement(Swiper.Item,{key:id,className:container},React.createElement(ProductListEntryProvider,{productId:id},React.createElement(Item,_extends({productId:id,style:items},productItemProps))));})));}ProductSlider.WIDGET_ID=WIDGET_ID;ProductSlider.defaultProps={autoplay:false,className:null,delay:10,item:null,meta:null,productItemProps:null,scope:null,slidesPerView:null,snap:false};export default ProductSlider;

package/product/components/index.js

@@ -1 +1 @@
-export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{SelectOption,TextOption}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";
+export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{SelectOption,TextOption}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGrid}from"./ProductGrid";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";

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/index.js

@@ -1 +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{responsiveMediaQuery}from"../../components/ResponsiveContainer/mediaQuery";export{responsiveCondition}from"../../components/ResponsiveContainer/condition";
+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/setPageBackgroundColor.js

@@ -1,5 +1,5 @@
-import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{hasWebBridge}from'@shopgate/engage/core/helpers';import{setCSSCustomProp}from"./cssCustomProperties";var defaultBackgroundColor=themeConfig.colors.light;/**
+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()){setCSSCustomProp('--page-background-color',color);}};
+if(!hasWebBridge()||IS_PAGE_PREVIEW_ACTIVE){setCSSCustomProp('--page-background-color',color);}};

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

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

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;

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

@@ -0,0 +1,19 @@
+import { type Breakpoints } from './createBreakpoints';
+import { type Spacing } from './createSpacing';
+import { Transitions } from './transitions';
+import { type ZIndex } from './zIndex';
+
+export { type Breakpoint } from './createBreakpoints'
+
+export interface ThemeOptions {
+
+}
+
+export interface Theme {
+  breakpoints: Breakpoints;
+  spacing: Spacing;
+  transitions: Transitions;
+  zIndex: ZIndex;
+}
+
+export function createTheme(): Theme;

package/styles/theme/createTheme/index.js

@@ -0,0 +1,5 @@
+import createBreakpoints from"./createBreakpoints";import createSpacing from"./createSpacing";import transitions from"./transitions";import zIndex from"./zIndex";// eslint-disable-next-line valid-jsdoc
+/**
+ * Creates a theme object for the ThemeProvider.
+ * @returns The theme object
+ */export var createTheme=function createTheme(){var breakpoints=createBreakpoints();var spacing=createSpacing();return{breakpoints:breakpoints,spacing:spacing,transitions:transitions,zIndex:zIndex};};

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

@@ -0,0 +1,100 @@
+export interface Easing {
+  /**
+   * This is the most common easing curve.
+   */
+  easeInOut: string;
+  /**
+   * Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting
+   * point.
+   */
+  easeOut: string;
+  /**
+   * Objects leave the screen at full velocity. They do not decelerate when off-screen.
+   */
+  easeIn: string;
+  /**
+   * The sharp curve is used by objects that may return to the screen at any time.
+   */
+  sharp: string;
+}
+export const easing: Easing;
+
+export interface Duration {
+  shortest: number;
+  shorter: number;
+  short: number;
+  /**
+   * Most basic recommended timing
+   */
+  standard: number;
+  /**
+   * This is to be used in complex animations
+   */
+  complex: number;
+  /**
+   * Recommended when something is entering screen
+   */
+  enteringScreen: number;
+  /**
+   * Recommended when something is leaving screen
+   */
+  leavingScreen: number;
+}
+
+export const duration: Duration;
+
+export function formatMs(milliseconds: number): string;
+
+export interface Transitions {
+  /**
+   * Easing functions for transitions.
+   */
+  easing: Easing;
+  /**
+   * Presets for transition durations.
+   */
+  duration: Duration;
+  /**
+   * Creates a CSS transition string based on the provided properties and options.
+   */
+  create(
+    /**
+     * The CSS properties to apply the transition to.
+     * Can be a single property or an array of properties.
+     */
+    props: string | string[],
+    options?: Partial<{
+      /**
+       * Duration of the transition as a number in milliseconds or a string with a
+       * CSS time unit (e.g., '500ms', '0.5s').
+       */
+      duration: number | string;
+      /**
+       * Easing function to use for the transition.
+       */
+      easing: string;
+      /**
+       * Delay before the transition starts, as a number in milliseconds or a string with a
+       * CSS time unit (e.g., '500ms', '0.5s').
+       */
+      delay: number | string
+    }>
+  ): string;
+  /**
+   * Calculates an appropriate animation duration (in milliseconds) for a height-based
+   * transition effect. The duration increases with height but in a sub-linear fashion,
+   * providing a smooth and visually pleasing animation speed for expanding/collapsing UI elements.
+   *
+   * @param {number} height - The height (in pixels) of the element being animated.
+   * @returns {number} The calculated duration in milliseconds. Returns 0 if height is 0 or falsy.
+   *
+   * @example
+   * getAutoHeightDuration(72); // returns ~222
+   */
+  getAutoHeightDuration(height: number): number;
+}
+
+// export type TransitionsOptions = DeepPartial<Transitions>;
+
+declare const transitions: Transitions;
+export default transitions;

package/styles/theme/createTheme/transitions.js

@@ -0,0 +1,26 @@
+var _excluded=["duration","easing","delay"];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{isDev}from'@shopgate/engage/core/helpers';// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
+// to learn the context in which each easing should be used.
+export var easing={// This is the most common easing curve.
+easeInOut:'cubic-bezier(0.4, 0, 0.2, 1)',// Objects enter the screen at full velocity from off-screen and
+// slowly decelerate to a resting point.
+easeOut:'cubic-bezier(0.0, 0, 0.2, 1)',// Objects leave the screen at full velocity. They do not decelerate when off-screen.
+easeIn:'cubic-bezier(0.4, 0, 1, 1)',// The sharp curve is used by objects that may return to the screen at any time.
+sharp:'cubic-bezier(0.4, 0, 0.6, 1)'};// Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+// to learn when use what timing
+export var duration={shortest:150,shorter:200,"short":250,// most basic recommended timing
+standard:300,// this is to be used in complex animations
+complex:375,// recommended when something is entering screen
+enteringScreen:225,// recommended when something is leaving screen
+leavingScreen:195};/**
+ * Converts milliseconds to a string representation.
+ * @param {number} milliseconds Input in milliseconds.
+ * @returns {string}
+ */function formatMs(milliseconds){return"".concat(Math.round(milliseconds),"ms");}/**
+ * @param {string|Array} props
+ * @param {object} param
+ * @param {string} param.prop
+ * @param {number} param.duration
+ * @param {string} param.easing
+ * @param {number} param.delay
+ */export default{easing:easing,duration:duration,create:function create(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:['all'];var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$duration=options.duration,durationOption=_options$duration===void 0?duration.standard:_options$duration,_options$easing=options.easing,easingOption=_options$easing===void 0?easing.easeInOut:_options$easing,_options$delay=options.delay,delay=_options$delay===void 0?0:_options$delay,other=_objectWithoutProperties(options,_excluded);if(isDev){/* eslint-disable require-jsdoc */var isString=function isString(value){return typeof value==='string';};var isNumber=function isNumber(value){return!Number.isNaN(parseFloat(value));};/* eslint-enable require-jsdoc */if(!isString(props)&&!Array.isArray(props)){console.error('Shopgate Theme: Argument "props" must be a string or Array.');}if(!isNumber(durationOption)&&!isString(durationOption)){console.error("Shopgate Theme: Argument \"duration\" must be a number or a string but found ".concat(durationOption,"."));}if(!isString(easingOption)){console.error('Shopgate Theme: Argument "easing" must be a string.');}if(!isNumber(delay)&&!isString(delay)){console.error('Shopgate Theme: Argument "delay" must be a number or a string.');}if(Object.keys(other).length!==0){console.error("Shopgate Theme: Unrecognized argument(s) [".concat(Object.keys(other).join(','),"]."));}}return(Array.isArray(props)?props:[props]).map(function(animatedProp){return"".concat(animatedProp," ").concat(typeof durationOption==='string'?durationOption:formatMs(durationOption)," ").concat(easingOption," ").concat(typeof delay==='string'?delay:formatMs(delay));}).join(',');},getAutoHeightDuration:function getAutoHeightDuration(height){if(!height){return 0;}var constant=height/36;// https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+return Math.round((4+15*Math.pow(constant,0.25)+constant/5)*10);}};

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

@@ -0,0 +1,12 @@
+export interface ZIndex {
+  tabBar: number;
+  drawer: number;
+  snackbar: number;
+  modal: number;
+}
+
+export type ZIndexOptions = Partial<ZIndex>;
+
+declare const zIndex: ZIndex;
+
+export default zIndex;

package/styles/theme/createTheme/zIndex.js

@@ -0,0 +1,3 @@
+// We need to centralize the zIndex definitions as they work
+// like global values in the browser.
+var zIndex={tabBar:10,drawer:1200,snackbar:1400,modal:2000};export default zIndex;

package/styles/theme/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { default as useActiveBreakpoint } from './useActiveBreakpoint';
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as useResponsiveValue } from './useResponsiveValue';
+export { default as useTheme } from './useTheme';

package/styles/theme/hooks/index.js

@@ -0,0 +1 @@
+export{default as useActiveBreakpoint}from"./useActiveBreakpoint";export{default as useMediaQuery}from"./useMediaQuery";export{default as useResponsiveValue}from"./useResponsiveValue";export{default as useTheme}from"./useTheme";