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

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,12 +16,8 @@ const useStyles = makeStyles()(theme => ({
     color: theme.palette.text.primary
   },
   button: {
-    fontSize: `${theme.typography.caption.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
+    textTransform: 'none',
+    marginLeft: theme.spacing(1)
   }
 }));
 
@@ -49,12 +46,14 @@ const GlobalLocationSwitcherDefault = ({
         fontWeight: "medium",
         className: classes.name,
         children: locationName
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "link",
+        color: "primary",
+        size: "small",
+        dense: true,
         onClick: handleChange,
-        type: "secondary",
         className: classes.button,
         disabled: !editable,
-        flat: true,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "locations.your_current_location.change"
         })

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/orders/components/OrderHistory/OrderHistoryList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryList.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryList.jsx"],"names":[],"mappings":"AA6CO,2BAHI,MAAM,GACJ,GAAG,CAkDf;;;;;;;;;;;;AAiBM,mCAHI,MAAM,GACJ,GAAG,CAUf;;;;;;;sBArHqB,YAAY"}
+{"version":3,"file":"OrderHistoryList.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryList.jsx"],"names":[],"mappings":"AA4CO,2BAHI,MAAM,GACJ,GAAG,CAuDf;;;;;;;;;;;;AAiBM,mCAHI,MAAM,GACJ,GAAG,CAUf;;;;;;;sBAzHqB,YAAY"}

package/orders/components/OrderHistory/OrderHistoryList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n, CardList, Link } from '@shopgate/engage/components';
+import { I18n, Card, Link } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
@@ -31,10 +31,7 @@ const useStyles = makeStyles()(theme => ({
     ':last-of-type': {
       marginBottom: 0
     },
-    background: theme.palette.background.surface,
-    boxSizing: 'border-box',
-    boxShadow: '0 4px 8px rgba(0,0,0,0.16)',
-    borderRadius: 10
+    boxSizing: 'border-box'
   }
 }));
 
@@ -47,9 +44,10 @@ export const Row = props => {
   const {
     classes
   } = useStyles();
-  return /*#__PURE__*/_jsx(CardList.Item, {
+  return /*#__PURE__*/_jsx(Card, {
     className: classes.card,
     onClick: props.openDetails,
+    component: "li",
     children: /*#__PURE__*/_jsxs(Link, {
       className: classes.cardContent,
       href: getOrderDetailsRoute(props.orderNumber),
@@ -99,10 +97,11 @@ export const List = ({
   children
 }) => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
-  return /*#__PURE__*/_jsx(CardList, {
-    className: classes.list,
+  return /*#__PURE__*/_jsx("ul", {
+    className: cx(classes.list, 'engage__orders__order-history-list'),
     children: children
   });
 };

package/orders/components/OrderHistory/OrderHistoryTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryTable.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryTable.jsx"],"names":[],"mappings":"AAmCO,gCAHI,MAAM,GACJ,GAAG,CAkCf;;;;;;;;;;;;AAiBM,oCAHI,MAAM,GACJ,GAAG,CAuBf;;;;;;;sBAxGqB,YAAY"}
+{"version":3,"file":"OrderHistoryTable.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryTable.jsx"],"names":[],"mappings":"AAsCO,gCAHI,MAAM,GACJ,GAAG,CAkCf;;;;;;;;;;;;AAiBM,oCAHI,MAAM,GACJ,GAAG,CAuBf;;;;;;;sBA3GqB,YAAY"}

package/orders/components/OrderHistory/OrderHistoryTable.js

@@ -6,6 +6,9 @@ import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
+  card: {
+    margin: '5px 5px 10px'
+  },
   tableHeader: {
     '& > th': {
       padding: theme.spacing(2),
@@ -79,6 +82,7 @@ export const Table = ({
     classes
   } = useStyles();
   return /*#__PURE__*/_jsx(Card, {
+    className: classes.card,
     children: /*#__PURE__*/_jsxs("table", {
       children: [/*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsxs("tr", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.6",
+  "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.6",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.6",
-    "@shopgate/pwa-core": "7.32.0-beta.6",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.6",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.6",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.6",
+    "@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.