@shopgate/engage 7.27.5-alpha.2 → 7.27.5

package/page/widgets/CategoryList/hooks.js

@@ -1,14 +0,0 @@
-import _camelCase from"lodash/camelCase";import{useEffect,useMemo}from'react';import{useSelector,useDispatch}from'react-redux';import{getCategory}from'@shopgate/pwa-common-commerce/category/selectors';import{fetchCategoryOrRootCategories}from'@shopgate/engage/category/actions';import{useWidget}from'@shopgate/engage/page/hooks';import{getCategoriesById}from"./selectors";/**
- * @typedef {Object} CategoryListWidgetConfig
- * @property {string} category The parent category ID to display categories for.
- * @property {string} [sort] The sort order for categories
- * @property {boolean} [showImages] Whether to display images for categories.
- */ /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<CategoryListWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
-/**
- * Hook to access the Category List widget configuration and data.
- */export var useCategoryListWidget=function useCategoryListWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var dispatch=useDispatch();var category=config.category,sort=config.sort,showImages=config.showImages;var sortCC=useMemo(function(){return _camelCase(sort);},[sort]);// Get the parent category object from the selected category
-var parentCategory=useSelector(function(state){return category?getCategory(state,{categoryId:category}):null;});// Get category children of the selected category (pipeline handles sorting)
-var categories=useSelector(function(state){return typeof category==='string'?getCategoriesById(state,{categoryId:category}):null;});var sortedCategories=useMemo(function(){if(!categories){return[];}if(sortCC==='relevance'){return categories;}var isAsc=sortCC==='nameAsc';return[].concat(categories).sort(function(a,b){return a.name.localeCompare(b.name,undefined,{sensitivity:'base'})*(isAsc?1:-1);});},[categories,sortCC]);useEffect(function(){dispatch(fetchCategoryOrRootCategories(category));},[category,dispatch]);return{parentCategory:parentCategory,showImages:showImages,categories:sortedCategories};};

package/page/widgets/CategoryList/index.js

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

package/page/widgets/CategoryList/selectors.js

@@ -1,8 +0,0 @@
-import{createSelector}from'reselect';import{getCategoryChildren,getRootCategories}from'@shopgate/engage/category/selectors';/**
- * Retrieves categories from the state.
- * If no category id is passed, root-categories will be returned.
- * @param {Object} state The application state.
- * @param {Object} props The component props.
- * @returns {Object[]} The categories collection.
- */export var getCategoriesById=createSelector(getCategoryChildren,getRootCategories,function(state,props){return props.categoryId;},function(childCategories,rootCategories,categoryId){// Check if we have to handle the root-category
-if(!categoryId&&rootCategories){return rootCategories;}return childCategories;});

package/page/widgets/HTML/HTML.js

@@ -1,5 +0,0 @@
-import React from'react';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/engage';import{useHtmlWidget}from"./hooks";var colors=themeConfig.colors;var useStyles=makeStyles()({root:{' h1, h2, h3, h4, h5, h6, p, ul, ol':{margin:'1rem 0'},' h1, h2, h3, h4, h5, h6':{fontWeight:600},' h1':{fontSize:'1.5rem'},' h2':{fontSize:'1.25rem'},' h3':{fontSize:'1.1rem'},' h4, h5, h6':{fontSize:'1rem'},' ol, ul':{paddingLeft:'1rem'},' ol > li':{listStyle:'decimal'},' ul > li':{listStyle:'disc'},' img':{display:'initial'},' img[style*="float: left"], img[style*="float:left"], img.pull-left':{marginRight:'1rem'},' img[style*="float: right"], img[style*="float:right"], img.pull-right':{marginLeft:'1rem'},' code, pre':{whiteSpace:'pre-wrap'},' blockquote, q':{paddingLeft:'1rem',margin:'2rem 0',borderLeft:".25rem solid ".concat(colors.shade6),fontStyle:'italic'},' > :first-child':{marginTop:0},// Clearfix for floated widget content
-':after':{clear:'both',content:'.',display:'block',visibility:'hidden',height:0}}});/**
- * The HtmlWidget component is used to display html code.
- * @returns {JSX.Element}
- */var HtmlWidget=function HtmlWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useHtmlWidget=useHtmlWidget(),html=_useHtmlWidget.html;return React.createElement(HtmlSanitizer,{settings:{html:html},processStyles:true,className:classes.root},html);};export default HtmlWidget;

