@shopgate/pwa-common 7.31.6 → 7.32.0-beta.10

package/collections/media-providers/style.js

@@ -1,8 +1,4 @@
 import { css } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
 const responsiveContainer = css({
   position: 'relative',
   height: 0,
@@ -29,19 +25,18 @@ const consentContainer = css({
   justifyContent: 'center',
   textAlign: 'center',
   gap: 16,
-  background: colors.shade10,
-  border: `1px solid ${colors.shade5}`,
-  // Add a tiny little border radius to make the message container look nice with padding
+  background: 'var(--sg-palette-grey-light)',
+  border: '1px solid var(--sg-components-border-medium)',
   borderRadius: 4,
   top: 0
 });
 const consentLink = css({
   textAlign: 'center',
-  color: colors.primary,
+  color: 'var(--sg-palette-primary-main)',
   fontWeight: 500
 }).toString();
 const consentIcon = css({
-  fill: colors.shade5,
+  fill: 'var(--sg-palette-grey-medium)',
   height: 40
 });
 export default {

package/components/Backdrop/index.js

@@ -104,7 +104,7 @@ function Backdrop({
 }
 Backdrop.defaultProps = {
   className: '',
-  color: '#000',
+  color: 'var(--sg-palette-common-black)',
   duration: 200,
   isVisible: false,
   level: 2,

package/components/Button/index.js

@@ -49,4 +49,10 @@ Button.defaultProps = {
   onClick: null,
   testId: 'Button'
 };
+
+/**
+ * @deprecated Use `ButtonBase` from `@shopgate/engage/components/v2` instead — it renders the same
+ * unstyled click target, adds a ripple, and accepts `component` / `href` to change the element.
+ * For a styled button use `Button` from the same module.
+ */
 export default /*#__PURE__*/memo(Button);

package/components/Icon/index.d.ts

@@ -31,6 +31,6 @@ export interface IconProps {
  * Provides basic styling via `currentColor` and supports size and color
  * overrides through props while allowing external class-based overrides.
  */
-declare const Icon: ({ content, className, color, viewBox, size, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const Icon: ({ content, className, color, viewBox, size, }: IconProps) => import("react").JSX.Element;
 export default Icon;
 //# sourceMappingURL=index.d.ts.map

package/components/Icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Icon/index.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,+CAMX,SAAS,4CAgBX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Icon/index.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,+CAMX,SAAS,gCAgBX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Image/Image.d.ts

@@ -0,0 +1,78 @@
+import type { ReactElement, SyntheticEvent } from 'react';
+import type { ImageResolution } from '@shopgate/engage/settings/types/appSettings';
+export interface ImageProps {
+    /**
+     * Optional alt text for the image. Without one the image is marked decorative.
+     */
+    alt?: string | null;
+    /**
+     * The background color of the image container.
+     */
+    backgroundColor?: string;
+    /**
+     * External class name for the image container.
+     */
+    className?: string | null;
+    /**
+     * External class name for the image itself.
+     */
+    classNameImg?: string | null;
+    /**
+     * Shows the `placeholder` even when the image could be loaded. For a parent that decides on
+     * grounds this component cannot see, e.g. a product that is not orderable.
+     */
+    forcePlaceholder?: boolean;
+    /**
+     * Callback that is invoked when the image with the highest resolution has been loaded.
+     */
+    highestResolutionLoaded?: () => void;
+    /**
+     * Microdata property name, e.g. "image" for a schema.org Product. Emitted as the itemprop
+     * attribute so crawlers can pick the image out of the surrounding item.
+     */
+    itemProp?: string;
+    /**
+     * Whether the image is loaded only once it comes near the viewport. Turn it off for images that
+     * are visible immediately, e.g. the first tile of a list.
+     */
+    lazy?: boolean;
+    /**
+     * Callback that is invoked when image loading failed. Handling the failure is not required - a
+     * `placeholder` covers that - so this is for callers that need to react beyond the image itself.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
+    /**
+     * Callback that is invoked when the image has been loaded.
+     */
+    onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;
+    /**
+     * Rendered in place of the image when there is no `src`, when `forcePlaceholder` is set, or when
+     * the image failed to load. It renders inside the container, so it inherits the reserved aspect
+     * ratio box and needs no sizing of its own.
+     */
+    placeholder?: ReactElement | null;
+    /**
+     * Width and height parts of the rendered aspect ratio, e.g. [16, 9]. Without one the ratio is
+     * calculated from the highest resolution.
+     */
+    ratio?: number[] | null;
+    /**
+     * The resolutions to request, ordered ascending. The last is displayed; the second to last is
+     * loaded first as a preview, so something appears as soon as possible.
+     */
+    resolutions?: ImageResolution[];
+    /**
+     * Image source. A url the image service serves is rewritten to carry the requested dimensions and
+     * the app wide quality and fill settings. Any other url is used as it is, so `resolutions` and
+     * `ratio` then only affect the layout, not what is downloaded.
+     */
+    src?: string | null;
+    /**
+     * Renders a plain img tag without the container, for callers that position the image themselves.
+     * Nothing reserves its space while it loads, and `backgroundColor` has nothing to apply to.
+     */
+    unwrapped?: boolean;
+}
+declare const _default: import("react").MemoExoticComponent<(props: ImageProps) => import("react").JSX.Element | null>;
+export default _default;
+//# sourceMappingURL=Image.d.ts.map

package/components/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../components/Image/Image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAGnF,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;oEA8EqB,UAAU;AAoMhC,wBAA2B"}

package/components/Image/Image.js

@@ -1,14 +1,10 @@
-import React, { useMemo, useState, useEffect, useRef, useCallback, memo } from 'react';
-import PropTypes from 'prop-types';
+import { useMemo, useState, useEffect, useRef, useCallback, memo } from 'react';
 import noop from 'lodash/noop';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getFullImageSource } from '@shopgate/engage/core/helpers';
+import { useImageServiceSettings } from '@shopgate/engage/settings/hooks';
 import ImageInner from "./ImageInner";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors: themeColors
-} = themeConfig;
 const useStyles = makeStyles()((_theme, {
   background,
   paddingTop
@@ -27,57 +23,112 @@ const useStyles = makeStyles()((_theme, {
 }));
 
 /**
- * Calculates the Greatest Common Divisor (GCD) of two numbers using the Euclidean algorithm.
- *
- * @param {number} a - The first number (must be a positive integer).
- * @param {number} b - The second number (must be a positive integer).
- * @returns {number} The greatest common divisor of `a` and `b`.
- *
- * @example
- * gcd(1920, 1080); // Returns 120
- * gcd(10, 15);     // Returns 5
- * gcd(100, 25);    // Returns 25
+ * Calculates the Greatest Common Divisor of two numbers using the Euclidean algorithm.
+ * @param a The first number.
+ * @param b The second number.
+ * @returns The greatest common divisor, or 1 when the pair cannot be reduced.
  */
-const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+const gcd = (a, b) => {
+  // Anything but a pair of positive whole numbers is left unreduced. The values can originate from
+  // an admin field a merchant is still typing into, and NaN or Infinity would otherwise recurse
+  // until the stack overflows, while a fraction would reduce to a near-zero divisor.
+  if (!Number.isInteger(a) || !Number.isInteger(b) || a <= 0 || b <= 0) {
+    return 1;
+  }
+  let dividend = a;
+  let remainder = b;
+  while (remainder !== 0) {
+    const next = dividend % remainder;
+    dividend = remainder;
+    remainder = next;
+  }
+  return dividend;
+};
 
 /**
- * The image component.
- * @param {Object} props The components props.
- * @returns {JSX.Element}
+ * Whether a value can be used as one side of an aspect ratio.
+ * @param value The value to check.
+ * @returns Whether it is a usable length.
+ */
+const isUsableLength = value => Number.isFinite(value) && value > 0;
+const defaultResolutions = [{
+  width: 440,
+  height: 440
+}];
+
+/**
+ * Renders an image at the configured resolutions, inside a container that reserves its aspect ratio
+ * so the layout does not shift while it loads.
+ *
+ * What a caller should know:
+ *
+ * - **Nothing is rendered until there is something to render.** Without a `src`, the container is
+ *   still there and keeps its space, but it stays empty unless a `placeholder` is given.
+ * - **A failed image is remembered per source, not per component.** Once a `placeholder` is given,
+ *   it takes over on failure, and the image returns by itself as soon as the requested url changes -
+ *   a new `src`, different `resolutions`, or an app wide image setting edited in the admin. Callers
+ *   that pass no `placeholder` keep the failed image, and `onError` keeps reporting every attempt.
+ * - **`onLoad` and `onError` are always forwarded**, whether or not a placeholder is involved.
+ * - **`unwrapped` gives up the container**, and with it the reserved aspect ratio box and the
+ *   background color. The caller has to provide the space itself.
+ * @param props The components props.
+ * @returns The rendered component.
  */
-const Image = ({
-  alt,
-  backgroundColor,
-  className,
-  classNameImg,
-  forcePlaceholder: parentRendersPlaceholder,
-  highestResolutionLoaded,
-  onError,
-  onLoad,
-  ratio,
-  resolutions,
-  src,
-  lazy,
-  unwrapped
-}) => {
+const Image = props => {
+  const {
+    alt = null,
+    backgroundColor = 'var(--sg-palette-background-emphasized)',
+    className = '',
+    classNameImg = '',
+    forcePlaceholder: parentRendersPlaceholder = false,
+    highestResolutionLoaded = noop,
+    itemProp,
+    onError = noop,
+    onLoad = noop,
+    placeholder = null,
+    ratio = null,
+    resolutions = defaultResolutions,
+    src = null,
+    lazy = true,
+    unwrapped = false
+  } = props;
+
+  // Quality and fill color are configured app wide, so they are resolved here rather than passed
+  // in by every caller. The returned object is reference stable, so it does not defeat the memo.
+  const imageServiceSettings = useImageServiceSettings();
+
   // Prepare two image sources - a small preview image and a large main image. The idea is to
   // display an image as soon as possible. Small images might be also available in the cache from
   // the previous page.
   const sources = useMemo(() => {
     // Create a preview source when resolutions array has more than one element
-    const preview = resolutions.length > 1 ? getFullImageSource(src, resolutions[resolutions.length - 2]) : null;
+    const preview = resolutions.length > 1 ? getFullImageSource(src, resolutions[resolutions.length - 2], imageServiceSettings) : null;
 
     // Create a main source when resolutions array has at least one element (highest resolution)
-    const main = resolutions.length > 0 ? getFullImageSource(src, resolutions[resolutions.length - 1]) : null;
+    const main = resolutions.length > 0 ? getFullImageSource(src, resolutions[resolutions.length - 1], imageServiceSettings) : null;
     return {
       // Only assign preview source if it is different from the main source. Image swap logic
       // will not run when no preview source is available.
       preview: preview !== main ? preview : null,
       main
     };
-  }, [resolutions, src]);
+  }, [resolutions, src, imageServiceSettings]);
   const imgRef = useRef(null);
   const [isInView, setIsInView] = useState(!lazy);
+  const [failedSource, setFailedSource] = useState(null);
+
+  // A failure counts against the source that produced it, not against the component. Anything that
+  // rebuilds the url - a new src, a reconfigured ratio, a different fill color - is by itself the
+  // decision to try again, so the placeholder gives way without anyone having to reset a flag.
+  //
+  // Only callers that provide a placeholder have the image taken away from them. Without one there
+  // is nothing to swap to, so a failed image stays mounted and keeps reporting through onError,
+  // exactly as it behaved before this prop existed.
+  //
+  // The null check matters: an empty resolutions array leaves no source to request, and would
+  // otherwise match the initial state and report a failure that never happened.
+  const hasFailed = sources.main !== null && failedSource === sources.main;
+  const showPlaceholder = !src || parentRendersPlaceholder || !!placeholder && hasFailed;
 
   // Effect to create an Intersection Observer to enable lazy loading of preview images
   useEffect(() => {
@@ -107,40 +158,41 @@ const Image = ({
 
   /**
    * Handles the onLoad event of the image.
+   * @param event The load event.
    */
-  const handleOnLoad = useCallback(e => {
+  const handleOnLoad = useCallback(event => {
     highestResolutionLoaded();
-    onLoad(e);
+    onLoad(event);
   }, [highestResolutionLoaded, onLoad]);
 
   /**
    * Handles the onError event of the image.
+   * @param event The error event.
    */
-  const handleOnError = useCallback(e => {
-    onError(e);
-  }, [onError]);
+  const handleOnError = useCallback(event => {
+    setFailedSource(sources.main);
+    onError(event);
+  }, [onError, sources.main]);
 
   /**
    * Memoized calculation of aspect ratio and CSS padding-hack ratio for responsive elements.
    *
-   * Returns n object containing:
-   * - `aspectRatio` {string} - The aspect ratio in the format `width / height` (e.g., `16 / 9`).
-   * - `paddingHackRatio` {string} - The CSS padding-hack ratio as a percentage for older browsers
-   * (e.g., `56.250%` for a 16:9 ratio).
+   * aspectRatio is the ratio in the format `width / height` (e.g. `16 / 9`), paddingHackRatio the
+   * same as a percentage for older browsers (e.g. `56.250%` for a 16:9 ratio).
    */
   const {
     aspectRatio,
     paddingHackRatio
   } = useMemo(() => {
-    let width;
-    let height;
-    if (ratio) {
-      [width, height] = ratio;
-    } else {
-      ({
-        width,
-        height
-      } = resolutions[resolutions.length - 1]);
+    const [width, height] = ratio ?? [resolutions[resolutions.length - 1]?.width, resolutions[resolutions.length - 1]?.height];
+
+    // Fall back to a square rather than emitting "NaN / NaN" or dividing by zero. Reached when the
+    // resolutions are empty, or when a ratio arrives half typed from the admin.
+    if (!isUsableLength(width) || !isUsableLength(height)) {
+      return {
+        aspectRatio: '1 / 1',
+        paddingHackRatio: '100.000%'
+      };
     }
     const divisor = gcd(width, height);
     return {
@@ -155,22 +207,24 @@ const Image = ({
     background: backgroundColor,
     paddingTop: paddingHackRatio
   });
+  const innerStyle = {
+    aspectRatio,
+    ...(isInView && sources.preview && {
+      backgroundImage: `url(${sources.preview})`,
+      backgroundSize: 'contain',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center'
+    })
+  };
   if (unwrapped) {
-    if (!(src && !parentRendersPlaceholder)) return null;
+    if (showPlaceholder) return placeholder;
     return /*#__PURE__*/_jsx(ImageInner, {
       ref: imgRef,
       src: sources.main,
       className: cx(classNameImg),
-      style: {
-        aspectRatio,
-        ...(isInView && sources.preview && {
-          backgroundImage: `url(${sources.preview})`,
-          backgroundSize: 'contain',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center'
-        })
-      },
+      style: innerStyle,
       alt: alt,
+      itemProp: itemProp,
       lazy: lazy,
       onLoad: handleOnLoad,
       onError: handleOnError
@@ -178,43 +232,17 @@ const Image = ({
   }
   return /*#__PURE__*/_jsx("div", {
     className: cx(classes.container, className, 'common__image__container'),
-    children: src && !parentRendersPlaceholder && /*#__PURE__*/_jsx(ImageInner, {
+    children: showPlaceholder ? placeholder : /*#__PURE__*/_jsx(ImageInner, {
       ref: imgRef,
       src: sources.main,
       className: cx(classNameImg),
-      style: {
-        aspectRatio,
-        ...(isInView && sources.preview && {
-          backgroundImage: `url(${sources.preview})`,
-          backgroundSize: 'contain',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center'
-        })
-      },
+      style: innerStyle,
       alt: alt,
+      itemProp: itemProp,
       lazy: lazy,
       onLoad: handleOnLoad,
       onError: handleOnError
     })
   });
 };
-const defaultResolutions = [{
-  width: 440,
-  height: 440
-}];
-Image.defaultProps = {
-  alt: null,
-  backgroundColor: themeColors.placeholder,
-  className: '',
-  classNameImg: '',
-  forcePlaceholder: false,
-  highestResolutionLoaded: noop,
-  onError: noop,
-  onLoad: noop,
-  ratio: null,
-  resolutions: defaultResolutions,
-  src: null,
-  unwrapped: false,
-  lazy: true
-};
 export default /*#__PURE__*/memo(Image);

package/components/Image/ImageInner.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, SyntheticEvent } from 'react';
+export interface ImageInnerProps {
+    /**
+     * Alt text. Without one the image is marked decorative.
+     */
+    alt?: string | null;
+    /**
+     * External class name for the img element.
+     */
+    className?: string | null;
+    /**
+     * Microdata property name, e.g. "image" for a schema.org Product. Emitted as the itemprop
+     * attribute so crawlers can pick the image out of the surrounding item.
+     */
+    itemProp?: string;
+    /**
+     * Whether the browser defers loading until the image is near the viewport.
+     */
+    lazy?: boolean;
+    /**
+     * Callback that is invoked when image loading failed.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
+    /**
+     * Callback that is invoked when the image has been loaded.
+     */
+    onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;
+    /**
+     * The resolved image url.
+     */
+    src?: string | null;
+    /**
+     * Inline styles, used to pin the aspect ratio and paint the preview behind the image.
+     */
+    style?: CSSProperties | null;
+}
+/**
+ * The ImageInner component renders the actual image of the Image component.
+ * @param props The component props.
+ * @param ref The component reference.
+ * @returns The rendered component.
+ */
+declare const ImageInner: import("react").ForwardRefExoticComponent<ImageInnerProps & import("react").RefAttributes<HTMLImageElement>>;
+export default ImageInner;
+//# sourceMappingURL=ImageInner.d.ts.map

package/components/Image/ImageInner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageInner.d.ts","sourceRoot":"","sources":["../../../components/Image/ImageInner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CAC9B;AAeD;;;;;GAKG;AACH,QAAA,MAAM,UAAU,8GAkCd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/components/Image/ImageInner.js

@@ -1,5 +1,4 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
 import noop from 'lodash/noop';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,25 +10,28 @@ const useStyles = makeStyles()({
     width: '100%',
     maxHeight: '100%',
     WebkitTouchCallout: 'none',
-    fontSize: 0
+    fontSize: 0,
+    objectFit: 'contain'
   }
 });
 
 /**
- * The ImageInner component renders tha actual image of the Image component.
- * @param {Object} props The component props
- * @param {Function} ref The component reference
- * @returns {JSX.Element}
+ * The ImageInner component renders the actual image of the Image component.
+ * @param props The component props.
+ * @param ref The component reference.
+ * @returns The rendered component.
  */
-const ImageInner = /*#__PURE__*/forwardRef(({
-  src,
-  className,
-  alt,
-  lazy,
-  onLoad,
-  onError,
-  style
-}, ref) => {
+const ImageInner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    src = null,
+    className = null,
+    alt = null,
+    itemProp,
+    lazy = false,
+    onLoad = noop,
+    onError = noop,
+    style = null
+  } = props;
   const {
     classes,
     cx
@@ -37,24 +39,16 @@ const ImageInner = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/_jsx("img", {
     ref: ref,
     loading: lazy ? 'lazy' : 'eager',
-    src: src,
+    src: src ?? undefined,
     className: cx(classes.image, 'common__image', className),
-    alt: alt,
-    "aria-label": alt,
+    alt: alt ?? undefined,
+    "aria-label": alt ?? undefined,
     "aria-hidden": !alt,
     "data-test-id": "image",
+    itemProp: itemProp,
     onLoad: onLoad,
     onError: onError,
-    style: style
+    style: style ?? undefined
   });
 });
-ImageInner.defaultProps = {
-  src: null,
-  alt: null,
-  className: null,
-  lazy: false,
-  style: null,
-  onError: noop,
-  onLoad: noop
-};
 export default ImageInner;

package/components/Image/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Image';
+export type { ImageProps } from './Image';
+//# sourceMappingURL=index.d.ts.map

package/components/Image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/components/Modal/index.js

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     top: 0,
@@ -25,8 +25,8 @@ const useStyles = makeStyles()({
     position: 'relative',
     maxWidth: '100vw',
     maxHeight: '100vh',
-    paddingTop: 'var(--safe-area-inset-top)',
-    paddingBottom: 'var(--safe-area-inset-bottom)',
+    paddingTop: theme.layout.safeArea.top,
+    paddingBottom: theme.layout.safeArea.bottom,
     overflowY: 'scroll',
     [responsiveMediaQuery('>xs', {
       webOnly: true
@@ -34,7 +34,7 @@ const useStyles = makeStyles()({
       overflowY: 'initial'
     }
   }
-});
+}));
 
 /**
  * The Modal component.

package/components/SurroundPortals/index.d.ts

@@ -19,6 +19,6 @@ export interface SurroundPortalsProps {
  *
  * @returns The SurroundPortals component.
  */
-declare const SurroundPortals: ({ portalName, portalProps, children, }: SurroundPortalsProps) => import("react/jsx-runtime").JSX.Element;
+declare const SurroundPortals: ({ portalName, portalProps, children, }: SurroundPortalsProps) => React.JSX.Element;
 export default SurroundPortals;
 //# sourceMappingURL=index.d.ts.map

package/components/SurroundPortals/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SurroundPortals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,GAAI,wCAItB,oBAAoB,4CAQtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SurroundPortals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,GAAI,wCAItB,oBAAoB,sBAQtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/Swiper/index.js

@@ -9,10 +9,9 @@ import 'swiper/css/navigation';
 import 'swiper/css/zoom';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import SwiperItem from "./components/SwiperItem";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'relative',
     maxHeight: '100%',
@@ -27,7 +26,7 @@ const useStyles = makeStyles()(() => ({
   },
   innerContainer: {
     overflow: 'hidden',
-    '--swiper-navigation-color': themeColors.gray,
+    '--swiper-navigation-color': theme.components.swiper.paginationBulletColor,
     '& .swiper-wrapper': {
       alignItems: 'stretch'
     },
@@ -36,11 +35,10 @@ const useStyles = makeStyles()(() => ({
     },
     '& .swiper-pagination': {
       '& .swiper-pagination-bullet': {
-        background: themeColors.gray,
+        background: theme.components.swiper.paginationBulletActiveColor,
         opacity: '.5',
         margin: '0 4px',
-        transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
-        border: `1px solid ${themeColors.dark}`
+        transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'
       },
       '& .swiper-pagination-bullet-active.swiper-pagination-bullet-active-main': {
         opacity: 1
@@ -51,8 +49,9 @@ const useStyles = makeStyles()(() => ({
       left: 'auto',
       right: 0,
       bottom: 'auto',
-      fontSize: 12,
-      background: themeColors.background,
+      fontSize: theme.typography.caption.fontSize,
+      background: theme.components.swiper.paginationFractionBackground,
+      color: theme.contrastColor(theme.components.swiper.paginationFractionBackground),
       borderRadius: '50px',
       width: 'fit-content',
       padding: '4px 8px',
@@ -60,9 +59,9 @@ const useStyles = makeStyles()(() => ({
       transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'
     },
     '& .swiper-pagination-progressbar': {
-      background: themeColors.shade7,
+      background: theme.components.swiper.paginationProgressbarBackground,
       '& .swiper-pagination-progressbar-fill': {
-        background: themeColors.dark
+        background: theme.components.swiper.paginationProgressbarActiveColor
       }
     }
   },

package/constants/Configuration.js

@@ -34,4 +34,11 @@ export const IS_CONNECT_EXTENSION_ATTACHED = 'IS_CONNECT_EXTENSION_ATTACHED';
  */
 export const CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL = 'CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL';
 export const CONFIGURATION_COLLECTION_KEY_THEME_TYPOGRAPHY = 'CONFIGURATION_COLLECTION_KEY_THEME_TYPOGRAPHY';
+
+/**
+ * Capability flag the PWA sets to signal that base typography is applied on the root (`<html>`)
+ * element rather than the legacy `<body>` element. Consumers can read it to adjust behavior
+ * accordingly. Absent on older PWAs.
+ */
+export const CONFIGURATION_COLLECTION_KEY_HAS_ROOT_TYPOGRAPHY = 'CONFIGURATION_COLLECTION_KEY_HAS_ROOT_TYPOGRAPHY';
 export const CONFIGURATION_COLLECTION_KEY_UNIVERSAL_LINK_HANDLER = 'universalLinkHandler';

package/helpers/config/index.d.ts

@@ -51,44 +51,5 @@ export default appConfig;
  * Be careful when changing existing properties on the fly, reassignments should never be done!
  * @mixes AppConfig
  */
-declare const appConfig: string | {
-    appId: string;
-    browserConnector: boolean;
-    colors: {};
-    forgotPasswordUrl: null;
-    hasFavorites: boolean;
-    hasReviews: boolean;
-    showWriteReview: boolean;
-    language: string;
-    logo: string;
-    marketId: string;
-    publicPath: string;
-    shopName: string;
-    webCheckoutShopify: null;
-    hasNoScanner: boolean;
-    apiUrl: string;
-    shopCNAME: null;
-    currency: string;
-    showGmdMenuSubHeaders: boolean;
-    benchmark: boolean;
-    sentry: {};
-    theme: {};
-    cartShippingHideAnonymousLegacy: null;
-    cartShippingTextAnonymousLegacy: null;
-    variantSelectionMode: null;
-    product: {
-        variantPreselect: boolean;
-    };
-    cart: {};
-    scanner: {};
-    favorites: {};
-    tracking: {
-        hasWebTrackingEngage: boolean;
-        useSkuAsProductId: boolean;
-    };
-    webTrackingEngage: {
-        android: string;
-        ios: string;
-    };
-} | undefined;
+declare const appConfig: any;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAyJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA8F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAyJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH,6BAA8F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.31.6",
+  "version": "7.32.0-beta.10",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.31.6",
+    "@shopgate/pwa-benchmark": "7.32.0-beta.10",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -26,7 +26,7 @@
     "glamor": "^2.20.40",
     "gsap": "^3.14.2",
     "history": "^4.9.0",
-    "intl-messageformat": "^11.1.2",
+    "intl-messageformat": "^11.2.9",
     "path-match": "^1.2.4",
     "react-dotdotdot": "~1.3.1",
     "react-helmet": "^6.1.0",
@@ -37,10 +37,10 @@
     "redux-thunk": "^3.1.0",
     "reselect": "^4.1.8",
     "rxjs": "~5.5.12",
-    "swiper": "12.1.0"
+    "swiper": "12.2.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.31.6",
+    "@shopgate/pwa-core": "7.32.0-beta.10",
     "@types/lodash": "^4.17.24",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.23",

package/providers/toast/index.js

@@ -3,20 +3,20 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { withTheme } from '@shopgate/engage/styles/theme/hocs/withTheme';
 import ToastContext from "./context";
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables: {
-    toast: {
-      duration = 5000
-    } = {}
-  } = {}
-} = themeConfig;
+
+/**
+ * @typedef {Object} ToastProviderProps
+ * @property {import('react').ReactNode} children
+ * @property {import('@shopgate/engage/styles').Theme} theme
+ */
 
 /**
  * The ToastProvider component
+ * @augments {Component<ToastProviderProps>}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 let ToastProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
@@ -39,7 +39,7 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
         onLongPress: toast.onLongPress,
         message: toast.message,
         messageParams: toast.messageParams,
-        duration: toast.duration || duration
+        duration: toast.duration || _this.props.theme.transitions.duration.toast
       };
 
       // Update the queue immutably: consumers rely on the array reference changing to re-render
@@ -124,4 +124,11 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
 }(Component);
 ToastProvider.ADD = 'toast_add';
 ToastProvider.FLUSH = 'toast_flush';
-export default ToastProvider;
+const ThemedToastProvider = withTheme(ToastProvider);
+
+// The HOC returns a new component which doesn't carry over the statics of the wrapped class. They
+// are part of the public API of this module (consumers emit UIEvents on ToastProvider.ADD), so they
+// are re-attached explicitly.
+ThemedToastProvider.ADD = ToastProvider.ADD;
+ThemedToastProvider.FLUSH = ToastProvider.FLUSH;
+export default ThemedToastProvider;

package/subscriptions/router.js

@@ -9,7 +9,7 @@ import Route from '@virtuous/conductor/Route';
 import { Linking } from '@shopgate/native-modules';
 import { HISTORY_RESET_TO } from '@shopgate/pwa-common/constants/ActionTypes';
 import { logger } from '@shopgate/pwa-core';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isNavigationBlocked } from '@shopgate/engage/admin-preview/helpers';
 import addCouponsToCart from '@shopgate/pwa-common-commerce/cart/actions/addCouponsToCart';
 import { getCurrentRoute, getRouterStackIndex } from "../selectors/router";
 import { LoadingProvider } from "../providers";
@@ -31,7 +31,7 @@ import ToastProvider from "../providers/toast";
  */
 export default function routerSubscriptions(subscribe) {
   subscribe(navigate$, async params => {
-    if (IS_PAGE_PREVIEW_ACTIVE) {
+    if (isNavigationBlocked()) {
       // No navigation is allowed in page preview mode.
       return;
     }

package/styles/reset/form.js

@@ -1,58 +0,0 @@
-/**
- * @deprecated used @shopgate/engage/styles instead
- */
-
-import { injectGlobal } from '@shopgate/engage/styles';
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * since iOS 15 button has a default color of blue rgb(0, 122, 255);
- *
- * 1. Change font properties to `inherit` in Safari.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- *
- * Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
- */
-injectGlobal({
-  'button, html [type="button"], [type="reset"], [type="submit"]': {
-    WebkitAppearance: 'button'
-  },
-  button: {
-    color: 'inherit',
-    borderRadius: 0
-  },
-  '::-webkit-file-upload-button': {
-    font: 'inherit',
-    WebkitAppearance: 'button'
-  },
-  '::-webkit-search-cancel-button, ::-webkit-search-decoration': {
-    WebkitAppearance: 'none'
-  },
-  'button, input, select, textarea': {
-    background: 'transparent',
-    border: 0,
-    fontSize: '1em',
-    margin: 0
-  },
-  'input, select, textarea': {
-    fontFamily: 'inherit'
-  },
-  'button, textarea': {
-    fontFamily: 'inherit',
-    lineHeight: 'inherit'
-  },
-  'button, label, [type="checkbox"], [type="radio"]': {
-    cursor: 'pointer'
-  },
-  label: {
-    display: 'inline-block'
-  },
-  textarea: {
-    minHeight: '5em',
-    maxWidth: '100%',
-    resize: 'none'
-  },
-  '[type="search"]': {
-    WebkitAppearance: 'textfield'
-  }
-});

package/styles/reset/index.js

@@ -1,8 +0,0 @@
-/**
- * @deprecated used @shopgate/engage/styles/reset instead
- */
-import "./root";
-import "./typography";
-import "./media";
-import "./form";
-import "./table";

package/styles/reset/media.js

@@ -1,26 +0,0 @@
-/**
- * @deprecated used @shopgate/engage/styles/reset instead
- */
-
-import { injectGlobal } from '@shopgate/engage/styles';
-injectGlobal({
-  'audio:not([controls])': {
-    display: 'none',
-    height: 0
-  },
-  figure: {
-    margin: 0
-  },
-  iframe: {
-    border: 0,
-    display: 'block',
-    width: '100%'
-  },
-  'img, svg': {
-    display: 'block',
-    maxWidth: '100%'
-  },
-  progress: {
-    verticalAlign: 'baseline'
-  }
-});

package/styles/reset/root.js

@@ -1,37 +0,0 @@
-/**
- * @deprecated used @shopgate/engage/styles instead
- */
-
-import { injectGlobal } from '@shopgate/engage/styles';
-import { themeConfig } from "../../helpers/config";
-const {
-  typography
-} = themeConfig;
-injectGlobal({
-  '*, *:before, *:after': {
-    boxSizing: 'border-box'
-  },
-  'html, body': {
-    WebkitTapHighlightColor: 'transparent',
-    width: '100%',
-    height: '100%'
-  },
-  html: {
-    overflow: 'hidden',
-    MozOsxFontSmoothing: 'grayscale',
-    WebkitFontSmoothing: 'antialiased',
-    MsTextSizeAdjust: '100%',
-    WebkitTextSizeAdjust: '100%',
-    minHeight: '100%'
-  },
-  body: {
-    font: `${typography.rootSize}px/${typography.lineHeight} ${typography.family}`,
-    overflow: 'auto',
-    margin: 0,
-    WebkitOverflowScrolling: 'touch',
-    WebkitUserSelect: 'none'
-  },
-  '[data-pattern]': {
-    height: '100% !important'
-  }
-});

package/styles/reset/table.js

@@ -1,14 +0,0 @@
-/**
- * @deprecated used @shopgate/engage/styles instead
- */
-
-import { injectGlobal } from '@shopgate/engage/styles';
-injectGlobal({
-  table: {
-    borderCollapse: 'collapse',
-    minWidth: '100%'
-  },
-  'td, th': {
-    verticalAlign: 'top'
-  }
-});

package/styles/reset/typography.js

@@ -1,30 +0,0 @@
-/**
- * @deprecated used @shopgate/engage/styles instead
- */
-
-import { injectGlobal } from '@shopgate/engage/styles';
-import { rem } from "../../helpers/style";
-injectGlobal({
-  a: {
-    color: 'inherit',
-    textDecoration: 'none',
-    WebkitTextDecorationSkip: 'objects'
-  },
-  'a:hover, a:focus, a:active, [tabindex]': {
-    outline: 0
-  },
-  'ol, ul': {
-    listStyle: 'none',
-    margin: 0,
-    paddingLeft: 0
-  },
-  'b, strong': {
-    fontWeight: 700
-  },
-  small: {
-    fontSize: rem(13)
-  },
-  'sub, sup': {
-    lineHeight: 0
-  }
-});