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

package/locations/components/ReserveForm/ReserveForm.js

@@ -1,7 +1,8 @@
 import 'react-phone-number-input/style.css';
 import React, { useState, useContext, useMemo, useRef, useLayoutEffect, useCallback } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { TextField, RippleButton, RadioGroup, RadioGroupItem, ProgressBar, Typography } from '@shopgate/engage/components';
+import { TextField, RadioGroup, RadioGroupItem, ProgressBar, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { useFormState } from "../../../core/hooks/useFormState";
 import { FulfillmentContext } from "../../locations.context";
@@ -35,9 +36,6 @@ const useStyles = makeStyles()(theme => ({
       paddingRight: 0
     }
   },
-  button: {
-    width: '100%'
-  },
   progressBar: {
     height: '4px',
     position: 'relative'
@@ -239,10 +237,11 @@ function ReserveFormUnwrapped() {
           className: classes.formField,
           errorText: i18n.text(validationErrors.email2)
         })]
-      }), /*#__PURE__*/_jsx(RippleButton, {
-        type: "secondary",
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "submit",
+        color: "primary",
+        fullWidth: true,
         disabled: changed || valid === false || isSubmitting,
-        className: classes.button,
         children: i18n.text('locations.place_reservation')
       })]
     })]

package/locations/components/StoreDetails/components/GetDirectionsButton.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { historyPush } from '@shopgate/pwa-common/actions/router';
 import PropTypes from 'prop-types';
-import { Button } from '@shopgate/engage/components';
+import { ButtonBase } from '@shopgate/engage/components/v2';
 import { generateGoogleMapsDirectionsUrl, i18n } from '@shopgate/engage/core';
 import { useDispatch } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