package/page/widgets/HTML/hooks.js

@@ -1,12 +0,0 @@
-import{useWidget}from'@shopgate/engage/page/hooks';/**
- * @typedef {Object} HtmlWidgetConfig
- * @property {string} [html] - The HTML content to render.
- * @property {string} [internalDescription] - Internal description for the widget.
- */ /**
- * @typedef {Object} UseHtmlWidgetReturnType
- * @property {string} [html] - The HTML content to render.
- * @property {string} [internalDescription] - Internal description for the widget.
- */ /**
- * Hook to access the html widget configuration.
- * @returns {UseHtmlWidgetReturnType} the html widget configuration
- */export var useHtmlWidget=function useHtmlWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var html=config.html;return{html:html};};

package/page/widgets/HTML/index.js

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

package/page/widgets/Headline/Headline.js

@@ -1,5 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Typography}from'@shopgate/engage/components';import{useHeadlineWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2)}};});/**
- * The HeadlineWidget is used to display a headline text.
- * @returns {JSX.Element}
- */var Headline=function Headline(){var _useStyles=useStyles(),cx=_useStyles.cx,css=_useStyles.css,classes=_useStyles.classes;var _useHeadlineWidget=useHeadlineWidget(),headline=_useHeadlineWidget.headline,align=_useHeadlineWidget.align,variant=_useHeadlineWidget.variant,styles=_useHeadlineWidget.styles;if(!headline)return null;return React.createElement(Typography// && increases the specificity of the styles which guarantees that defaults are overridden
-,{className:cx(css({'&&':_extends({},styles)}),classes.root),variant:variant,align:align,gutterBottom:true},headline);};export default Headline;

package/page/widgets/Headline/hooks.js

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

package/page/widgets/Headline/index.js

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

package/page/widgets/Placeholder/Placeholder.js

@@ -1,5 +0,0 @@
-import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{usePlaceholderWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2),minHeight:200},name:{fontSize:14},pre:{background:'#f7f9fc',border:'1px solid #dbdde2',borderRadius:8,color:'#000',fontSize:10,overflowY:'auto',padding:theme.spacing(1)}};});/**
- * The PlaceholderWidget component is used to display a placeholder for widget types that
- * are not implemented yet.
- * @returns {JSX.Element}
- */var PlaceholderWidget=function PlaceholderWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _usePlaceholderWidget=usePlaceholderWidget(),code=_usePlaceholderWidget.code,name=_usePlaceholderWidget.name,config=_usePlaceholderWidget.config,layout=_usePlaceholderWidget.layout,visibility=_usePlaceholderWidget.visibility;return React.createElement("div",{className:classes.root},React.createElement("div",{className:classes.name},name),React.createElement("pre",{className:classes.pre},JSON.stringify({code:code,config:config,layout:layout,visibility:visibility},null,2)));};export default PlaceholderWidget;

package/page/widgets/Placeholder/hooks.js

@@ -1,12 +0,0 @@
-import{useWidget}from'@shopgate/engage/page/hooks';/**
- * @typedef {Object} PlaceholderWidgetConfig
- * @property {string} foo Example property for the widget configuration.
- * @property {number} bar Another example property for the widget configuration.
- */ /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- * .useWidget<PlaceholderWidgetConfig> >} HookReturnType
- */ /**
- * Local example hook to demonstrate how to extend the useWidget hook with a custom type for
- * the widget configuration.
- * @returns {HookReturnType}
- */export var usePlaceholderWidget=function usePlaceholderWidget(){return useWidget();};

package/page/widgets/Placeholder/index.js

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

