@shopgate/engage 7.32.0-beta.3 → 7.32.0-beta.5

package/page/helpers/index.d.ts

@@ -1,84 +1,89 @@
-export type ProductsWidgetInputConfig = {
-  /**
-   * A search term to filter products by
-   */
-  searchTerm: string;
-  /**
-   * A brand to filter products by
-   */
-  brand: string;
-  /**
-   * A category to filter products by
-   */
-  category: string;
-  /**
-   * Array of product item numbers (selected via manual input)
-   */
-  manualItemNumbers: string[];
-  /**
-   * Array of product item numbers (selected via product selector)
-   */
-  selectorItemNumbers: string[];
+/**
+ * Configuration of the "Products" widget input.
+ */
+export interface ProductsWidgetInputConfig {
+    /**
+     * A search term to filter products by.
+     */
+    searchTerm: string;
+    /**
+     * A brand to filter products by.
+     */
+    brand: string;
+    /**
+     * A category to filter products by.
+     */
+    category: string;
+    /**
+     * Array of product item numbers (selected via manual input).
+     */
+    manualItemNumbers: string[];
+    /**
+     * Array of product item numbers (selected via product selector).
+     */
+    selectorItemNumbers: string[];
 }
-
-export type GetProductSearchParamsFromProductsInputConfigReturnValue = {
-  /**
-   * The type of product search to perform.
-   */
-  productsSearchType: 'searchTerm' | 'brand' | 'category' | 'productIds';
-  /**
-   * The value to use for the product search. Can be a string or an array of strings (for product IDs).
-   */
-  productsSearchValue: string | string[];
+/**
+ * Return value of {@link getProductSearchParamsFromProductsInputConfig}.
+ */
+export interface GetProductSearchParamsFromProductsInputConfigReturnValue {
+    /**
+     * The type of product search to perform.
+     */
+    productsSearchType: 'searchTerm' | 'brand' | 'category' | 'productIds';
+    /**
+     * The value to use for the product search. Can be a string or an array of strings
+     * (for product IDs).
+     */
+    productsSearchValue: string | string[];
 }
-
 /**
  * Helper to extract relevant search parameters from the widget configuration of the "Products"
  * input.
- *
  * The return value can be used to e.g. parametrize the useWidgetProducts hook.
+ * @param products Config object of the "Products" input.
+ * @returns The extracted product search parameters.
  */
-export declare function getProductSearchParamsFromProductsInputConfig(
-  products: ProductsWidgetInputConfig
-): GetProductSearchParamsFromProductsInputConfigReturnValue;
-
+export declare const getProductSearchParamsFromProductsInputConfig: (products?: Partial<ProductsWidgetInputConfig>) => GetProductSearchParamsFromProductsInputConfigReturnValue;
 /**
- * Helper to parse the image URL to return a high resolution version if required.
+ * Parses the image URL to return a high resolution version if required.
+ * @param url The original image URL.
+ * @param useHighRes Whether to return a high resolution version.
+ * @returns The parsed image URL.
  */
-export declare function parseImageUrl(
-  url: string,
-  useHighRes?: boolean
-): string;
-
-type BorderRadiusParams = {
-  /**
-   * The border radius option
-   */
-  borderRadius: 'default' | 'none' |'rounded' | 'custom';
-  /**
-   * The custom border radius value
-   */
-  customBorderRadius?: number
-};
-
+export declare const parseImageUrl: (url: string, useHighRes?: boolean) => string;
+/**
+ * Parameters for {@link resolveBorderRadiusFromWidgetConfig}.
+ */
+interface BorderRadiusParams {
+    /**
+     * The border radius option.
+     */
+    borderRadius: 'default' | 'none' | 'rounded' | 'custom';
+    /**
+     * The custom border radius value.
+     */
+    borderRadiusCustom?: number;
+}
 /**
- * Retrieves the border radius based on the widget config
- * @returns The resolved border radius
+ * Retrieves the border radius based on the widget config.
+ * @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.
  */
-export declare function resolveBorderRadiusFromWidgetConfig(
-  params: BorderRadiusParams
-)
-
+export declare const resolveBorderRadiusFromWidgetConfig: ({ borderRadius, borderRadiusCustom }: BorderRadiusParams) => number;
 /**
  * Validator factory for regular expressions.
  * @param regex The regular expression to match.
  * @returns A function that validates if a value matches the regex.
  */
-export declare function matchesRegex(regex: RegExp): (val: string) => boolean;
-
+export declare const matchesRegex: (regex: RegExp) => (val: string) => boolean;
 /**
  * Validates if a given string is a valid HTTPS URL.
  * @param val The string to validate.
  * @returns True if the string is a valid HTTPS URL, false otherwise.
  */
 export declare const isHttpsUrl: (val: string) => boolean;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

package/page/helpers/index.js

@@ -1,21 +1,17 @@
-/* eslint-disable max-len */
-
 /**
- * @typedef {import('./').ProductsWidgetInputConfig} ProductsWidgetInputConfig
+ * Configuration of the "Products" widget input.
  */
 
 /**
- * @typedef {import('./').GetProductSearchParamsFromProductsInputConfigReturnValue} GetProductSearchParamsFromProductsInputConfigReturnValue
+ * Return value of {@link getProductSearchParamsFromProductsInputConfig}.
  */
 
-/* eslint-enable max-len */
-
 /**
  * Helper to extract relevant search parameters from the widget configuration of the "Products"
  * input.
  * The return value can be used to e.g. parametrize the useWidgetProducts hook.
- * @param {ProductsWidgetInputConfig} products Config object of the "Products" input.
- * @returns {GetProductSearchParamsFromProductsInputConfigReturnValue}
+ * @param products Config object of the "Products" input.
+ * @returns The extracted product search parameters.
  */
 export const getProductSearchParamsFromProductsInputConfig = (products = {}) => {
   const {
@@ -28,8 +24,7 @@ export const getProductSearchParamsFromProductsInputConfig = (products = {}) =>
   const mapping = [['brand', brand], ['category', category], ['searchTerm', searchTerm], ['productIds', manualItemNumbers], ['productIds', selectorItemNumbers]];
 
   // Pick the first non-undefined value
-  // eslint-disable-next-line prefer-const
-  let [productsSearchType, productsSearchValue] = mapping.find(([, value]) => value !== undefined) || ['searchTerm', searchTerm];
+  const [productsSearchType, productsSearchValue] = mapping.find(([, value]) => value !== undefined) || ['searchTerm', searchTerm];
   return {
     productsSearchType,
     productsSearchValue
@@ -38,9 +33,9 @@ export const getProductSearchParamsFromProductsInputConfig = (products = {}) =>
 
 /**
  * Parses the image URL to return a high resolution version if required.
- * @param {string} url The original image URL.
- * @param {boolean} useHighRes Whether to return a high resolution version.
- * @returns {string} The parsed image URL.
+ * @param url The original image URL.
+ * @param useHighRes Whether to return a high resolution version.
+ * @returns The parsed image URL.
  */
 export const parseImageUrl = (url, useHighRes) => {
   if (!url || !useHighRes) {
@@ -51,11 +46,15 @@ export const parseImageUrl = (url, useHighRes) => {
 };
 
 /**
- * Retrieves the border radius based on the widget config
- * @param {Object} params The helper parameters.
- * @param {"default"|"none"|"rounded"|"custom"} params.borderRadius The border radius option.
- * @param {number} params.borderRadiusCustom The custom border radius value.
- * @returns {number} The resolved border radius.
+ * Parameters for {@link resolveBorderRadiusFromWidgetConfig}.
+ */
+
+/**
+ * Retrieves the border radius based on the widget config.
+ * @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.
  */
 export const resolveBorderRadiusFromWidgetConfig = ({
   borderRadius,
@@ -68,15 +67,15 @@ export const resolveBorderRadiusFromWidgetConfig = ({
 };
 
 /**
- * Validator factory for regular expressions
- * @param {RegExp} regex the regex
- * @return {Function}
+ * Validator factory for regular expressions.
+ * @param regex The regular expression to match.
+ * @returns A function that validates if a value matches the regex.
  */
 export const matchesRegex = regex => val => !val || regex.test(val);
 
 /**
- * Returns a function that validates if input is a valid url with the https protocol
- * @param {string} val the string to be validated
- * @return {boolean}
+ * Validates if a given string is a valid HTTPS URL.
+ * @param val The string to validate.
+ * @returns True if the string is a valid HTTPS URL, false otherwise.
  */
-export const isHttpsUrl = matchesRegex(new RegExp('^\\s*https://[^\\s/$.?#].[^\\s]*\\s*$', 'i'));
+export const isHttpsUrl = matchesRegex(/^\s*https:\/\/[^\s/$.?#].[^\s]*\s*$/i);

package/page/hooks/index.d.ts

@@ -1,60 +1,61 @@
-import type { WidgetContextType } from '../components/Widgets/WidgetContext';
-
+import { type WidgetContextType } from '@shopgate/engage/page/components/Widgets';
 /**
  * The useWidget hook provides access to the context that is wrapped around a widget.
  * @returns The widget context.
  */
-export declare function useWidget<C = Record<string, any>>(): WidgetContextType<C>
-
-
-export type UseWidgetProductsOptions = {
-  /**
-   * The search value to use for the product search
-   */
-  value: string;
-  /**
-   * The type of product search to perform.
-   */
-  type: 'searchTerm' | 'productIds' | 'brand' | 'category' | 'highlights';
-  /**
-   * The number of products to return per page.
-   * @default 32
-   */
-  limit?: number;
-  /**
-   * Sort order for the products
-   * @default 'relevance'
-   */
-  sort?: 'relevance' | 'priceAsc' | 'priceDesc' | 'nameAsc' | 'nameDesc';
-};
-
-export type UseWidgetProductsResult = {
-  /**
-   * Function to fetch the next page of products.
-   */
-  fetchNext: () => void;
-  /**
-   * Whether there are more products to fetch.
-   */
-  hasNext: boolean;
-  /**
-   * Whether the products are currently being fetched.
-   */
-  isFetching: boolean;
-  /**
-   * Number of products available in the current result set.
-   */
-  totalResultCount: number;
-  /**
-   * Array of product results.
-   */
-  results: Object[];
+export declare const useWidget: <C = Record<string, unknown>>() => WidgetContextType<C>;
+/**
+ * Options for the {@link useWidgetProducts} hook.
+ */
+export interface UseWidgetProductsOptions {
+    /**
+     * The search value to use for the product search.
+     */
+    value: string;
+    /**
+     * The type of product search to perform.
+     */
+    type: 'searchTerm' | 'productIds' | 'brand' | 'category' | 'highlights';
+    /**
+     * The number of products to return per page.
+     * @default 32
+     */
+    limit?: number;
+    /**
+     * Sort order for the products.
+     * @default 'relevance'
+     */
+    sort?: 'relevance' | 'priceAsc' | 'priceDesc' | 'nameAsc' | 'nameDesc';
+}
+/**
+ * Result of the {@link useWidgetProducts} hook.
+ */
+export interface UseWidgetProductsResult {
+    /**
+     * Function to fetch the next page of products.
+     */
+    fetchNext: () => void;
+    /**
+     * Whether there are more products to fetch.
+     */
+    hasNext: boolean;
+    /**
+     * Whether the products are currently being fetched.
+     */
+    isFetching: boolean;
+    /**
+     * Number of products available in the current result set.
+     */
+    totalResultCount: number;
+    /**
+     * Array of product results.
+     */
+    results: unknown[];
 }
-
 /**
- * The useWidgetProducts hook provides an easy way to retrieve products based on a search term or
- * other criteria.
+ * Retrieves the products for the current widget.
+ * @param options Hook options.
+ * @returns The products and a function to fetch more products.
  */
-export declare function useWidgetProducts(
-  options: UseWidgetProductsOptions
-): UseWidgetProductsResult;
+export declare const useWidgetProducts: (options?: UseWidgetProductsOptions) => UseWidgetProductsResult;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/hooks/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAMjG;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,OAAK,iBAAiB,CAAC,CAAC,CAC1B,CAAC;AA2CpD;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IACxE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAS,wBAAyD,KACjE,uBAyIF,CAAC"}

package/page/hooks/index.js

@@ -6,21 +6,9 @@ import { transformDisplayOptions } from '@shopgate/engage/core/helpers';
 import { fetchProductsByQuery } from '@shopgate/engage/product';
 import { makeGetWidgetProducts } from "../selectors";
 
-/**
- * @typedef {import('../components/Widgets/WidgetContext').WidgetContextType WidgetContextType}
- */
-
-/**
- * @typedef {import('./index').UseWidgetProductsOptions} UseWidgetProductsOptions
- */
-
-/**
- * @typedef {import('./index').UseWidgetProductsResult} UseWidgetProductsResult
- */
-
 /**
  * The useWidget hook provides access to the context that is wrapped around a widget.
- * @returns {WidgetContextType} The widget context.
+ * @returns The widget context.
  */
 export const useWidget = () => useContext(WidgetContext);
 const REQUEST_TYPE_MAPPING = {
@@ -31,10 +19,27 @@ const REQUEST_TYPE_MAPPING = {
   category: 5
 };
 
+/**
+ * Shape of the memoized widget products selector result. The underlying selector and its
+ * dependencies live in untyped JS, so the shape is described here at the consumption boundary.
+ */
+
+/**
+ * Shape of the result returned by the (untyped) `fetchProductsByQuery` thunk.
+ */
+
+/**
+ * Options for the {@link useWidgetProducts} hook.
+ */
+
+/**
+ * Result of the {@link useWidgetProducts} hook.
+ */
+
 /**
  * Retrieves the products for the current widget.
- * @param {UseWidgetProductsOptions} options Hook options
- * @returns {UseWidgetProductsResult} The products and a function to fetch more products.
+ * @param options Hook options.
+ * @returns The products and a function to fetch more products.
  */
 export const useWidgetProducts = (options = {}) => {
   const {

package/page/selectors/index.d.ts

@@ -0,0 +1,32 @@
+export * from "@shopgate/pwa-common/selectors/page";
+export function makeGetPrivacyPolicyLink(): string | null;
+export function makeGetPage({ type, slug, }: {
+    type?: PageType | undefined;
+    slug?: string | null | undefined;
+}): Function;
+export function makeGetWidgetsFromPage({ type, slug, dropzone, }: {
+    type?: PageType | undefined;
+    dropzone?: "cmsWidgetList" | undefined;
+    slug?: string | null | undefined;
+}): Function;
+/**
+ * Determines whether the new CMS version 2 is enabled.
+ */
+export const getIsCms2Enabled: ((state: any, ...params: any) => boolean) & import("reselect").OutputSelectorFields<(args_0: boolean, args_1: boolean) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export function makeGetUnifiedCMSPageData({ slug }: {
+    slug: string;
+}): Function;
+export function makeGetWidgetProducts(type: "searchTerm" | "productIds" | "brand" | "category" | "highlights", options: Object, id: string): Function;
+/**
+ * List of available page types.
+ */
+export type PageType = "cms" | "category";
+/**
+ * List of available dropzone types.
+ */
+export type DropzoneType = "cmsWidgetList";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/selectors/index.js"],"names":[],"mappings":";AAmCO,4CAFM,MAAM,GAAC,IAAI,CAuBvB;AAyBM,6CAJJ;IAA0B,IAAI;IACD,IAAI;CACjC,YAcF;AAYM,kEANJ;IAA0B,IAAI;IACA,QAAQ;IAET,IAAI;CACjC,YAqBF;AAED;;GAEG;AACH;;;;EAIE;AASK,oDAHJ;IAAuB,IAAI,EAAnB,MAAM;CACd,YAwCF;AA2FM,4CANI,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAE,YAAY,WAEhE,MAAM,MACN,MAAM,YAkBhB;;;;uBA5NY,KAAK,GAAG,UAAU;;;;2BAKlB,eAAe"}

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

@@ -0,0 +1,6 @@
+/**
+ * The VideoWidget is used to display a video.
+ */
+declare const Video: () => import("react").JSX.Element;
+export default Video;
+//# sourceMappingURL=Video.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/Video.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,QAAA,MAAM,KAAK,mCAgBV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/page/widgets/Video/Video.js

@@ -1,10 +1,8 @@
-import React from 'react';
 import { useVideoWidget } from "./hooks";
 import WidgetVideo from "../../components/WidgetVideo";
 
 /**
  * The VideoWidget is used to display a video.
- * @returns {JSX.Element}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const Video = () => {

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

@@ -0,0 +1,53 @@
+/**
+ * Configuration of the Video widget.
+ */
+export interface VideoWidgetConfig {
+    /**
+     * The video URL.
+     */
+    url: string;
+    /**
+     * Whether the video should be muted.
+     */
+    muted?: boolean;
+    /**
+     * Whether the video should loop.
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should display controls.
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should autoplay.
+     */
+    autoplay?: boolean;
+    /**
+     * The border radius option.
+     */
+    borderRadius: 'default' | 'none' | 'rounded' | 'custom';
+    /**
+     * The custom border radius value.
+     */
+    borderRadiusCustom?: number;
+    /**
+     * The link URL.
+     */
+    link?: string;
+}
+/**
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
+ */
+export interface UseVideoWidgetResult extends Pick<VideoWidgetConfig, 'url' | 'muted' | 'loop' | 'controls' | 'autoplay' | 'link'> {
+    /**
+     * The resolved border radius value in pixels.
+     */
+    borderRadius: number;
+}
+/**
+ * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
+ */
+export declare const useVideoWidget: () => UseVideoWidgetResult;
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/hooks.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;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,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,iBAAiB,EACjB,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAC5D;IACC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,oBAoBjC,CAAC"}

package/page/widgets/Video/hooks.js

@@ -2,27 +2,19 @@ import { useWidget } from '@shopgate/engage/page/hooks';
 import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
 
 /**
- * @typedef {Object} VideoWidgetConfig
- * @property {string} url The video URL.
- * @property {boolean} [muted] Whether the video should be muted.
- * @property {boolean} [loop] Whether the video should loop.
- * @property {boolean} [controls] Whether the video should display controls.
- * @property {boolean} [autoplay] Whether the video should autoplay.
- * @property {number} [borderRadius] The border radius preset.
- * @property {string} [link] The link URL.
+ * Configuration of the Video widget.
  */
 
 /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<VideoWidgetConfig> >} UseWidgetReturnType
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
  */
 
-// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
  */
 export const useVideoWidget = () => {
-  /** @type {UseWidgetReturnType}  */
   const {
     config
   } = useWidget();

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

@@ -0,0 +1,2 @@
+export { default } from './Video';
+//# sourceMappingURL=index.d.ts.map

package/page/widgets/Video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/product/components/Description/index.js

@@ -16,7 +16,6 @@ const useStyles = makeStyles()(theme => ({
     lineHeight: 1.7,
     overflow: 'hidden',
     wordBreak: ['break-all', 'break-word'],
-    color: theme.palette.text.primary,
     hyphens: 'auto',
     ' ul': {
       listStyle: 'disc'
@@ -69,7 +68,6 @@ function Description({
         variant: "h5",
         component: "div",
         className: cx(classes.title, 'theme__description_heading'),
-        color: "textPrimary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.description_heading"
         })

package/product/components/ProductCard/index.js

@@ -16,6 +16,7 @@ const useStyles = makeStyles()(theme => ({
     padding: '12px 16px'
   },
   title: {
+    fontSize: theme.typography.body2.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.15,
     marginTop: 1

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

@@ -12,7 +12,7 @@ const useStyles = makeStyles()({
   root: {
     lineHeight: 1.2,
     ':not(:empty)': {
-      padding: '12px 0 16px'
+      padding: '16px 8px 8px'
     }
   },
   quantityHint: {

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

@@ -3,10 +3,16 @@ import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
 import { getProductImageSettings, ProductImage } from '@shopgate/engage/product';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   ListImage: gridResolutions
 } = getProductImageSettings();
+const useStyles = makeStyles()(theme => ({
+  image: {
+    background: theme.palette.background.surface
+  }
+}));
 
 /**
  * The item image component.
@@ -18,6 +24,9 @@ const ItemImage = ({
   name,
   imageUrl
 }) => {
+  const {
+    classes
+  } = useStyles();
   const portalProps = useMemo(() => ({
     productId
   }), [productId]);
@@ -25,6 +34,7 @@ const ItemImage = ({
     portalName: PRODUCT_ITEM_IMAGE,
     portalProps: portalProps,
     children: /*#__PURE__*/_jsx(ProductImage, {
+      className: classes.image,
       alt: name,
       src: imageUrl,
       resolutions: gridResolutions,