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

package/settings/selectors/appSettings.d.ts

@@ -28,6 +28,9 @@ export declare const getTabBarSettings: ((state: AppSettingsState) => {
     fixed: {
         borderEnabled: boolean;
     };
+    favorites: {
+        showCounter: boolean;
+    };
 }) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => {
     variant: "fixed" | "floating";
     transition: "fade" | "slide";
@@ -36,9 +39,52 @@ export declare const getTabBarSettings: ((state: AppSettingsState) => {
     fixed: {
         borderEnabled: boolean;
     };
+    favorites: {
+        showCounter: boolean;
+    };
 }, {
     clearCache: () => void;
 }> & {
     clearCache: () => void;
 };
+/**
+ * Selects the ProductGrid columns setting (keyed by breakpoint).
+ */
+export declare const getProductGridColumns: ((state: AppSettingsState) => Partial<Record<import("../types/appSettings").ScreenSize, number>>) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => Partial<Record<import("../types/appSettings").ScreenSize, number>>, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the ProductSlider slidesPerView setting (keyed by breakpoint).
+ */
+export declare const getProductSliderSlidesPerView: ((state: AppSettingsState) => Partial<Record<import("../types/appSettings").ScreenSize, number>>) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => Partial<Record<import("../types/appSettings").ScreenSize, number>>, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects whether the favorites tab bar icon shows the number of favorites within its badge.
+ */
+export declare const getShowFavoritesCounter: ((state: AppSettingsState) => boolean) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects whether rating stars are also shown for products without a rating.
+ */
+export declare const getShowEmptyRatingStars: ((state: AppSettingsState) => boolean) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the image settings.
+ */
+export declare const getImageSettings: ((state: AppSettingsState) => import("../types/appSettings").ImageSettings) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => import("../types/appSettings").ImageSettings, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
 //# sourceMappingURL=appSettings.d.ts.map

package/settings/selectors/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC"}

package/settings/selectors/appSettings.js

@@ -20,4 +20,29 @@ export const getAreAppSettingsHydrated = createSelector(getAppSettingsState, app
 /**
  * Selects the tab bar settings.
  */
-export const getTabBarSettings = createSelector(getAppSettingsState, appSettings => appSettings.navigation.tabBar);
+export const getTabBarSettings = createSelector(getAppSettingsState, appSettings => appSettings.navigation.tabBar);
+
+/**
+ * Selects the ProductGrid columns setting (keyed by breakpoint).
+ */
+export const getProductGridColumns = createSelector(getAppSettingsState, appSettings => appSettings.product.grid.columns);
+
+/**
+ * Selects the ProductSlider slidesPerView setting (keyed by breakpoint).
+ */
+export const getProductSliderSlidesPerView = createSelector(getAppSettingsState, appSettings => appSettings.product.slider.slidesPerView);
+
+/**
+ * Selects whether the favorites tab bar icon shows the number of favorites within its badge.
+ */
+export const getShowFavoritesCounter = createSelector(getAppSettingsState, appSettings => appSettings.navigation.tabBar.favorites.showCounter);
+
+/**
+ * Selects whether rating stars are also shown for products without a rating.
+ */
+export const getShowEmptyRatingStars = createSelector(getAppSettingsState, appSettings => appSettings.product.rating.showEmptyStars);
+
+/**
+ * Selects the image settings.
+ */
+export const getImageSettings = createSelector(getAppSettingsState, appSettings => appSettings.images);

package/settings/types/appSettings.d.ts

@@ -3,6 +3,151 @@ export interface AppSettingsState {
         appSettings: AppSettingsSlice;
     };
 }
+/**
+ * The merchant-facing screen sizes for the product list types. Each maps to a theme
+ * breakpoint inside the consuming hook (small → xs, medium → sm, large → md).
+ */
+export type ScreenSize = 'small' | 'medium' | 'large';
+/**
+ * A value keyed by screen size. Partial: any unset size cascades down to the next smaller
+ * defined value (see useResponsiveValue).
+ */
+export type PerScreenSize = Partial<Record<ScreenSize, number>>;
+/**
+ * Number of product columns to render, keyed by screen size.
+ */
+export type ProductColumns = PerScreenSize;
+/**
+ * Settings for the ProductGrid list type.
+ */
+export interface ProductGridSettings {
+    columns: ProductColumns;
+}
+/**
+ * Number of slides to render side by side, keyed by screen size. Fractional values are allowed.
+ */
+export type SlidesPerView = PerScreenSize;
+/**
+ * Settings for the ProductSlider list type.
+ */
+export interface ProductSliderSettings {
+    slidesPerView: SlidesPerView;
+}
+/**
+ * Settings for the product rating stars.
+ */
+export interface ProductRatingSettings {
+    /**
+     * Whether rating stars are also rendered for products that have no rating yet.
+     */
+    showEmptyStars: boolean;
+}
+/**
+ * Settings for product presentation across the app.
+ */
+export interface ProductSettings {
+    grid: ProductGridSettings;
+    slider: ProductSliderSettings;
+    rating: ProductRatingSettings;
+}
+/**
+ * An aspect ratio expressed as width and height parts. Only the proportion matters -
+ * { width: 4, height: 5 } and { width: 8, height: 10 } are equivalent.
+ */
+export interface AspectRatio {
+    /**
+     * The width part of the proportion.
+     */
+    width: number;
+    /**
+     * The height part of the proportion.
+     */
+    height: number;
+}
+/**
+ * A single image resolution requested from the image service.
+ */
+export interface ImageResolution {
+    /**
+     * Width in pixels.
+     */
+    width: number;
+    /**
+     * Height in pixels, derived from the configured aspect ratio.
+     */
+    height: number;
+}
+/**
+ * The product image contexts. pdp drives the product detail page, gallery the fullscreen gallery,
+ * and list every grid, slider, list and row tile.
+ */
+export type ProductImageContext = 'pdp' | 'gallery' | 'list';
+/**
+ * Settings for a single product image context. The pixel dimensions are not configurable - they
+ * are derived from the built-in base widths for the context (see PRODUCT_IMAGE_BASE_WIDTHS) so
+ * that image weight stays under the theme's control.
+ */
+export interface ProductImageContextSettings {
+    /**
+     * The aspect ratio images in this context are rendered at.
+     */
+    ratio: AspectRatio;
+}
+/**
+ * Settings for the product image contexts.
+ */
+export interface ProductImageSettings {
+    /**
+     * The aspect ratio applied to every context that does not override it.
+     */
+    ratio: AspectRatio;
+    /**
+     * Whether product images get an inset shadow. Applies to the image and to the placeholder that
+     * stands in for it, so both keep the same silhouette.
+     */
+    showInnerShadow: boolean;
+    /**
+     * Overrides for the product detail page.
+     */
+    pdp?: ProductImageContextSettings;
+    /**
+     * Overrides for the fullscreen gallery.
+     */
+    gallery?: ProductImageContextSettings;
+    /**
+     * Overrides for grid, slider, list and row tiles.
+     */
+    list?: ProductImageContextSettings;
+}
+/**
+ * Settings for images that are served through the image service.
+ *
+ * quality, fillColor and fillTransparent sit here rather than under product because they are not
+ * product specific - getFullImageSource applies them to every image that goes through the image
+ * service, including category images, carrier logos and page builder widget images.
+ */
+export interface ImageSettings {
+    /**
+     * Compression quality passed to the image service, 1 to 100.
+     */
+    quality: number;
+    /**
+     * The color the image service fills letterboxed areas with. A source may send any CSS color -
+     * named, hex 3/6/8, rgb(), rgba(), hsl() - or one of Thumbor's own keywords: 'auto', 'blur',
+     * 'transparent'. The value reaches the store untouched and the reducer converts it into a
+     * Thumbor color token, so everything reading this field gets a wire-ready value.
+     */
+    fillColor: string;
+    /**
+     * Thumbor's fill_transparent argument - whether transparent areas of the source image are
+     * filled too. True is what the legacy 'FFFFFF,1' config expressed.
+     */
+    fillTransparent: boolean;
+    /**
+     * Aspect ratios for the product image contexts.
+     */
+    product: ProductImageSettings;
+}
 export interface AppSettings {
     navigation: {
         tabBar: {
@@ -13,8 +158,19 @@ export interface AppSettings {
             fixed: {
                 borderEnabled: boolean;
             };
+            favorites: {
+                /**
+                 * Whether the favorites tab bar icon renders the number of favorites within its badge.
+                 */
+                showCounter: boolean;
+            };
         };
     };
+    product: ProductSettings;
+    /**
+     * Settings for images that are served through the image service.
+     */
+    images: ImageSettings;
 }
 /**
  * The stored app settings slice. Extends the raw {@link AppSettings} values

package/settings/types/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE;QACR,WAAW,EAAE,gBAAgB,CAAC;KAC/B,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE;YACN,OAAO,EAAE,OAAO,GAAG,UAAU,CAAA;YAC7B,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;YAC7B,UAAU,EAAE,OAAO,CAAC;YACpB,YAAY,EAAE,OAAO,CAAC;YACtB,KAAK,EAAE;gBACL,aAAa,EAAE,OAAO,CAAC;aACxB,CAAA;SACF,CAAA;KACF,CAAA;CACF;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE;QACR,WAAW,EAAE,gBAAgB,CAAC;KAC/B,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,MAAM,EAAE,qBAAqB,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7D;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,2BAA2B,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,2BAA2B,CAAC;CACpC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,oBAAoB,CAAC;CAC/B;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE;YACN,OAAO,EAAE,OAAO,GAAG,UAAU,CAAA;YAC7B,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;YAC7B,UAAU,EAAE,OAAO,CAAC;YACpB,YAAY,EAAE,OAAO,CAAC;YACtB,KAAK,EAAE;gBACL,aAAa,EAAE,OAAO,CAAC;aACxB,CAAA;YACD,SAAS,EAAE;gBACT;;mBAEG;gBACH,WAAW,EAAE,OAAO,CAAC;aACtB,CAAA;SACF,CAAA;KACF,CAAA;IACD,OAAO,EAAE,eAAe,CAAC;IACzB;;OAEG;IACH,MAAM,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB"}

package/styles/reset/root.js

@@ -1,11 +1,18 @@
 import "core-js/modules/es.array.includes.js";
 import { applyScrollContainer, hasWebBridge, isIOSTheme } from '@shopgate/engage/core/helpers';
+import { configuration } from '@shopgate/engage/core/collections';
+import { CONFIGURATION_COLLECTION_KEY_HAS_ROOT_TYPOGRAPHY } from '@shopgate/engage/core/constants';
 import { themeConfig } from '@shopgate/engage';
 import { injectGlobal } from '..';
+import { CSS_ROOT_FONT_FAMILY, CSS_ROOT_FONT_SIZE } from "./typographyCustomProps";
 const {
   typography
 } = themeConfig;
 const iosThemeActive = isIOSTheme();
+
+// Flag (for feature-detecting extensions) that base typography uses the `--sg-root-*` custom
+// properties and the `body1` variant.
+configuration.set(CONFIGURATION_COLLECTION_KEY_HAS_ROOT_TYPOGRAPHY, true);
 injectGlobal({
   '*, *:before, *:after': {
     boxSizing: 'border-box'
@@ -23,6 +30,14 @@ injectGlobal({
     backgroundColor: 'var(--page-background-color)'
   },
   html: {
+    // Publish the shared font family (used by every variant) and the rem anchor here. The base body
+    // text itself is the `body1` variant, applied to `<body>` below. A higher-specificity `:root`
+    // override (admin css / live preview / extension) wins. The family default is the property
+    // value, not a `var()` fallback (a comma list can't be a fallback). Roboto is an iOS fallback.
+    [CSS_ROOT_FONT_FAMILY]: `${typography.family}${iosThemeActive && !(typography.family || '').includes('Roboto') ? ', Roboto' : ''}`,
+    [CSS_ROOT_FONT_SIZE]: `${typography.rootSize}px`,
+    fontSize: `var(${CSS_ROOT_FONT_SIZE})`,
+    color: 'var(--sg-palette-text-primary, var(--color-text-high-emphasis))',
     overflow: applyScrollContainer() ? 'hidden' : 'inherit',
     MozOsxFontSmoothing: 'grayscale',
     WebkitFontSmoothing: 'antialiased',
@@ -31,14 +46,18 @@ injectGlobal({
     minHeight: '100%'
   },
   body: {
-    // Include Roboto font as a fallback to the iOS theme when other fonts are not available
-    font: `${typography.rootSize}px/${typography.lineHeight} ${typography.family}${iosThemeActive && !(typography.family || '').includes('Roboto') ? ', Roboto' : ''}`,
+    // Base body text = the `body1` variant. Family is the shared root var; weight/size/line-height
+    // come from the theme's `body1` css vars, with fallbacks so there is no flash before the theme
+    // injects them. Configuring `body1` drives both this base text and the variant.
+    fontFamily: `var(${CSS_ROOT_FONT_FAMILY})`,
+    fontWeight: 'var(--sg-typography-body1-fontWeight, 400)',
+    fontSize: 'var(--sg-typography-body1-fontSize, 1rem)',
+    lineHeight: 'var(--sg-typography-body1-lineHeight, 1.5)',
     overflow: 'auto',
     margin: 0,
     WebkitOverflowScrolling: 'touch',
     WebkitUserSelect: hasWebBridge() ? 'inherit' : 'none',
-    userSelect: hasWebBridge() ? 'inherit' : 'none',
-    color: 'var(--sg-palette-text-primary, var(--color-text-high-emphasis))'
+    userSelect: hasWebBridge() ? 'inherit' : 'none'
   },
   '[data-pattern]': {
     height: '100% !important'

package/styles/reset/typographyCustomProps.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CSS custom property names for the shared base typography. Internal to the styles layer: the css
+ * reset publishes them on `<html>` — `--sg-root-font-family` is the shared family used by every
+ * typography variant, `--sg-root-font-size` is the rem anchor. They're an optional override layer: a
+ * higher-specificity `:root` rule (admin css file / live preview / an extension) overrides the
+ * shipped default. The base body text itself is the `body1` variant, applied to `<body>` by the reset.
+ *
+ * Not re-exported from the styles barrel - import from this module directly where needed.
+ */
+export declare const CSS_ROOT_FONT_FAMILY = "--sg-root-font-family";
+export declare const CSS_ROOT_FONT_SIZE = "--sg-root-font-size";
+//# sourceMappingURL=typographyCustomProps.d.ts.map

package/styles/reset/typographyCustomProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyCustomProps.d.ts","sourceRoot":"","sources":["../../../styles/reset/typographyCustomProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,0BAA0B,CAAC;AAC5D,eAAO,MAAM,kBAAkB,wBAAwB,CAAC"}

package/styles/reset/typographyCustomProps.js

@@ -0,0 +1,11 @@
+/**
+ * CSS custom property names for the shared base typography. Internal to the styles layer: the css
+ * reset publishes them on `<html>` — `--sg-root-font-family` is the shared family used by every
+ * typography variant, `--sg-root-font-size` is the rem anchor. They're an optional override layer: a
+ * higher-specificity `:root` rule (admin css file / live preview / an extension) overrides the
+ * shipped default. The base body text itself is the `body1` variant, applied to `<body>` by the reset.
+ *
+ * Not re-exported from the styles barrel - import from this module directly where needed.
+ */
+export const CSS_ROOT_FONT_FAMILY = '--sg-root-font-family';
+export const CSS_ROOT_FONT_SIZE = '--sg-root-font-size';

package/styles/theme/createTheme/createTypography.js

@@ -32,6 +32,7 @@ export default function createTypography(palette, typography) {
   } = typeof typography === 'function' ? typography(palette) : typography;
   if (isDev) {
     if (typeof fontSize !== 'number') {
+      // eslint-disable-next-line no-console
       console.error('Shopgate Theme: `fontSize` is required to be a number.');
     }
   }

package/styles/theme/createTheme/helpers/cssVarsParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cssVarsParser.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/cssVarsParser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAsIH,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC;CAC9F,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI;IACxC;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,IAAI,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,gBAAgB,EAAE,CAAC,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,oBAAoB,GAC7B,wBAAwB,CAAC,CAAC,CAAC,CA+D7B"}
+{"version":3,"file":"cssVarsParser.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/cssVarsParser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA6IH,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC;CAC9F,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI;IACxC;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,IAAI,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,gBAAgB,EAAE,CAAC,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,oBAAoB,GAC7B,wBAAwB,CAAC,CAAC,CAAC,CA+D7B"}

package/styles/theme/createTheme/helpers/cssVarsParser.js

@@ -85,11 +85,18 @@ const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
  */
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
-    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex', 'fontSize', 'fontWeightLight', 'fontWeightRegular', 'fontWeightMedium', 'fontWeightBold'].some(prop => keys[keys.length - 1] === prop)) {
-      // CSS property that are unitless
+    const lastKey = keys[keys.length - 1];
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex', 'fontWeightLight', 'fontWeightRegular', 'fontWeightMedium', 'fontWeightBold'].some(prop => lastKey === prop)) {
+      // CSS properties that are unitless
+      return value;
+    }
+
+    // `typography.fontSize` is MUI's base font-size coefficient and stays unitless, but variant
+    // font sizes (e.g. `typography.body2.fontSize`) are lengths and need a `px` unit - otherwise a
+    // numeric override would produce an invalid `font-size: 12` custom property.
+    if (lastKey === 'fontSize' && keys[keys.length - 2] === 'typography') {
       return value;
     }
-    const lastKey = keys[keys.length - 1];
     if (lastKey.toLowerCase().includes('opacity')) {
       // opacity values are unitless
       return value;

package/product/collections/index.js

@@ -1 +0,0 @@
-export { default as productImageFormats } from '@shopgate/pwa-common-commerce/product/collections/ProductImageFormats';

package/product/components/EffectivityDates/constants.d.ts

@@ -1,3 +0,0 @@
-export const ALWAYS: "always";
-export const NEVER: "never";
-//# sourceMappingURL=constants.d.ts.map

package/product/components/EffectivityDates/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/EffectivityDates/constants.js"],"names":[],"mappings":"AAAA,qBAAsB,QAAQ,CAAC;AAC/B,oBAAqB,OAAO,CAAC"}

package/product/components/EffectivityDates/helpers.d.ts

@@ -1,6 +0,0 @@
-export function buildShowScheduledParams(): Object | {
-    showScheduled: string;
-};
-export function showScheduledLabel(startDate: Date, settings?: Object): boolean;
-export function showExpiringLabel(endDate: Date, settings?: Object): boolean;
-//# sourceMappingURL=helpers.d.ts.map

package/product/components/EffectivityDates/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../product/components/EffectivityDates/helpers.js"],"names":[],"mappings":"AAUO,4CAFM,MAAM,GAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAC,CAuB1C;AAQM,8CAJI,IAAI,aACJ,MAAM,GACJ,OAAO,CA6BnB;AAQM,2CAJI,IAAI,aACJ,MAAM,GACJ,OAAO,CAyBnB"}

package/product/components/Media/helpers.d.ts

@@ -1,2 +0,0 @@
-export function buildMediaImageUrl(url: string, params?: Object): string;
-//# sourceMappingURL=helpers.d.ts.map

package/product/components/Media/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../product/components/Media/helpers.js"],"names":[],"mappings":"AAsBO,wCAJI,MAAM,WACN,MAAM,GACJ,MAAM,CAiBlB"}

package/product/components/ProductImage/connector.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import { getProductImagePlaceholder } from "../../../core";
-
-/**
- * Maps the current application state to the component props.
- * @param {Object} state The current application state.
- * @return {Object} The populated component props.
- */
-const mapStateToProps = state => ({
-  placeholderSrc: getProductImagePlaceholder(state)
-});
-export default connect(mapStateToProps);

package/product/helpers/index.d.ts

@@ -1,13 +0,0 @@
-export * from "@shopgate/pwa-common-commerce/product/helpers";
-export * from "../components/Media/helpers";
-export * from "./redirects";
-export function buildFetchCategoryProductsParams(): undefined | {
-    params: Object;
-};
-export function buildFetchSearchResultsParams(): undefined | {
-    params: Object;
-};
-export function setDefaultProductFetchParams(): void;
-export function getProductImageSettings(): Object;
-export function loadProductImage(src: string, resolution?: Object): Promise<any>;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../product/helpers/index.js"],"names":[],"mappings":";;;AAcO,oDAFM,SAAS,GAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAC,CAkBtC;AAhBM,iDAFM,SAAS,GAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAC,CAkBtC;AAWM,qDAON;AAMM,2CAFK,MAAM,CAoCjB;AAQM,sCAJI,MAAM,eACN,MAAM,gBAWhB"}

package/product/helpers/redirects.d.ts

@@ -1,2 +0,0 @@
-export function enableRedirectHandler(): void;
-//# sourceMappingURL=redirects.d.ts.map

package/product/helpers/redirects.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"redirects.d.ts","sourceRoot":"","sources":["../../../product/helpers/redirects.js"],"names":[],"mappings":"AAUO,yCAFM,IAAI,CA4BhB"}

package/product/selectors/helpers/filterProperties.d.ts

@@ -1,8 +0,0 @@
-/**
- * Reads the setting for product properties whitelisting/blacklisting
- * and filters the properties accordingly.
- * @param {Array} properties Array of properties with label and value attributes.
- * @return {Array} Filtered properties.
- */
-export function filterProperties(properties: any[]): any[];
-//# sourceMappingURL=filterProperties.d.ts.map

package/product/selectors/helpers/filterProperties.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"filterProperties.d.ts","sourceRoot":"","sources":["../../../../product/selectors/helpers/filterProperties.js"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,2DAyBC"}

package/product/selectors/helpers/index.d.ts

@@ -1,3 +0,0 @@
-export { filterProperties } from "./filterProperties";
-export { wrapMemoizedSelector } from "./wrapMemoizedSelector";
-//# sourceMappingURL=index.d.ts.map

package/product/selectors/helpers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../product/selectors/helpers/index.js"],"names":[],"mappings":""}

package/product/selectors/helpers/wrapMemoizedSelector.d.ts

@@ -1,2 +0,0 @@
-export function wrapMemoizedSelector(selector: Function): Function;
-//# sourceMappingURL=wrapMemoizedSelector.d.ts.map

package/product/selectors/helpers/wrapMemoizedSelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wrapMemoizedSelector.d.ts","sourceRoot":"","sources":["../../../../product/selectors/helpers/wrapMemoizedSelector.js"],"names":[],"mappings":"AAKO,mEAMN"}

package/product/selectors/product.d.ts

@@ -1,112 +0,0 @@
-/**
- * Creates the selector to get a product's properties from the state filtered via
- * positive / negative list.
- * @returns {Function}
- */
-export function makeGetProductProperties(): Function;
-/**
- * Creates the selector to get a product's effectivity dates.
- * @returns {Function}
- */
-export function makeGetProductEffectivityDates(): Function;
-/**
- * Creates a selector to return product characteristics.
- * @returns {Function}
- */
-export function makeGetProductCharacteristics(): Function;
-/**
- * Creates a selector to return product featured media.
- * @returns {Function}
- */
-export function makeGetProductFeaturedMedia(): Function;
-export function getProductState(state: Object): Object;
-/**
- * Selects the product properties state.
- * @param {Object} state The current application state.
- * @param {Object} props The component props.
- * @return {Object} The product properties state.
- */
-export const getProductPropertiesState: ((state: Object) => any) & import("reselect").OutputSelectorFields<(args_0: Object) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-/**
- * Selects all products from the store.
- * @param {Object} state The current application state.
- * @return {Object} The collection of products.
- */
-export const getProducts: ((state: Object) => any) & import("reselect").OutputSelectorFields<(args_0: Object) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-export function getProductId(state: Object, props?: Object): string | null;
-/**
- * Retrieves the product data for the passed productId from the store.
- * @param {Object} state The current application state.
- * @param {Object} props The component props.
- * @return {Object} The current product.
- */
-export const getProduct: ((state: Object, props?: Object | undefined) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-/**
- * Retrieves a product by id from state. Different to getProduct() which returns the product
- * entity data if available, this selector returns the pure state entry for a given productId.
- * So the expires and the isFetching property is processable.
- * @param {Object} state The current application state.
- * @param {Object} props The component props.
- * @return {Object|null} The dedicated product.
- */
-export const getProductById: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-export const getProductDataById: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-/**
- * Determines a baseProductId for the products which are referenced within the props.
- * When a variantId is passed, the selector will return the id of the related base product.
- * @param {Object} state The current application state.
- * @param {Object} props The component props.
- * @return {string|null}
- */
-export const getBaseProductId: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-/**
- * Retrieves the base product data for the passed productId from the store.
- * @param {Object} state The current application state.
- * @returns {Object|null} The current product.
- */
-export const getBaseProduct: ((state: any) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-/**
- * END of the copied block
- */
-/**
- * Selects the is fetching state of the active product.
- */
-export const getProductIsFetching: ((state: Object, props?: Object | undefined) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
-    clearCache: () => void;
-}> & {
-    clearCache: () => void;
-};
-export function makeGetProductPropertiesUnfiltered(): Function;
-export function makeIsProductActive(returnNullIfProductMissing?: boolean): Function;
-export function makeIsBaseProductActive(returnNullIfProductMissing?: boolean): Function;
-export function makeGetCurrentProductPropertyByLabel(): Function;
-export function makeGetProductType(): Function;
-//# sourceMappingURL=product.d.ts.map

package/product/selectors/product.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"product.d.ts","sourceRoot":"","sources":["../../../product/selectors/product.js"],"names":[],"mappings":"AAgLA;;;;GAIG;AACH,qDAcC;AAmBD;;;GAGG;AACH,2DAkBC;AAED;;;GAGG;AACH,0DAKC;AAED;;;GAGG;AACH,wDAWC;AArPM,uCAHI,MAAM,GACL,MAAM,CAE0D;AAE5E;;;;;GAKG;AACH;;;;EAGE;AAEF;;;;GAIG;AACH;;;;EAGE;AASK,oCAJI,MAAM,UACN,MAAM,GACL,MAAM,GAAC,IAAI,CAuBtB;AAED;;;;;GAKG;AACH;;;;EAOE;AAEF;;;;;;;GAOG;AACH;;;;EAeE;AAEF;;;;EAGE;AAEF;;;;;;GAMG;AACH;;;;EAkBE;AAEF;;;;GAIG;AACH;;;;EAYE;AAEF;;GAEG;AAEH;;GAEG;AACH;;;;EAIE;AA2BK,+DAWN;AA+DM,iEANI,OAAO,YAejB;AAWM,qEANI,OAAO,YAejB;AAMM,iEAeN;AAOM,+CAGN"}