package/page/widgets/ProductList/ProductList.js

@@ -1,5 +0,0 @@
-import React from'react';import{ActionButton,I18n}from'@shopgate/engage/components';import{ProductGrid}from'@shopgate/engage/product/components';import{useWidgetProducts}from'@shopgate/engage/page/hooks';import{makeStyles}from'@shopgate/engage/styles';import{useProductListWidget}from"./hooks";var useStyles=makeStyles()({root:{// Prevent that the ActionButton margin messes with the layout of the sibling widgets
-overflow:'hidden'},grid:{'&&':{marginTop:0}}});/**
- * The ProductListWidget is used to display product lists.
- * @returns {JSX.Element}
- */var ProductListWidget=function ProductListWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useProductListWidget=useProductListWidget(),productsSearchType=_useProductListWidget.productsSearchType,productsSearchValue=_useProductListWidget.productsSearchValue,sort=_useProductListWidget.sort,productCount=_useProductListWidget.productCount,showLoadMore=_useProductListWidget.showLoadMore,flags=_useProductListWidget.flags;var _useWidgetProducts=useWidgetProducts({type:productsSearchType,value:productsSearchValue,limit:productCount,sort:sort}),fetchNext=_useWidgetProducts.fetchNext,hasNext=_useWidgetProducts.hasNext,isFetching=_useWidgetProducts.isFetching,results=_useWidgetProducts.results;return React.createElement("div",{className:classes.root},React.createElement(ProductGrid,{products:results,flags:flags,scope:"widgets",infiniteLoad:false,className:classes.grid}),hasNext&&showLoadMore&&React.createElement(ActionButton,{loading:isFetching,onClick:fetchNext},React.createElement(I18n.Text,{string:"common.load_more"})));};export default ProductListWidget;

package/page/widgets/ProductList/hooks.js

@@ -1,25 +0,0 @@
-import _camelCase from"lodash/camelCase";import{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';/**
- * @typedef {Object} ProductListWidgetProducts
- * @property {"searchTerm" | "brand" | "category" | "itemNumbers"} productSelectorType Source type
- * for the product list.
- * @property {string} productsSearchTerm A search term to filter products by
- * @property {string} productsBrand A brand to filter products by
- * @property {string} productsCategory A category to filter products by
- * @property {string} productsItemNumbers A comma-separated list of item numbers to filter products
- * by
- */ /**
- * @typedef {Object} ProductListWidgetConfig
- * @property {ProductListWidgetProducts} products The products configuration for the widget.
- * @property {number} productCount The number of products to display in the widget
- * @property {"relevance" | "PriceDesc" | "PriceAsc"} sort Sort order for the products
- * @property {boolean} loadMoreButton Whether to display a "Load more" button
- * @property {boolean} showName Whether to display product names
- * @property {boolean} showPrice Whether to display product prices
- * @property {boolean} showRating Whether to display product ratings
- */ /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- * .useWidget<ProductListWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
-/**
- * Hook to access the Product List widget configuration.
- */export var useProductListWidget=function useProductListWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var products=config.products,productCount=config.productCount,sort=config.sort,_config$loadMoreButto=config.loadMoreButton,loadMoreButton=_config$loadMoreButto===void 0?false:_config$loadMoreButto,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating;var productSelectorType=products.productSelectorType,productsBrand=products.productsBrand,productsCategory=products.productsCategory,productsItemNumbers=products.productsItemNumbers,productsSearchTerm=products.productsSearchTerm;var value=useMemo(function(){switch(productSelectorType){case'brand':return productsBrand;case'category':return productsCategory;case'itemNumbers':return productsItemNumbers.split(',').map(function(item){return item.trim();});case'searchTerm':default:return productsSearchTerm;}},[productSelectorType,productsBrand,productsCategory,productsItemNumbers,productsSearchTerm]);var flags=useMemo(function(){return{name:showName,price:showPrice,reviews:showRating};},[showName,showPrice,showRating]);return{productsSearchType:productSelectorType,productsSearchValue:value,sort:_camelCase(sort),productCount:productCount,showLoadMore:loadMoreButton,flags:flags};};

