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

package/components/v2/ButtonGroup/ButtonGroup.js

@@ -9,13 +9,15 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     variant = 'contained',
     size = 'medium',
+    dense = false,
     orientation = 'horizontal',
-    disableElevation = false,
+    enableElevation = false,
     fullWidth = false,
     disableRipple = false,
     disabled = false,
     color = 'inherit',
     className,
+    classes: classesProp,
     children,
     ...other
   } = props;
@@ -27,7 +29,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
     variant
   }, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
   const buttonClassName = cx(classes.grouped, classes[`grouped${capitalize(orientation)}`], classes[`grouped${capitalize(variant)}`], classes[`grouped${capitalize(variant)}${capitalize(orientation)}`], {
@@ -36,11 +38,18 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx("div", {
     role: "group",
     className: cx(classes.root, {
-      [classes.contained]: variant === 'contained',
       [classes.vertical]: orientation === 'vertical',
       [classes.fullWidth]: fullWidth,
-      [classes.disableElevation]: disableElevation
-    }, className),
+      [classes.enableElevation]: enableElevation && variant === 'contained'
+    }, 'engage__button-group', className),
+    "data-variant": variant,
+    "data-color": color,
+    "data-size": size,
+    "data-orientation": orientation,
+    "data-dense": dense || undefined,
+    "data-full-width": fullWidth || undefined,
+    "data-enable-elevation": enableElevation || undefined,
+    "data-disabled": disabled || undefined,
     ref: ref,
     ...other,
     children: React.Children.map(children, child => {
@@ -51,15 +60,22 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
         className: cx(buttonClassName, child.props.className),
         color: child.props.color || color,
         disabled: child.props.disabled || disabled,
-        disableElevation: child.props.disableElevation || disableElevation,
+        enableElevation: child.props.enableElevation || enableElevation,
         disableRipple,
         fullWidth,
         size: child.props.size || size,
+        dense: child.props.dense || dense,
         variant: child.props.variant || variant
       });
     })
   });
 });