@@ -38,10 +38,8 @@ const GetDirectionsButton = ({
     }));
   };
   return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(Button, {
+    children: /*#__PURE__*/_jsx(ButtonBase, {
       onClick: handleClick,
-      role: "button",
-      type: "plain",
       children: /*#__PURE__*/_jsx("span", {
         className: classes.buttonText,
         children: i18n.text('location.getDirections')

package/locations/components/StoreDetails/components/StoreDetails.js

@@ -1,5 +1,6 @@
 import React, { useContext, useMemo } from 'react';
-import { LocationIcon, Button, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { LocationIcon, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Button, ButtonBase } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getWeekDaysOrder } from '@shopgate/engage/core';
 import { i18n } from '@shopgate/engage/core/helpers';
@@ -53,9 +54,6 @@ const useStyles = makeStyles()(theme => ({
   phoneNumber: {
     textDecoration: 'underline'
   },
-  makeMyStoreButton: {
-    color: theme.palette.primary.main
-  },
   comingSoon: {
     fontStyle: 'italic'
   },
@@ -97,10 +95,8 @@ const StoreDetails = () => {
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(ConditionalWrapper, {
       condition: !isRouteLocationPreferred,
-      wrapper: children => /*#__PURE__*/_jsx(Button, {
+      wrapper: children => /*#__PURE__*/_jsx(ButtonBase, {
         onClick: () => selectLocation(routeLocation, true),
-        role: "button",
-        type: "plain",
         children: children
       }),
       children: /*#__PURE__*/_jsxs("div", {
@@ -144,10 +140,9 @@ const StoreDetails = () => {
           children: [/*#__PURE__*/_jsx(GetDirectionsButton, {
             address: address
           }), !isComingSoon && !isRouteLocationPreferred && /*#__PURE__*/_jsx(Button, {
+            variant: "text",
+            color: "primary",
             onClick: () => selectLocation(routeLocation, true),
-            role: "button",
-            type: "plain",
-            className: classes.makeMyStoreButton,
             children: /*#__PURE__*/_jsx("span", {
               children: i18n.text('location.makeMyStore')
             })

package/locations/components/StoreDetails/components/StoresNearbyListItem.js

@@ -2,7 +2,8 @@ import React, { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Button, Typography } from '@shopgate/engage/components';
+import { Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { historyPush } from '@shopgate/engage/core';
 import formatDistance from "../../../helpers/formatDistance";
@@ -10,9 +11,6 @@ import { STORE_DETAILS_PATH } from "../../../constants";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  button: {
-    padding: '0px !important'
-  },
   locationRow: {
     borderBottom: `1px solid ${theme.components.border.light}`,
     borderTop: `1px solid ${theme.components.border.light}`,
@@ -43,7 +41,7 @@ const useStyles = makeStyles()(theme => ({
     textAlign: 'start'
   },
   cellContainer: {
-    padding: '8px',
+    padding: 6,
     textAlign: 'end'
   },
   cell: {
@@ -51,7 +49,7 @@ const useStyles = makeStyles()(theme => ({
   },
   buttonContainer: {
     display: 'flex',
-    gap: '4px 16px',
+    gap: '0 16px',
     flexWrap: 'wrap',
     justifyContent: 'flex-end'
   }
@@ -121,13 +119,11 @@ const StoresNearbyListItem = ({
           children: [/*#__PURE__*/_jsxs("div", {
             className: classes.makeMyStore,
             children: [!isComingSoon && /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               onClick: () => selectLocation(location, true),
-              role: "button",
-              type: "primary",
-              flat: true,
               disabled: isPreferredLocation,
-              wrapContent: false,
               children: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",
@@ -135,12 +131,10 @@ const StoresNearbyListItem = ({
                 children: `${i18n.text('location.makeMyStore')}`
               })
             }), isComingSoon && /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
-              role: "button",
-              type: "primary",
-              flat: true,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               disabled: true,
-              wrapContent: false,
               children: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",
@@ -151,12 +145,10 @@ const StoresNearbyListItem = ({
           }), /*#__PURE__*/_jsx("div", {
             className: classes.storeInfo,
             children: /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
-              role: "button",
-              type: "primary",
-              flat: true,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               onClick: () => openStoreDetails(code),
-              wrapContent: false,
               children: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",

package/locations/components/StoreFinder/StoreFinderSelectLocationButton.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from 'react';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
 import { i18n } from "../../../core/helpers";
@@ -8,14 +8,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   selectLocationButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
-  },
-  selectLocationButton: {
-    width: '100%',
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: `${theme.palette.primary.main} !important`,
-      color: `${theme.palette.primary.contrastText} !important`
-    }
   }
 }));
 
@@ -41,9 +33,11 @@ export const StoreFinderSelectLocationButton = () => {
   const isSelected = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.selectLocationButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.selectLocationButton,
       disabled: isLoading || store?.isComingSoon || isSelected,
       children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
     })

package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { historyPush } from '@shopgate/engage/core';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
@@ -10,14 +10,6 @@ import { StoreFinderContext } from "../../locations.context";
 import { STORE_DETAILS_PATH } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  showStoreInfoButton: {
-    width: '100%',
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: `${theme.palette.primary.main} !important`,
-      color: `${theme.palette.primary.contrastText} !important`
-    }
-  },
   showStoreInfoButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
   }
@@ -54,9 +46,11 @@ const StoreFinderStoreInfoButton = ({
   }, [openStoreDetail, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.showStoreInfoButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.showStoreInfoButton,
       disabled: isLoading,
       children: i18n.text('locations.store_info')
     })

package/locations/components/StoreList/StoreSelectLocationButton.js

@@ -1,5 +1,5 @@
 import React, { useContext, useCallback } from 'react';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { isProductAvailable } from "../../helpers";
@@ -11,14 +11,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   selectLocationButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
-  },
-  selectLocationButton: {
-    width: '100%',
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText
-    }
   }
 }));
 
@@ -54,9 +46,11 @@ const StoreSelectLocationButton = ({
   }, [isAvailable, noInventory, product, selectLocation, setPostalCode, setUserSearchZipLocationFromSelection, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.selectLocationButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.selectLocationButton,
       disabled: isLoading || store?.isComingSoon || !noInventory && !isAvailable,
       children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
     })

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.8",
   "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.8",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.8",
+    "@shopgate/pwa-core": "7.32.0-beta.8",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.8",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.8",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.8",
     "@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"