package/page/widgets/ProductList/index.js

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

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,5 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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,{useMemo}from'react';import{ProductSlider}from'@shopgate/engage/product/components';import{useWidgetProducts}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{useProductSliderWidget}from"./hooks";/**
- * The ProductSliderWidget is used to display a product slider.
- * @returns {JSX.Element}
- */var ProductSliderWidget=function ProductSliderWidget(){var _useProductSliderWidg=useProductSliderWidget(),productsSearchType=_useProductSliderWidg.productsSearchType,productsSearchValue=_useProductSliderWidg.productsSearchValue,sort=_useProductSliderWidg.sort,productCount=_useProductSliderWidg.productCount,swiperProps=_useProductSliderWidg.swiperProps,productItemProps=_useProductSliderWidg.productItemProps,isPreview=_useProductSliderWidg.isPreview;var _useWidgetProducts=useWidgetProducts({type:productsSearchType,value:productsSearchValue,limit:productCount,sort:sort}),results=_useWidgetProducts.results;var theme=useTheme();var productIds=useMemo(function(){return results===null||results===void 0?void 0:results.map(function(result){return result.id;});},[results]);if(!productIds||!productIds.length){return null;}return React.createElement(ProductSlider,_extends({productIds:productIds,scope:"widgets",productItemProps:productItemProps,slidesPerView:2.3// Improves interaction with the slider in the CMS preview iframe
-},isPreview?{touchStartPreventDefault:true}:{},{breakpoints:_defineProperty(_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:3.3}),theme.breakpoints.values.md,{slidesPerView:4.3}),theme.breakpoints.values.lg,{slidesPerView:5.3})},swiperProps));};export default ProductSliderWidget;

package/page/widgets/ProductSlider/hooks.js

@@ -1,28 +0,0 @@
-import _camelCase from"lodash/camelCase";import{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';/**
- * @typedef {Object} ProductSliderWidgetProducts
- * @property {"searchTerm" | "brand" | "category" | "itemNumbers"} productSelectorType
- * Source type for the product list.
- * @property {string} [productsSearchTerm] A search term to filter products by.
- * @property {string} [productsBrand] A brand to filter products by.
- * @property {string} [productsCategory] A category to filter products by.
- * @property {string} [productsItemNumbers] A comma-separated list of item numbers
- * to filter products by.
- */ /**
- * @typedef {Object} ProductSliderWidgetConfig
- * @property {ProductSliderWidgetProducts} products The products configuration for the widget.
- * @property {number} productCount The number of products to display in the widget.
- * @property {"relevance" | "priceDesc" | "priceAsc"} sort Sort order for the products.
- * @property {boolean} [showName] Whether to display product names.
- * @property {boolean} [showPrice] Whether to display product prices.
- * @property {boolean} [showRating] Whether to display product ratings.
- * @property {boolean} [slideAutomatic] Whether the slider should automatically slide.
- * @property {boolean} [endlessSlider] Whether the slider should loop endlessly.
- * @property {number} [sliderSpeed] The speed (in ms) for the slider autoplay.
- * @property {boolean} [isPreview] Whether the widget is in preview mode.
- */ /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- * .useWidget<ProductSliderWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
-/**
- * Hook to access the Product Slider widget configuration.
- */export var useProductSliderWidget=function useProductSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var products=config.products,productCount=config.productCount,sort=config.sort,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$slideAutomati=config.slideAutomatic,slideAutomatic=_config$slideAutomati===void 0?true:_config$slideAutomati,_config$endlessSlider=config.endlessSlider,endlessSlider=_config$endlessSlider===void 0?true:_config$endlessSlider,_config$sliderSpeed=config.sliderSpeed,sliderSpeed=_config$sliderSpeed===void 0?7000:_config$sliderSpeed;var productSelectorType=products.productSelectorType,productsBrand=products.productsBrand,productsCategory=products.productsCategory,productsItemNumbers=products.productsItemNumbers,productsSearchTerm=products.productsSearchTerm;var value=useMemo(function(){switch(productSelectorType){case'brand':return productsBrand;case'category':return productsCategory;case'itemNumbers':return productsItemNumbers.split(',').map(function(item){return item.trim();});case'searchTerm':default:return productsSearchTerm;}},[productSelectorType,productsBrand,productsCategory,productsItemNumbers,productsSearchTerm]);var swiperProps=useMemo(function(){return{autoplay:slideAutomatic,delay:sliderSpeed,loop:endlessSlider};},[slideAutomatic,sliderSpeed,endlessSlider]);var productItemProps=useMemo(function(){return{hideName:!showName,hidePrice:!showPrice,hideRating:!showRating};},[showName,showPrice,showRating]);return{productsSearchType:productSelectorType,productsSearchValue:value,sort:_camelCase(sort),productCount:productCount,swiperProps:swiperProps,productItemProps:productItemProps,isPreview:isPreview};};

