@shopgate/engage 7.32.0-beta.7 → 7.32.0-beta.9

package/login/components/ForgotPassword/ForgotPassword.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { RippleButton, I18n, ArrowIcon, Typography } from '@shopgate/engage/components';
+import { I18n, ArrowIcon, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import TextField from '@shopgate/pwa-ui-shared/TextField';
 import { i18n, EUSERNOTFOUND } from '@shopgate/engage/core';
@@ -41,9 +42,6 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: theme.spacing(4),
     paddingBottom: theme.spacing(3)
   },
-  button: {
-    width: '100%'
-  },
   input: {
     ' .label': {
       color: theme.palette.text.secondary
@@ -67,21 +65,11 @@ const useStyles = makeStyles()(theme => ({
   goBackButtonContainer: {
     padding: theme.spacing(2, 0)
   },
-  goBackButton: {
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    padding: '0 !important',
-    ' > div ': {
-      padding: 0,
-      display: 'flex'
-    }
-  },
   goBackButtonIcon: {
     display: 'inline-block',
-    fontSize: `${theme.components.icon.medium} !important`,
+    fontSize: theme.components.icon.medium,
     alignSelf: 'center',
-    marginRight: theme.spacing(0.5),
-    marginLeft: -3,
-    marginTop: -2
+    marginRight: theme.spacing(0.5)
   }
 }));
 
@@ -156,9 +144,10 @@ const ForgotPassword = ({
           errorText: validationError
         }), /*#__PURE__*/_jsx("div", {
           className: classes.buttonContainer,
-          children: /*#__PURE__*/_jsx(RippleButton, {
-            className: classes.button,
-            type: "secondary",
+          children: /*#__PURE__*/_jsx(Button, {
+            type: "submit",
+            color: "primary",
+            fullWidth: true,
             disabled: loading,
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: "common.submit"
@@ -180,10 +169,9 @@ const ForgotPassword = ({
         })
       }), /*#__PURE__*/_jsx("div", {
         className: classes.goBackButtonContainer,
-        children: /*#__PURE__*/_jsxs(RippleButton, {
-          flat: true,
-          className: classes.goBackButton,
-          type: "secondary",
+        children: /*#__PURE__*/_jsxs(Button, {
+          variant: "text",
+          color: "primary",
           onClick: handleBackToLogin,
           children: [/*#__PURE__*/_jsx(ArrowIcon, {
             className: classes.goBackButtonIcon

package/orders/components/OrderDetails/OrderDetailsAuthenticate.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { FormBuilder, I18n, Link, RippleButton, MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
+import { FormBuilder, I18n, Link, MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { LOGIN_PATH, useRoute, i18n } from '@shopgate/engage/core';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import generateFormConfig from "./OrderDetailsAuthenticateForm.config";
@@ -21,9 +22,6 @@ const useStyles = makeStyles()(theme => ({
   form: {
     ...StylePresets.getOutlinedFormFields(theme)
   },
-  submitButton: {
-    width: '100%'
-  },
   loginLink: {
     color: theme.palette.primary.main,
     ':hover': {
@@ -129,11 +127,11 @@ const OrderDetailsAuthenticate = () => {
           handleUpdate: handleUpdate,
           onSubmit: handleSubmit
         }), /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(RippleButton, {
-            type: "secondary",
+          children: /*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            fullWidth: true,
             onClick: handleSubmit,
             disabled: isLoading,
-            className: classes.submitButton,
             children: i18n.text('common.submit')
           })
         })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.7",
+  "version": "7.32.0-beta.9",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.34",
-    "@shopgate/pwa-common": "7.32.0-beta.7",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.7",
-    "@shopgate/pwa-core": "7.32.0-beta.7",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.7",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.7",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.7",
+    "@shopgate/pwa-common": "7.32.0-beta.9",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.9",
+    "@shopgate/pwa-core": "7.32.0-beta.9",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.9",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.9",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.9",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/NotFound.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../page/components/NotFound.tsx"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,QAAA,MAAM,QAAQ,mCA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../page/components/NotFound.tsx"],"names":[],"mappings":"AA8BA;;;GAGG;AACH,QAAA,MAAM,QAAQ,mCA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/page/components/NotFound.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
 import { i18n, INDEX_PATH } from "../../core";
@@ -16,7 +16,6 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: theme.spacing(8)
   },
   button: {
-    width: '100%',
     maxWidth: 250
   },
   buttonContainer: {
@@ -55,17 +54,19 @@ const NotFound = () => {
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.buttonContainer,
-      children: [/*#__PURE__*/_jsx(RippleButton, {
+      children: [/*#__PURE__*/_jsx(Button, {
         onClick: handleBack,
+        color: "primary",
+        fullWidth: true,
         className: classes.button,
-        type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.back"
         })
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
         onClick: handleHome,
+        color: "primary",
+        fullWidth: true,
         className: classes.button,
-        type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "navigation.back",
           params: {

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts

@@ -8,7 +8,7 @@ export type CustomResponsiveImageProps = {
     /**
      * The border radius to apply to the image.
      */
-    borderRadius?: number | undefined;
+    borderRadius?: string | number | undefined;
     /**
      * The breakpoint from which on a higher resolution image should
      * be loaded.

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -13,7 +13,7 @@ import { parseImageUrl } from "../../helpers";
 /**
  * @typedef {Object} CustomResponsiveImageProps
  * @property {boolean} [enableParallax] Whether to enable the parallax effect.
- * @property {number} [borderRadius] The border radius to apply to the image.
+ * @property {number|string} [borderRadius] The border radius to apply to the image.
  * @property {Breakpoint} [breakpoint] The breakpoint from which on a higher resolution image should
  * be loaded.
  * @property {boolean} [isBanner] Whether the image is used as a banner (full width and height of
@@ -129,7 +129,7 @@ const ResponsiveWidgetImage = ({
       [classes.container]: !isBanner
     }),
     style: {
-      borderRadius: `${borderRadius}px`,
+      borderRadius,
       ...(!isBanner && enableParallax ? {
         aspectRatio: containerRatio
       } : {})

package/page/components/WidgetVideo/WidgetVideo.d.ts

@@ -29,7 +29,7 @@ export interface WidgetVideoProps {
     /**
      * The border radius value.
      */
-    borderRadius?: number;
+    borderRadius?: number | string;
     /**
      * The link URL.
      */

package/page/components/WidgetVideo/WidgetVideo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetVideo.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/WidgetVideo.tsx"],"names":[],"mappings":"AAsDA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,yEASlB,gBAAgB,uCAsFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"WidgetVideo.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/WidgetVideo.tsx"],"names":[],"mappings":"AAsDA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,yEASlB,gBAAgB,uCAsFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/page/helpers/index.d.ts

@@ -67,12 +67,15 @@ interface BorderRadiusParams {
 }
 /**
  * Retrieves the border radius based on the widget config.
+ *
+ * `default` follows the app wide corner style, so it is returned as a reference to the theme's
+ * shape variable rather than a resolved length.
  * @param params The helper parameters.
  * @param params.borderRadius The border radius option.
  * @param params.borderRadiusCustom The custom border radius value.
- * @returns The resolved border radius.
+ * @returns The resolved border radius as a CSS length.
  */
-export declare const resolveBorderRadiusFromWidgetConfig: ({ borderRadius, borderRadiusCustom }: BorderRadiusParams) => number;
+export declare const resolveBorderRadiusFromWidgetConfig: ({ borderRadius, borderRadiusCustom }: BorderRadiusParams) => string;
 /**
  * Validator factory for regular expressions.
  * @param regex The regular expression to match.

package/page/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/helpers/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,mBAAmB,EAAE,MAAM,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,wDAAwD;IACvE;;OAEG;IACH,kBAAkB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IACvE;;;OAGG;IACH,mBAAmB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACxC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,6CAA6C,GACxD,WAAU,OAAO,CAAC,yBAAyB,CAAM,KAChD,wDAyBF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,aAAa,OAAO,KAAG,MAQjE,CAAC;AAEF;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mCAAmC,GAC9C,sCAAsC,kBAAkB,KACvD,MAKF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,MAAM,KAAK,MAAM,KAAG,OAAkC,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,UAAU,QAP8B,MAAM,KAAG,OAOgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/helpers/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,mBAAmB,EAAE,MAAM,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,wDAAwD;IACvE;;OAEG;IACH,kBAAkB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IACvE;;;OAGG;IACH,mBAAmB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACxC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,6CAA6C,GACxD,WAAU,OAAO,CAAC,yBAAyB,CAAM,KAChD,wDAyBF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,aAAa,OAAO,KAAG,MAQjE,CAAC;AAEF;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,mCAAmC,GAC9C,sCAAsC,kBAAkB,KACvD,MAKF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,MAAM,KAAK,MAAM,KAAG,OAAkC,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,UAAU,QAP8B,MAAM,KAAG,OAOgB,CAAC"}

package/page/helpers/index.js

@@ -51,19 +51,22 @@ export const parseImageUrl = (url, useHighRes) => {
 
 /**
  * Retrieves the border radius based on the widget config.
+ *
+ * `default` follows the app wide corner style, so it is returned as a reference to the theme's
+ * shape variable rather than a resolved length.
  * @param params The helper parameters.
  * @param params.borderRadius The border radius option.
  * @param params.borderRadiusCustom The custom border radius value.
- * @returns The resolved border radius.
+ * @returns The resolved border radius as a CSS length.
  */
 export const resolveBorderRadiusFromWidgetConfig = ({
   borderRadius,
   borderRadiusCustom
 }) => {
-  if (borderRadius === 'none') return 0;
-  if (borderRadius === 'rounded') return 16;
-  if (borderRadius === 'custom' && typeof borderRadiusCustom === 'number') return borderRadiusCustom;
-  return 0;
+  if (borderRadius === 'none') return '0';
+  if (borderRadius === 'rounded') return '16px';
+  if (borderRadius === 'custom' && typeof borderRadiusCustom === 'number') return `${borderRadiusCustom}px`;
+  return 'var(--sg-shape-borderRadius)';
 };
 
 /**

package/page/widgets/Button/Button.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Button } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useWidget } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useNavigation } from '@shopgate/engage/core';
@@ -46,9 +46,8 @@ const ButtonWidget = () => {
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
     children: /*#__PURE__*/_jsx(Button, {
-      type: "secondary",
+      color: "primary",
       onClick: handleClick,
-      wrapContent: false,
       children: /*#__PURE__*/_jsx("span", {
         className: classes.text,
         children: text

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { I18n, ButtonLink } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
 import { bin2hex } from '@shopgate/engage/core/helpers';
 import { CATEGORY_PATH } from '@shopgate/engage/category';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Button } from '@shopgate/engage/components/v2';
 import { useRoute, usePrevious, useLocalStorage } from '@shopgate/engage/core/hooks';
 import { router } from '@virtuous/conductor';
 import CategoryPicker from "./components/Picker";
@@ -16,10 +17,8 @@ const useStyles = makeStyles()(theme => ({
     paddingBottom: theme.spacing(2)
   },
   buttonContainer: {
-    padding: theme.spacing(0, 2)
-  },
-  button: {
-    width: '100%'
+    padding: theme.spacing(0, 2),
+    margin: theme.spacing(1, 0)
   }
 }));
 
@@ -142,11 +141,12 @@ const NestedCategoryFilter = () => {
       className: "widget__nested-category-filter__headline"
     }) : null, categoryPickers, /*#__PURE__*/_jsx("div", {
       className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container'),
-      children: /*#__PURE__*/_jsx(ButtonLink, {
-        className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
+      children: /*#__PURE__*/_jsx(Button, {
         href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
+        color: "primary",
+        fullWidth: true,
+        className: "widget__nested-category-filter__CTA-button",
         disabled: !state.buttonCategoryId,
-        flat: false,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.show_products",
           className: "widget__nested-category-filter__CTA-button__text"

package/page/widgets/ProductList/ProductList.js

@@ -1,23 +1,27 @@
 import "core-js/modules/es.regexp.flags.js";
 import React, { useCallback } from 'react';
-import { ActionButton, I18n } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { ProductGrid } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProductListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    // Prevent that the ActionButton margin messes with the layout of the sibling widgets
     overflow: 'hidden'
   },
+  loadMore: {
+    textAlign: 'center',
+    margin: theme.spacing(1, 0)
+  },
   grid: {
     '&&': {
       marginTop: 0
     }
   }
-});
+}));
 
 /**
  * The ProductListWidget is used to display product lists.
@@ -66,16 +70,16 @@ const ProductListWidget = () => {
       scope: "widgets",
       infiniteLoad: false,
       className: classes.grid
-    }), hasNext && showLoadMore && /*#__PURE__*/_jsx(ActionButton, {
-      loading: isFetching,
-      onClick: handleFetchNext
-      // Disable click delay in preview mode to enable stopping of propagation.
-      ,
-      ...(isPreview && {
-        disableClickDelay: true
-      }),
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "common.load_more"
+    }), hasNext && showLoadMore && /*#__PURE__*/_jsx("div", {
+      className: classes.loadMore,
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "secondary",
+        loading: isFetching,
+        onClick: handleFetchNext,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.load_more"
+        })
       })
     })]
   });

package/page/widgets/Video/hooks.d.ts

@@ -41,9 +41,9 @@ export interface VideoWidgetConfig {
  */
 export interface UseVideoWidgetResult extends Pick<VideoWidgetConfig, 'url' | 'muted' | 'loop' | 'controls' | 'autoplay' | 'link'> {
     /**
-     * The resolved border radius value in pixels.
+     * The resolved border radius as a CSS length.
      */
-    borderRadius: number;
+    borderRadius: string;
 }
 /**
  * Hook to access the Video widget configuration and data.

package/product/components/ProductCard/index.js

@@ -19,7 +19,13 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.components.productCard.imagePadding
   },
   details: {
-    padding: theme.components.productCard.textPadding
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    padding: theme.components.productCard.textPadding,
+    '& div:empty': {
+      display: 'none'
+    }
   },
   title: {
     fontSize: theme.typography.body2.fontSize,

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

@@ -11,6 +11,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const useStyles = makeStyles()(theme => ({
   root: {
     lineHeight: 1.2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
     ':not(:empty)': {
       padding: theme.components.tiles.textPadding,
       // Floored at the favorites button overhang so a small configured inner padding
@@ -19,7 +22,9 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   quantityHint: {
-    paddingTop: 8
+    ':empty': {
+      display: 'none'
+    }
   }
 }));
 

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

@@ -3,27 +3,18 @@ import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
 import { ProductImage } from '@shopgate/engage/product';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  image: {
-    background: theme.palette.background.surface
-  }
-}));
 
 /**
  * The item image component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ItemImage = ({
   productId,
   name,
   imageUrl
 }) => {
-  const {
-    classes
-  } = useStyles();
   const portalProps = useMemo(() => ({
     productId
   }), [productId]);
@@ -31,7 +22,6 @@ const ItemImage = ({
     portalName: PRODUCT_ITEM_IMAGE,
     portalProps: portalProps,
     children: /*#__PURE__*/_jsx(ProductImage, {
-      className: classes.image,
       alt: name,
       src: imageUrl,
       context: "list",

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

@@ -18,9 +18,10 @@ const useStyles = makeStyles()((theme, {
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
-    overflow: 'hidden',
     padding: theme.components.tiles.padding,
-    background: theme.components.tiles.backgroundColor
+    background: theme.components.tiles.backgroundColor,
+    border: theme.components.tiles.border,
+    borderRadius: theme.components.tiles.borderRadius
   },
   image: {
     display: 'block',

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

@@ -9,7 +9,8 @@ const useStyles = makeStyles()((theme, {
   root: {
     padding: '0 16px',
     ':not(:empty)': {
-      marginTop: 16
+      marginTop: 16,
+      marginBottom: 16
     },
     ...(columns <= 2 ? {
       rowGap: 16,

package/product/components/ProductGridPrice/index.js

@@ -7,7 +7,6 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   priceWrapper: {
-    marginTop: 4,
     alignItems: 'center'
   },
   strikedPrice: {

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

@@ -1 +1 @@
-{"version":3,"file":"ProductImage.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/ProductImage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAMxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,6CAA6C,CAAC;AA0BrD;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,aAAa,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;AAmCD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA0E7C,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;oEAOX,iBAAiB;AAOvD,wBAA2C"}
+{"version":3,"file":"ProductImage.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/ProductImage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAMxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,6CAA6C,CAAC;AA0BrD;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,aAAa,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;AAuCD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA4E7C,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;oEAOX,iBAAiB;AAOvD,wBAA2C"}

package/product/components/ProductImage/ProductImage.js

@@ -28,6 +28,10 @@ const DEFAULT_PRODUCT_IMAGE_CONTEXT = 'list';
  */
 
 const useStyles = makeStyles()(theme => ({
+  rounded: {
+    borderRadius: theme.components.productImage.borderRadius,
+    overflow: 'hidden'
+  },
   placeholderContent: {
     position: 'absolute',
     width: '100%',
@@ -100,6 +104,7 @@ const ProductImage = props => {
   } = useStyles();
   const theme = useTheme();
   const showInnerShadow = useProductImageShadow();
+  const isRounded = (context || DEFAULT_PRODUCT_IMAGE_CONTEXT) === 'list';
 
   // Image decides when to show this.
   const placeholder = placeholderSrc ? /*#__PURE__*/_jsx(ProductImagePlaceholder, {
@@ -122,14 +127,14 @@ const ProductImage = props => {
       ratio: resolved.ratio
     } : undefined,
     children: /*#__PURE__*/_jsx("div", {
-      className: cx(className, 'engage__product__product-image'),
+      className: cx(isRounded && classes.rounded, className, 'engage__product__product-image'),
       children: /*#__PURE__*/_jsx(Image, {
         ...props,
         resolutions: resolved.resolutions,
         ratio: resolved.ratio,
         placeholder: placeholder,
         className: showInnerShadow ? classes.innerShadow : '',
-        backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
         "aria-hidden": !alt
       })
     })

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -65,14 +65,14 @@ const ProductImagePlaceholder = props => {
         backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
-        backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
         position: 'absolute'
       };
     }
     return {
-      backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface
+      backgroundColor: noBackground ? 'transparent' : theme.palette.common.white
     };
-  }, [srcLoaded, noBackground, theme.palette.background.surface, src]);
+  }, [srcLoaded, noBackground, theme.palette.common.white, src]);
   const contentClasses = cx(classes.placeholderContent, {
     [classes.innerShadow]: showInnerShadow
   });

package/product/components/ProductSlider/index.js

@@ -9,7 +9,7 @@ import { WIDGET_ID } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
-    padding: '8px 9px 16px !important'
+    padding: '8px 0 16px !important'
   }
 });
 const items = {

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":";AA0GA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAmNvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA5TqB,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"}