@shopgate/engage 7.31.6 → 7.32.0-beta.10

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

@@ -1,34 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  list: {
-    background: theme.palette.background.default
-  }
-}));
 
 /**
  * The Product List Layout component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Layout = ({
   children
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx(List, {
-    className: cx(classes.list, 'engage__product__product-list'),
-    itemScope: true,
-    itemType: "http://schema.org/ItemList",
-    "data-test-id": "productList",
-    children: children
-  });
-};
+}) => /*#__PURE__*/_jsx(List, {
+  className: "engage__product__product-list",
+  itemScope: true,
+  itemType: "http://schema.org/ItemList",
+  "data-test-id": "productList",
+  children: children
+});
 Layout.defaultProps = {
   children: null
 };

package/product/components/ProductName/ProductName.d.ts

@@ -13,6 +13,6 @@ export interface ProductNameProps {
 /**
  * The ProductName component.
  */
-declare const ProductName: ({ name, className, testId, ellipsis, portalName, portalProps, itemProp, rows, style, }: ProductNameProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductName: ({ name, className, testId, ellipsis, portalName, portalProps, itemProp, rows, style, }: ProductNameProps) => React.JSX.Element;
 export default ProductName;
 //# sourceMappingURL=ProductName.d.ts.map

package/product/components/ProductName/ProductName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductName.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAWD;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,wFAUlB,gBAAgB,4CAuBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProductName.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAWD;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,wFAUlB,gBAAgB,sBAuBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/product/components/ProductName/ProductNameContent.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface ProductNameContentProps {
     name?: string | null;
     ellipsis?: boolean;
@@ -7,6 +8,6 @@ export interface ProductNameContentProps {
  * The ProductNameContent component.
  * @returns The ProductNameContent component.
  */
-declare const ProductNameContent: ({ name, ellipsis, rows, }: ProductNameContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductNameContent: ({ name, ellipsis, rows, }: ProductNameContentProps) => React.JSX.Element;
 export default ProductNameContent;
 //# sourceMappingURL=ProductNameContent.d.ts.map

package/product/components/ProductName/ProductNameContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductNameContent.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductNameContent.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,kBAAkB,GAAI,2BAIzB,uBAAuB,4CAczB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ProductNameContent.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductNameContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,kBAAkB,GAAI,2BAIzB,uBAAuB,sBAczB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/product/components/ProductProperties/Content.js

@@ -9,7 +9,7 @@ import Rows from "./Rows";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   groupsContainer: {
-    borderBottom: `3px solid ${theme.palette.background.default}`,
+    borderBottom: `3px solid ${theme.palette.background.surface}`,
     marginBottom: theme.spacing(1.5)
   }
 }));

package/product/components/ProductProperties/Group.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   subgroup: {
     paddingTop: theme.spacing(1),
-    fontWeight: 600,
-    textTransform: 'uppercase',
-    fontSize: '0.75rem'
+    textTransform: 'uppercase'
   }
 }));
 
@@ -26,7 +25,10 @@ const Group = ({
     children: /*#__PURE__*/_jsx("td", {
       colSpan: "2",
       className: classes.subgroup,
-      children: /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "span",
+        fontWeight: "bold",
         dangerouslySetInnerHTML: {
           __html: group
         }

package/product/components/ProductProperties/GroupedProperties.js

@@ -9,7 +9,7 @@ import Wrapper from "./Wrapper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   accordion: {
-    borderTop: `3px solid ${theme.palette.background.default}`
+    borderTop: `3px solid ${theme.palette.background.surface}`
   }
 }));
 

package/product/components/ProductProperties/Wrapper.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.875rem',
     padding: theme.spacing(0, 2, 2),
     marginBottom: theme.spacing(1.5)
   },