package/page/widgets/ProductSlider/index.js

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

package/page/widgets/index.js

@@ -1 +0,0 @@
-export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";

package/page/widgets/widgets.json

@@ -1,20 +0,0 @@
-{
-  "@shopgate/widgetsInternal/Placeholder": {
-    "path": "@shopgate/engage/page/widgets/Placeholder"
-  },
-  "@shopgate/widgets/productListWidget": {
-    "path": "@shopgate/engage/page/widgets/ProductList"
-  },
-  "@shopgate/widgets/categoryListWidget": {
-    "path": "@shopgate/engage/page/widgets/CategoryList"
-  },
-  "@shopgate/widgets/productSliderWidget": {
-    "path": "@shopgate/engage/page/widgets/ProductSlider"
-  },
-  "@shopgate/widgets/htmlWidget": {
-    "path": "@shopgate/engage/page/widgets/HTML"
-  },
-  "@shopgate/widgets/headlineWidget": {
-    "path": "@shopgate/engage/page/widgets/Headline"
-  }
-}

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

@@ -1,8 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useMemo,memo}from'react';import PropTypes from'prop-types';import{MapPriceHint,OrderQuantityHint,EffectivityDates,Swatches,AVAILABILITY_STATE_OK,AVAILABILITY_STATE_ALERT,getProductRoute}from'@shopgate/engage/product';import{hasNewServices as checkHasNewServices,i18n}from'@shopgate/engage/core/helpers';import{Availability,Link}from'@shopgate/engage/components';import{StockInfoLists}from'@shopgate/engage/locations/components';import{makeStyles}from'@shopgate/engage/styles';import ItemName from"../ItemName";import ItemPrice from"../ItemPrice";var useStyles=makeStyles()({root:{lineHeight:1.2,':not(:empty)':{padding:'12px 0 16px'}},quantityHint:{paddingTop:8}});/**
- * The Product Grid Item Detail component.
- * @param {Object} props The component props.
- * @param {Object} props.product The product.
- * @param {Object} props.display The display object.
- * @param {Object} [props.productListTypeMeta] Optional meta object with data from the product list
- * @returns {JSX.Element}
- */var ItemDetails=function ItemDetails(_ref){var product=_ref.product,display=_ref.display,productListTypeMeta=_ref.productListTypeMeta;var productId=product.id,_product$name=product.name,name=_product$name===void 0?null:_product$name,_product$stock=product.stock,stock=_product$stock===void 0?null:_product$stock;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var hasNewServices=useMemo(function(){return checkHasNewServices();},[]);if(display&&!display.name&&!display.price&&!display.reviews){return null;}return React.createElement(Link,{className:cx(classes.root,'theme__product-grid__item__item-details'),tabIndex:0,href:getProductRoute(productId),state:_extends({title:product.name},productListTypeMeta)},React.createElement(Swatches,{productId:productId}),React.createElement(ItemName,{display:display,productId:productId,name:name}),React.createElement(MapPriceHint,{productId:productId}),React.createElement(OrderQuantityHint,{productId:productId,className:classes.quantityHint}),React.createElement(EffectivityDates,{productId:productId}),hasNewServices&&React.createElement(React.Fragment,null,React.createElement(Availability,{state:!stock||stock.orderable?AVAILABILITY_STATE_OK:AVAILABILITY_STATE_ALERT,text:i18n.text('product.available.not'),showWhenAvailable:false}),React.createElement(StockInfoLists,{product:product})),React.createElement(ItemPrice,{product:product,display:display}));};ItemDetails.defaultProps={display:null,productListTypeMeta:null};export default memo(ItemDetails);

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