+
+/**
+ * Opacity the separator between grouped text buttons defaults to. Published as a custom property
+ * below, so the value is not baked into the border declarations.
+ */
+const SEPARATOR_OPACITY = '0.5';
 const useStyles = makeStyles({
   name: 'ButtonGroup'
 })((theme, props) => {
@@ -68,27 +84,35 @@ const useStyles = makeStyles({
     variant
   } = props;
   let cssColor = '';
-  if (color !== 'inherit') {
+  let darkCssColor = '';
+  if (color === 'cta') {
+    cssColor = theme.components.ctaButton.background;
+  } else if (color !== 'inherit') {
     cssColor = color && theme.palette?.[color]?.main ? theme.palette[color].main : theme.palette.primary.main;
   } else if (variant === 'contained') {
     // eslint-disable-next-line prefer-destructuring
     cssColor = theme.palette.grey[200];
+    darkCssColor = theme.palette.background.emphasized;
   } else {
     cssColor = 'currentColor';
   }
   return {
     root: {
       '--button-group-color': `var(${theme.vars.components.button.color}, ${cssColor})`,
+      '--button-group-divider': theme.darken('var(--button-group-color)'),
+      ...(darkCssColor ? theme.applyStyles('dark', {
+        '--button-group-color': `var(${theme.vars.components.button.color}, ${darkCssColor})`,
+        '--button-group-divider': theme.lighten('var(--button-group-color)')
+      }) : {}),
       '--disabledColor': theme.palette.action.disabled,
+      '--button-group-separator-opacity': SEPARATOR_OPACITY,
+      '--button-group-separator': theme.alpha('var(--button-group-color)', 'var(--button-group-separator-opacity)'),
       display: 'inline-flex',
-      borderRadius: `var(${theme.vars.components.button.borderRadius}, ${theme.shape.borderRadius})`
-    },
-    contained: {
-      boxShadow: theme.shadows[2]
+      borderRadius: theme.components.button.borderRadius
     },
     disabled: {},
-    disableElevation: {
-      boxShadow: 'none'
+    enableElevation: {
+      boxShadow: theme.shadows[2]
     },
     fullWidth: {
       width: '100%'
@@ -127,8 +151,8 @@ const useStyles = makeStyles({
       '&:not(:last-of-type)': {
         borderRightWidth: 1,
         borderRightStyle: 'solid',
-        borderRightColor: theme.darken('var(--button-group-color)'),
-        '&:disabled': {
+        borderRightColor: 'var(--button-group-divider)',
+        '&:disabled, &[aria-disabled="true"]': {
           borderRightColor: 'var(--disabledColor)'
         }
       }
@@ -137,18 +161,14 @@ const useStyles = makeStyles({
       '&:not(:last-of-type)': {
         borderBottomWidth: 1,
         borderBottomStyle: 'solid',
-        borderBottomColor: theme.darken('var(--button-group-color)'),
-        '&:disabled': {
+        borderBottomColor: 'var(--button-group-divider)',
+        '&:disabled, &[aria-disabled="true"]': {
           borderBottomColor: 'var(--disabledColor)'
         }
       }
     },
     groupedOutlined: {
-      borderColor: `${theme.lighten('var(--button-group-color)', 0.5)} !important`,
-      '&:hover': {
-        borderColor: 'var(--button-group-color)'
-      },
-      '&:disabled': {
+      '&:disabled, &[aria-disabled="true"]': {
         borderColor: 'var(--disabledColor) !important'
       }
     },
@@ -168,13 +188,15 @@ const useStyles = makeStyles({
         borderBottomColor: 'transparent !important'
       }
     },
+    // Text buttons need no shared styles, but the key has to exist because the class is looked up
+    // dynamically as `grouped${capitalize(variant)}`.
     groupedText: {},
     groupedTextHorizontal: {
       '&&:not(:last-of-type)': {
         borderRightWidth: 1,
         borderRightStyle: 'solid',
-        borderRightColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
-        '&:disabled': {
+        borderRightColor: 'var(--button-group-separator)',
+        '&:disabled, &[aria-disabled="true"]': {
           borderRightColor: 'var(--disabledColor)'
         }
       }
@@ -183,8 +205,8 @@ const useStyles = makeStyles({
       '&&:not(:last-of-type)': {
         borderBottomWidth: 1,
         borderBottomStyle: 'solid',
-        borderBottomColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
-        '&:disabled': {
+        borderBottomColor: 'var(--button-group-separator)',
+        '&:disabled, &[aria-disabled="true"]': {
           borderBottomColor: 'var(--disabledColor)'
         }
       }
@@ -192,4 +214,5 @@ const useStyles = makeStyles({
     /* eslint-enable tss-unused-classes/unused-classes */
   };
 });
+ButtonGroup.displayName = 'ButtonGroup';
 export default ButtonGroup;

package/components/v2/CircularProgress/CircularProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../../components/v2/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE;;;GAGG;AACH,QAAA,MAAM,gBAAgB,8FA6DpB,CAAC;AA0BH,QAAA,MAAM,SAAS;;cA4BX,CAAA;;;;;;CAeF,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../../components/v2/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE;;;GAGG;AACH,QAAA,MAAM,gBAAgB,8FAiEpB,CAAC;AA0BH,QAAA,MAAM,SAAS;;cAuBN,CAAC;;;;;;CAoBR,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAID,eAAe,gBAAgB,CAAC"}

package/components/v2/CircularProgress/CircularProgress.js

@@ -17,6 +17,7 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     thickness = 3.6,
     style,
     className,
+    classes: classesProp,
     ...other
   } = props;
   const {
@@ -26,7 +27,7 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     color
   }, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
   const circleStyle = {};
@@ -40,10 +41,10 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     rootStyle.transform = 'rotate(-90deg)';
   }
   return /*#__PURE__*/_jsx("div", {
-    className: cx(classes.root, className, {
+    className: cx(classes.root, {
       [classes.indeterminate]: variant === 'indeterminate',
       [classes.determinate]: variant === 'determinate'
-    }),
+    }, 'engage__circular-progress', className),
     style: {
       width: size,
       height: size,
@@ -52,6 +53,9 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     },
     ref: ref,
     role: "progressbar",
+    "data-variant": variant,
+    "data-color": color,
+    "data-disable-shrink": disableShrink || undefined,
     ...rootProps,
     ...other,
     children: /*#__PURE__*/_jsx("svg", {
@@ -108,8 +112,8 @@ const useStyles = makeStyles({
   return {
     root: {
       display: 'inline-block',
-      '--sg-circular-progress-circle-color': cssColor,
-      color: 'var(--sg-circular-progress-circle-color)'
+      '--circular-progress-color': cssColor,
+      color: 'var(--circular-progress-color)'
     },
     svg: {
       display: 'block'
@@ -136,4 +140,5 @@ const useStyles = makeStyles({
     }
   };
 });
+CircularProgress.displayName = 'CircularProgress';
 export default CircularProgress;

package/core/hooks/useNavigation.d.ts

@@ -1,6 +1,14 @@
+import { push, pop, replace, reset, update } from '../router/helpers';
+export interface Navigation {
+    push: typeof push;
+    pop: typeof pop;
+    replace: typeof replace;
+    reset: typeof reset;
+    update: typeof update;
+}
 /**
  * Provides functions for navigation.
- * @returns {Object}
+ * @returns The navigation functions.
  */
-export function useNavigation(): Object;
+export declare function useNavigation(): Navigation;
 //# sourceMappingURL=useNavigation.d.ts.map

package/core/hooks/useNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigation.d.ts","sourceRoot":"","sources":["../../../core/hooks/useNavigation.js"],"names":[],"mappings":"AAIA;;;GAGG;AACH,iCAFa,MAAM,CAUlB"}
+{"version":3,"file":"useNavigation.d.ts","sourceRoot":"","sources":["../../../core/hooks/useNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAClC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,GAAG,EAAE,OAAO,GAAG,CAAC;IAChB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAQ1C"}

package/core/hooks/useNavigation.js

@@ -1,8 +1,7 @@
 import { push, pop, replace, reset, update } from "../router/helpers";
-
 /**
  * Provides functions for navigation.
- * @returns {Object}
+ * @returns The navigation functions.
  */
 export function useNavigation() {
   return {

package/core/initialization/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../core/initialization/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAgB5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,CAAC,EAAE;YACb,YAAY,EAAE,OAAO,CAAC;YACtB,KAAK,EAAE,OAAO,CAAC;SAChB,CAAC;KACH;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAClE,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;CACxC,CAAC;AAMF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GACrB,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,UAAU,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,EAC9C,aAAa,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC;;EAuDlD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../core/initialization/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqB5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,CAAC,EAAE;YACb,YAAY,EAAE,OAAO,CAAC;YACtB,KAAK,EAAE,OAAO,CAAC;SAChB,CAAC;KACH;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAClE,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;CACxC,CAAC;AAMF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GACrB,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,UAAU,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,EAC9C,aAAa,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC;;EA4ElD,CAAC"}

package/core/initialization/index.js

@@ -6,7 +6,11 @@ import fetchClientInformation from '@shopgate/pwa-common/actions/client/fetchCli
 import { appConfig } from '@shopgate/engage';
 import { appInitialization, configuration } from '@shopgate/engage/core/collections';
 import { CONFIGURATION_COLLECTION_KEY_BASE_URL } from '@shopgate/engage/core/constants';
-import { loadCustomStyles, loadThemeCss } from '@shopgate/engage/styles';
+import { loadCustomStyles, loadThemeCss, loadFontCss } from '@shopgate/engage/styles';
+import { getTypographyFontCssUrls } from '@shopgate/engage/settings/selectors/appSettings';
+// Imported via its module path rather than the admin-preview helpers barrel, which ThemeProvider
+// and loadThemeCss already import - this module reaches into the settings action creators.
+import { awaitInitialFrontendSettings } from '@shopgate/engage/admin-preview/initialization/awaitInitialFrontendSettings';
 import { fetchSettings } from "./fetchSettings";
 
 /**
@@ -61,15 +65,30 @@ export const initialize = async (locales, reducers, subscribers) => {
   configuration.set(CONFIGURATION_COLLECTION_KEY_BASE_URL, getAppBaseUrl());
   store.dispatch(appWillInit(`${window.location.pathname}${window.location.search}`));
   try {
-    // The order of the style loaders does not affect the cascade: loadThemeCss pins its link to
-    // the theme css insertion point in the html template, while loadCustomStyles appends its link
-    // to the end of the head.
-    const promises = [fetchSettings(store), loadCustomStyles(), loadThemeCss()];
+    // The order of the style loaders does not affect the cascade: loadThemeCss and loadFontCss pin
+    // their links to their insertion points in the html template, while loadCustomStyles appends
+    // its link to the end of the head.
+    //
+    // The font css urls come from the app settings, so that loader is chained onto fetchSettings
+    // rather than started alongside it. Chaining keeps the other two running in parallel with the
+    // settings request instead of serializing everything behind it.
+    const promises = [fetchSettings(store).then(() => loadFontCss(getTypographyFontCssUrls(store.getState()))), loadCustomStyles(), loadThemeCss()];
     await Promise.all(promises);
   } catch (e) {
     // Nothing to see here.
   }
 
+  // Resolves at once outside the admin preview. Inside it, this holds app start until the admin
+  // sent its first settings payload, so the preview renders styled instead of painting the theme
+  // defaults first. Runs after fetchSettings, since the reducer merges and the preview has to be
+  // the later write.
+  await awaitInitialFrontendSettings(store);
+
+  // That payload can replace the configured font files, which were loaded above from whatever the
+  // jsonp settings carried, so they are synced again before anything renders. Outside the preview
+  // the urls are unchanged, and loadFontCss leaves the existing tags alone and resolves at once.
+  await loadFontCss(getTypographyFontCssUrls(store.getState()));
+
   // Execute all registered handlers from the AppInitialization collection
   await appInitialization.initialize({
     dispatch: store.dispatch,

package/core/router/conductor.d.ts

@@ -0,0 +1,9 @@
+import { Router } from '@virtuous/conductor';
+
+/**
+ * `@virtuous/conductor` ships types for the `Router` class but not for the singleton instance it
+ * exports at runtime. Declared here so that TypeScript consumers can use it.
+ */
+declare module '@virtuous/conductor' {
+  export const router: Router;
+}

package/core/router/helpers.d.ts

@@ -1,30 +1,43 @@
+export interface NavigationState {
+    target?: string;
+    [key: string]: unknown;
+}
+export interface NavigationParams {
+    pathname: string;
+    state?: NavigationState;
+    silent?: boolean;
+}
+export interface PopParams {
+    steps?: number;
+    state?: NavigationState;
+}
+export declare const NAVIGATION_PUSH = "navigation.push";
+export declare const NAVIGATION_POP = "navigation.pop";
+export declare const NAVIGATION_REPLACE = "navigation.replace";
+export declare const NAVIGATION_RESET = "navigation.reset";
 /**
  * Performs the PUSH navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
-export function push(params: Object): void;
+export declare function push(params: NavigationParams): void;
 /**
  * Performs the POP navigation action.
+ * @param params The history params. Pass `steps` to pop more than one route.
  */
-export function pop(): void;
+export declare function pop(params?: PopParams): void;
 /**
  * Performs the REPLACE navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
-export function replace(params: Object): void;
+export declare function replace(params: NavigationParams): void;
 /**
  * Performs the RESET navigation action.
- * @param {Object} params The history params.
  */
-export function reset(): void;
+export declare function reset(): void;
 /**
- * Performs the UPDATE navigation action.
- * @param {Object} state The meta state to add to a existing route.
- * @param {string} [routeId] The ID of the route to update.
+ * Adds meta state to an existing route.
+ * @param state The meta state to merge into the route.
+ * @param routeId The ID of the route to update. Defaults to the current route.
  */
-export function update(state: Object, routeId?: string): void;
-export const NAVIGATION_PUSH: "navigation.push";
-export const NAVIGATION_POP: "navigation.pop";
-export const NAVIGATION_REPLACE: "navigation.replace";
-export const NAVIGATION_RESET: "navigation.reset";
+export declare function update(state: NavigationState, routeId?: string): void;
 //# sourceMappingURL=helpers.d.ts.map

package/core/router/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../core/router/helpers.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH,6BAFW,MAAM,QAIhB;AAED;;GAEG;AACH,4BAEC;AAED;;;GAGG;AACH,gCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,8BAEC;AAED;;;;GAIG;AACH,8BAHW,MAAM,YACN,MAAM,QAIhB;AA3CD,8BAA+B,iBAAiB,CAAC;AACjD,6BAA8B,gBAAgB,CAAC;AAC/C,iCAAkC,oBAAoB,CAAC;AACvD,+BAAgC,kBAAkB,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../core/router/helpers.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAEnD;AAED;;;GAGG;AACH,wBAAgB,GAAG,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAE5C;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAEtD;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,IAAI,CAE5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CACpB,KAAK,EAAE,eAAe,EACtB,OAAO,GAAE,MAAoC,GAC5C,IAAI,CAEN"}

package/core/router/helpers.js

@@ -7,7 +7,7 @@ export const NAVIGATION_RESET = 'navigation.reset';
 
 /**
  * Performs the PUSH navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
 export function push(params) {
   UIEvents.emit(NAVIGATION_PUSH, params);
@@ -15,14 +15,15 @@ export function push(params) {
 
 /**
  * Performs the POP navigation action.
+ * @param params The history params. Pass `steps` to pop more than one route.
  */
-export function pop() {
-  UIEvents.emit(NAVIGATION_POP);
+export function pop(params) {
+  UIEvents.emit(NAVIGATION_POP, params);
 }
 
 /**
  * Performs the REPLACE navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
 export function replace(params) {
   UIEvents.emit(NAVIGATION_REPLACE, params);
@@ -30,16 +31,15 @@ export function replace(params) {
 
 /**
  * Performs the RESET navigation action.
- * @param {Object} params The history params.
  */
 export function reset() {
   UIEvents.emit(NAVIGATION_RESET);
 }
 
 /**
- * Performs the UPDATE navigation action.
- * @param {Object} state The meta state to add to a existing route.
- * @param {string} [routeId] The ID of the route to update.
+ * Adds meta state to an existing route.
+ * @param state The meta state to merge into the route.
+ * @param routeId The ID of the route to update. Defaults to the current route.
  */
 export function update(state, routeId = router.getCurrentRoute().id) {
   router.update(routeId, state);

package/development/components/DevelopmentSettings/DevelopmentSettings.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
-import { SheetDrawer, RippleButton } from '@shopgate/engage/components';
+import { SheetDrawer } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getEnabledCMSVersion } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getEnableCms2ForAllShoppers } from '@shopgate/engage/settings/selectors/shopSettings';
@@ -49,9 +50,8 @@ const DevelopmentSettings = ({
     onClose: onClose,
     children: /*#__PURE__*/_jsx("div", {
       className: classes.container,
-      children: /*#__PURE__*/_jsx(RippleButton, {
+      children: /*#__PURE__*/_jsx(Button, {
         className: classes.button,
-        type: "simple",
         onClick: () => {
           onClose();
           setTimeout(() => {

package/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { toggleFavoriteWithListChooser } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
@@ -29,20 +29,10 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = dispatch => ({
   toggle: productId => dispatch(toggleFavoriteWithListChooser(productId))
 });
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   root: {
-    '&&': {
-      margin: '0 0px 16px 16px',
-      backgroundColor: theme.palette.background.surface,
-      border: `1px solid ${theme.palette.primary.main}`,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0
-    }
-  },
-  ripple: {
-    padding: '8px 16px'
+    margin: '0 0 16px 16px',
+    textTransform: 'none'
   }
 }));
 
@@ -70,10 +60,10 @@ const FavoriteButtonWide = ({
   if (!appConfig.hasFavorites) {
     return null;
   }
-  return /*#__PURE__*/_jsx(RippleButton, {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "outlined",
+    color: "primary",
     className: classes.root,
-    rippleClassName: classes.ripple,
-    type: "primary",
     onClick: () => toggle(productId),
     children: i18n.text(label)
   });

package/favorites/components/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QAwEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBArED,YAAY"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QAuEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBApED,YAAY"}

package/favorites/components/List/List.js

@@ -15,7 +15,6 @@ const useStyles = makeStyles()(theme => ({
     margin: '8px 8px 10px'
   },
   rootNoFavoritesLists: {
-    background: theme.palette.background.surface,
     flexGrow: 1,
     paddingBottom: theme.spacing(1),
     paddingLeft: '16px',

package/favorites/components/List/ListContent.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ProductListTypeProvider, ProductProvider } from '@shopgate/engage/product/providers';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { getUseGetFavoriteIdsPipeline } from '@shopgate/engage/favorites';
 import ListItemWrapper from "./ListItemWrapper";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -19,8 +19,7 @@ const useStyles = makeStyles()({
   },
   loadMoreButton: {
     width: 'calc(100% - 32px)',
-    margin: '16px 16px 0 16px',
-    borderRadius: 5
+    margin: '16px 16px 0 16px'
   }
 });
 
@@ -86,8 +85,8 @@ const ListContent = ({
         removeItem: removeItem,
         index: index
       }, product.id))]
-    }), showLoadMoreButton && /*#__PURE__*/_jsx(RippleButton, {
-      type: "primary",
+    }), showLoadMoreButton && /*#__PURE__*/_jsx(Button, {
+      color: "secondary",
       className: classes.loadMoreButton,
       onClick: onLoadMore,
       children: i18n.text('favorites.load_more_button')

package/favorites/components/Lists/Lists.js

@@ -1,7 +1,8 @@
 import React, { useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { getFavoritesLists, isInitialLoading, getHasMultipleFavoritesListsSupport } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import addFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/addFavoritesList';
@@ -64,7 +65,6 @@ const useStyles = makeStyles()({
   addButton: {
     width: 'calc(100% - 32px)',
     margin: 16,
-    borderRadius: 5,
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
@@ -283,11 +283,10 @@ const FavoriteLists = ({
       onClose: handleMethodClose
     }), /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: FAVORITES_LIST_ADD_BUTTON,
-      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(RippleButton, {
-        type: "primary",
+      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(Button, {
+        color: "secondary",
         className: classes.addButton,
         onClick: openAddModal,
-        disabled: false,
         children: i18n.text('favorites.add_list')
       }) : null
     })]

package/filter/components/FilterPageContent/components/ApplyButton/index.js

@@ -1,18 +1,17 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_APPLY_BUTTON } from '@shopgate/engage/filter/constants';
 import { withWidgetSettings } from '@shopgate/engage/core';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   wrapper: {
-    display: 'flex'
-  },
-  button: {
-    padding: '0 !important'
+    display: 'flex',
+    marginRight: theme.spacing(2)
   }
-});
+}));
 
 /**
  * The filter apply button component.
@@ -44,9 +43,8 @@ const FilterApplyButton = ({
     children: /*#__PURE__*/_jsx("div", {
       className: classes.wrapper,
       children: /*#__PURE__*/_jsx(Button, {
-        className: classes.button,
-        flat: true,
-        type: "primary",
+        variant: "link",
+        color: "secondary",
         onClick: onClick,
         disabled: disabled,
         testId: "applyFilterButton",