@@ -29,7 +29,9 @@ const Wrapper = ({
     classes,
     cx
   } = useStyles();
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "div",
     className: cx('engage__product__product-property-group', {
       [classes.container]: !dense,
       [classes.containerDense]: dense

package/product/components/ProductRatingStars/ProductRatingStars.d.ts

@@ -9,6 +9,6 @@ interface RatingProps {
      */
     size?: 'big' | 'small' | 'large';
 }
-declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react").JSX.Element | null>;
 export default _default;
 //# sourceMappingURL=ProductRatingStars.d.ts.map

package/product/components/ProductRatingStars/ProductRatingStars.js

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { getProductRating } from '@shopgate/pwa-common-commerce/product/selectors/product';
 import { RatingStars } from '@shopgate/engage/components';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import useShowEmptyRatingStars from "../../hooks/useShowEmptyRatingStars";
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   hasReviews
@@ -20,9 +20,7 @@ const ProductRatingStars = ({
   getProductRating(state, {
     productId
   }));
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
+  const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (hasReviews && (rating?.average ?? 0) > 0) {
       return true;

package/product/components/ProductSlider/constants.d.ts

@@ -0,0 +1,3 @@
+export const WIDGET_ID: "@shopgate/engage/product/ProductSlider";
+export const DEFAULT_SLIDES_PER_VIEW: 2.3;
+//# sourceMappingURL=constants.d.ts.map

package/product/components/ProductSlider/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductSlider/constants.js"],"names":[],"mappings":"AAAA,wBAAyB,wCAAwC,CAAC;AAElE,sCAAuC,GAAG,CAAC"}

package/product/components/ProductSlider/constants.js

@@ -0,0 +1,2 @@
+export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
+export const DEFAULT_SLIDES_PER_VIEW = 2.3;

package/product/components/ProductSlider/hooks.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Resolves the number of slides the ProductSlider shows side by side for the active breakpoint.
+ * @param slidesPerViewProp The explicit prop value, if the caller passed one.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export declare const useSlidesPerView: (slidesPerViewProp?: number) => number;
+//# sourceMappingURL=hooks.d.ts.map

package/product/components/ProductSlider/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductSlider/hooks.ts"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,oBAAoB,MAAM,KAAG,MAgC7D,CAAC"}

package/product/components/ProductSlider/hooks.js

@@ -0,0 +1,40 @@
+import "core-js/modules/es.array.reduce.js";
+import { useContext, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { WidgetContext } from '@shopgate/engage/page/components/Widgets/WidgetContext';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useResponsiveValue } from '@shopgate/engage/styles';
+import { getAreAppSettingsHydrated, getProductSliderSlidesPerView } from '@shopgate/engage/settings/selectors/appSettings';
+import { SCREEN_SIZE_BREAKPOINTS } from '@shopgate/engage/settings/constants/appSettings';
+import { WIDGET_ID, DEFAULT_SLIDES_PER_VIEW } from "./constants";
+
+/**
+ * Resolves the number of slides the ProductSlider shows side by side for the active breakpoint.
+ * @param slidesPerViewProp The explicit prop value, if the caller passed one.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export const useSlidesPerView = slidesPerViewProp => {
+  const {
+    code: widgetCode
+  } = useContext(WidgetContext);
+  const isInsideWidget = Boolean(widgetCode);
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const appSettingsSlidesPerView = useSelector(getProductSliderSlidesPerView);
+  const {
+    slidesPerView: legacySlidesPerView
+  } = useWidgetSettings(WIDGET_ID) || {};
+  const sizes = useMemo(() => {
+    if (!areAppSettingsHydrated && !isInsideWidget && typeof legacySlidesPerView === 'number') {
+      return {
+        small: legacySlidesPerView
+      };
+    }
+    return appSettingsSlidesPerView;
+  }, [areAppSettingsHydrated, isInsideWidget, legacySlidesPerView, appSettingsSlidesPerView]);
+  const breakpoints = useMemo(() => Object.entries(sizes).reduce((acc, [size, value]) => {
+    acc[SCREEN_SIZE_BREAKPOINTS[size]] = value;
+    return acc;
+  }, {}), [sizes]);
+  const resolved = useResponsiveValue(breakpoints);
+  return slidesPerViewProp || resolved || DEFAULT_SLIDES_PER_VIEW;
+};

package/product/components/ProductSlider/index.js

@@ -1,21 +1,21 @@
 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 { makeStyles } from '@shopgate/engage/styles';
 import { ProductListTypeProvider, ProductListEntryProvider } from '@shopgate/engage/product/providers';
+import { useSlidesPerView } from "./hooks";
+import { WIDGET_ID } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
-    paddingBottom: 10
+    padding: '8px 0 16px !important'
   }
 });
 const items = {
   margin: '0 8px',
   height: '100%'
 };
-export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
 
 /**
  * @param {Object} props The component props.
@@ -36,12 +36,10 @@ function ProductSlider(props) {
     meta,
     productItemProps,
     item,
+    slidesPerView: slidesPerViewProp,
     ...swiperProps
   } = props;
-  const widgetSettings = useWidgetSettings(WIDGET_ID) || {};
-  const {
-    slidesPerView = 2.3
-  } = props.slidesPerView ? props : widgetSettings;
+  const slidesPerView = useSlidesPerView(slidesPerViewProp);
   // ProductSlider items are rendered with the ProductCard component provided by the theme.
   const {
     ProductCard
@@ -63,8 +61,10 @@ function ProductSlider(props) {
       freeMode: !snap,
       ...swiperProps,
       slidesPerView: slidesPerView,
+      classNames: {
+        container: classes.container
+      },
       children: productIds.map(id => /*#__PURE__*/_jsx(Swiper.Item, {
-        className: classes.container,
         children: /*#__PURE__*/_jsx(ProductListEntryProvider, {
           productId: id,
           children: /*#__PURE__*/_jsx(Item, {

package/product/components/Rating/index.js

@@ -4,7 +4,7 @@ import appConfig from '@shopgate/pwa-common/helpers/config';
 import { RatingStars, SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_RATING } from '@shopgate/engage/product/constants';
 import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/RatingCount';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useShowEmptyRatingStars } from '@shopgate/engage/product/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,9 +42,7 @@ const Rating = ({
   const {
     classes
   } = useStyles();
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
+  const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (hasReviews && (rating?.average ?? 0) > 0) {
       return true;

package/product/components/RelationsSlider/RelationsSheet.js

@@ -1,15 +1,11 @@
 import React, { useState, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { useWidgetSettings, useTheme } from "../../../core";
 import { SheetDrawer, I18n, Button } from "../../../components";
 import { WIDGET_ID } from "./constants";
 import connect from "./RelationsSheet.connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   showMore: {
     position: 'absolute !important',
@@ -18,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
     padding: `${theme.spacing(0.5, 0)} !important`
   },
   sheet: {
-    maxHeight: `calc(100vh - ${variables.navigator.height}px)`
+    maxHeight: `calc(100vh - ${theme.components.navigator.height})`
   }
 }));
 

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -1,11 +1,12 @@
 import React, { useEffect, memo } from 'react';
 import PropTypes from 'prop-types';
-import { Swiper, Card } from '@shopgate/engage/components';
+import { Swiper, Card, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import ProductCard from "../ProductCard";
 import RelationsSheet from "./RelationsSheet";
 import { useWidgetSettings, useCurrentProduct } from "../../../core";
 import connect from "./RelationsSlider.connector";
+import { useSlidesPerView } from "./hooks";
 import { WIDGET_ID } from "./constants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -13,8 +14,6 @@ const useStyles = makeStyles()(theme => ({
     position: 'relative'
   },
   headline: {
-    fontSize: '1rem',
-    fontWeight: 500,
     padding: theme.spacing(0, 2, 1),
     margin: 0
   },
@@ -53,12 +52,12 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
     hideRating,
     titleRows,
     showMoreButton,
-    type,
-    slidesPerView = 2.3
+    type
   } = useWidgetSettings(WIDGET_ID);
   const {
     productId
   } = useCurrentProduct();
+  const slidesPerView = useSlidesPerView();
   useEffect(() => {
     getRelations();
   }, [getRelations]);
@@ -67,7 +66,9 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
   }
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [!!headline && /*#__PURE__*/_jsx("h3", {
+    children: [!!headline && /*#__PURE__*/_jsx(Typography, {
+      variant: "h5",
+      component: "h3",
       className: classes.headline,
       children: headline
     }), !!showMoreButton && productsCount > 10 && /*#__PURE__*/_jsx(RelationsSheet, {

package/product/components/RelationsSlider/constants.d.ts

@@ -0,0 +1,3 @@
+export const WIDGET_ID: "@shopgate/engage/product/RelationsSlider";
+export const DEFAULT_SLIDES_PER_VIEW: 2.3;
+//# sourceMappingURL=constants.d.ts.map

package/product/components/RelationsSlider/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/RelationsSlider/constants.js"],"names":[],"mappings":"AAAA,wBAAyB,0CAA0C,CAAC;AAEpE,sCAAuC,GAAG,CAAC"}

package/product/components/RelationsSlider/constants.js

@@ -1 +1,2 @@
-export const WIDGET_ID = '@shopgate/engage/product/RelationsSlider';
+export const WIDGET_ID = '@shopgate/engage/product/RelationsSlider';
+export const DEFAULT_SLIDES_PER_VIEW = 2.3;

package/product/components/RelationsSlider/hooks.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves the number of slides the RelationsSlider shows side by side for the active breakpoint.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export declare const useSlidesPerView: () => number;
+//# sourceMappingURL=hooks.d.ts.map

package/product/components/RelationsSlider/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/RelationsSlider/hooks.ts"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,QAAO,MA6BnC,CAAC"}

package/product/components/RelationsSlider/hooks.js

@@ -0,0 +1,34 @@
+import "core-js/modules/es.array.reduce.js";
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useResponsiveValue } from '@shopgate/engage/styles';
+import { getAreAppSettingsHydrated, getProductSliderSlidesPerView } from '@shopgate/engage/settings/selectors/appSettings';
+import { SCREEN_SIZE_BREAKPOINTS } from '@shopgate/engage/settings/constants/appSettings';
+import { WIDGET_ID, DEFAULT_SLIDES_PER_VIEW } from "./constants";
+
+/**
+ * Resolves the number of slides the RelationsSlider shows side by side for the active breakpoint.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export const useSlidesPerView = () => {
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const appSettingsSlidesPerView = useSelector(getProductSliderSlidesPerView);
+  const {
+    slidesPerView: legacySlidesPerView
+  } = useWidgetSettings(WIDGET_ID) || {};
+  const sizes = useMemo(() => {
+    if (!areAppSettingsHydrated && typeof legacySlidesPerView === 'number') {
+      return {
+        small: legacySlidesPerView
+      };
+    }
+    return appSettingsSlidesPerView;
+  }, [areAppSettingsHydrated, legacySlidesPerView, appSettingsSlidesPerView]);
+  const breakpoints = useMemo(() => Object.entries(sizes).reduce((acc, [size, value]) => {
+    acc[SCREEN_SIZE_BREAKPOINTS[size]] = value;
+    return acc;
+  }, {}), [sizes]);
+  const resolved = useResponsiveValue(breakpoints);
+  return resolved || DEFAULT_SLIDES_PER_VIEW;
+};

package/product/components/Swatch/SwatchContent.js

@@ -3,13 +3,9 @@ import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_SWATCH } from '@shopgate/pwa-common-commerce/product/constants/Portals';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { SurroundPortals } from "../../../components";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   swatch: {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fill, minmax(12px, 1fr))',
@@ -26,11 +22,11 @@ const useStyles = makeStyles()(() => ({
     borderRadius: '50%',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: colors.shade4,
+    borderColor: theme.components.border.medium,
     backgroundSize: 'cover'
   },
   itemSelected: {
-    borderColor: 'var(--color-secondary)'
+    borderColor: theme.palette.secondary.main
   }
 }));
 

package/product/components/Swatches/Swatches.js

@@ -3,22 +3,18 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { PRODUCT_SWATCHES } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { SurroundPortals } from "../../../components";
 import { isBeta, useWidgetSettings } from "../../../core";
 import { Swatch } from "../Swatch";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
 const WIDGET_ID = '@shopgate/engage/product/Swatches';
-const {
-  typography
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   swatches: {
     marginTop: '8px',
-    lineHeight: typography.lineHeight
+    lineHeight: theme.typography.body1.lineHeight
   }
-});
+}));
 
 /**
  * Renders only product swatches from a list of characteristics.

package/product/components/UnitQuantityPicker/ProductUnitQuantityPicker.js

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { PRODUCT_UNIT_QUANTITY_PICKER, ProductContext } from '@shopgate/engage/product';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { withCurrentProduct } from '@shopgate/engage/core/hocs';
@@ -14,8 +14,6 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2)
   },
   title: {
-    fontSize: '1rem',
-    fontWeight: 500,
     marginBottom: '0.5rem'
   },
   pickerSmall: {
@@ -83,7 +81,9 @@ const ProductUnitQuantityPicker = ({
     children: /*#__PURE__*/_jsxs("div", {
       className: cx(classes.root, className),
       children: [/*#__PURE__*/_jsxs("div", {
-        children: [!hideHeadline && /*#__PURE__*/_jsx("div", {
+        children: [!hideHeadline && /*#__PURE__*/_jsx(Typography, {
+          variant: "h5",
+          component: "div",
           className: classes.title,
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: "product.sections.quantity"

package/product/components/UnitQuantityPicker/UnitQuantityPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA6GA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAmNvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA/TqB,YAAY"}
+{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA8FA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAqMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlSqB,YAAY"}