@@ -1 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{shallow}from'enzyme';import{hasNewServices}from'@shopgate/engage/core/helpers';import{Availability}from'@shopgate/engage/components';import{StockInfoLists}from'@shopgate/engage/locations/components';import ItemDetails from"./index";jest.mock('@shopgate/engage/product',function(){return{MapPriceHint:function MapPriceHint(){return null;},OrderQuantityHint:function OrderQuantityHint(){return null;},EffectivityDates:function EffectivityDates(){return null;},Swatches:function Swatches(){return null;},AVAILABILITY_STATE_OK:'AVAILABILITY_STATE_OK',AVAILABILITY_STATE_ALERT:'AVAILABILITY_STATE_ALERT',getProductRoute:jest.fn(function(productId){return"link-to-product/".concat(productId);})};});jest.mock('@shopgate/engage/locations/components',function(){return{StockInfoLists:function StockInfoLists(){return null;}};});jest.mock('@shopgate/engage/core/helpers',function(){return{hasNewServices:jest.fn().mockReturnValue(false),i18n:{text:function text(str){return str;}}};});jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/core',function(){return{isIOSTheme:jest.fn().mockReturnValue(true),hasWebBridge:jest.fn().mockReturnValue(false),i18n:{text:function text(_text){return _text;}}};});jest.mock("../ItemName");jest.mock("../ItemPrice");describe('<ItemDetails />',function(){var props={product:{id:'1234',name:'Foo',price:{}}};var display={name:false,price:false,reviews:false};it('should render with minimal props',function(){var wrapper=shallow(React.createElement(ItemDetails,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Availability).exists()).toBe(false);expect(wrapper.find(StockInfoLists).exists()).toBe(false);});it('should render additional components with new services',function(){hasNewServices.mockReturnValueOnce(true);var wrapper=shallow(React.createElement(ItemDetails,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Availability).exists()).toBe(true);expect(wrapper.find(StockInfoLists).exists()).toBe(true);});it('should not render with display props set',function(){var wrapper=shallow(React.createElement(ItemDetails,_extends({},props,{display:display})));expect(wrapper).toBeEmptyRender();});});

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

@@ -1,5 +0,0 @@
-import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{SurroundPortals,DiscountBadge}from'@shopgate/engage/components';import{PRODUCT_ITEM_DISCOUNT}from'@shopgate/engage/category';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{minWidth:40}});/**
- * The item discount component
- * @param {Object} props The component props.
- * @returns {JSX.Element|null}
- */var ItemDiscount=function ItemDiscount(_ref){var productId=_ref.productId,discount=_ref.discount;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var portalProps=useMemo(function(){return{productId:productId};},[productId]);if(!discount){return null;}return React.createElement("div",{className:cx(classes.root,'theme__product-grid__item__item-discount')},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_DISCOUNT,portalProps:portalProps},React.createElement(DiscountBadge,{text:"-".concat(discount,"%")})));};ItemDiscount.defaultProps={discount:null};export default memo(ItemDiscount);

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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import 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

@@ -1,7 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import 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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,22 +0,0 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import 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

@@ -1 +0,0 @@
-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/styles/helpers/color.js

@@ -1,23 +0,0 @@
-// 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/index.d.ts

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

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

@@ -1,114 +0,0 @@
-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

@@ -1,41 +0,0 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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 */